¿Cual sería la diferencia entre un <div>
y un <section>
?
¿Cual es la utilidad de cada uno de ellos?
¿Cómo va?
Te cuento la principal diferencia si basa en su significado semántico, sirve para ayudar al SEO (posicionamiento en los buscadores).
En cuanto a propiedades, funcionan casi 100% igual, ambos son elementos de bloque y no tienen ninguna diferencia. Pero sirve para hacer mucho mas optimo la diferenciación de secciones dentro de tu sitio.
Antiguamente una sección de artículos se hubiera codeado de la siguiente manera:
<div class="productos">
<div class="producto">
<!-- Aqui iria el codigo de cada uno de tus productos -->
</div>
</div>
Como se puede notar esta todo separado por div's. Si los cambiamos por la nuevas etiquetas semánticas que nos provee HTML5 quedaría algo así:
<section class="productos">
<article class="producto">
<!-- Aqui el codigo de tu producto -->
</article>
</section>
Realmente tiene mucho mas sentido semántico, y tiene exactamente las mismas propiedades que el antiguo <div>
.
Existen otras etiquetas semánticas como <aside>
, <em>
, <strong>
, <main>
, etc...
Espero haberte ayudado.
Complementaré con esto:
SECTION
De acuerdo con la especificación un elemento section
esta destinado para:
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.
Que podemos traducir como:
El elemento
section
representa una sección genérica de un documento o aplicación. Unsection
en este contexto, es una agrupación temática de contenido, típicamente con un encabezado.
Te muestra como ejemplos:
DIV
Mientras que si del mismo recurso vemos que un 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.
Que se puede traducir como:
Un elemento
div
no tiene significado especial del todo, le puedes aplicar atributos como: clases, lang y title para darle un significado semántico a los elementos agrupados en el.
Entonces como ves:
divs
son contenedores genéricosAl final de todo, deberías usar
section
de acuerdo con su definición de existir sobredivs
.
La diferencia se aprecia al usarlos en un móvil.
Veras como el div
se pone en cualquier parte del HTML
El section
se pone a los lados.