002: HTML Document Structure

Learning outcomes

By the end of this lesson, you can create a conforming HTML document; explain doctype, html, head, body, metadata, elements, tags, and attributes; nest elements correctly; and use indentation and comments without confusing presentation with structure.

Prerequisites and retrieval

Create a portfolio folder and open it in a text editor. Recall 001: which resource normally provides a page's structure, and which software parses it? Explain why an HTTP 200 response does not prove that the returned HTML is well formed.

Terminology

Markup: Text annotations that define document structure and meaning, independent of appearance. — Source: WHATWG: HTML Introduction
Element: The basic building block of HTML: a start tag, content, and an end tag (or a void element). — Source: WHATWG: Elements
Tag: Markup syntax delimiting where an element starts and ends in source text. — Source: WHATWG: The HTML syntax
Attribute: A name/value pair inside a start tag that configures or annotates its element. — Source: MDN: Glossary — Attribute
Nesting: Placing elements inside other elements so parsed markup forms a tree. — Source: MDN: Basic HTML syntax
Void element: An element that can never have children or an end tag, such as meta, img, or input. — Source: WHATWG: Void elements
Metadata: Information about the document itself — encoding, viewport, title — carried in the head element. — Source: WHATWG: Document metadata
DOM: The browser’s live tree representation of a document that scripts can read and modify. — Source: MDN: Document Object Model
Conformance checker: A tool that reports violations of a specification’s authoring requirements. — Source: Nu HTML Checker
HTML: "HyperText Markup Language — the markup language that describes the structure and semantics of web documents." — Source: WHATWG HTML Living Standard: Introduction
Semantics: "The meaning conveyed by an element, independent of presentation." — Source: MDN: Semantics
Character reference: "A code such as < representing a character that would otherwise be parsed as markup." — Source: WHATWG: Character references
Conforming document: "A document that conforms to the requirements of this specification." — Source: WHATWG: Conformance requirements

Mental model: source becomes a tree

HTML is not a sequence of drawing instructions. It is a language for declaring a document. The browser parses source text into a tree: html contains head and body; body contains visible content; elements can contain text and other permitted elements.

text
Document
├─ doctype
└─ html (lang="en")
   ├─ head
   │  ├─ meta charset
   │  ├─ meta viewport
   │  └─ title
   └─ body
      └─ h1

Browsers recover from many errors so that old pages remain usable. Recovery is not validation. With <p>Welcome <strong>friend</p></strong>, the closing order crosses rather than mirrors the opening order. A browser applies defined error-recovery rules and may create a DOM different from what the author imagined. Write intentional, conforming nesting instead of relying on repair.

The document skeleton

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Home | Asha Rao</title>
  </head>
  <body>
    <h1>Asha Rao</h1>
    <p>Building accessible, semantic websites.</p>
  </body>
</html>

<!doctype html> selects standards mode. It is a required preamble for normal HTML documents, not an HTML element and not a version declaration meaning “HTML5.” The document element is <html>. Its lang attribute identifies the page's human language, helping pronunciation, translation, and other processing.

<head> holds metadata. <meta charset="utf-8"> declares UTF-8 and should appear early; UTF-8 is the standard authoring choice. The viewport declaration asks mobile browsers to use the device width and an initial scale of 1. Do not disable user zoom with user-scalable=no or restrictive maximum scale.

<title> supplies the document title used in browser tabs, history, bookmarks, and often search results. It must be meaningful and distinguish pages: About | Asha Rao, not Page.

<body> contains the document content presented to the user. Metadata and visible headings are different: <title> does not replace <h1>, and <h1> does not replace <title>.

Tags, content, and attributes

In <p class="intro">Hello</p>, <p class="intro"> is the start tag, class="intro" is an attribute, Hello is text content, and </p> is the end tag. Together they represent a paragraph element. Quote attribute values consistently. Attribute order usually has no semantic effect, but duplicate attributes are errors.

Void elements do not have end tags. Write <meta charset="utf-8">, not <meta charset="utf-8"></meta>. A trailing slash in <meta ... /> is permitted by HTML syntax but unnecessary and does not “close” the element. This course uses simple HTML syntax without XHTML-style slashes.

Boolean attributes are true when present. Later, required means required whether written required, required="", or required="required"; required="false" still means true. Omit the attribute to express false.

