The article tag

The article element is one of the new elements that have been introduced with HTML5. As this is a new element there has been some confusion of how to use this element. But there seems to be an agreement that you use the <article> element when you markup content, that makes sense on its own. What does this mean? It means that you could use the <article> element when marking up an “about me” page, a blog entry, and also every comment to your blog entry.
But you are not supposed to use the <article> element around every single paragraph – the point is, whatever you put in the <article> element it is supposed to make sense on its own.

Using the x-article, the article element should be used like this:

<!DOCTYPE html>
        <body>
        <article>
                <div id="header">
                        <h1>header title</h1>
                </div>
                <div id="content">
                        <h2>Content title</h2>
                                <p>...</p>
                        <h2>Another content title</h2>
                                <p>...</p>
                </div>
        </article>
        </body>
</html>

The header tag

The <header> element is a bit ambiguous as it can be used in different kinds of ways. Firstly you need to know that the <header> element do not introduce a new section – it is the head of an existing section. Secondly you must not confuse it with the <head> element – it is two different elements!

So can you have two <header> elements on the same page? Sure you can! Imagine you have three blog entries on a single page; well they can all have a <header> section. Multiple articles on one page? They all have their own <header> element.

Using the flour-article, this means that the <div> element we previously used to divide the headline and author from the rest of the content can now be replaced by the <header> element.

<article>
        <header>
                <h1>header title</h1>
                <p>...</p>
        </header>

When using the <header> element you should always have one heading tag (<h1> – <h6>), but you can have multiple. You can also use the <hgroup> element, which I will explain later on. Lastly, you can also have other “header” relevant content such as the byline, publication date, table of contents etc.

The hgroup tag

The <hgroup> is a second-level element, used to wrap one or more heading elements (<h1> to <h6> ), such as the title and sub-heading. As the <hgroup> is only allowed to contain heading elements, some examples might be the easiest way to show when and where the <hgroup> should be used.

When we have several title and metadata, the <hgroup> element only contains the actual titles (which should be marked up with the <h1> trough <h6> elements):

<article>
        <header>
                <hgroup>
                        <h1>header title</h1>
                        <h2>header subtitle</h2>
                </hgroup>
                <p>header description</p>
        </header>
</article>

The footer tag

You are probably used to seeing footers on websites all the time – they usually contain copyright-stuff, a few selected navigational links, and maybe contact information. Just like the <header> element, the <footer> element does not introduce a new section in your document, but is the last part of that specific section – whether it be an <article>, <section> or some other section.

This means, that you can have multiple footers on the same page – if you have several blog entries in one page, every blog entry can have its own footer and the page itself can have its own footer too.

And what should the footer contain? Content that is related to the section’s content but not part of the actual content.

Regarding blog entries, the <footer> might be where you have your related entries, comments, facebook like-buttons and publication date (if you do not have this in the <header> section).

<footer>
        <p>footer description</p>
        <ul>
                <li>link</li>
                <li>link</li>
        </ul>
</footer>

The navigation tag

Another one of the new semantic elements of HTML is the <nav> element. The <nav> element represents the navigation for a document. The navigation can be within the document or to other documents, but it is important to notice, that not all links in a document should be marked up with the <nav> element.

The <nav> element should only be used for the primary navigation structure. There is little consensus of when to use the <nav> element. Can it be used on breadcrumbs? Related posts? Pagination? Some people would say “Definately” while others would say “No way!”

Should this stop you from using the <nav> element? No. You could use the <nav> element for all of the above mentioned examples and it is up to you to decide if and where you want to use it. A rule of thumb might be to use it whenever you would have used the <div id=”menu”> or <div id=”navigation”>, and this entails that both of the before mentioned examples can be marked up with the <nav> element.

<nav>
        <ul>
                <li><a href="url">link</a></li>
                <li><a href="url">link</a></li>
                <li><a href="url">link</a></li>
        </ul>
</nav>

The section tag

The section element is one of the new elements that it is the hardest to learn to use correctly. It is more general than the <article> element, but you still have to have an actual section in your document when you use the <section> element.

