Understanding the Structure of an HTML Document

In this section, we'll explore the overall structure of an HTML document, use Visual Studio Code (VSCode) to create and manage our files and learn how to view our HTML in a browser's developer console.

Overall Structure of an HTML Document

An HTML document consists of several key components that define its structure and content. Let's break down the essential parts.

Step-by-Step Guide to Setting Up Your Project

If you haven't gotten VSCode installed, I have written a short guide you can follow here. Once installed:

Open VSCode and Create a New Project Folder
- Open Visual Studio Code (VSCode).
- Create a new folder on your computer where you will save your project files. You can name it something like "MyFirstWebPage".
Create an index.html File
- In VSCode, open the new folder you created.
- Inside this folder, create a new file called index.html. By convention, index.html is the main file of a website. For example, example.com would load index.html by default.
Basic HTML
- Copy and paste the following code into your index.html file. This is the basic structure of an HTML document.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello world!</title>
</head>
<body>
    <h1>Welcome to My Blog</h1>
    <p>This is a simple HTML page created as a learning exercise. </p>
</body>
</html>

Breakdown of the HTML Document

<!DOCTYPE html>
- This declaration defines the document type and version of HTML. HTML5 is the latest version, and this tag ensures the browser renders the page correctly.
<html lang="en">
- This tag is the root element of an HTML document. The lang="en" attribute specifies that the language of the document is English.
<head>
- The <head> section contains meta-information about the HTML document. This includes metadata like the character set, page title, and viewport settings.
<meta charset="UTF-8">
- This tag specifies the character encoding for the document. UTF-8 supports all characters, including emojis and special symbols.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- This tag ensures the webpage is responsive on mobile devices by setting the viewport width to the device width and the initial scale to 1.
<title>Hello world!</title>
- The <title> tag defines the title of the webpage, which appears in the browser tab and search engine results.
<body>
- The <body> section contains all the visible content of the webpage, such as text, images, and links.

In previous articles, I used CodePen to write code because it handles all of the above tags without having to worry. But now that we are getting comfortable with our skills, I think it's important to understand some of these more foundational tags, as they will be on every HTML page you create.

Note: You won't need to memorize them; you can copy, paste, and edit them as you need them.

Near the end of this section, I'll show you how to view the metadata of any website you visit.

Navigation Between Pages

To understand how multiple HTML files work together, let's create a simple navigation system.

Add a Link in index.html
- Inside the <body> tag of your index.html file, add the following link:

<body>
    <h1>Welcome to My Blog</h1>
    <p>This is a simple HTML page created as a learning exercise.</p>
    <!-- Add your link here  👇 -->
    <a href="other.html">Other</a>
</body>

Create an other.html File
- In the same folder as index.html, create a new file called other.html.
- Copy and paste the following code into other.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Other page</title>
</head>
<body>
    <h1>A second page!</h1>
    <a href="index.html">Go Home</a>
</body>
</html>

Now let's view your work in the browser:

Viewing Your HTML in a Browser

Open Your HTML File in a Browser
- You can open your index.html file in a web browser by either dragging the file onto the browser window or using the Ctrl+O (Windows/Linux) or Cmd+O (macOS) shortcut to open the file dialog.
Navigate Between Pages
- Once index.html is open in your browser, click the "Other" link. This should take you to other.html.
- On the other.html page, click the "Go Home" link to navigate back to index.html.

Viewing HTML in the Developer Console

As you'll notice when viewing these web pages the additional tags that we added didn't seem to do much so how can we confirm they are working?

We the simple way is to view the raw HTML in our browser. The developer console allows you to inspect and debug your HTML code. Depending on your browser follow one of the following:

Google Chrome

Right-click on your webpage and select "Inspect" or press Ctrl+Shift+I (Windows/Linux) or Cmd+Opt+I (macOS).
The Developer Tools panel will open, showing the Elements tab where you can see your HTML code.

Safari

Enable the Develop menu by going to Safari > Preferences > Advanced and checking "Show Develop menu in menu bar".
Right-click on your webpage and select "Inspect Element" or press Cmd+Opt+I.
The Web Inspector will open, showing the Elements tab with your HTML code.

Microsoft Edge

Right-click on your webpage and select "Inspect" or press Ctrl+Shift+I (Windows/Linux) or Cmd+Opt+I (macOS).
The Developer Tools panel will open, showing the Elements tab where you can see your HTML code.

Here's it in action:

That was a lot of information today!

You've learned about the basic structure of an HTML document, created your first HTML files in VSCode, and navigated between multiple pages.

You've also learned how to view and inspect your HTML using the developer console in various browsers. These skills are foundational for web development, and with practice, you'll become more comfortable using these tools.

Refer to these articles as much as you need because learning takes time.

In the next article, I'll give you your first project to do without me guiding you. It'll be an important step in ensuring you are learning so make sure you take the time to do it.