10

¿Cual sería la diferencia entre un <div> y un <section>?

¿Cual es la utilidad de cada uno de ellos?

3 respuestas 3

9

¿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.

3

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. Un section en este contexto, es una agrupación temática de contenido, típicamente con un encabezado.

Te muestra como ejemplos:

  • capítulos
  • secciones numeradas de una tésis
  • Una página web puede tener su contenido dividido en varias secciones.

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:

  • Ambos sirven para agrupar contenido por semántica
  • Uno tiene un uso específico
  • Como ya te dijeron ambos son elementos en bloque
  • Los divs son contenedores genéricos
  • Te recomiendo leer este recurso para complementar el aspecto de usar etiquetas semánticas (y mas que la respuesta ahi, el enlace que existe dentro de la misma para profundizar)

Al final de todo, deberías usar section de acuerdo con su definición de existir sobre divs.

2

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.

3
  • Si no aplicas ninguna regla CSS, pasa lo que estoy respondiendo. De hecho es la unica diferencia entre DIV y SECTION. Informate
    – Srsole
    Commented el 23 jun. 2020 a las 13:33
  • Al igual que los dispositivos donde el espacio es reducido, el navegador opta ocultar section en vez de header o nav
    – Srsole
    Commented el 23 jun. 2020 a las 13:34
  • mi ejemplo es sencillo, pones un div y un section, sin CSS, y ves que ocurre lo que yo digo.
    – Srsole
    Commented el 23 jun. 2020 a las 13:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.