This means, that you should always consider whether or not it might be more appropriate to use the <nav>, the <aside>, the <header>, the <footer>, or the <article> element before actually using the <section> element.

As you can see, this adds several lines of markup to your document and some prefer as little markup as possible. Luckily for them, you do not need to use the section element inside the article, but it often creates a more correct document outline.
As the section element divides your content into sections, it is important to remember that all section elements must be followed by a heading tag – if this doesn’t make sense semantically, then you should not be using the section element (consider using the one of the other new semantic HTML5 elements or perhaps no element at all?).

Some might give in to the temptation of using the section tag as a styling hook for e.g. pullquotes, but resist it. There are more appropriate elements to use for this purpose instead of the section element, e.g. the aside element.

<article>
<header>...</header>
<section>
        <h2>section title</h2>
        <p>section description </p>
</section>

<footer>...</footer>
</article>

The aside tag

The aside element is new to HTML5 and it can be used in two different contexts. Basically, the context of the <aside> element is based on whether or not it inside or outside the article element.

In magazines you often see info-boxes pulled away from the actual content of the article, highlighting something with relevance to the article such as pull-quotes and when this is the scope of your aside element then it has to be placed inside the article element, because it has a relationship to the content of the article.

Here is an example of the <aside> element being used inside the <article> element (content related to the current article, blogpost, etc.)

<article>
        <header>
                <h1>header title<h1>
                <p>author name</p> 
        </header>
        <section>
                <h2>section title</h2>
                <p>section description</p>
        </section>
        <aside>
                aside description
        </aside>
</article>

The aside element can also be used to mark up content which is relevant to your page as a whole – containing blogrolls, additional navigation, even adds – and when this is the scope of your <aside> element it has to be placed outside of the article section. Here is an example of the <aside> element being used as content related to your page as a whole:

<aside>
        <h3>aside title</h3>
        social media links
</aside>
<article>
        <header>
                <h1>header title<h1>
                <p>author's name</p> 
        </header>
        <section>
                <h2>section title</h2>
                <p>section description</p>
        </section>
</article>

Whether you use the aside element for the former or the latter use, you need to remember that the aside element is for secondary content regardless of the visual design of this content. This also implies that the aside element should be used for e.g. pullquotes as they are a part of your content – you should not use the blockquote element.

Tips For Semantically Structured Content

If we want to create a well-structured document outline we need to pay attention to the following rules:

1. The outermost sectioning element is always the <body></body> tag.

2. Sections in HTML5 can be nested.

3. Each section has its own heading hierarchy. Each of them (even the innermost nested section) can have an h1 tag.

4. While the document outline is primarily defined by the 5 sectioning elements, it also needs proper headings for each section.

5. It’s always the first heading element (let it be h1 or a lower rank heading tag) that defines the heading of the given section. The following heading tags inside the same section need to be relative to this. (If the first heading is an h3 inside a sectioning element, don’t put an h3 after that.)

6. The sections defined by the <nav></nav>, and the <aside></aside> tags don’t belong to the main outline of the HTML document, they are usually not rendered initially by assistive technologies.

7. Each section (body, section, article, aside, nav) can have their own <header></header> and <footer></footer> tags, that defines the header (such as logo, author’s name, dates, meta info, etc.) and the footer (copyright, notes, links, etc.) of that section.

JSC0d3's Logo
About JSC0d3

JSC0d3 is an entrepreneur, online marketer, and an employee of an IT company. When not building websites, creating content, or helping customers improve their online business, spend time with their wife and two beautiful children. Although he still feels new in WordPress, he enjoys sharing what he has learned with all of you! If you want to get in touch with him, you can do this through this website.

On the same idea

Posted by | August 12, 2017

We know that WordPress developers struggle to create meta boxes with custom fields We know the Codex does not have enough information We also know...

Posted by | July 30, 2016

HTML5 is the fifth revision and newest version of the HTML standard
It offers new features that provide not only rich media support, but also enhance...

Posted by | July 29, 2016

In this responsive web design tutorial we will create an awesome responsive HTML5 website starting from scratch I tried to include as many different...

Previous PostBackNext Post

Leave here an impression