Your First Page | Web Foundation I

Last lesson, two lines of code were enough to make a browser build a heading and a paragraph for you. This lesson hands you the rest of the picture: the actual skeleton every real HTML page sits on underneath.

Elements: the labeled box gets a name

You already read <h1>Hello!</h1> as a labeled box — an opening label, what's inside, and a closing label with a slash. That whole unit, opening tag through closing tag, has a name: an element. In <h1>Welcome</h1>, the tag name is h1, and everything between the two tags is what the element holds. You wrote a couple of these last lesson without a name for them. Now you have one.

Nesting: boxes inside boxes

Boxes can hold smaller boxes. Put an h1 element inside a body element, and the body box now contains the h1 box — the way a shipping box can hold smaller boxes packed inside it, no packing peanuts required. HTML calls this nesting, and a page is built almost entirely out of it: element inside element, sometimes several layers deep.

Nesting follows one rule without exception: close the boxes in the reverse order you opened them. The last box you opened is the first one you close. <body><h1>Hello</h1></body> closes correctly — h1 shuts before body does. <body><h1>Hello</body></h1> closes them backwards, and a browser trying to make sense of it will not build the page you meant.

Every page has the same three-part skeleton

Every HTML page opens with the same top-level structure, three elements nested inside one another:

<html> — wraps the entire page; everything else lives inside it.
<head> — information about the page that isn't shown directly on screen, like its title.
<body> — everything a visitor actually sees: headings, text, images, links.

Put together, a minimal page looks like this:

<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello!</h1>
  </body>
</html>

Notice the nesting: <head> and <body> both sit directly inside <html>, and <title> sits inside <head> — one more example of elements living inside elements, all the way down.

Common mistake

Once a page has more than a couple of elements, it's easy to leave a tag unclosed, or close two tags in the wrong order. If a page renders strangely — text missing, or turning up somewhere you didn't expect — check that every opening tag has a matching closing tag, closed in the right order, before you check anything else.

Time to build the whole skeleton yourself.

Exercise

Build the page skeleton

Every real page opens with that same skeleton: an html element holding a head (with a title inside it) and a body (with everything visible inside it).

Write the whole skeleton yourself. Give the title a real name for the page, and give the h1 a greeting in your own words. Watch the preview build it, then run the checks.