Indentation and comments

Browsers mostly ignore indentation between elements, but humans do not. Indent children two spaces and align paired tags. This makes the tree visible and exposes missing end tags.

html
<!-- Explain why a non-obvious structural choice exists. -->

Comments are delivered to users and visible in page source and developer tools. Never put passwords, tokens, private notes, or removed confidential content in them. Comments cannot be nested. Prefer clear markup over comments that merely restate it.

HTML syntax conventions, case, and whitespace

HTML element and attribute names are ASCII case-insensitive in HTML documents, so browsers will recognize markup such as <P> or <TITLE>. That does not make uppercase authoring a good convention. Write element and attribute names in lowercase consistently:

html
<p class="summary">Readable, conventional HTML.</p>

Consistency improves scanning, diffs, search, and team maintenance. It also avoids confusion when you later work with case-sensitive languages and formats.

HTML normally collapses sequences of ordinary whitespace in text. These two paragraphs render with equivalent spacing between the words:

html
<p>Hello     world</p>
<p>Hello world</p>

Use markup to express structure and CSS to control visual spacing. Do not align page content by inserting many spaces. When whitespace itself is part of the content, an element such as pre is appropriate; lesson 003 covers that case.

Global attributes: `id`, `class`, `lang`, `title`, and `data-*`

Some attributes can be used on most HTML elements and are therefore called global attributes.

html
<article
  id="project-weather"
  class="project featured"
  lang="en"
  data-project-id="8472">
  ...
</article>

id identifies one element within the document. Keep IDs unique.
class assigns one or more reusable classification tokens. Many elements may share the same class.
lang declares the language of an element and its descendants unless overridden. It helps pronunciation, translation, spell checking, and search processing.
title can provide advisory information, but it should not carry essential instructions because it is not reliably available to keyboard, touch, or assistive-technology users.
data-* stores application-specific data on an element, such as data-project-id="8472". It is useful when scripts need metadata that has no native HTML attribute.

Do not use data-* to replace real semantics. If HTML already has an appropriate element or attribute, prefer the native feature.

class and id are not styling instructions by themselves. CSS can select them, links can target an id, and JavaScript can use both, but their presence does not change appearance automatically.

Boolean attributes and quoted values

Some HTML attributes are boolean attributes. Their presence means true; their absence means false:

html
<input type="checkbox" checked>
<input type="text" required>

Writing checked="false" still means checked because the attribute is present. Remove the attribute to express false.

HTML permits some unquoted attribute values, but quote normal attribute values consistently. Quoting prevents spaces and special characters from accidentally changing how the source is parsed:

html
<p class="project summary">...</p>

This is an authoring convention that pays off as documents become larger.

Guided example: build and explain `index.html`

In portfolio, create index.html.
Type the skeleton rather than using an editor shortcut. This builds recognition.
Set lang="en" because the page content is English. Use a more specific valid language tag only when relevant.
Put charset first in head, then viewport and title.
Add visible content to body:

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Home | Asha Rao</title>
  </head>
  <body>
    <h1>Asha Rao</h1>
    <p>I am learning to build useful, accessible websites.</p>
  </body>
</html>

Save and open the file in a browser. The address begins with file: because no web server is involved. Observe that the tab uses title while the page shows h1.
Open developer tools and inspect the Elements/Inspector tree. Compare it with source.
Explain every major line by purpose, not merely pronunciation: “This declares the page language,” not “This says html lang equals en.”

The browser applies default presentation, but that appearance is not the reason to choose an element. CSS will later change appearance; meaning should remain.

Intermediate example: inspect browser recovery

Temporarily create broken.html:

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Broken nesting experiment</title>
  </head>
  <body>
    <p>My <strong>first portfolio paragraph.</p></strong>
  </body>
</html>

The page may look acceptable. Inspect the DOM and submit the source to the Nu HTML Checker. The checker reports the structural mistake even when rendering hides it. Fix the order:

html
<p>My <strong>first portfolio paragraph</strong>.</p>

Use a stack mental trace: opening <p> pushes p, opening <strong> pushes strong; therefore close strong before p. Indentation provides the same visual clue.

Advanced optional extension: source, DOM, and conformance

