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.
<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
<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
<html> <head> … </head> <body> … </body> </html>
<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.