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.

Definition of section tag by W3C
Fig.1 - Definition of section tag by W3C

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.

Article Element

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.

Aside element

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.

Nav element

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.

Secion element

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.

Div 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 things.
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.

Semantic Element Code Output
Fig.2 - Semantic Element Code Output

The below figure says it all about the semantics of HTML5 elements. This is how any HTML5 document is to be structured.

HTML5 Page Layout
Fig.3 - HTML5 Page Layout

Conclusion

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.

Author : Satyam Kumar -


You will also like:


Scala Function Literals

What are function literals? Learn Scala function literals from the expert.

Learning Journal

When to use <figure>

The why and where of figure tag in HTML5.

Learning Journal

Referential Transparency

Referential Transparency is an easy method to verify the purity of a function.

Learning Journal

Scala named arguments

Learn about named arguments and default values in Scala functions with examples.

Learning Journal

What is Programming and Programming Language

"PROGRAMMING" is the word which we all come across quite often. Let us see what that means.

Learning Journal