html – What is the difference between a<div> and a<section> ?

Question:

What would be the difference between a <div> and a <section> ?

What is the usefulness of each of them?

Answer:

How's it going?

I will tell you the main difference if it is based on its semantic meaning, it serves to help SEO (search engine positioning).

In terms of properties, they work almost 100% the same, both are block elements and do not have any difference. But it serves to make the differentiation of sections within your site much more optimal.

Formerly an article section would have rubbed shoulders 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 really makes a lot more semantic sense, and it has exactly the same properties as the old <div> .

There are other semantic tags like <aside> , <em> , <strong> , <main> , etc …

I hope I've helped.

Scroll to Top