Your First Page

On this stop

Elements & tags
Nesting elements
html, head, and body

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:

Up closeHTML

<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 — the lab has the editor.