Elementos Semánticos en HTML5
En HTML5, la clave para construir páginas web no es solo hacer que se vean bien, sino también que su estructura sea comprensible tanto para humanos como para máquinas (navegadores, motores de búsqueda, lectores de pantalla). Esto se logra usando **elementos semánticos**.
Un elemento semántico describe su significado de forma clara. A diferencia del genérico <div> que no dice nada sobre su contenido, etiquetas como <header> o <nav> dan contexto y propósito.
1. Elementos de Estructura Principal
a. <header>
Define la sección introductoria o un grupo de ayudas para la navegación. Puede contener,
por ejemplo, el logo del sitio, el título del sitio, y un menú de navegación principal.
Puede haber varios <header> en una página
(uno para la página principal y otro para cada <article> o <section>).
<header>
<h1>Mi Sitio Web Genial</h1>
<p>El mejor lugar para aprender HTML.</p>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Acerca de</a></li>
</ul>
</nav>
</header>b. <nav>
Representa una sección de la página que proporciona enlaces de navegación. Esto puede ser un menú principal, una tabla de contenidos, o un conjunto de enlaces relacionados.
<nav>
<ul>
<li><a href="#">Productos</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>c. <main>
Representa el contenido **dominante o principal** del <body> del documento. Debe ser único en el documento y su contenido no debe repetirse en otras partes (como barras laterales, encabezados o pies de página). Solo debe haber un <main> por página.
<main>
<h2>Contenido Principal de mi Artículo</h2>
<p>Aquí va el texto principal y las imágenes relevantes.</p>
</main>d. <footer>
Define el pie de página de un documento o sección. Típicamente contiene información sobre el autor, derechos de autor, enlaces a documentos relacionados, información de contacto, etc. Al igual que <header>, puede haber múltiples <footer> (uno para la página, y otros para <article> o <section>).
<footer>
<p>© 2025 Mi Compañía. Todos los derechos reservados.</p>
<p>Contacto: info@ejemplo.com</p>
</footer>2. Elementos de Contenido
a. <article>
Representa un contenido independiente, autocontenido y redistribuible. Piensa en ello como una entrada de blog, un comentario de usuario, un artículo de revista o un widget. Si eliminas el <article> del resto de la página y lo pones en otro lugar, seguiría teniendo sentido por sí mismo.
<article>
<h2>Mi Primer Artículo del Blog</h2>
<p>Publicado por: Juan Pérez</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<footer>
<p>Etiquetas: HTML, CSS, Blog</p>
</footer>
</article>b. <section>
Representa una sección genérica de un documento o aplicación. Se usa para agrupar contenido que tiene una temática común, pero que no es necesariamente independiente como un <article>. Una <section> casi siempre debería tener un encabezado (ej. <h1>, <h2>, etc.) para describir su contenido.
<section>
<h2>Acerca de Nosotros</h2>
<p>Somos una empresa dedicada a la enseñanza del desarrollo web.</p>
</section>
<section>
<h2>Nuestros Servicios</h2>
<ul>
<li>Diseño Web</li>
<li>Desarrollo Frontend</li>
</ul>
</section>c. <aside>
Representa una parte del documento cuyo contenido está indirectamente relacionado con el contenido principal del documento. A menudo se presenta como una barra lateral o un recuadro. Puede contener, por ejemplo, citas, notas al pie, bloques de anuncios o información del autor.
<aside>
<h3>Artículos Relacionados</h3>
<ul>
<li><a href="#">Cómo usar Flexbox</a></li>
<li><a href="#">Introducción a JavaScript</a></li>
</ul>
</aside>3. Otros Elementos Semánticos Importantes (Ejemplos Breves)
a. <figure> y <figcaption>
<figure> se usa para agrupar contenido autónomo (como imágenes, gráficos, diagramas, código) que puede ser referenciado desde el contenido principal. <figcaption> proporciona una leyenda o descripción para el contenido de la figura.
<figure>
<img src="imagen.jpg" alt="Descripción de la imagen">
<figcaption>Figura 1: Un ejemplo de elemento semántico.</figcaption>
</figure>b. <time>
Representa una fecha y/o hora específica. Es útil para que las máquinas puedan leer la fecha correctamente.
<p>Publicado el: <time datetime="2025-06-06">6 de Junio de 2025</time>.</p>Ejemplo de Estructura de Página con Elementos Semánticos
Observa cómo estos elementos se usan en una disposición común de página. Intenta redimensionar la ventana para ver cómo la barra lateral se mueve debajo del contenido principal en pantallas pequeñas (gracias a las Media Queries que ya conoces).
Mi Blog de Tecnología
El Futuro de la IA en el Desarrollo Web
Por: Experto Tech
La Inteligencia Artificial está transformando la forma en que creamos y mantenemos sitios web. Desde generadores de código hasta asistentes de diseño, las herramientas de IA están… (continúa el artículo)
Este es el contenido principal de un artículo.
Consejos para Mejorar tu CSS
Por: Emanuel Cruz
Optimizar tu CSS es crucial para el rendimiento y la mantenibilidad de tu sitio. Aquí te damos algunos consejos… (continúa el artículo)
Al utilizar estas etiquetas semánticas, no solo estás estructurando tu contenido para los usuarios, sino que también estás proporcionando un contexto valioso para los motores de búsqueda y las tecnologías de asistencia.
Con esto, lograras construir un HTML no solo funcional, sino también significativo.