HTML permits some tags to be omitted under exact rules, but beginners should normally write the clear skeleton and ordinary end tags. Browser developer tools display the parsed DOM, not necessarily the exact source. The browser can insert implied elements or repair invalid nesting. “View Source” shows delivered source; “Inspect” shows the resulting live tree.

Try omitting <html>, <head>, and <body>. The DOM still contains them because the parser implies them. Restore them: explicit structure is easier to review and maintain. Do not conclude that all closing tags are optional; omission rules differ by element and context.

Common mistakes and debugging

Missing doctype: can trigger quirks mode and inconsistent legacy layout behavior.
Putting visible content in head: move document content to body.
Using title as a tooltip myth: the title element names the document; the global title attribute is different and is not a dependable replacement for visible instructions.
Crossed nesting: close the most recently opened inner element first.
Closing void elements: img, meta, and input have no end tag.
Duplicate IDs or attributes: validators catch many such authoring errors.
Assuming rendering proves validity: always check source and the parsed tree, then use a conformance checker.
Using comments for secrets: comments are public once delivered.

Accessibility, security, and performance

Set the correct lang; WCAG 2.2 requires a programmatically determinable page language. Give every page a descriptive title. Keep zoom available. Semantic structure gives assistive technology useful information, but syntax validation alone is not an accessibility audit.

HTML comments and metadata are not private. Avoid leaking internal paths, personal details, or credentials. UTF-8 avoids many encoding ambiguities; servers should also send the correct Content-Type and charset. A concise document head and valid tree are easy to process, but micro-optimizing indentation is pointless under normal compression. Optimize images and scripts later, not semantic clarity.

Tiered exercises

Level 1: complete the skeleton

Create a valid English document titled About | Your Name, with one heading and paragraph. Explain doctype, language, charset, viewport, title, and body.

Level 2: repair

Correct this source and list each reason:

html
<html>
<head><title>Page</title></head>
<body><h1>About <em>me</h1></em><meta charset="utf-8"></body>
</html>

Level 3: investigate

Compare View Source and the DOM for malformed nesting. Run the corrected document through the Nu checker and explain why “no errors” is useful but not a complete quality guarantee.

Level 1:

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>About | Sam Lee</title>
  </head>
  <body>
    <h1>About Sam Lee</h1>
    <p>I am learning web development and documenting my progress.</p>
  </body>
</html>

The doctype selects standards mode; lang identifies English; charset selects UTF-8; viewport supports mobile sizing without blocking zoom; title identifies the document; body contains presented content.

Level 2:

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>About | Your Name</title>
  </head>
  <body>
    <h1>About <em>me</em></h1>
  </body>
</html>

This adds the doctype and language, places early metadata in head, adds viewport metadata, gives a descriptive title, and closes em before its parent heading.

Level 3: View Source retains the malformed order; the inspector may show a repaired tree. Zero checker errors means no detected conformance errors under that checker version. It does not prove good writing, accurate alt text, usable keyboard behavior, security, or full accessibility.

Recap and exit questions

HTML source declares a meaningful tree. A standard document has a doctype, an html root with language, metadata in head, and content in body. Browsers repair errors, while validators help authors find them.

What is the difference between a tag and an element?
Why are <title> and <h1> both needed?
What does the doctype do?
Why can the DOM differ from source?
Why is required="false" still true for a boolean attribute?

Try it with your own example

You met Asha's skeleton above; now build the same shape for a completely different purpose so the pattern sticks rather than becoming "the code I copied for Asha."

Create a folder called rinas-kitchen next to your portfolio folder, and inside it, write index.html for the bakery from lesson 001 — from memory, not by copying:

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Home | Rina's Kitchen</title>
  </head>
  <body>
    <h1>Rina's Kitchen</h1>
    <p>Fresh sourdough and pastries, baked every morning in the old town.</p>
  </body>
</html>

Now ask yourself, out loud if you can: why does lang="en" belong here even though Rina might later add a French menu page at menu-fr.html with lang="fr" of its own? Why would <title>Rina's Kitchen</title> alone (without "Home |") be a weaker choice once there are five pages open in five browser tabs? If you can answer both without looking back at the lesson text, the skeleton has actually become yours rather than something you memorized for one project.

Further reading: MDN — What's in the head? walks through additional head metadata (favicons, author info) you will meet again in the bonus SEO lesson (016) later in this course.