Page Anatomy | Web Foundation I

You already know a page starts with html, head, and body. This lesson fills in the details that make a page complete and correct — the parts that are easy to forget precisely because none of them show up rendered on the page itself.

Picture a building inspector visiting a finished house with a folder of paperwork that never once hangs on a wall: a permit stating which building code the house follows, a language tag for the safety signage, a one-line summary for the listing, a name plate for the front desk. None of it is visible once you're standing in the living room, and no inspector has ever complimented the decor based on the permit — but all of it is exactly what makes the building official. A page's head carries the same kind of paperwork.

The doctype declaration

The very first line of every real HTML file is a doctype — the permit stating which set of rules this page follows:

<!DOCTYPE html>

It tells the browser "read this as modern HTML" before anything else is parsed. There's only one version you'll ever write, exactly as shown above, and it always comes first — before even the opening <html> tag.

The lang attribute

The html element itself carries a lang attribute — the language tag on the signage — naming the page's human language:

<html lang="en">

This isn't only bookkeeping: screen readers use lang to choose the right pronunciation, and translation tools use it to know what they're translating from.

Head metadata

The head holds metadata — facts about the page that aren't part of what a visitor reads. The most common one is a meta element, the one-line listing summary, describing what the page is about:

<meta name="description" content="A short guide to the trail near my house.">

A search engine often shows this as the snippet under your page's link in search results — worth writing with care, since it's frequently the first thing a stranger reads about your page before they ever visit it.

The title element

The title element is the name plate: the text shown in the browser tab and, like the description above, in search results:

<title>My Trail Guide</title>

A page with no title at all shows its bare address instead — not exactly a warm welcome.

Common mistake

Because none of doctype, lang, metadata, or title render anywhere on the page itself, it's easy to forget any of them exist at all — a page can look completely normal in the preview while missing every one of them. Get in the habit of writing all four at the start of every real page, even though you'll never see them do anything visually.

Exercise

Write a complete page head

Write a complete page: a <!DOCTYPE html> declaration, an html element with lang="en", and inside its head, a meta name="description" and a title. Add a body with a heading of your own underneath, the same way you've been doing since lesson two.

Four things get checked. The doctype and the lang are read straight from the code you write; the title and the description are checked on the page your browser builds. The html, head and body tags holding it all together aren't graded here — write them anyway. A file without them isn't a real page.