Curso HTML 10.1: Diferencia entre <div> y elementos semánticos

En este apartado profundizaremos en las características, ventajas y casos de uso de la etiqueta genérica <div> frente a los elementos semánticos introducidos en HTML5 (como <header>, <nav>, <article>, <section>, <aside> o <footer>). Analizaremos cómo influyen en la accesibilidad, SEO y mantenibilidad de una página web.

1. ¿Qué es la etiqueta <div>?

• Contenedor genérico sin significado semántico.
• Se utiliza principalmente para aplicar estilos (con CSS) y organizar el layout.
• No aporta información extra al navegador, motores de búsqueda o tecnologías asistivas.

2. ¿Qué son los elementos semánticos?

Los elementos semánticos describen el propósito de su contenido. Proveen significado a la estructura del documento y facilitan la comprensión tanto a humanos como a máquinas.

• <header>: Encabezado de sección o página.
• <nav>: Bloque de navegación principal.
• <main>: Contenido principal de la página.
• <article>: Contenido autónomo, por ejemplo una entrada de blog.
• <section>: Sección genérica de contenido temático.
• <aside>: Contenido relacionado pero no esencial (barra lateral, widgets).
• <footer>: Pie de sección o página.

3. Comparativa en tabla

4. Ventajas de usar elementos semánticos

• Mejor experiencia de usuario con tecnologías asistivas.
• Estructura de documento más coherente y fácil de entender.
• Incrementa la relevancia de contenido para buscadores.
• Reduce la necesidad de clases extra para identificar secciones.

5. Cuándo usar <div> y cuándo semánticos

• Usar elementos semánticos siempre que el bloque tenga significado: encabezados, navegación, artículos, etc.
• Reservar <div> para contenedores de puro diseño (grillas, contenedores fluidos, wrappers sin semántica propia).
• Si un elemento semántico no existe (por ejemplo, un widget personalizado), usar <div> acompañado de role y ARIA si es necesario.

6. Ejemplos comparativos

6.1. Uso excesivo de <div>

  
Mi Blog
  

    

      
Inicio
      
Artículos
      
Contacto
    
  



  

    
Título del Artículo
    

      
Contenido del artículo...
    
  



  
© 2024 Mi Blog

6.2. Misma estructura usando semántica

  
Mi Blog
  



  

    
Título del Artículo
    
Contenido del artículo...
  

7. Buenas prácticas y consideraciones finales

• Siempre que exista un elemento semántico adecuado, usarlo en vez de <div>.
• Complementar con atributos ARIA cuando sea necesario para enriquecer la accesibilidad.
• Mantener una jerarquía clara de encabezados (<h2>, <h3>, etc.) para la estructura de contenido.
• Evitar contenedores innecesarios; cada elemento debe tener un propósito.

De este modo, elegir etiquetas semánticas aporta significado, claridad y accesibilidad, mientras que <div> queda reservado para casos en que no exista un elemento HTML5 específico que describa la función del contenido.