I tell you the main difference if based on its semantic meaning , it serves to help SEO (search engine positioning).
As for properties, they work almost 100% the same, they are both block elements and they don't have any difference. But it serves to make the differentiation of sections within your site much more optimal.
In the past, an article section would have been coded as follows:
<div class="productos">
<div class="producto">
<!-- Aqui iria el codigo de cada uno de tus productos -->
</div>
</div>
As you can see, everything is separated by div's. If we change them for the new semantic tags that HTML5 provides us, it would look something like this:
<section class="productos">
<article class="producto">
<!-- Aqui el codigo de tu producto -->
</article>
</section>
It actually makes much more semantic sense , and has exactly the same properties as the old one <div>.
There are other semantic labels such as <aside>, <em>, <strong>, <main>, etc...
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.
Which we can translate as:
The element sectionrepresents a generic section of a document or application. A sectionin this context is a thematic grouping of content, typically with a header.
It shows you as examples:
chapters
numbered sections of a thesis
A web page can have its content divided into several sections.
DIV
While if from the same resource we see that a div:
The div element has no special meaning at all. It represents its children. It can be used with the class, lang, and title attributes to mark up semantics common to a group of consecutive elements. It can also be used in a dl element, wrapping groups of dt and dd elements.
Which can be translated as:
An element divhas no special meaning at all, you can apply attributes such as: classes, lang and title to give a semantic meaning to the elements grouped in it.
I recommend you read this resource to complement the aspect of using semantic tags ( and more than the answer there, the link that exists within it to deepen )
At the end of it all, you should use sectionaccording to their definition of exist on divs.
How's it going?
I tell you the main difference if based on its semantic meaning , it serves to help SEO (search engine positioning).
As for properties, they work almost 100% the same, they are both block elements and they don't have any difference. But it serves to make the differentiation of sections within your site much more optimal.
In the past, an article section would have been coded as follows:
As you can see, everything is separated by div's. If we change them for the new semantic tags that HTML5 provides us, it would look something like this:
It actually makes much more semantic sense , and has exactly the same properties as the old one
<div>
.There are other semantic labels such as
<aside>
,<em>
,<strong>
,<main>
, etc...I hope I've helped.
I will supplement with this:
SECTION
According to the specification an element
section
is intended to:Which we can translate as:
It shows you as examples:
DIV
While if from the same resource we see that a
div
:Which can be translated as:
So as you see:
divs
are generic containersThe difference is appreciated when using them on a mobile.
You will see how
div
it is placed anywhere in the HTMLHe
section
stands on the sides.