HTML5 - When to use <section>
HTML5 has seen the introduction of many sectioning elements that can be used to
mark up your web pages. Using these elements gives more semantic meaning to your
pages, allowing computer programs to understand your content better.
But using these HTML5 semantics elements can be pretty confusing at the same time. There are numerous questions which may strike your mind while writing an HTML5 document. Most of those questions will move around the semantics of HTML5 elements. In this article, I will be answering one of the most common problems, “When to use section tag in an HTML5 document”?
W3C definition of section tag
Let us take a look at what the World Wide Web Consortium has to say about the section tag.
This is all they have said about the section element. Confusing, right? Let me tell you the same thing in a more straightforward language. So, let us move on to the main point of this article.
When to use the section element
Before discussing the section element and its significance, let us look at the article element, aside element, nav element which will give you a fair amount of idea as to when we should use section element and when we shouldn`t.
The article element should be used when the content is an independent part of the site that can be independent and be syndicated as an article or blog post.
Use the aside element in the article when the content is nearly related to the content of the page or the site itself, such as sidebars, annotations, footnotes, or associated site information.
Use the nav element for the content that is navigation. When you want to jump from say your home page to one of your other pages in the website or maybe in that same webpage nav tag helps you to do that easily.
The section element is a generic semantic element. It uses it when none of the other elements of the semantic container is appropriate. It is generally used to combine parts of a document into discrete units that can be described as related in some way. If you cannot explain the elements in the section in one or two sentences, then you probably should not use the element.
Instead, you must use the div element. The div element in HTML5 is a non-semantic container element. If the content you are trying to combine does not have a semantic meaning, but you still need to combine it for the design, then the div element is the appropriate element to use.
Note: If you are using the section element just for styling
purposes, then it is straightaway a wrong method. CSS takes care of all those
Let us look at an example code to get more clarity in context to section element. This example might also give you some idea regarding difference between article, nav and section element.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Semantic Element</title> </head> <body> <nav> <a href="">Menu</a> <a href="">Social</a> <a href="">About</a> <a href="">Contact Us</a> </nav> <article> <h1>HTML5 Sectioning Elements</h1> <p> Some text goes in here. </p> <section> <h2>Heading 1</h2> <p> Some text goes in here. </p> </section> <section> <h2>Heading 2</h2> <p> Some text goes in here. </p> </section> <section> <h2>Heading 3</h2> <p> Some text goes in here. </p> </section> </article> </body> </html>
Let us look at the output webpage of this example code.
The below figure says it all about the semantics of HTML5 elements. This is how any HTML5 document is to be structured.
Now that we know quite a deal about sectioning elements, what do you think is
it necessary for all the web developers to follow these set of rules and
regulations? My answer to this question is Hell yeah! If it is not intended to
be used then why is it being introduced to us in the first place, right? But
that`s not the only reason why it should be used. Using these elements has a
number of benefits, one of the most significant benefits is that it gives
specific areas of your page more semantic meaning, which allows computer
programs to identify critical elements like the main content and page
navigation. It is beneficial to applications like screen readers.
With proper sectioning comes proper structure. So as you can see, a personal judgment does come into play when deciding which semantics element is to be used when. It's certainly okay to use them in whatever manner you see fit. Sometimes, what is semantic to me may sound illogical to you. So, I want to make sure that any strategy you develop around these using the semantics elements is based solidly on the semantic reasoning behind using them. It all counts as an example of how we are improving our web standards by not only helping to improve the quality of our markup but the quality of our web pages as a whole.