The <div> is one of the most generic elements in HTML, but is it okay to use it always? Well, it depends on our needs because nowadays we have more items with meaning.
About the <section> Element
The <section> element is an HTML5 element that has a general semantic meaning, which is processable by screen readers, search engines, and so on. It represents a coherent group. Usually, it has a heading <h1>-<h6> element, which identifies the section.
<section> <h2>Similar Posts</h2> <article></article> ... </section>
You can find more information on the official documentation page.
About the <div> Element
In contrast with the <section> the <div> doesn’t have any meaning on its own. We can give them classes or ID (to be more understandable to the developers), but semantically we can’t add anything.
We can use it to build our layout:
<div class="container"> <div class="row"> <div class="col-12 col-lg-8"></div> <div class="col-12 col-lg-4"></div> </div> </div>
With the new HTML5 elements the generic items – like the <div> – should be our last resort. We have to try first to use the semantic ones – like <main>, <aside> and so on – and just after reaching out to the <div>.
The Difference Between the Two Elements
The main difference comes from the semantic. If you have a part in your site or application which has its logic – like a similar post section in case of a blog – you need to use the <section> tag to declare it. If you only need to create an element because of the layout – like your grid – or any visually, then use the <div>.
When to Use Which?
As mentioned, use <section> when it is logically correct to make a part of your site or app readable to the assistive technology. It is an excellent approach if you keep in mind the screen readers.
Think what part of your page can be a logical section which can’t be represented any other HTML5 element with meaning. E.g., if you have a sidebar and you want to display widget-like blocks, it is a good occasion to use sections. Declare them with a heading so it will be understandable and navigatable to those who use screen readers. Visually it is acceptable most of the time but in this way can achieve more.
<aside> <section class="widget"> <h2 class="widget__title">Our Title</h2> ... </section> </aside>
Use the Landmark Elements
Please note that this article is just a comparison between the <section> and <div> element. If you want to build a more accessible HTML page, you have to use the HTML landmarks.
Need a web developer? Maybe we can help, get in touch!