HTML semántico
HTML semántico
Estructura tus páginas web con las etiquetas correctas desde el primer día.
En el libro anterior creaste tu primera página web con <h1>, <p> y <a>. Todo funcionó. Pero piensa en esto: ¿cómo sabe tu navegador que <h1> es un título? Porque la etiqueta tiene un nombre que describe lo que contiene. <h1> no es un nombre aleatorio: viene de “heading 1” (encabezado 1). Eso es semántica: el nombre de la etiqueta te dice qué tipo de contenido es.
HTML tiene muchas más etiquetas así, y en este capítulo vas a aprender las más importantes. Cuando las uses, tu código va a ser más claro, los buscadores como Google van a entender mejor tu página, y las personas que navegan con lectores de pantalla (porque no pueden ver la pantalla) van a poder usar tu web sin problemas.
Imagina un periódico
Sección titulada «Imagina un periódico»Piensa en un periódico impreso. Sin leer una sola palabra, puedes identificar las secciones:
- La cabecera con el nombre del periódico está arriba.
- La navegación (secciones: Deportes, Cultura, Tecnología) está justo debajo.
- El contenido principal ocupa la mayor parte de la página.
- Cada artículo tiene su propio título, fecha y texto.
- El pie de página tiene información legal y datos del periódico.
Tú puedes identificar cada parte porque el diseño visual te da pistas: el tamaño, la posición, las líneas divisorias.
Pero un navegador web no “ve” el diseño. Un lector de pantalla (que le lee la página a una persona ciega) tampoco. Ellos necesitan que el código HTML les diga qué es cada parte. Para eso existen las etiquetas semánticas.
El problema: cuando todo se ve igual por dentro
Sección titulada «El problema: cuando todo se ve igual por dentro»Antes de conocer las etiquetas semánticas, mira este código. Es una página web con un encabezado, un menú, un artículo y un pie de página:
<div> <div>Mi Blog</div> <div> <div>Inicio</div> <div>Blog</div> <div>Contacto</div> </div></div><div> <div>Mi primer artículo</div> <div>Este es el contenido del artículo...</div></div><div> <div>© 2024 Mi Blog</div></div><div> es una etiqueta que crea un “contenedor” genérico. Es como una caja vacía sin etiqueta: puede contener cualquier cosa, pero no le dice a nadie qué contiene. Para un navegador, un lector de pantalla o Google, todo esto es simplemente “una caja dentro de otra caja”. No pueden saber cuál es el menú, cuál es el artículo, ni cuál es el pie de página.
Ahora mira la misma página con etiquetas semánticas:
<header> <a href="/">Mi Blog</a> <nav> <a href="/">Inicio</a> <a href="/blog">Blog</a> <a href="/contacto">Contacto</a> </nav></header><main> <article> <h1>Mi primer artículo</h1> <p>Este es el contenido del artículo...</p> </article></main><footer> <p>© 2024 Mi Blog</p></footer>¿Ves la diferencia? Ahora el código se lee como un libro: <header> es la cabecera, <nav> es la navegación, <main> es el contenido principal, <article> es un artículo, <footer> es el pie de página. Cualquiera que lea el código (persona o máquina) sabe instantáneamente qué es cada parte.
Es simplemente elegir la etiqueta HTML que describe lo que contiene. En vez de poner todo dentro de <div> (una caja genérica), usas <header> para la cabecera, <nav> para la navegación, <main> para el contenido principal, etc. El nombre de la etiqueta le cuenta al mundo qué hay dentro.
¿Y por qué debería importarme?
Sección titulada «¿Y por qué debería importarme?»Tres razones muy concretas:
1. Google entiende mejor tu página. Cuando Google rastrea tu web para mostrarla en resultados de búsqueda, lee tu código HTML. Si usas <article> con un <h1> dentro, Google sabe que eso es un artículo con ese título. Si usas <div> con un <div>, Google tiene que adivinar. Y Google no adivina bien.
2. Las personas con discapacidad visual pueden usar tu web. Millones de personas navegan la web usando lectores de pantalla: programas que leen en voz alta lo que hay en la página. Un lector de pantalla puede decir “navegación: Inicio, Blog, Contacto” si usas <nav>. Con <div>, solo dice “grupo de texto”.
3. Tu futuro yo te lo va a agradecer. Cuando vuelvas a tu código en 6 meses, <header> y <footer> te dicen al instante qué es cada sección. Una pila de <div>s te obliga a leer todo el contenido para entender qué es qué.
Las etiquetas de estructura
Sección titulada «Las etiquetas de estructura»Piensa en estas etiquetas como las habitaciones de una casa. Cada habitación tiene un nombre y un propósito claro. No pones la cocina en el baño ni la cama en el garaje.
<header> — La entrada de tu casa
Sección titulada «<header> — La entrada de tu casa»Es lo primero que ves al llegar. Contiene el logo o nombre del sitio y generalmente el menú de navegación.
<header> <h1>Mi Sitio Web</h1> <nav> <a href="/">Inicio</a> <a href="/blog">Blog</a> </nav></header><nav> — El directorio del edificio
Sección titulada «<nav> — El directorio del edificio»¿Sabes esos directorios en los edificios que te dicen “Piso 1: Oficinas, Piso 2: Consultorios”? <nav> es exactamente eso: un bloque de enlaces de navegación que le dice al usuario a dónde puede ir.
<nav> <a href="/">Inicio</a> <a href="/productos">Productos</a> <a href="/nosotros">Nosotros</a> <a href="/contacto">Contacto</a></nav>No todos los enlaces de una página necesitan estar dentro de <nav>. Solo los que forman un bloque de navegación principal (un menú).
<main> — La sala principal
Sección titulada «<main> — La sala principal»El contenido único y principal de la página. Todo lo que el usuario vino a ver. Solo debe haber un <main> por página.
Lo que NO va dentro de <main>: el logo, el menú, el pie de página (esas cosas se repiten en todas las páginas). Lo que SÍ va: el contenido que hace diferente a esta página de las demás.
<main> <h1>Bienvenido a mi blog</h1> <p>Aquí encontrarás artículos sobre desarrollo web.</p></main><section> — Las habitaciones
Sección titulada «<section> — Las habitaciones»Dentro de tu casa hay habitaciones: la cocina, el dormitorio, el estudio. Cada <section> es una habitación temática: agrupa contenido que comparte un tema, y generalmente tiene su propio título.
<section> <h2>Artículos recientes</h2> <!-- Lista de artículos aquí --></section>
<section> <h2>Sobre mí</h2> <p>Soy desarrollador web y comparto lo que aprendo.</p></section><article> — Un paquete que puedes enviar por correo
Sección titulada «<article> — Un paquete que puedes enviar por correo»Un artículo de blog, un producto, un comentario, una tarjeta de noticia. La clave es: ¿tiene sentido este contenido por sí solo, fuera de la página? Si pudieras recortarlo y enviárselo a alguien por email y se entendería completo, es un <article>.
<article> <h2>Cómo aprendí a programar</h2> <p>Todo empezó un día que decidí...</p></article>¿<section> o <article>? Pregúntate: “¿Puedo sacar este bloque de la página y enviarlo solo, y se entendería completo?” Si sí → <article>. Si solo tiene sentido dentro de esta página → <section>.
<aside> — La mesa de noche
Sección titulada «<aside> — La mesa de noche»Contenido que está relacionado con lo principal pero no es lo principal. Una barra lateral con artículos relacionados, una nota al margen, publicidad.
<aside> <h3>Artículos relacionados</h3> <ul> <li><a href="/html-basico">HTML básico</a></li> <li><a href="/css-basico">CSS básico</a></li> </ul></aside><footer> — La puerta trasera
Sección titulada «<footer> — La puerta trasera»El pie de página. Información que va al final: copyright, enlaces legales, redes sociales, datos de contacto.
<footer> <p>© 2024 Mi Sitio Web. Hecho con cariño.</p> <nav> <a href="/privacidad">Privacidad</a> <a href="/terminos">Términos</a> </nav></footer>Todo junto: una página web completa
Sección titulada «Todo junto: una página web completa»Así se ve una página con todas las etiquetas semánticas en su lugar. Lee el código: se entiende solo.
<!DOCTYPE html><html lang="es"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mi Blog</title> <link rel="stylesheet" href="style.css"></head><body> <header> <a href="/">Mi Blog</a> <nav> <a href="/">Inicio</a> <a href="/blog">Blog</a> <a href="/contacto">Contacto</a> </nav> </header>
<main> <section> <h1>Artículos recientes</h1>
<article> <h2>Mi primer artículo</h2> <time datetime="2024-03-15">15 de marzo, 2024</time> <p>Contenido del artículo...</p> </article>
<article> <h2>Mi segundo artículo</h2> <time datetime="2024-03-20">20 de marzo, 2024</time> <p>Contenido del artículo...</p> </article> </section>
<aside> <h2>Sobre mí</h2> <p>Soy desarrollador web y comparto lo que aprendo.</p> </aside> </main>
<footer> <p>© 2024 Mi Blog. Hecho con cariño.</p> </footer></body></html>Más etiquetas útiles
Sección titulada «Más etiquetas útiles»Además de las etiquetas de estructura, HTML tiene etiquetas para darle significado a contenido específico:
<figure> y <figcaption> — Imagen con pie de foto
Sección titulada «<figure> y <figcaption> — Imagen con pie de foto»Cuando una imagen necesita una descripción debajo (como las fotos en un periódico):
<figure> <img src="grafico.png" alt="Gráfico de crecimiento de usuarios"> <figcaption>Crecimiento de usuarios durante el primer trimestre.</figcaption></figure><time> — Fechas que las máquinas entienden
Sección titulada «<time> — Fechas que las máquinas entienden»El atributo datetime tiene la fecha en formato estándar. El texto visible puede estar en cualquier formato:
<p>Publicado el <time datetime="2024-03-15">15 de marzo de 2024</time>.</p><details> y <summary> — Contenido que se expande y colapsa
Sección titulada «<details> y <summary> — Contenido que se expande y colapsa»Un “acordeón” que funciona sin JavaScript ni CSS. El usuario hace clic y se expande:
<details> <summary>¿Qué es HTML?</summary> <p>HTML es el lenguaje que define la estructura de las páginas web. Es como los ladrillos de una casa.</p></details><blockquote> — Citas textuales
Sección titulada «<blockquote> — Citas textuales»Cuando citas las palabras exactas de alguien:
<blockquote> <p>La web es más un invento social que tecnológico.</p> <cite>— Tim Berners-Lee</cite></blockquote>Toma la página que creaste en el Libro 1 (o crea una nueva) y dale estructura semántica.
-
Abre tu proyecto en VS Code e inicia Live Server.
-
Envuelve tu encabezado (el nombre del sitio y los enlaces de navegación) con
<header>y<nav>. -
Envuelve tu contenido principal con
<main>. -
Si tienes varios bloques de contenido, envuélvelos con
<section>y ponle un<h2>a cada uno. -
Agrega un
<footer>al final con tu nombre y el año:<footer><p>© 2024 Tu Nombre</p></footer>. -
Mira el resultado en el navegador. Visualmente no cambió nada. Las etiquetas semánticas no cambian cómo se ve la página (para eso está CSS). Cambian cómo se entiende la página.
-
Inspecciona con DevTools (clic derecho → Inspeccionar). Navega por la estructura HTML. ¿Puedes identificar cada sección solo por el nombre de la etiqueta?
Resumen
Sección titulada «Resumen»- HTML semántico = usar etiquetas que dicen qué es el contenido:
<header>,<nav>,<main>,<section>,<article>,<aside>,<footer>. - Es como ponerle nombre a las habitaciones de una casa: cocina, dormitorio, baño. Cada etiqueta tiene un propósito claro.
<div>es una caja genérica. Úsala cuando no exista una etiqueta semántica adecuada, no como etiqueta por defecto.- La semántica ayuda a Google (entiende tu página), a las personas con discapacidad (los lectores de pantalla funcionan mejor) y a ti mismo (el código se lee solo).
Para profundizar: Elementos HTML en MDN Web Docs — la lista completa de todas las etiquetas HTML que existen, con explicaciones y ejemplos.