Aprende a usar HTML Semántico
Bienvenidos a nuestra guía completa sobre HTML semántico. En este artículo profundizaremos en qué es el HTML semántico, cuáles son sus principales etiquetas, los beneficios que aporta, cómo optimizar el SEO con HTML semántico y consejos prácticos para implementar una correcta maquetación web.
Índice
- 1. Introducción a HTML Semántico
- 2. Principales etiquetas semánticas
- 3. Etiquetas para contenidos específicos
- 4. Beneficios del HTML Semántico
- 5. HTML Semántico para SEO
- 6. Consejos de Maquetación con HTML Semántico
- 7. Ejemplos prácticos de HTML Semántico
- 8. Validación de HTML Semántico
- 9. Conclusión
- 10. Preguntas Frecuentes
Introducción a HTML Semántico
El HTML semántico se refiere al uso de las etiquetas HTML para reforzar la semántica, el significado y la estructura del contenido web.
Tradicionalmente, las páginas web se creaban con etiquetas genéricas como <div> y <span> para dividir el contenido en secciones y elementos. El problema es que estas etiquetas no aportan ningún significado sobre su propósito y contenido.
El HTML semántico llega para solucionar esto. Introduce una serie de nuevas etiquetas que permiten definir de forma clara diferentes partes de un documento web: header, footer, nav, section, etc. Al usar etiquetas semánticas podemos crear páginas con código HTML más limpio, estructurado y con significado. Esto beneficia a varios aspectos:
- SEO: Las etiquetas semánticas permiten a los motores de búsqueda indexar y entender mejor el contenido.
- Accesibilidad: Facilita a lectores de pantalla y otras tecnologías acceder a la información.
- Desarrollo: El código es más legible y fácil de mantener.
En definitiva, el HTML semántico debe formar parte de cualquier desarrollo web moderno. A continuación veremos en detalle las principales etiquetas que tenemos disponibles.
Principales etiquetas semánticas
Veamos cuales son las etiquetas HTML semánticas más importantes que debes conocer:
Etiqueta Header
El elemento <header> representa un contenedor para contenido introductorio o un conjunto de enlaces de navegación. Se suele utilizar inmediatamente después de la etiqueta <body> para el encabezado principal de la página.
<header>
<h1>Título del Sitio Web</h1>
<nav>
...
</nav>
</header>Etiqueta Nav
El elemento <nav> se utiliza para representar una sección que contiene enlaces de navegación principales. Es común verlo dentro de <header> pero puede estar en cualquier parte de la página.
<nav>
<ul>
<li><a href="/">Inicio</a></li>
<li><a href="/nosotros">Nosotros</a></li>
<li><a href="/tienda">Tienda</a></li>
</ul>
</nav>Etiqueta Aside
La etiqueta <aside> define contenido ligero relacionado con el contenido principal, como publicidad, enlaces afines, citas, etc. Se puede ubicar antes o después del contenido principal.
<aside>
<p>Comparte este artículo en:</p>
<share-buttons></share-buttons>
</aside>
Etiqueta Section
El elemento <section> representa una agrupación temática de contenido. Se puede utilizar varias veces en una página para dividir secciones principales.
<section id="intro">
<h2>Introducción</h2>
<p>Bienvenidos a nuestro sitio...</p>
</section>
<section id="news">
<h2>Noticias</h2>
<article>
...
</article>
</section>Etiqueta Article
La etiqueta <article> especifica contenido que puede existir de forma independiente, como publicaciones en un blog, artículos o posts. Suele estar anidada dentro de <section>.
<section>
<article>
<h2>Título del Post</h2>
<p>Contenido del artículo...</p>
</article>
</section>Etiqueta Footer
El elemento <footer> se utiliza para representar el pie de página con información sobre el autor, derechos, contacto, mapa del sitio, etc. Es común tener uno al final de <body>.
<footer>
<p>© 2023 Mi Sitio. Todos los derechos reservados.</p>
<address>
Contacto: <a href="mailto:[email protected]">[email protected]</a>
</address>
</footer>Etiqueta Main
La etiqueta <main> define el contenido principal de la página, el cual debe ser único por página. Otras etiquetas como <header>, <footer> o <aside> van fuera de <main>.
<main>
<h1>Título del Contenido Principal</h1>
<p>Contenido principal de la página...</p>
</main>Como ves, una página web típica quedaría con una estructura semántica así:
<header>...</header>
<main>
<section>...</section>
<article>...</article>
</main>
<aside>...</aside>
<footer>...</footer>
Esto permite identificar claramente las diferentes secciones que componen el documento.
Etiquetas para contenidos específicos
Otras etiquetas semánticas interesantes para destacar tipos de contenidos concretos:
Etiqueta Figure
La etiqueta <figure> representa contenido auto-contenido como ilustraciones, diagramas, fotos, listados, etc.
<figure>
<img src="imagen.png">
<figcaption>Descripción de la imagen</figcaption>
</figure>Etiqueta Figcaption
El elemento <figcaption> define una leyenda o pie de foto para un <figure>. Se ubica como hijo directo de <figure>.
<figure>
<img src="imagen.png">
<figcaption>Descripción de la imagen</figcaption>
</figure>Mark
La etiqueta <mark> resalta texto relevante o marcado. Se verá de forma diferente según el navegador, generalmente en color amarillo.
<p>Esta frase contiene un texto <mark>marcado</mark> en amarillo.</p>Time
El elemento <time> representa un tiempo o fecha específicos. Ayuda a los motores de búsqueda a entender mejor el contenido.
<time datetime="2017-07-15">15 de Julio de 2017</time>
Details
La etiqueta <details> crea un widget que el usuario puede abrir y cerrar para ocultar o mostrar información adicional.
<details>
<summary>Leer más...</summary>
<p>Contenido adicional oculto que se puede mostrar...</p>
</details>Summary
El elemento <summary> define el título clicable que abre y cierra el widget <details>. Va como hijo directo de <details>.
<details>
<summary>Leer más...</summary>
<p>Contenido adicional oculto...</p>
</details>Beneficios del HTML Semántico
Utilizar correctamente las etiquetas semánticas de HTML aporta beneficios importantes en diferentes aspectos:
SEO Semántico
Las etiquetas semánticas permiten a los motores de búsqueda como Google entender mucho mejor el contenido y detectar rápidamente información clave como: título, menú de navegación, artículos, secciones, etc. Esto mejorará el SEO de la web y el posicionamiento en resultados de búsqueda.
Accesibilidad Web
El HTML semántico mejora la accesibilidad del sitio web. Los lectores de pantalla utilizados por personas con discapacidad visual pueden navegar la página de forma más efectiva al identificar rápidamente secciones, artículos, menú, etc.
Lectores de Pantalla
Los lectores de pantalla son programas que interpretan el contenido de la web y lo transforman en audio para personas con problemas de visión. Al incorporar etiquetas semánticas que identifican claramente contenidos, estas herramientas funcionan de forma más precisa.
Por ejemplo, un lector de pantalla leerá el contenido de <article> de forma distinta al de <aside>, porque tiene un significado diferente según su etiqueta.
HTML Semántico para SEO
Dada la importancia del HTML semántico para el SEO, conviene tener en cuenta una serie de recomendaciones:
- Utiliza siempre etiquetas semánticas para estructurar la información. Olvidate de
<div>y<span>.- Añade el atributo
langen la etiqueta<html>para indicar el idioma de la página.- Los elementos
<header>,<nav>y<footer>son muy útiles para los rastreadores web. Utilízalos para representar estas secciones.- La etiqueta
<h1>debe reservarse para el título principal de la página. Destaca el resto de encabezados con<h2>,<h3>, etc.- Incluye
<strong>y<em>para resaltar palabras clave y establecer énfasis donde sea necesario.- Usa
<figure>y<figcaption>para contenido multimedia como imágenes o vídeos.- El elemento
<time>es ideal para fechas y horas importantes.- Etiquetas como
<main>,<section>,<article>, etc son claves para destacar contenido relevante.
En definitiva, un uso correcto de las etiquetas semánticas de HTML5 ayudará a mejorar el SEO de cualquier sitio web moderno.
Consejos de Maquetación con HTML Semántico
A la hora de maquetar un sitio web con HTML semántico, ten en cuenta estos consejos:
- El contenido principal debe ir dentro de
<main>, el resto fuera: header, footer, aside, etc. Solo puede haber un elemento<main>por página.- Utiliza
<section>para dividir secciones principales dentro de<main>. Por ejemplo, introducción, noticias, contacto, etc.- Dentro de cada
<section>, usa<article>para separar contenidos independientes como posts o artículos de blog.- El header principal debe ir justo después de
<body>dentro de<header>, y el footer al final dentro de<footer>.- Ubica el menú de navegación en un
<nav>dentro de<header>. Otra opción es un<nav>en el sidebar.- Para sidebar con enlaces, publicidad u otro contenido secundario usa
<aside>.- Si incluyes galerías o listados de imágenes, utiliza
<figure>con su<figcaption>.- No abuses de
<div>. En su lugar usa etiquetas semánticas donde sea posible.
Ejemplos prácticos de HTML Semántico
Veamos unos ejemplos de HTML semántico en acción:
<header>
<h1>Mi Sitio</h1>
<nav>
...
</nav>
</header>
<main>
<h2>Bienvenidos</h2>
<p>Contenido principal de introducción...</p>
<section id="blog">
<h3>Blog</h3>
<article>
<h4>Título del Post</h4>
<p>Contenido del artículo...</p>
</article>
</section>
</main>
<aside>
<h4>Barra Lateral</h4>
...
</aside>
<footer>
<p>Copyright 2021 Mi Sitio</p>
</footer>Otro ejemplo:
<header>
...
</header>
<main>
<section id="hero">
...
</section>
<section id="news">
<article>
<header>
<h2>Título Noticia</h2>
<p>Publicado el <time datetime="2021-05-15">15 Mayo</time></p>
</header>
<p>Contenido...</p>
</article>
</section>
</main>
<footer>
...
</footer>Como ves, las etiquetas semánticas permiten estructurar el contenido de forma clara y consistente.
Validación de HTML Semántico
Para asegurarte de que estás implementando correctamente el HTML semántico, valida tu código con alguna de estas herramientas:
- W3C Validator: El validador de HTML de la W3C comprueba que el código no tenga errores y sea válido.
- Google Rich Results Test: Prueba de Google para comprobar que las páginas se indexan correctamente como contenido enriquecido.
- Google Mobile-Friendly Test: Comprueba que una página sea responsive y móvil-friendly para Google.
- WAVE Evaluation Tool: Evalúa la accesibilidad del sitio detectando errores y alertas.
Solucionar cualquier problema reportado por estas herramientas te ayudará a tener un HTML semántico optimizado tanto para SEO como para usabilidad.
Conclusión
El HTML semántico ha llegado para quedarse y se ha convertido en una pieza clave del desarrollo web moderno.
Usar etiquetas con significado en lugar de <div> no sólo mejora el SEO y la accesibilidad, también hace que el código sea más legible y fácil de mantener.
En esta guía hemos repasado las principales etiquetas semánticas que tienes a tu disposición, los beneficios que aportan, recomendaciones para optimizar el SEO y consejos prácticos para crear una maquetación semántica en tus proyectos web.
¡Espero que esta guía completa sobre HTML semántico te resulte útil y puedas sacarle el máximo partido!
Preguntas Frecuentes
Sí, la etiqueta div sigue siendo válida en HTML5 pero es recomendable utilizar etiquetas semánticas más descriptivas cuando sea posible. div debe usarse únicamente como último recurso cuando no haya una etiqueta semántica que se ajuste al contenido.
Sí, las principales etiquetas semánticas de HTML5 como header, nav, section, etc. son compatibles con los navegadores modernos. Algunas etiquetas muy nuevas pueden no ser soportadas por versiones antiguas de navegadores.
Sí, se pueden utilizar múltiples etiquetas header y footer en una página.
Existen varias herramientas que te permiten validar tu HTML y verificar el uso adecuado de etiquetas semánticas, como el Validador de HTML de W3C, el test de resultados enriquecidos de Google, la herramienta de evaluación WAVE y Chrome DevTools.
No es obligatorio. Las etiquetas DIV pueden seguir utilizándose para ciertos casos como agrupar elementos para aplicarles estilos CSS. Pero ahora contamos con muchas etiquetas semánticas que en la mayoría de ocasiones son mejores que sobre-utilizar DIVs.
Sí, se recomienda utilizar SECTION para dividir secciones principales de contenido en la página, y ARTICLE para contenidos independientes como entradas de blog. Puedes usar estas etiquetas semánticas las veces que necesites.
No lo garantiza al 100%, pero sí facilita a los motores de búsqueda entender mejor la estructura y contenidos de tu página web, lo cual normalmente se traduce en mejoras de posicionamiento orgánico en los resultados de búsqueda.
Los microdatos son un complemento ideal para enriquecer aún más las etiquetas semánticas de HTML5. Le agregan información extra muy útil para motores de búsqueda como Google y lectores de pantalla. Se recomienda su uso.