HTML5 introduce una serie de elementos semánticos que proporcionan significado adicional al contenido de la página web. Estos elementos ayudan a estructurar el contenido de manera más clara y lógica, lo que facilita la comprensión del documento tanto para los desarrolladores como para los motores de búsqueda y tecnologías de asistencia. A continuación, se describen algunos de los elementos semánticos más importantes:
<header>
- Descripción: Define la cabecera de un documento o sección. Generalmente contiene elementos como el título del sitio, logotipos, y navegación principal.
- Uso Común: Encabezado de una página web o de una sección específica, como un artículo.
Ejemplo:
<header>
<h1>Mi Sitio Web</h1>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Sobre Nosotros</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</header> <nav>
- Descripción: Define un bloque de navegación con enlaces a otras páginas o secciones del sitio.
- Uso Común: Menús de navegación principal y secundarios.
Ejemplo:
<nav>
<ul>
<li><a href="#home">Inicio</a></li>
<li><a href="#about">Acerca de</a></li>
<li><a href="#services">Servicios</a></li>
<li><a href="#contact">Contacto</a></li>
</ul>
</nav><main>
- Descripción: Define el contenido principal del documento, excluyendo los encabezados, navegación, y pie de página. Cada página debe tener un único
<main>. - Uso Común: Contenido central de la página web que es único y específico para esa página.
Ejemplo:
<main>
<article>
<h2>Artículo Principal</h2>
<p>Contenido del artículo principal.</p>
</article>
<section>
<h2>Sección Adicional</h2>
<p>Contenido de la sección adicional.</p>
</section>
</main><article>
Descripción: Define un contenido independiente y autónomo que puede ser distribuido o sindicado de forma separada, como un artículo de blog, una noticia, o una entrada de foro.Uso Común: Artículos, publicaciones en blogs, entradas de noticias.
Ejemplo:
<article>
<h2>Título del Artículo</h2>
<p>Contenido del artículo. Este artículo puede ser independiente y distribuido por separado.</p>
</article><section>
- Descripción: Define una sección dentro del documento que tiene un propósito temático. Puede contener uno o más elementos
<h1>–<h6>. - Uso Común: Secciones de un artículo o de una página que agrupan contenido relacionado.
Ejemplo:
<section>
<h2>Sección de Información</h2>
<p>Contenido relacionado con esta sección temática.</p>
</section><aside>
- Descripción: Define contenido relacionado de manera tangencial al contenido principal. Generalmente se usa para notas laterales, barras laterales, o información adicional.
- Uso Común: Cuadros laterales, notas al margen, widgets.
Ejemplo:
<aside>
<h2>Noticias Relacionadas</h2>
<p>Contenido adicional relacionado con el tema principal del artículo.</p>
</aside><footer>
- Descripción: Define el pie de una página o de una sección. Generalmente contiene información de copyright, enlaces a políticas, información de contacto, y créditos.
- Uso Común: Información de contacto, derechos de autor, enlaces a políticas de privacidad.
Ejemplo:
<footer>
<p>© 2024 Mi Sitio Web. Todos los derechos reservados.</p>
<nav>
<ul>
<li><a href="#">Política de Privacidad</a></li>
<li><a href="#">Términos de Servicio</a></li>
</ul>
</nav>
</footer>Ejemplo Completo de Uso Semántico
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de HTML5 Semántico</title>
</head>
<body>
<header>
<h1>Mi Sitio Web</h1>
<nav>
<ul>
<li><a href="#home">Inicio</a></li>
<li><a href="#about">Sobre Nosotros</a></li>
<li><a href="#services">Servicios</a></li>
<li><a href="#contact">Contacto</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Artículo Principal</h2>
<p>Contenido del artículo principal.</p>
</article>
<section>
<h2>Sección Adicional</h2>
<p>Contenido de la sección adicional.</p>
</section>
<aside>
<h2>Noticias Relacionadas</h2>
<p>Contenido adicional relacionado con el tema principal del artículo.</p>
</aside>
</main>
<footer>
<p>© 2024 Mi Sitio Web. Todos los derechos reservados.</p>
<nav>
<ul>
<li><a href="#">Política de Privacidad</a></li>
<li><a href="#">Términos de Servicio</a></li>
</ul>
</nav>
</footer>
</body>
</html>