HTML semántico

Una página dividida en partes

La mayoría de las páginas web comparten una organización parecida:

┌─────────────────────────┐
│ CABECERA                │
├─────────────────────────┤
│ NAVEGACIÓN               │
├─────────────────────────┤
│ CONTENIDO PRINCIPAL      │
├─────────────────────────┤
│ PIE DE PÁGINA            │
└─────────────────────────┘

HTML tiene elementos pensados específicamente para describir estas partes — no solo para agruparlas visualmente, sino para decir qué función cumple cada una:

• <header> — cabecera de la página (o de una sección)
• <nav> — un bloque de enlaces de navegación
• <main> — el contenido principal, único por página
• <footer> — pie de página

div vs. elementos semánticos

<div> permite agrupar contenido, pero no dice nada sobre qué significa ese contenido — es un contenedor genérico. Cuando existe un elemento semántico apropiado (header, nav, main, footer, y otros como article, section, aside), conviene usarlo en vez de un div — comunica la misma estructura tanto a otras personas leyendo el código como a tecnologías de asistencia.

Esto no es una regla absoluta: <div> sigue siendo necesario para agrupaciones que no tienen un significado semántico particular (por ejemplo, un contenedor puramente para aplicar un estilo visual).