Introducción
En este tema, exploraremos dos elementos semánticos importantes de HTML5: <main> y <figure>. Estos elementos ayudan a estructurar el contenido de una página web de manera más clara y significativa, mejorando tanto la accesibilidad como el SEO (Search Engine Optimization).
Elemento <main>
¿Qué es el elemento <main>?
El elemento <main> se utiliza para encapsular el contenido principal de un documento HTML. Este contenido debe ser único para la página y no debe incluir elementos que se repiten en todas las páginas, como encabezados, pies de página, barras laterales de navegación, etc.
Uso del elemento <main>
Ejemplo Básico
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Main</title>
</head>
<body>
<header>
<h1>Mi Sitio Web</h1>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Acerca de</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</header>
<main>
<h2>Bienvenido a Mi Sitio Web</h2>
<p>Este es el contenido principal de la página.</p>
</main>
<footer>
<p>© 2023 Mi Sitio Web</p>
</footer>
</body>
</html>Explicación del Código
<header>: Contiene el encabezado del sitio web, incluyendo el título y la navegación.<main>: Encapsula el contenido principal de la página, en este caso, un encabezado secundario y un párrafo.<footer>: Contiene el pie de página del sitio web.
Buenas Prácticas
- Único por Página: Asegúrate de que solo haya un elemento
<main>por página. - Contenido Principal: Incluye solo el contenido principal que es único para esa página.
Elemento <figure>
¿Qué es el elemento <figure>?
El elemento <figure> se utiliza para encapsular contenido independiente, como imágenes, gráficos, diagramas, fragmentos de código, etc. Este contenido puede tener una leyenda asociada, que se define usando el elemento <figcaption>.
Uso del elemento <figure>
Ejemplo Básico
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Figure</title>
</head>
<body>
<main>
<h2>Galería de Imágenes</h2>
<figure>
<img src="imagen1.jpg" alt="Descripción de la imagen 1">
<figcaption>Imagen 1: Descripción detallada de la imagen 1.</figcaption>
</figure>
<figure>
<img src="imagen2.jpg" alt="Descripción de la imagen 2">
<figcaption>Imagen 2: Descripción detallada de la imagen 2.</figcaption>
</figure>
</main>
</body>
</html>Explicación del Código
<figure>: Encapsula una imagen y su leyenda.<img>: Contiene la imagen que se muestra.<figcaption>: Proporciona una leyenda para la imagen.
Buenas Prácticas
- Uso de
<figcaption>: Siempre que uses<figure>, considera agregar un<figcaption>para describir el contenido. - Contenido Independiente: Usa
<figure>para contenido que puede ser independiente del flujo principal del documento.
Ejercicio Práctico
Ejercicio
Crea una página HTML que incluya un elemento <main> con un artículo sobre un tema de tu elección. Dentro del artículo, incluye al menos dos elementos <figure> con imágenes y sus respectivas leyendas.
Solución
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Artículo sobre Naturaleza</title>
</head>
<body>
<header>
<h1>Blog de Naturaleza</h1>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Artículos</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>La Belleza de la Naturaleza</h2>
<p>La naturaleza nos ofrece paisajes impresionantes y una biodiversidad increíble. A continuación, se muestran algunas imágenes que capturan la esencia de la naturaleza.</p>
<figure>
<img src="bosque.jpg" alt="Un bosque frondoso">
<figcaption>Figura 1: Un bosque frondoso en primavera.</figcaption>
</figure>
<figure>
<img src="montana.jpg" alt="Una montaña nevada">
<figcaption>Figura 2: Una montaña nevada al amanecer.</figcaption>
</figure>
</article>
</main>
<footer>
<p>© 2023 Blog de Naturaleza</p>
</footer>
</body>
</html>Explicación del Código
- Encabezado y Navegación: El encabezado contiene el título del blog y una barra de navegación.
- Contenido Principal: El elemento
<main>contiene un artículo sobre la naturaleza. - Figuras: Dentro del artículo, se incluyen dos figuras con imágenes y leyendas descriptivas.
Conclusión
El uso de los elementos <main> y <figure> en HTML5 no solo mejora la estructura y la semántica de tu documento, sino que también facilita la accesibilidad y el SEO. Asegúrate de utilizar estos elementos de manera adecuada para crear páginas web más claras y organizadas.
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