HTML5 semántico: elementos semánticos frente a div soup

Sopa de divs es una página construida por completo con elementos <div> y <span>. Requiere nombres de clase para comunicar la estructura, los lectores de pantalla no pueden interpretarla sin esas clases y no transmite ningún significado a los motores de búsqueda.

Sustituya los divs sin significado por elementos semánticos que comuniquen su propósito. Ahora la estructura se explica por sí misma y se entiende sin ningún CSS.

Los elementos de encabezado (h1-h6) crean un esquema del documento. Los usuarios de lectores de pantalla navegan mediante los encabezados. La tecnología de asistencia anuncia el nivel del esquema. Mantenga una jerarquía lógica: h1 para el título de la página, h2 para las secciones principales y h3 para las subsecciones.

El elemento <time> marca fechas y horas con un atributo datetime legible por máquinas. Los motores de búsqueda entienden las fechas de eventos y los lectores de pantalla pueden anunciar las fechas formateadas.

El elemento <address> contiene la información de contacto del artículo más cercano o del documento. No tiene que ser una dirección postal: también cuentan el email, el teléfono y los identificadores de redes sociales.

<figure> contiene contenido independiente, como imágenes, gráficos, ejemplos de código o vídeos. <figcaption> proporciona un pie de figura vinculado semánticamente a la figura.

<blockquote> marca una cita extensa. Use el atributo cite para la URL de origen. El elemento <cite> marca el título de una obra creativa, como un libro, un artículo o una película.

La combinación <details> + <summary> crea un widget nativo de acordeón o revelación sin JavaScript. El navegador gestiona automáticamente la apertura y el cierre, la interacción con el teclado y la accesibilidad.

<mark> representa texto resaltado como referencia, por ejemplo, una coincidencia en los resultados de búsqueda. Semánticamente es diferente de aplicar estilo amarillo al texto con CSS.

Rodee las abreviaturas y los acrónimos con <abbr> y proporcione el término completo en el atributo title. Los lectores de pantalla y los navegadores muestran la forma desarrollada al usuario cuando pasa el cursor.

Ambos siguen siendo útiles. <div> es la opción adecuada para un contenedor de bloque genérico que no tiene significado semántico, como los contenedores de diseño o las raíces de componentes en React. Use <span> como punto de enganche para estilos en línea sin significado semántico.

¿Qué elemento HTML crea un widget nativo de revelación contraíble sin necesidad de JavaScript?

Sustituya la sopa de divs por elementos semánticos: header, nav, main, article, section, aside, footer. Use time para las fechas, figure/figcaption para contenido multimedia, details/summary para acordeones y mark para resaltados. Reserve div y span para contenedores de diseño sin significado semántico.