Etiquetas semánticas HTML5: ¿Cuáles son las principales?

Descubre cómo mejorar la estructura y el significado de tu código HTML con las etiquetas semánticas en HTML5. Desde su definición hasta ejemplos prácticos, esta guía te llevará a comprender su importancia y cómo aplicarlas eficazmente en tus proyectos.

Sigue las palabras fuertes si quieres un resumen de todo el artículo.

1 ¿Qué son las etiquetas semánticas HTML5?

Las etiquetas semánticas son elementos del código HTML que definen el significado del contenido que engloban. Están diseñadas para proporcionar información adicional sobre dicho contenido, lo que facilita tanto a los desarrolladores como a los navegadores a comprender la estructura y el propósito de cada sección de una página web.

1.1. ¿Qué significa el termino semántica en el contexto de las etiquetas?

En el contexto de las etiquetas semánticas en HTML o en cualquier otro lenguaje de marcado, el término «semántica» se refiere al significado o la interpretación del contenido marcado. Es decir, la semántica se refiere a la información adicional que se proporciona sobre el propósito y la función de una parte específica del contenido.

Por ejemplo, cuando utilizas una etiqueta semántica como <header> en HTML, estás indicando que el contenido dentro de esa etiqueta se trata de la cabecera de una sección o de todo el documento. Del mismo modo, cuando utilizas <nav>, estás indicando que el contenido dentro de esa etiqueta se refiere a la navegación principal del sitio web.

1.2. ¿Y como se estructuraba una página web antes de estas etiquetas semánticas?

Antes de HTML5, los desarrolladores web a menudo usaban divs y spans genéricos para estructurar su contenido, lo que podía resultar en una semántica confusa y poco clara para los motores de búsqueda, lectores de pantalla y otros agentes de usuario. HTML5 introdujo una serie de nuevas etiquetas específicamente diseñadas para abordar este problema y mejorar la semántica de las páginas web.

1.3. Ejemplo de una página web con etiquetas HTML5 semánticas y sin ellas.

EJEMPLO 1 SIN HTML SEMÁNTICO:

En el ejemplo sin etiquetas semánticas, todo el contenido de la página web esta dividido con divs y spans para su estructuración, lo que no proporciona mucha información sobre el propósito de cada sección. Esto podría dificultar la comprensión del contenido por parte de los usuarios con discapacidades y los motores de búsqueda.

EJEMPLO 2 CON HTML SEMÁNTICO:

En cambio, en el ejemplo con etiquetas semánticas, se utilizan <header>, <nav>, <main>, <section> y <footer> para definir claramente la estructura y el propósito de cada sección. Esto hace que el código sea más legible y comprensible, tanto para los desarrolladores como para los agentes de usuario, mejorando así la accesibilidad y la optimización para motores de búsqueda.

1.4. Historia de las etiquetas semánticas HTML5:

Las etiquetas semánticas en HTML5 se introdujeron por primera vez en la especificación HTML5 Working Draft del 22 de enero de 2008. La especificación HTML5 fue publicada como una recomendación oficial del W3C (World Wide Web Consortium) el 28 de octubre de 2014.

Desde entonces, las nuevas etiquetas semánticas se han convertido en una parte fundamental del desarrollo web moderno y son compatibles con la mayoría de los navegadores web modernos. Es importante tener en cuenta que la especificación HTML5 es un documento vivo que está en constante evolución.

Para obtener la información más actualizada sobre las etiquetas semánticas en HTML5, puedes consultar la documentación oficial del W3C.

2. ¿Para que sirven las etiquetas semánticas HTML5?.

Las etiquetas semánticas HTML5 son una herramienta importante para mejorar la accesibilidad, el SEO y la usabilidad de las páginas web.

2.1. Mejoran el SEO de una página web:

Las etiquetas semánticas son una herramienta importante para el SEO (Search Engine Optimization) por las siguientes razones:

