HTML elements are nested. Certain elements can only happen within other elements: that is, between particular opening and closing tags. The order in which tags are opened and closed is vitally important, since using them in the wrong sequence results in a page rendered in disarray in a browser.
Tags are closed in the reverse order to which they are opened. The rule is: “First in, last out”. That is, the element that contains a nested series of tags is the last one to be closed. Another way of thinking about this is a series of matryoshka dolls, the Russian figurines which contain other figures inside themselves.
If the <html>
tag starts our page after the doctype, it is also the last one to be closed:
<html>
…
</html>

(Note that for the purposes of simple illustration the html
tag is simplified: in a real page, it would typically have at least a lang
attribute.)
Essentially, the <html>
tag indicates that everything that follows it is, unsurprisingly, HTML. The opening <html>
tag says “HTML starts here”. The closing </html>
tag says “this is where the HTML code ends”.
The rest of our code must be written between these opening and closing tags. There are two major sub-sections: the <head>
and <body>
.
<html>
<head>
…
</head>
<body>
…
</body>
</html>
The <body>
section contains the content that will appear on our page. The <head>
section contains information about the page, together with other resources.
Illustration adapted from a photograph by SamFa, used under a Creative Commons Attribution 2.0 Generic license.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.