Semántica HTML: ¿por qué necesitamos todas estas etiquetas extrañas?

Cuando abres HTML por primera vez y ves algo como <header>, <article> o <main>, puede que pienses: «¿Qué es este conjunto de hechizos? ¿Seguro que no es magia?» 🧙‍♂️ A primera vista, es solo un conjunto de palabras incomprensibles entre corchetes. Pero, si profundizas, detrás de este conjunto de etiquetas hay una herramienta poderosa que hace que los sitios web sean más inteligentes, más rápidos y más accesibles. Esta herramienta se llama semántica.

Y si crees que el HTML es aburrido y tedioso, espera un poco. Ahora verás que no es tan terrible. ¡E incluso <div> puede convertirse en el héroe de la historia si lo usas con inteligencia! 🦸‍♀️

🧠 ¿Qué es la semántica?

La semántica es una forma de decirle al navegador, a los robots de búsqueda, a los screenreaders y a otras criaturas digitales, qué es exactamente lo que querías decir con tu código HTML.

Imagina que tu sitio web es una habitación 🛋. Si simplemente colocas los muebles sin lógica, se mantendrán en su sitio, pero será incómodo usarlos. Y si cada objeto tiene su propio lugar y función, la vida se hará más agradable de inmediato. Lo mismo ocurre con el HTML: si las etiquetas se colocan correctamente, el sitio web se vuelve más comprensible tanto para las personas como para las máquinas.

Las etiquetas semánticas ayudan a:

• ✅ Mejorar la estructura del código y su legibilidad.

• ♿ Proporcionar accesibilidad — por ejemplo, para personas con discapacidad visual.

• 🔍 Mejorar SEO es decir, hacer que el sitio sea amigable para los motores de búsqueda.

• ⏱ Ahorrar tiempo en el soporte y escalamiento del proyecto.

• 😎 Obtener satisfacción interna de un código hermoso y ordenado

🎭 Roles, estados y propiedades: cómo HTML se comunica con el mundo

Cada elemento HTML es como un actor en un escenario 🎬. Tiene función (por ejemplo, «botón»), estado (por ejemplo, «pulsado»), y propiedades (por ejemplo, «texto: Suscribirse»).

Aquí hay un ejemplo sencillo:

<button aria-pressed="true">Нажата</button>

Aquí claramente decimos: «Este es un botón. Está pulsado». Y cualquier tecnología de asistencia lo entenderá. Incluso si usas <div>, seguirá desempeñando algún papel, el navegador simplemente adivinará qué querías decir exactamente.

📌 Sugerencia: Utilice especificación ARIA para una descripción más precisa de roles y estados.

🏠 Etiquetas de sección: dividimos el sitio en zonas lógicas

Una página HTML es como una casa acogedora. Tiene techo, habitaciones, pasillos y sótano:

Ejemplo: tarjeta de artículo

<article>
  <header>
    <h2>Как победить Google в шахматы</h2>
    <p class="author">Анонимный гроссмейстер</p>
  </header>
  <p>Секрет прост: Google не умеет играть в шахматы. Пока. Пользуйтесь этим!</p>
  <footer>
    <time datetime="2025-04-01">1 апреля 2025</time>
  </footer>
</article>

🛋 Etiquetas de contenido: todo lo que hay dentro

Las etiquetas de contenido son elementos del interior. Aquí hay una tabla con los principales:

Ejemplo:

<img src="cat-hat.png" alt="Cat in a hat and glasses">
<p><a href="# ">Ir a la galería de gatos</a> y averiguar cuál de ellos se convertirá en el presidente de Internet.</p>

🧬 Atributos: superpoderes para etiquetas

Los atributos HTML agregan magia a las etiquetas. Aquí hay algunos útiles:

Ejemplo:

<p lang="ja" title="This is in Japanese">こんにちは世界</p>

📦 ¿Qué pasa con <div> y <span>? También se les puede querer

Muchos han oído: « y es malo». Pero no es así. Son simplemente... ordinarios. No tienen sentido. Es como una caja sin etiquetas. Útil, pero incomprensible.

💎 Por qué la semántica es buena (muy buena)

✅ Comodidad para los desarrolladores

Código legible = desarrollador feliz. Usted (y su equipo) encontrarán los elementos que necesitan más rápido.

♿ Accesibilidad

Los lectores de pantalla, los asistentes de voz y otras tecnologías comprenderán fácilmente tu sitio web y ayudarán al usuario a interactuar con él.

🧠 Compatibilidad con navegadores y extensiones

El modo de lectura, los complementos para cambiar la interfaz, la lectura biónica: todo funciona mejor cuando el HTML es semánticamente limpio.

📈 SEO y promoción

A los motores de búsqueda les encanta la semántica:

• Las páginas estructuradas se indexan mejor.

• Los títulos se incluyen en los fragmentos.

• Más posibilidades de estar en primer lugar.

🧩 Cómo maquetar una página correctamente

Una receta sencilla para una estructura perfecta:

1. 📦 Bloques principales: <header>, <main>, <footer>, <nav>, <aside>.

2. 📑 Secciones adjuntas: <section>, <article> — para lógica y estructura.

3. 🔠 Encabezados: Uno <h1>, luego <h2> y más abajo en la jerarquía.

4. 📝 Contenido: <p>, <a>, <button>, <img>, <ul> y otros.

❌ Mal ejemplo:

<div class="main">
  <div class="title">Контакты</div>
  <div class="info">...</div>
</div>

✅ Buen ejemplo:

<main>
  <h1>Контакты</h1>
  <section>...</section>
</main>

🎉 Conclusión: codifica como un profesional

La semántica en HTML es como una buena interfaz: no siempre es visible, pero se siente en cada detalle. Si has marcado correctamente la página, se carga más rápido 🚀, se lee mejor 👀, es más clara para los motores de búsqueda 🔎 y está disponible para todos 💬.

Utiliza <article>, <section>, <nav>, <header>, <footer> y deja que <div> descanse. Tu código será un modelo de claridad, comodidad y respeto por el usuario ✨