1. Mejoran la comprensión del contenido por parte de los motores de búsqueda:
   • Al proporcionar información adicional a los motores de búsqueda sobre el significado del contenido de una página web, esto ayuda a que navegadores como Google puedan comprender mejor y mas fácilmente dicho contenido.
2. Ayudan a mejorar el posicionamiento orgánico de una página web:
   • Al lograr que las etiquetas semánticas puedan permitir a los navegadores o motores de búsqueda comprender mejor la temática, la estructura y la organización de la página, esto puede mejorar su posicionamiento orgánico en sus páginas de resultados.
3. Facilitan la indexación de las páginas web:
   • Ayudan a los motores de búsqueda a indexar las páginas web de forma más precisa y eficiente. Esto significa que las páginas con etiquetas semánticas bien utilizadas tienen más probabilidades de aparecer en los resultados de búsqueda para las palabras clave relevantes.
4. Aumentan la relevancia:
   • Las páginas web con etiquetas semánticas bien utilizadas son más relevantes para los usuarios que buscan información específica. Esto puede aumentar el tiempo que los usuarios permanecen en la página, lo que a su vez también puede mejorar su posicionamiento en los resultados de búsqueda.
5. Mejoran la experiencia de usuario:
   • Las etiquetas semánticas pueden mejorar la experiencia de usuario al facilitar la navegación por la página web y la comprensión del contenido. Esto puede aumentar la tasa de clics (CTR) en los resultados de búsqueda, lo que también puede mejorar el posicionamiento de la página.

Ejemplos de etiquetas semánticas importantes para el SEO:

• <h1> para el título principal de la página web.
• <h2> para los subtítulos de la página web.
• <p> para los párrafos de texto.
• <ul> y <ol> para las listas.
• <strong> y <em> para resaltar palabras clave.
• <img> con el atributo alt para describir imágenes.
• <a> con el atributo href para enlazar a otras páginas web.

RESUMEN: Las etiquetas semánticas son una herramienta importante para el SEO que puede ayudarte a mejorar el posicionamiento de tu página web en los resultados de búsqueda.

2.2. Mejoran la accesibilidad:

Las etiquetas semánticas son una herramienta importante para mejorar la accesibilidad de las páginas web a usuarios con diferentes discapacidades.

¿POR QUÉ?

1. Proporcionan información adicional a los lectores de pantalla y otros dispositivos de asistencia: 
   • Las etiquetas semánticas permiten a los lectores de pantalla y otros dispositivos de asistencia comprender mejor la estructura y el contenido de una página web. Esto facilita la navegación y el acceso a la información para personas con discapacidades visuales, auditivas o cognitivas.
2. Permiten una mejor organización del contenido de una forma más clara y lógica: 
   • Esto facilita la comprensión del contenido para usuarios con discapacidades cognitivas o que utilizan lectores de pantalla.
3. Permiten una navegación más eficiente: 
   • Las etiquetas semánticas permiten a los usuarios con discapacidades navegar por la página web utilizando atajos de teclado específicos para cada tipo de etiqueta.

Ejemplos de cómo las etiquetas semánticas pueden mejorar la accesibilidad:

• Usar la etiqueta <h1> para el título principal de la página web.
• Usar la etiqueta <nav> para la sección de navegación del sitio web.
• Usar la etiqueta <main> para el contenido principal de la página web.
• Usar la etiqueta <section> para cada sección independiente dentro del contenido principal.
• Usar la etiqueta <article> para cada artículo independiente dentro de una sección.

RESUMEN. Las etiquetas semánticas son una herramienta importante para mejorar la accesibilidad de las páginas web y permitir que todos los usuarios puedan acceder a la información de forma equitativa.

2.3. Mejoran la usabilidad:

Las etiquetas semánticas también pueden mejorar la usabilidad de las páginas web, principalmente por las siguientes razones:

• Mejoran la comprensión del contenido: Las etiquetas semánticas ayudan a los usuarios a comprender mejor el contenido de la página web al proporcionar información sobre la estructura y el significado del contenido.
• Facilitan la navegación: Las etiquetas semánticas permiten a los usuarios navegar por la página web de forma más fácil y eficiente al identificar las diferentes secciones de la página.

