HTML structure

There are some rules to HTML

Unfortunately for us, browsers tend to be very forgiving so things may look okay.

But there are some rules I’m going to ask you to follow.

Some are about actually legal HTML and others are about good practice.

The rules

  • Elements must be properly nested. I.e. the closing tags must come in the opposite order that they were opened.

  • There shouldn’t be any empty elements.

  • Every open tag should be matched by a close tag except on “void” elements that have no content such as img.

What’s wrong with this?

<p><strong>Some strong text</p></strong>

What’s wrong with this?

<p>One paragraph

<p>And another paragraph</p>

What’s wrong with this?

<p>The quick brown fox jumped over the lazy dog</p>
<p></p>
<p>Colorless green ideas sleep furiously.</p>

What’s wrong with this?

<p>The quick brown fox jumped over the lazy dog</p>
<p>Colorless green ideas sleep <i></i>furiously.</p>

What’s wrong with this?

<p>The quick brown fox jumped over the lazy dog</p>
<p>Colorless green ideas sleep <i>furiously</b>.</p>

We've learned about these elements

html, head, title, body , h1, p, img, and a

Different elements have different purposes

They are displayed differently by default.

But even more importantly, they provide a structure that browsers depend on to be able to render pages.

For instance

The h1 element is intended for a top level header.

By default it’s rendered in bold in a large font size.

But it should only be used for something intended to be a header for the page or section. (Typically there is only one h1 per page.)

And it cannot contain p elements because structurally that doesn’t make sense.

Structural constraints

There can be only one html element in an HTML page.

And it can only contain two direct children: one head and one body.

And every other element in the page must be a descendant of the html element.

Let’s take a look at the docs on MDN.

More generally

For any element there are restrictions on where it can appear and what can appear in it.

Mostly it’s pretty logical but the MDN docs will tell you for sure.

Or you can check your HTML with a validator.

Today

Make sure your HTML in your first-web project is properly structured. and that you’ve used html, head, title, body, h1, p, img, and a elements.

If you’ve got all those, make a second .html file in the public directory and make links between your two pages.

You can also look on MDN for some other interesting elements to add to your pages.