A row of brightly decorated Russian nesting dolls
Part of the Basic HTML Reading List

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>
HTML tattoo

(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.