HTML Document Structure — Module 01 | Frontend Learning Roadmap

1. Introduction

Every HTML file must follow a specific structure. This structure is called the HTML boilerplate. Think of it as the skeleton that every page is built on — just like how every house needs a foundation before you can build the walls.

In this lesson you will learn every part of this structure, why it exists, and what happens if you leave parts out. After this lesson, you will be able to create a proper HTML file from memory.

2. Theory

The Complete HTML Boilerplate

A standard HTML5 document has this structure:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title Here</title>
  </head>
  <body>

    <!-- Your visible content goes here -->

  </body>
</html>

The Tree Structure

HTML documents are organised as a tree. Each element can be a parent that contains children. This is why indentation matters — it shows which elements are inside which.

html
├── head
│   ├── meta (charset)
│   ├── meta (viewport)
│   └── title
└── body
    ├── h1
    ├── p
    └── (more elements...)

HTML Attributes

Tags can have attributes — extra information inside the opening tag. Attributes have a name and a value:

<html lang="en">
        ^^^^  ^^^^^
        name  value

The value is always inside double quotes. Multiple attributes can be added to one tag separated by spaces.

HTML Comments

You can add notes to your HTML that the browser ignores completely. This is useful for explaining your code:

<!-- This is a comment. The browser ignores this. -->
<p>This is visible content.</p>

3. Real World Example

Think of the HTML document structure like a letter:

The envelope is the <html> element — it holds everything
The header of the letter (date, addressee, subject) is the <head> — metadata about the document
The body of the letter (the actual message) is the <body> — the visible content

Just like you would not put the body of a letter on the envelope, you do not put visible content in the <head>.

4. Code Example

A fully complete HTML5 boilerplate — the professional starting point for every page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Character encoding -- always first -->
    <meta charset="UTF-8">

    <!-- Mobile responsiveness -- always include this -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Page description for search engines -->
    <meta name="description" content="A description of this page for Google">

    <!-- The tab title -->
    <title>My Website — Home Page</title>

    <!-- Link to external CSS file (we will learn this later) -->
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

    <h1>Welcome to My Website</h1>
    <p>This is a paragraph of content visible to the user.</p>

    <!-- Link to external JS file -- placed at end of body -->
    <script src="script.js"></script>
  </body>
</html>

5. Code Breakdown

Line	What It Does	Required?
`<!DOCTYPE html>`	Declares HTML5. Puts browser in standards mode.	Yes — always first
`<html lang="en">`	Root element. `lang` helps screen readers and search engines.	Yes
`<head>`	Container for metadata — not visible on page.	Yes
`<meta charset="UTF-8">`	Supports all characters including accents, emoji, foreign scripts.	Yes — always first inside head
`<meta name="viewport"...>`	Makes the page responsive on mobile devices. Without it, mobile browsers zoom out.	Yes for modern sites
`<meta name="description"...>`	Text shown in Google search results under your page title.	Recommended
`<title>`	Text in the browser tab. Also used by search engines.	Yes
`<link rel="stylesheet">`	Connects a CSS file. We cover this in the CSS module.	When using CSS
`<body>`	All visible content lives here.	Yes
`<script src="...">`	Connects a JavaScript file. Place at end of body for performance.	When using JS

6. Common Mistakes

Mistake 1 — Nesting elements in the wrong order

Elements must be closed in the reverse order they were opened. If you open <b> inside <p>, close <b> before closing <p>.

Wrong: <p><b>Bold text</p></b>

Right: <p><b>Bold text</b></p>

Mistake 2 — Putting visible content inside <head>

Only metadata belongs in <head>. Headings, paragraphs, images — all of these belong in <body>.

Mistake 3 — Forgetting the viewport meta tag

Without <meta name="viewport" content="width=device-width, initial-scale=1.0">, your page will appear zoomed out on mobile phones.

Mistake 4 — Placing <script> in <head>

Scripts in <head> block the page from loading. Place <script> tags just before </body> so the HTML loads first.

7. Best Practices

Save the boilerplate as a VS Code snippet

In VS Code, type ! and press Tab — this auto-generates the full HTML boilerplate for you using Emmet. Use this every time you start a new HTML file.

Set the correct language attribute

Always use lang="en" (or your page's actual language). This helps screen readers pronounce content correctly and helps search engines categorise your content.

Write meaningful page titles

Good title: Contact Us — Acme Corp
Bad title: Page 1 or Untitled

The title appears in the browser tab, in bookmarks, and in Google search results.

8. Practice Exercise

Open VS Code, create a new file called structure.html, and:

Type ! and press Tab to generate the Emmet boilerplate
Change the <title> to "My Portfolio — [Your Name]"
Add <meta name="description" content="..."> with a description of yourself
Inside <body>, add: one <h1>, two <p> elements, and one HTML comment
Open in Live Server and check the browser tab shows your title

Tip: Open Developer Tools (F12) → Elements tab to see your HTML structure in the browser.

9. Assignment

Create a complete HTML page for an imaginary business. Requirements:

Correct HTML5 boilerplate
Title: "Business Name — Home"
Meta description about the business
An <h1> with the business name
A <p> describing what the business does
A <p> with a made-up address
An HTML comment above each section explaining what it is

Save as business.html and verify it opens correctly in your browser.

10. Interview Questions

Q1: What is the purpose of <!DOCTYPE html>?

Answer: It tells the browser the document uses HTML5. Without it, browsers may switch to "quirks mode" — a legacy rendering mode that mimics old browser bugs. Always including DOCTYPE ensures standards-compliant rendering.

Q2: What is the difference between <head> and <body>?

Answer: The <head> contains metadata — information about the page that is not displayed directly (title, character set, CSS links, meta tags). The <body> contains all visible content — text, images, videos, forms — everything users see and interact with.

Q3: What does the viewport meta tag do?

Answer: <meta name="viewport" content="width=device-width, initial-scale=1.0"> controls how the browser scales the page on mobile devices. Without it, mobile browsers zoom the page out to show the full desktop layout, making text very small. With it, the page scales to fit the device screen properly.

Q4: What is a self-closing tag? Give examples.

Answer: Some HTML elements have no content and do not need a closing tag. These are called void elements or self-closing tags. Examples: <meta>, <link>, <img>, <br>, <hr>, <input>. In HTML5 the trailing slash is optional: <br> and <br /> are both valid.

Q5: Where should <script> tags be placed and why?

Answer: At the bottom of <body>, just before </body>. This allows the HTML content to load and display first before the JavaScript runs, preventing a blank page while scripts load. An alternative is placing scripts in <head> with the defer attribute, which also defers execution until the HTML is parsed.

11. Additional Resources

MDN — Getting Started with HTML
MDN — The Meta Element Reference
Emmet Cheat Sheet — VS Code shortcuts for writing HTML faster