¿Cual sería la diferencia entre un <div>
y un <section>
?
¿Cual es la utilidad de cada uno de ellos?
Stack Overflow en español es un sitio de preguntas y respuestas para programadores y profesionales de la informática. Solo te toma un minuto registrarte.
Regístrate para unirte a esta comunidad¿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.