Blog Post

Head vs. Header vs. Headings

 It’s fairly common for people new to HTML to confuse the <head>, <header> and headings (<h1> through <h6>) elements. Within the same html document you may (and probably will have) all three and the schema used for why each goes where may not be readily apparent. Also with the human body analogy being present both within the html element (head and body elements) and again within the body element (header, footer etc) it can be perplexing for both new recruits to the zombie war as well as seasoned veterans of the conflict. 

Lets first describe what each element does. The <head> element holds everything about the page (e.g. character set, stylesheets, scripts and so on). Nothing in the <head> will show up on the page with the slight exception of the <title> which will show at the top of the window/tab. <header> is like a document header and shows at the top of a web page. Headings (<h1> through <h6>) are used to break up content and provide overviews/titles for sections of text.

Now stick with me here, but I like to illustrate the difference using a mechanical zombie suit for a precocious, genius inventor, post-apocalyptic kid. The outside zombie suit has a <head> and a <body>. The zombie suit head (<head>) is full of sensors and holds lots of information about the suit and the number of hordes the kid genius has taken down (everything about the page). The zombie suit body (<body>) does the major work of the mechanical zombie, lifting things, dancing the cancan, and holding the genius kid inside it (i.e. everything that will show on the page). Within the body we have the kid’s head (<header>) and feet (<footer>) plus the zombie suit’s navigation controls (<nav>). We also have the kid’s body (<main>) and one of his arms (<aside>) (he probably has both his arms, but the analogy was starting to fray and I wanted to get that last structural element in there)

Where this analogy breaks down fully is with headings. There will typically be a heading (usually <h1>) in your <header>, but often also in the <main> or <aside> as you break up your content with headings. It’s even possible to have a heading in your <footer>, though that’s less common.

Does that make it clearer? Let me know in the comments.

Leave a Reply

Your email address will not be published. Required fields are marked *