3. Clasificación y tipos de etiquetas semánticas HTML5.

Las etiquetas semánticas en HTML5 pueden clasificarse en varias categorías según su función y el propósito para el que fueron diseñadas. A su vez, dentro de cada clasificación dejo un detalle de las etiquetas mas usadas con una definición y un ejemplo de como implementarlas en la practica:

3.1. Etiquetas semánticas estructurales:

Las etiquetas semánticas estructurales en HTML5 son aquellas que se utilizan para definir la estructura general y la organización del contenido de una página web. Las más importantes son:

1. <header>:
   • Define la cabecera de una sección o de todo el documento. Se utiliza típicamente para incluir elementos como logotipos, títulos y enlaces de navegación principales.
2. <footer>:
   • Define el pie de una sección o de todo el documento. Se utiliza generalmente para incluir información de copyright, enlaces a páginas relacionadas y otra información de pie de página.
3. <nav>:
   • Define una sección de navegación, como un menú principal de navegación. Se utiliza para agrupar enlaces de navegación.
4. <main>:
   • Define el contenido principal de la página. Debería contener el contenido principal de la página, excluyendo los encabezados, pies de página y áreas laterales.
5. <section>:
   • Define una sección de contenido independiente. Puede contener su propio encabezado, contenido y pie de página. Se utiliza para agrupar contenido relacionado.
6. <article>:
   • Define un contenido autónomo e independiente que puede ser reutilizable y distribuible por sí mismo. Puede contener su propio encabezado, contenido y pie de página. Se utiliza para contenido autocontenido, como publicaciones de blog, artículos de noticias, etc.
7. <aside>:
   • Define contenido secundario o relacionado que está separado del contenido principal pero aún así relacionado con él. Se utiliza típicamente para barras laterales, anuncios, notas y otros contenidos complementarios.

Ejemplo de su uso:

<header>
  <h1>Mi sitio web</h1>
  <nav>
    <a href="#">Inicio</a>
    <a href="#">Acerca de</a>
    <a href="#">Contacto</a>
  </nav>
</header>

<main>
  <section>
    <h2>Título de la sección</h2>
    <p>Contenido de la sección.</p>
  </section>

  <section>
    <h2>Otro título de sección</h2>
    <p>Más contenido de la sección.</p>
    <article>
      <h3>Título del artículo</h3>
      <p>Contenido del artículo.</p>
    </article>
  </section>
</main>

<aside>
  <h3>Barra lateral</h3>
  <p>Contenido de la barra lateral.</p>
</aside>

<footer>
  <p>Copyright &copy; 2023</p>
</footer>
Lenguaje del código: HTML, XML (xml)

3.2. Etiquetas semánticas de contenido:

Las etiquetas semánticas de contenido son elementos del código HTML que definen el significado del contenido textual que engloban. Las más importantes son:

• <h1> a <h6>: Definen encabezados de diferentes niveles, siendo <h1> el más importante y <h6> el menos importante.
• <p>: Define un párrafo de texto.
• <ul>: Define una lista sin orden.
• <ol>: Define una lista ordenada.
• <li>: Define un elemento dentro de una lista.
• <strong>: Define texto importante o resaltado.
• <em>: Define texto con énfasis.
• <pre>: Define un bloque de texto preformateado.
• <abbr>: Define una abreviatura.
• <cite>: Define una cita textual.
• <blockquote>: Define una cita larga.
• <img>: Define una imagen.
• <a>: Define un enlace a otra página web o recurso.

Ejemplo de su uso:

<h1>Título de la página</h1>

<p>Este es un párrafo de texto.</p>

<h2>Subtítulo</h2>

<ul>
  <li>Elemento de la lista 1</li>
  <li>Elemento de la lista 2</li>
  <li>Elemento de la lista 3</li>
</ul>

<p><strong>Texto importante</strong></p>

<p><em>Texto con énfasis</em></p>

<img src="imagen.jpg" alt="Descripción de la imagen">

