Curso IT Fundamentos HTML 016_Elementos semánticos
Elementos semánticos
HTML5 introdujo muchos elementos semánticos cuyo propósito es mejorar la semántica de la estructura del documento, haciendo que el documento sea más legible, mantenible y más amigable tanto para los motores de búsqueda como para los desarrolladores.
Una estructura de página generalmente incluye: encabezado, pie de página, títulos, navegación, contenido, barra lateral, etc.
Uso del elemento <div> para diseñar el diseño de la página:
[!Resumen]
- No es favorable para que los desarrolladores escriban código. Cuando te enfrentas a una pantalla llena de elementos
<div>, es difícil distinguir rápidamente lo que significan.- No es favorable para la optimización de motores de búsqueda (SEO). El navegador solo sabe que usaste un elemento
<div>, pero el elemento div en sí no tiene ningún significado, es solo un contenedor.
Uso de elementos semánticos para diseñar el diseño de la página:
El uso de <header> <nav> <main> <aside> <footer> para representar diferentes áreas en la página le da a la página una buena semántica y estructura, lo que permite tanto a los desarrolladores como a los navegadores comprender rápidamente el contenido de la página web.
| Elemento | Función |
|---|---|
<header> | Se utiliza para definir el área del encabezado de la página, generalmente incluye el logo del sitio web, la navegación principal, enlaces globales y un campo de búsqueda. |
<nav> | Se utiliza para definir el área de enlaces de navegación de la página. |
<main> | Se utiliza para definir el contenido principal o la función principal de la página. Este contenido debe ser único en la página. |
<aside> | Se utiliza para definir el contenido de la barra lateral de la página. Este contenido está relacionado con el contenido principal, pero es opcional. |
<footer> | Se utiliza para definir el área del pie de página de la página, generalmente incluye información de derechos de autor, información de contacto y otra información relevante. |
<article> | Se utiliza para definir artículos, documentos, páginas, aplicaciones u otras áreas de contenido independientes. |
<section> | Se utiliza para definir una sección independiente genérica en una página web, generalmente contendrá un título o párrafos, bloques. |
<figure> | Se utiliza para definir imágenes, gráficos, fotos, etc. independientes. |
<figcaption> | Se utiliza para proporcionar un título o descripción para el elemento <figure>. |
Ejemplo:
<!DOCTYPE html><html lang="en"><head> <title>Mi página web</title></head><body> <header> <h1>Mi página web</h1> </header>
<nav> <ul> <li><a href="#">Inicio</a></li> <li><a href="#">Acerca de mí</a></li> <li><a href="#">Contáctame</a></li> </ul> </nav>
<main> <article> <h2>Mi introducción</h2> <p>Mi nombre es XXX, este es un ejemplo de elementos semánticos.</p> </article> </main>
<aside> <h2>Enlaces relacionados</h2> <ul> <li><a href="#">Mi blog</a></li> <li><a href="#">Mi página de GitHub</a></li> </ul> </aside>
<footer> <p>Copyright 2023 XXX</p> </footer></body></html>Efecto:
Este ejemplo contiene una página web que utiliza elementos semánticos de HTML5 para describir el significado del contenido de la página web.
- El elemento
<header>define el área del encabezado de la página, incluido el logo del sitio web y la navegación principal. - El elemento
<nav>define el área de enlaces de navegación de la página. - El elemento
<main>define el contenido principal de la página, incluido mi artículo de introducción. - El elemento
<aside>define el contenido de la barra lateral de la página, incluidos enlaces relacionados. - El elemento
<footer>define el área del pie de página de la página, incluida la información de derechos de autor.
[!Resumen]
- Los motores de búsqueda pueden comprender mejor el contenido de la página web y mejorar el ranking de la página web en los resultados de búsqueda.
- Puede ayudar a las personas con discapacidades a comprender más fácilmente el contenido de la página web y mejorar la accesibilidad de la página web.
- Puede ayudar a los desarrolladores a organizar mejor la estructura de la página web y mejorar la mantenibilidad de la página web.
Enlace: 观鸟网 (roy-tian.github.io)