¿Qué etiquetas son semánticamente correctas?

HTML semántico incluye etiquetas como «header», «footer», «nav», «main», «article», «section», «aside», «figure», «time» para estructurar y dar significado al contenido web.

Además de <em> y <strong>, HTML5 ofrece una amplia gama de etiquetas semánticas diseñadas para describir con precisión el significado de diferentes partes de tu contenido. Usar la etiqueta correcta para el propósito adecuado es clave. Aquí tienes algunas de las más importantes:

Para estructurar la página:

<header>: Representa el encabezado de una sección o de la página. Suele contener logotipos, el título principal, menús de navegación.
<footer>: Representa el pie de una sección o de la página. Comúnmente incluye información de copyright, enlaces a términos y condiciones, datos de contacto.
<nav>: Define una sección con enlaces de navegación principales, ya sea dentro de la página o hacia otras páginas.
<main>: Especifica el contenido principal o central del documento. Solo debería haber un <main> por página y no debería estar anidado dentro de <article>, <aside>, <footer>, <header> o <nav>.
<article>: Representa una composición autocontenida en un documento, página, aplicación o sitio, que es distribuible o reutilizable de forma independiente (ej. una entrada de blog, un artículo de noticias, un comentario de foro).
<section>: Define una sección genérica de un documento o aplicación. Es un agrupador temático de contenido, típicamente con un encabezado.
<aside>: Contenido que está tangencialmente relacionado con el contenido principal que lo rodea (como una barra lateral, «pull quotes» o grupos de anuncios).

Para texto y contenido específico:

<figure> y <figcaption>: <figure> se usa para contenido independiente (diagramas, ilustraciones, fotos, listados de código) y <figcaption> proporciona un título o leyenda para ese <figure>.
<blockquote> y <cite>: <blockquote> para indicar una cita extensa de otra fuente. <cite> se usa para referenciar el título de una obra creativa (libro, película, poema) o el origen de la cita.
<time>: Para representar fechas, horas o duraciones. Puede incluir el atributo datetime con un formato legible por máquinas.
<address>: Proporciona información de contacto para el <article> o <body> más cercano.
<mark>: Representa texto marcado o resaltado por su relevancia en un contexto particular (como resultados de búsqueda).
<abbr>: Para abreviaturas o acrónimos, usando el atributo title para la expansión completa.

Para listas:

<ul>: Lista no ordenada.
<ol>: Lista ordenada.
<li>: Elemento de lista.
<dl>, <dt>, <dd>: Lista de definiciones (término-descripción).

Utilizar estas etiquetas según su propósito semántico, en lugar de depender de <div> y <span> genéricos, hace que tu contenido sea más comprensible para los navegadores, los motores de búsqueda y, fundamentalmente, para las tecnologías de asistencia como los lectores de pantalla.

¿Tienes alguna duda o pregunta?Envía el formulario y procuraré darle respuesta

Si creees que esto puede ser de utilidad a alguien más, pues... compártelo que es gratis 🙂

Más contenido interesante