<a href="https://www.ejemplo.com">Enlace a otra página web</a>
Lenguaje del código: HTML, XML (xml)

3.3. Etiquetas semánticas de interacción:

Las etiquetas semánticas de interacción son elementos del código HTML que definen el comportamiento interactivo de ciertos elementos en una página web. Las más importantes son:

• <button>: Define un botón que puede ser pulsado por el usuario para realizar una acción.
• <input>: Define un campo de entrada de texto, como un cuadro de texto o un campo de contraseña.
• <select>: Define un menú desplegable con opciones que el usuario puede seleccionar.
• <label>: Define una etiqueta para un campo de entrada, como un nombre o una dirección de correo electrónico.
• <form>: Define un formulario que puede ser enviado por el usuario para enviar datos al servidor.
• <area>: Define un área sensible dentro de una imagen que puede ser pulsada por el usuario.
• <link>: Define un enlace a un recurso externo, como una hoja de estilo o un script.

Ejemplo de su uso:

<button onclick="alert('Hola mundo!')">Clic aquí</button>

<input type="text" name="nombre" placeholder="Introduce tu nombre">

<select name="pais">
  <option value="es">España</option>
  <option value="mx">México</option>
  <option value="ar">Argentina</option>
</select>

<label for="email">Correo electrónico:</label>
<input type="email" name="email" id="email">

<form action="enviar.php" method="post">
  <input type="text" name="nombre">
  <input type="submit" value="Enviar">
</form>


<map name="mapa">
  <area shape="rect" coords="0,0,100,100" href="https://www.ejemplo.com">
</map>

<link rel="stylesheet" href="estilo.css">
Lenguaje del código: HTML, XML (xml)

Otras etiquetas semánticas HTML5 menos usadas pero igualmente importantes:

Además de estas etiquetas, HTML5 también incluye nuevas etiquetas para:

• Figuras e imágenes: <figure> y <figcaption>
• Detalles y resúmenes: <details> y <summary>
• Diálogos: <dialog>
• Contenido de audio y video: <audio> y <video>
• Marcadores de tiempo: <time>
• Progresos: <progress>
• Etiquetas de metadatos: <meta> con nuevos atributos

4. Recomendaciones para usar correctamente las etiquetas semánticas HTML5.

Para lograr alcanza los beneficios que nos otorgan estas etiquetas, aquí dejo algunas recomendaciones generales para usarlas correctamente:

4.1. Usa las etiquetas semánticas correctas para el contenido:

• Elige la etiqueta que mejor describa el significado del contenido que está encapsulando.
• No uses etiquetas semánticas para fines de presentación.
• No uses etiquetas semánticas para contenido que no sea relevante.

4.2. Usa las etiquetas semánticas de forma consistente:

• Usa la misma etiqueta para el mismo tipo de contenido en toda la página web.
• No uses diferentes etiquetas para el mismo tipo de contenido.

4.3. Usa las etiquetas semánticas anidadas correctamente:

• Anida las etiquetas semánticas de forma lógica y significativa.
• No anides etiquetas semánticas de forma que no tenga sentido.

4.4. Usa los atributos de las etiquetas semánticas correctamente:

• Usa los atributos para proporcionar información adicional sobre el significado del contenido.
• No uses los atributos para fines de presentación.

4.5. Valida tu código HTML:

• Asegúrate de que tu código HTML sea válido para asegurarte de que las etiquetas semánticas se interpretan correctamente.

4.6. Documenta tu código HTML:

• Documenta tu código HTML para que otros desarrolladores puedan entender cómo se están usando las etiquetas semánticas.

4.7. Mantente actualizado con las últimas especificaciones:

• Mantente actualizado con las últimas especificaciones de HTML5 para asegurarte de que estás usando las etiquetas semánticas de forma correcta

Siguiendo estas recomendaciones, podrás aprovechar al máximo las etiquetas semánticas de HTML5 y crear páginas web bien estructuradas, accesibles y optimizadas para los motores de búsqueda.

PREGUNTAS FRECUENTES Y RESUMEN