If you missed first and second part of this tutorial, you can find them here:
In part 3 of this tutorial we are going to continue on learning HTML5 Fundamentals – section, article, aside elements.
The HTML5 section element
This elements can really be confusing. When using new HTML5 elements it is always good idea to visit specifications which can be seen on w3.org or whatwg.org.
The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.
Wow, And if you are reading this for the first time, yes you probably don’t have a clue how to use it. So let’s see it on a example, what we have here is little redefined template from previous part of this tutorial:
<!doctype html> <html lang="en"> <head> <title>Website title</title> <meta charset="utf-8"> </head> <body> <div class="container"> <header> <h1>My website</h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">My work</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <main role="main"> <div class="article"> <h1>Article title</h1> <ul class="meta"> <li>Posted: two day's ago</li> <li>Category: Category 1</li> <li>Tags: html, tutorial, developement</li> </ul> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam perferendis ullam tenetur illo eaque hic dolor quae vero modi ipsa? Ea possimus harum animi beatae similique quod minima, ipsam hic. </p> </div> <h2>HTML exercises</h2> <h3>exercise 1</h3> <p>lorem ipsum</p> <h3>exercise 2</h3> <p>lorem ipsum</p> <h3>exercise 3</h3> <p>lorem ipsum</p> </main> <footer> <div class="section"> <h3>Tweets</h3> <ul> <li>Tweet 1</li> <li>Tweet 2</li> </ul> </div> <div class="section"> <h3>Recent posts</h3> <ul> <li>Post no. 1</li> <li>Post no. 2</li> </ul> </div> <div class="section"> <h3>Categories</h3> <ul> <li>Category 1</li> <li>Category 2</li> <li>Category 3</li> <li>Category 4</li> </ul> </div> <p>Copyright information</p> </footer> </div> </body> </html>
When we look at this html template we can use new section element in footer where we have heading related content and into main element where we have list of exercises with headings followed by paragraph. Wrapping thighs with section element will create separation and it creates a connection between heading within and the content, and also we can use heading h1 tags:
<section> <h3>exercise 1</h3> <p>lorem ipsum</p> </section>
Author can use h1 elements throughout, without having to worry about whether a particular section is at the top level, the second level, the third level, and so on.
Also it is important to note that section element is not supposed to be used for styling purposes:
When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.
Having that in mind you can apply classes to headings, in some books it is suggested that you add classes like alpha, omega and so one, or something similar and simple.
The HTML5 article element
At the middle of this template you have
<div class="article">
and this obviously would be a blog posting. With HTML5 we can improve this a little bit. Instead of using div and a class we are going to use article element. Article element does not only refer to blog, and that is something that I thought too in the beginning. Idea behind article element is that it should represent content that could be syndicated or reproduced across the web for example by rss feed. For our example, blog postings should always be syndicated and it should be wrapped by article element. Next, within the article we do have some information for the header and we can wrap that within header element. Next, if you have some social links after article main content, you can put this inside footer or aside element. If we scroll down to footer element, I want you to look what we have inside. If this content will have a heading, you can use section element but only if it is related content. If the only purpose for wrapping the content with element is for styling purposes then you can use div.
Never use a section element for the styling purposes!
For now let’s keep these divs. Just because you are using HTML5 doesn’t mean that you will never use a div again.
The HTML5 aside element
The most obvious use of aside tag is sidebar. So lets add aside content just before our article element.
<aside> <h3>Our sponsors</h3> <ul> <li>Sponsor 1</li> <li>Sponsor 2</li> <li>Sponsor 3</li> </ul> </aside>
Let’s look at the specification:
The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography. Follow this link to see complete description.
And here is complete HTML5 markup:
<!doctype html> <html lang="en"> <head> <title>Website title</title> <meta charset="utf-8"> </head> <body> <div class="container"> <header> <h1>My website</h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About/<a></li> <li><a href="#">My work</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <main role="main"> <aside> <h3>Our sponsors</h3> <ul> <li>Sponsor 1</li> <li>Sponsor 2</li> <li>Sponsor 3</li> </ul> </aside> <article> <header> <h1>Article title</h1> <ul class="meta"> <li>Posted: two day's ago</li> <li>Category: Category 1</li> <li>Tags: html, tutorial, developement</li> </ul> </header> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam perferendis ullam tenetur illo eaque hic dolor quae vero modi ipsa? Ea possimus harum animi beatae similique quod minima, ipsam hic. </p> </article> <h2>HTML exercises</h2> <section> <h3>exercise 1</h3> <p>lorem ipsum</p> </section> <section> <h3>exercise 2</h3> <p>lorem ipsum</p> </section> <section> <h3>exercise 3</h3> <p>lorem ipsum</p> </section> </main> <footer> <div class="section"> <h3>Tweets</h3> <ul> <li>Tweet 1</li> <li>Tweet 2</li> </ul> </div> <div class="section"> <h3>Recent posts</h3> <ul> <li>Post no. 1</li> <li>Post no. 2</li> </ul> </div> <div class="section"> <h3>Categories</h3> <ul> <li>Category 1</li> <li>Category 2</li> <li>Category 3</li> <li>Category 4</li> </ul> </div> <p>Copyright information</p> </footer> </div> </body> </html>
Conclusion
When using these new HTML5 elements best advice would be to just use your judgement, nothing going to happen if you misuse some of the tags, check your code with W3C Validator and over the time you are going to master it. Although there is more HTML5 elements that we didn’t discussed I will end this three part series tutorial here. If you use all of this in your markup you are going to improve your project dramatically.
Leave a Reply