How to use the semantic element section - HTML 5

In today’s post, we will see the importance of the semantic element section, when to use it, and also good semantic HTML and SEO practices.

How to use the semantic element section?

The first aspect of the section is to give semantics to elements that were used before it to represent sections of the page, such as divs.

So big divs that were meaningless in the code, just serving as big containers for sections of the site.

Now they can have their tag changed to a section and thus add semantic value to our web page.

The <section> tag usually represents a generic section of code that often contains a title.

So the correct thing would be to identify a section with a header, that is, with tags between <h1> to <h6>.

I wanted to draw your attention to a point, which is documented on the MDN (link at the end of the post).

You don’t necessarily need to substitute any generic div container for a section.

And yes only the larger sections of your code OR that have a specific logic/sense that was housed in a div.

I’ll illustrate in two situations, one for each case:

Blog section in a site’s home is inside a div: replace this div with the section tag;
Each post in this section is in a div: leave the div element as it is a generic section;

Using section in practice

The semantic element section has an easy representation in practice, unlike some other HTML5 elements.

In this one we can simply create a new section for our website, for example:

<section>
  <h1>Best Products</h1>
  <div>
   <span>Product 1</span>
   <p>Description</p>
  </div>
  <div>
   <span>Product 2</span>
   <p>Description</p>
  </div>
  <div>
   <span>Product 3</span>
   <p>Description</p>
  </div>
</section>

Here we merge section and div for a better understanding

The <section> tag would be for the container of the best products on our page, that is, it has a great weight value or an extra importance to be just a div.

But the display of products can be a div, as it’s just a generic representation of a box for the products, cool right? 😀

Conclusion

We can conclude that we shouldn’t replace every div with a section

We have to identify the value that this element represents on the page.

For example:

A div with a context for the page and which houses a content logic should become a section;

A generic div can continue as a div;

And that’s it for today, until the next post!