Lesson 2: HTML Document Structure

Every page starts with a skeleton

In Level 1 you set up VS Code and a browser and learned that a browser asks a server for a file and then draws what comes back. That file is HTML. In this level you write the skeleton that sits under every page you will ever build. It's about 15 lines, and you will type it from memory before long.

Think of a letter in an envelope. The envelope has the address, the postage and the sender, which is information about the letter. The letter inside is what the reader actually reads. An HTML page works the same way. The head is the envelope, with information for the browser, search engines and screen readers. The body is the letter, the part people see.

Elements, tags and attributes

Three words that beginners mix up:

<title>Maple Street Bakery</title>
<!-- ^opening tag  ^content        ^closing tag (note the /) -->
<!-- The whole thing, from opening tag to closing tag, is the ELEMENT. -->

<html lang="en">
<!--   ^attribute: a name (lang) and a value ("en") in quotes,
       always written inside the OPENING tag -->

• A tag is the markup in angle brackets, like <title> or </title>.
• An element is the opening tag, its content and the closing tag taken together.
• An attribute adds extra information to an element. It goes in the opening tag as name="value".

Some elements can't hold any content, so they have no closing tag. These are called void elements, and <meta> is one of them. You may see <meta ... /> with a slash at the end. HTML parsers ignore that slash, so it is optional. Never write </meta>.

Nesting: boxes inside boxes

Elements sit inside other elements, like boxes inside boxes. The rule: close the inner box before the outer one.

<!-- Correct: title opens and closes completely inside head -->
<head>
  <title>Maple Street Bakery</title>
</head>

<!-- Wrong: head closes while title is still open. Tags cross over. -->
<head>
  <title>Maple Street Bakery</head>
</title>

Indenting each inner element by two spaces isn't required, but it makes the nesting visible at a glance. Every professional codebase does it.

The full skeleton, line by line

In your project folder, create index.html (servers usually look for this name first for a site's home page). Then type this:

<!DOCTYPE html>
<!-- 1. Doctype: must be the very first thing in the file.
        It tells the browser to use modern "standards mode". -->

<html lang="en">
<!-- 2. The root element. Everything else goes inside it.
        lang="en" says the page is in English. Use "en-GB" for
        British English, "fr" for French, and so on. -->

  <head>
  <!-- 3. The envelope: information about the page, not shown on it. -->

    <meta charset="utf-8">
    <!-- 4. Character encoding. UTF-8 handles £, é, emoji and every
            other script. Keep it near the top of head. -->

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 5. Tells phones to lay the page out at the screen's real width
            instead of showing a tiny zoomed-out desktop page. -->

    <title>Home | Maple Street Bakery</title>
    <!-- 6. Shown in the browser tab, bookmarks and search results. -->
  </head>

  <body>
  <!-- 7. The letter: everything visitors see goes here. -->
    Welcome to Maple Street Bakery. Fresh bread every morning.
  </body>

</html>

Save the file and open it in your browser. You should see the welcome sentence on the page and "Home | Maple Street Bakery" on the tab. None of the comments appear on the page.

Gotcha: the doctype. If you leave out <!DOCTYPE html>, or put anything except a comment before it, browsers switch to quirks mode, which copies the behaviour of very old browsers. The page still loads, but your CSS layouts will behave strangely later on, and that kind of bug is hard to track down. Make it line one, every time.

Gotcha: the charset rule. The <meta charset> element must sit within the first 1024 bytes of the file. If it's missing, a pound sign or an accented letter can show up as garbage like £. And utf-8 is the only valid value in modern HTML.

Pitfall: blocking zoom. You'll find snippets online that add user-scalable=no or maximum-scale=1 to the viewport tag. Don't copy them. They stop people with low vision from zooming in, and the WCAG accessibility guidelines require that text can be enlarged.

Why the title and lang attribute matter

Neither one changes how the page looks, so beginners skip them. Don't.

The title is often the first thing anyone sees of your site. Search engines usually show it as the clickable headline in their results and display roughly the first 55–60 characters. Screen reader users hear it first when the page loads, and many use it to tell their open tabs apart. Good practice:

• Put the page's purpose first and the site name second: Opening Hours | Maple Street Bakery.
• Give every page its own title. Five tabs all called "Home" don't help anyone.
• Avoid one-word titles and lists of keywords.
• Use exactly one <title> per page, and put only plain text in it. Even a comment inside a title shows up in the tab as text.

The lang attribute tells screen readers which voice and pronunciation rules to use. Without it, a screen reader may read your English text with its default language's rules and mangle it. WCAG (success criterion 3.1.1) requires that the language of a page can be detected by software, and lang on <html> is how you meet it. Browsers also use it for things like offering translation.

Comments: notes to yourself

<!-- TODO: add the opening hours page link here -->

<!--
  Comments can also
  span several lines.
-->

The browser ignores comments when it draws the page, but anyone can read them with View Page Source. Never put passwords, private notes or rude remarks in them. Comments can't be nested either: the first --> closes the comment, however many <!-- came before it.

Try it: checklist

• index.html starts with <!DOCTYPE html> on line one
• <html> has a lang attribute that matches your content
• <head> contains <meta charset="utf-8">, the viewport meta and a descriptive <title>
• Visible text sits inside <body>
• Every opening tag has a matching closing tag (except void elements like <meta>), with no crossed nesting
• You've added a comment and checked it doesn't appear on the page
• Right-click → View Page Source shows your comment is still in the code

Key takeaways

• Every page needs a doctype, then <html lang>, a <head> with charset, viewport and title, and a <body>.
• Tags are the markup in angle brackets. An element is the opening tag, content and closing tag together. Attributes go inside the opening tag as name="value".
• Close inner elements before outer ones, and indent so the nesting is easy to see.
• A missing doctype triggers quirks mode. A missing charset can garble text.
• The title feeds browser tabs, search results and screen readers. lang sets how screen readers pronounce the page.
• Comments are hidden on the page but visible in the source.