what is the difference between the head and header tag and article tags?
Article: is a self-contained piece in a document that is intended to be used independently from the rest of the content of the page or reusable. For example a forum post, or a blog entry.
head element appears right at the top of your HTML document, just after your opening
<html> tag. Every HTML document has to have a
head element, which is then followed by a
body element. Easy to remember:
head at the top, and
body below it.
body element contains all the content that will be displayed in the browser window; whereas, the
head element contains a whole bunch of stuff that won’t be displayed in the browser window. The only thing that that will be visible from inside the
head element is the content of the
title element; that’ll be shown in the browser tab for that page.
All the rest of the content inside the
article elements are relatively new elements to HTML. Before HTML5 it was difficult to describe a page’s structure with the limited number of HTML elements that were available. The only way to do it was to use the
div element, which means division. That’s a pretty general way of describing content so web developers would then apply classes to their
div elements, so they would end up being something like:
<div class="article">. Web pages then became full of
divs as web developers tried to accurately describe the content of their pages. To make matters worse,
divs were also used for applying CSS to sections of the pages. These
divs didn’t describe the content of the pages, but used more general names for their classes, like
container. All this resulted in pages full of
div's which were very hard to maintain.
When the HTML5 authors were beginning to decide what new elements HTML needed, they conducted a search across the Web looking for the most common
class names. This was in the late 2000s, when everyone and their dog, had a blog. Unsurprisingly, this search resulted in lots of classes called main, article, section, aside, nav, header, footer, etc.
Think of the front page of a traditional printed newspaper. At the top you have the name of the newspaper, the date, the issue number, the price, maybe today’s weather forecast. All of this can be thought of as content that might be described as the “header”. On a web page you might want to describe similar online content with the
header element; think of things like the logo and / or the name of the website. One additional piece of content might be the navigation bar, so you can nest the
nav element inside the
header element too. Basically, it’s all the stuff that generally appears right at the top of every web page on your site. And at the opposite end of your page, is the
footer element: everything that generally appears right at the bottom of every page. Things like more navigation, social media icons, contact details, etc.
So between the
header and the
footer, you’ve got everything else on the page. This is content which is usually different on every page. You can describe this content using the
main element. This is the content that is the MAIN reason for people to come to your site (unless they’re really into headers or footers).
main content can then be divided up further, depending on the amount of content your page contains. Going back to the front page of the newspaper, there might be four stories on there. Each one could be described with it’s own
article element. But usually there’s one story which is the lead story, and is displayed more prominently at the top of the page. So that
article could sit inside it’s own
section, and the other
articles that are secondary to the main story could sit inside another
As you can probably tell by now, dividing up all your page’s content using the most appropriate HTML element is not a simple task, and you can go into extremely fine detail. It is often overlooked though, with many developers just concerned with putting enough
divs in their pages so they can quickly connect their CSS styles and JS scripts. Done right though, you can make your pages much more maintainable and resilient (and easier to style and script in the long run).
Here’s a quick overview of how your page might be structured:
<html> <head> <title>Name</title> </head> <body> <header> ... Logo ... <h1>Name</h1> <nav> ... Navigation ... </nav> </header> <main> <section class="primary-story"> <article> ... Article 1 ... </article> </section> <section class="secondary-stories"> <article> ... Article 2 ... </article> <article> ... Article 3 ... </article> <article> ... Article 4 ... </article> </section> </main> <footer> <nav> ... Navigation ... </nav> ... Contact Details .... ... Social Media ... </footer> </body> </html>
Just come across this really good little online tool which will show you the HTML5 semantic structure of any website. Having some practical examples might help you understand the HTML elements a bit more.
Here’s how freeCodeCamp’s homepage looks like:
That’s a really simple structure:
- One header with a nav element
- One main section
- One footer
Now look at Jeffrey Zeldman’s homepage:
See how Zeldman divides up every post into an article, and each article has it’s own header section. Also note the aside element used for describing the email sign-up section.
And for a little more complex example, have a look at Jeremy Keith’s site:
Because he posts so much, there are multiple articles nearly every day. To make sense of that, he wraps every day in it’s own section.