¿Qué es HTML Semántico?
HTML semántico se refiere al uso de etiquetas HTML que tienen un significado claro y específico sobre el contenido que envuelven. A diferencia de las etiquetas genéricas como <div> y <span>, las etiquetas semánticas describen explícitamente su propósito y el tipo de contenido que contienen. Esto no solo mejora la legibilidad del código, sino que también facilita a los motores de búsqueda y a las tecnologías de asistencia (como los lectores de pantalla) entender y navegar por el contenido de la página.
Beneficios del HTML Semántico
- Mejora la Accesibilidad: Las etiquetas semánticas ayudan a los lectores de pantalla y otras tecnologías de asistencia a interpretar y navegar por el contenido de manera más efectiva.
- SEO (Optimización para Motores de Búsqueda): Los motores de búsqueda pueden entender mejor el contenido de tu página, lo que puede mejorar tu posicionamiento en los resultados de búsqueda.
- Mantenibilidad: El código semántico es más fácil de leer y mantener, tanto para ti como para otros desarrolladores que puedan trabajar en tu proyecto en el futuro.
- Estándares Web: Usar etiquetas semánticas es una práctica recomendada por los estándares web, lo que asegura que tu sitio sea más compatible con diferentes navegadores y dispositivos.
Ejemplos de Etiquetas Semánticas
A continuación, se presentan algunas de las etiquetas semánticas más comunes introducidas en HTML5:
| Etiqueta | Descripción |
|---|---|
<header> |
Representa un encabezado para un documento o una sección. |
<nav> |
Define un conjunto de enlaces de navegación. |
<article> |
Representa un contenido independiente que puede ser distribuido o reutilizado de forma independiente. |
<section> |
Define una sección en un documento. |
<aside> |
Contenido que está relacionado indirectamente con el contenido principal. |
<footer> |
Representa un pie de página para su sección más cercana. |
<main> |
Contenido principal del documento. |
<figure> |
Contenido ilustrativo como imágenes, diagramas, etc. |
<figcaption> |
Proporciona una leyenda para el contenido del <figure>. |
Ejemplo Práctico
Vamos a crear una estructura básica de una página HTML utilizando etiquetas semánticas:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de HTML Semántico</title>
</head>
<body>
<header>
<h1>Bienvenidos a Mi Sitio Web</h1>
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#sobre-mi">Sobre Mí</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</header>
<main>
<section id="inicio">
<h2>Inicio</h2>
<p>Este es el contenido de la sección de inicio.</p>
</section>
<section id="sobre-mi">
<h2>Sobre Mí</h2>
<article>
<h3>Mi Historia</h3>
<p>Este es un artículo sobre mi historia.</p>
</article>
<article>
<h3>Mis Proyectos</h3>
<p>Este es un artículo sobre mis proyectos.</p>
</article>
</section>
<aside>
<h2>Noticias Recientes</h2>
<p>Este es un contenido relacionado pero no esencial.</p>
</aside>
</main>
<footer>
<p>© 2023 Mi Sitio Web</p>
</footer>
</body>
</html>Explicación del Código
<header>: Contiene el encabezado principal del sitio, incluyendo el título y la navegación.<nav>: Define un conjunto de enlaces de navegación.<main>: Contiene el contenido principal del documento.<section>: Divide el contenido en secciones lógicas.<article>: Representa contenido independiente dentro de una sección.<aside>: Contiene contenido relacionado pero no esencial.<footer>: Contiene el pie de página del documento.
Ejercicio Práctico
Ejercicio
Crea una página HTML semántica que incluya las siguientes secciones:
- Un encabezado con el título de la página y un menú de navegación.
- Una sección principal con dos artículos.
- Un apartado lateral (aside) con información adicional.
- Un pie de página con información de contacto.
Solución
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Página Semántica</title>
</head>
<body>
<header>
<h1>Mi Página Semántica</h1>
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#articulos">Artículos</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</header>
<main>
<section id="articulos">
<h2>Artículos</h2>
<article>
<h3>Artículo 1</h3>
<p>Contenido del primer artículo.</p>
</article>
<article>
<h3>Artículo 2</h3>
<p>Contenido del segundo artículo.</p>
</article>
</section>
<aside>
<h2>Información Adicional</h2>
<p>Este es un contenido adicional relacionado.</p>
</aside>
</main>
<footer>
<p>Contacto: [email protected]</p>
</footer>
</body>
</html>Conclusión
En esta lección, hemos aprendido sobre la importancia del HTML semántico y cómo usar etiquetas semánticas para mejorar la accesibilidad, SEO y mantenibilidad de nuestras páginas web. A medida que avanzamos en el curso, seguiremos utilizando estas etiquetas para construir estructuras más complejas y funcionales.
Curso de HTML
Módulo 1: Introducción a HTML
- ¿Qué es HTML?
- Configurando tu Entorno
- Estructura Básica de HTML
- Etiquetas y Elementos HTML
- Creando tu Primera Página HTML
Módulo 2: Formateo de Texto en HTML
- Encabezados y Párrafos
- Etiquetas de Formateo de Texto
- Listas: Ordenadas y Desordenadas
- Citas en Bloque y Texto Preformateado
Módulo 3: Enlaces y Medios en HTML
Módulo 4: Tablas en HTML
- Estructura Básica de una Tabla
- Encabezados y Pies de Tabla
- Unión de Celdas: Colspan y Rowspan
- Estilizando Tablas
Módulo 5: Formularios en HTML
- Creando un Formulario Básico
- Elementos del Formulario: Input, Textarea y Select
- Atributos y Validación del Formulario
- Enviando Formularios
Módulo 6: Elementos Semánticos de HTML5
Módulo 7: Técnicas Avanzadas de HTML
Módulo 8: Integración de HTML y CSS
- Vinculando CSS a HTML
- CSS en Línea, Interno y Externo
- Selectores Básicos de CSS
- Estilizando Elementos HTML
Módulo 9: Diseño Web Responsivo
- Introducción al Diseño Responsivo
- Etiqueta Meta del Viewport
- Consultas de Medios
- Imágenes y Videos Responsivos
Módulo 10: Mejores Prácticas y Accesibilidad
- Mejores Prácticas de HTML
- Conceptos Básicos de Accesibilidad Web
- Usando Roles ARIA
- Pruebas de Accesibilidad