Cuando miras tu página web terminada, tú distingues a simple vista la cabecera, el contenido principal y el pie. El navegador no. Para él todo es texto envuelto en etiquetas, una detrás de otra, sin jerarquía. Aprender a usar etiquetas semánticas en HTML cambia eso y le da estructura real a tu sitio.
¿Por qué importa la estructura semántica en HTML?
Darle nombre a las zonas de tu página no es un capricho de diseño. Es lo que permite que distintos actores entiendan qué hace cada parte.
- El navegador procesa la página sabiendo qué bloques son estructurales.
- Un lector de pantalla, herramienta que usa una persona con discapacidad visual, puede saltar directo a la navegación.
- Google indexa mejor cuando reconoce las secciones.
- La inteligencia artificial entiende tus instrucciones con precisión cuando le pides cambios sobre un header, un main o un section específico.
Piénsalo así: pasas de un texto corrido a un edificio con planos. Aquí está la entrada, aquí los pisos, aquí el sótano. Cada zona tiene rol y nombre.
¿Qué son las etiquetas semánticas en HTML? Son etiquetas que describen el rol de cada zona de la página, como header, nav, main, section y footer, en lugar de solo envolver texto sin contexto.
¿Cómo se usan header y nav en una página web?
La etiqueta header es la cabecera del sitio. Ahí va el logo, el nombre y normalmente la navegación. Cuidado con un detalle: header no es lo mismo que head. El head guarda información del documento que no se ve, como el título de la pestaña; el header es contenido visible que cumple el rol de cabecera [01:36].
Dentro del header suele vivir la navegación, envuelta en la etiqueta nav. Para que un visitante salte a una sección sin hacer scroll, usas la etiqueta a con el atributo href apuntando a un identificador interno con el símbolo de número adelante.
html
<header>
<nav>
<a href="#metodos">Métodos</a>
<a href="#contacto">Contacto</a>
</nav>
</header>
Ese #metodos le dice al navegador: busca un elemento con ese ID en la misma página y baja hasta ahí. La etiqueta a viene de ancla, y los ID son su punto de aterrizaje [02:50].
¿Qué hacen main, section y footer en HTML?
El contenido principal va dentro de main, que aparece una sola vez por página. Dentro de main agrupas contenido relacionado en bloques de section, y cada section tiene su propio encabezado, normalmente un h2 [03:50].
html
<main>
<section id="metodos">
<h2>Métodos de preparación</h2>
<h3>V60</h3>
<p>Descripción del método...</p>
</section>
</main>
Fíjate en el id="metodos" del section. Ese ID es el destino del enlace que pusiste en el nav. Cuando alguien hace clic en "Métodos" arriba, el navegador busca ese identificador y baja la página hasta ahí.
La página cierra con footer, el pie del sitio. Ahí va la información de contacto, horarios y dirección. También puedes incluir una imagen, como la foto del local.
¿Para qué sirve el ID en una sección HTML? Funciona como un punto de aterrizaje único en la página, al que pueden apuntar los enlaces internos para llevar al usuario directamente a esa sección.
¿Cómo insertar imágenes con la etiqueta img?
La etiqueta img se cierra sola, no necesita etiqueta de cierre como las demás. Necesita dos atributos básicos:
src: indica de dónde sacar la imagen.alt: describe la imagen para cuando no se puede mostrar, ya sea porque la conexión falla, porque alguien usa un lector de pantalla o porque Google está indexando.
Ese alt no es decorativo, es la imagen para quienes no la ven. Y un detalle clave: el archivo debe llamarse exactamente igual a como lo escribes en el código y vivir en tu carpeta del proyecto. Si pones okini-barra.png, así debe llamarse el archivo.
Para controlar el tamaño puedes agregar el atributo width directamente en la etiqueta:
html
<img src="okini-barra.png" alt="Barra de café Okini" width="250">
¿Cómo verifico que mi HTML funciona en el navegador?
Guardar y recargar es parte del trabajo. Cuando revisas la página y algo no se ve bien, vuelves al código y ajustas. En este ejercicio aparecieron tres cosas a corregir [07:14]:
- La imagen estaba demasiado grande, así que se ajustó con
width="250".
- La descripción inicial era muy corta y la navegación no tenía suficiente espacio para hacer scroll, así que se reemplazó por un párrafo más largo.
- Los métodos de preparación tenían descripciones pero no nombres, así que se agregaron con etiquetas
h3 para cada uno.
Ese ciclo de escribir, guardar, revisar en el navegador y volver al código es la rutina diaria de cualquiera que escribe HTML.
¿Por qué aprender HTML si lo puede hacer una IA?
Todo esto se lo podrías pedir a una inteligencia artificial. La diferencia es que ahora cuando recibas el código vas a poder leerlo. Vas a saber por qué hay un header arriba, por qué la nav vive ahí dentro y por qué cada section tiene un ID.
Y más importante: vas a poder pedir cambios con precisión. Una instrucción como "agrega un section nuevo dentro del main para las catas semanales con un ID catas y agrega un enlace en la nav que apunte a esa sección" solo es posible cuando manejas el vocabulario.
¿Qué otras secciones le agregarías a tu página? Cuéntame en los comentarios cómo organizaste tu estructura.
