Ya conoces los pilares de HTML: etiquetas que dan formato y estructura. Ahora, vamos a construir algo más sofisticado. La arquitectura semántica avanzada no se trata solo de usar las etiquetas correctas, sino de organizarlas de una manera que cuente una historia lógica. Se trata de crear un esqueleto de contenido que tanto un navegador como un motor de búsqueda puedan interpretar con precisión.

Pensar semánticamente es como dibujar el plano de un edificio antes de poner el primer ladrillo. Defines qué es el vestíbulo, dónde están las oficinas y cuáles son las áreas de descanso. En HTML, esto lo hacemos con elementos de seccionamiento que definen el esquema del documento o "outline".

Imagina que estás leyendo un periódico en línea. Cada noticia completa es un <article>. Es una pieza de contenido independiente y autocontenida que podría, en teoría, ser extraída y compartida en otro lugar sin perder su significado. Dentro de esa noticia, podrías tener diferentes partes: la introducción, el desarrollo del suceso, y las entrevistas. Cada una de estas agrupaciones temáticas sería una <section>.

La regla general es: si el contenido tiene sentido por sí solo, es un <article>. Si es un grupo de contenido relacionado temáticamente dentro de un contexto mayor, es una <section>.

El elemento <main> es aún más específico. Es el contenedor del contenido principal y único de tu página. Todo lo que es central para esa URL específica, excluyendo cabeceras, pies de página o barras laterales, va dentro de <main>. Y una regla clave: solo puede haber un elemento <main> visible en un documento.

Finalmente, tenemos el elemento <aside>. Este se usa para contenido que está tangencialmente relacionado con el contenido principal. Piensa en una barra lateral con enlaces relacionados, la biografía del autor o incluso bloques de publicidad. No es parte del flujo principal de la narrativa, sino información complementaria.

Los encabezados (<h1> a <h6>) son los pilares del esquema de tu documento. No están ahí solo para crear texto grande y en negrita. Definen una jerarquía estricta que los lectores de pantalla y los motores de búsqueda utilizan para navegar y comprender tu contenido. La regla más importante es no saltarse niveles: un <h3> siempre debe seguir a un <h2>, nunca a un <h1>.

Piensa en ello como el índice de un libro. El <h1> es el título del libro. Los <h2> son los títulos de los capítulos. Los <h3> son las secciones dentro de esos capítulos, y así sucesivamente. Esta estructura lógica permite a los usuarios, especialmente a aquellos que dependen de tecnologías de asistencia, saltar directamente a la sección que les interesa sin tener que leer todo el texto.

Cuando incluyes una imagen, un diagrama o un fragmento de código que es esencial para entender el texto, no basta con usar una etiqueta <img> o <pre>. Para vincular semánticamente este contenido con una descripción, utilizamos el par <figure> y <figcaption>.

El elemento <figure> envuelve el contenido multimedia. Es para contenido autocontenido que se referencia en el flujo principal del documento, pero que podría moverse a otra parte (como un apéndice) sin interrumpir la lectura. Dentro de <figure>, <figcaption> proporciona un título o descripción. Esta conexión es reconocida por los navegadores y tecnologías de asistencia, creando una relación clara entre el medio y su explicación. Es un estándar promovido por el W3C para mejorar la accesibilidad y la estructura del contenido.

Entonces, ¿cuándo usamos un simple <div>? La respuesta es: solo para fines de estilo. Si necesitas un contenedor para agrupar elementos y aplicarles CSS (por ejemplo, para crear un diseño de columnas o una tarjeta), pero ese grupo no tiene un significado semántico inherente, entonces <div> es la herramienta correcta. La semántica es para el significado; <div> es para la presentación.

Al dominar estos elementos, pasas de simplemente escribir HTML a diseñar una arquitectura de información robusta, accesible y optimizada. Es la diferencia entre un montón de ladrillos y una catedral bien estructurada.