what is the difference between the head and header tag and article tags?
Head: contains metadata (data about data) about that document, such as author, description, and links to css and/or javascript files that should be applied to the HTML.
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.
The 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.
The 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 head element is information about the page which might be useful for the web browser itself (like the location of the CSS and JavaScript files it might need to download to display the page correctly); for social media platforms (like Facebook and Twitter); and search engine web crawlers like Googlebot.
The header and 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 wrapper or 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).
This 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 section.
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>
1 Like
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:
https://sitegardien.com/html5viewer/semantichtml5viewer.php?url=www.freecodecamp.org
That’s a really simple structure:
- One header with a nav element
- One main section
- One footer
Now look at Jeffrey Zeldman’s homepage:
https://sitegardien.com/html5viewer/semantichtml5viewer.php?url=www.zeldman.com
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:
https://sitegardien.com/html5viewer/semantichtml5viewer.php?url=www.adactio.com
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.