HTML Semántico¶

El HTML semántico hace referencia a la utilización de etiquetas que describen claramente el propósito de su contenido. Este enfoque ayuda tanto a los desarrolladores como a los navegadores y motores de búsqueda a entender mejor la estructura y significado de las páginas web.

¿Qué es el HTML Semántico?¶

El HTML Semántico introduce etiquetas que tienen un significado inherente sobre el tipo de contenido que encierran. A diferencia de las etiquetas genéricas como <div> o <span>, que no aportan información sobre el contenido, las etiquetas semánticas especifican el propósito del contenido. Ejemplos de etiquetas semánticas:

<header>: Indica el encabezado de una página o sección.
<nav>: Define un bloque de enlaces de navegación.
<main>: Representa el contenido principal de una página.
<article>: Encierra un artículo o bloque de contenido independiente.
<section>: Agrupa secciones de contenido relacionadas.
<footer>: Define el pie de página de una página o sección.

Estas etiquetas hacen que la estructura de la página sea más comprensible tanto para los humanos como para las máquinas.

Importancia del HTML Semántico¶

El uso de HTML Semántico tiene varias ventajas clave:

Mejora la accesibilidad: Los lectores de pantalla y otras herramientas de accesibilidad pueden interpretar mejor el contenido si está bien estructurado con etiquetas semánticas. Por ejemplo, pueden saltar directamente a la navegación (<nav>) o al contenido principal (<main>).
SEO (Optimización para motores de búsqueda): Los motores de búsqueda utilizan las etiquetas semánticas para entender el contenido de la página y su relevancia, lo que puede mejorar el posicionamiento en los resultados de búsqueda. Un sitio bien estructurado semánticamente será indexado de manera más eficiente.
Mantenimiento del código: Las etiquetas semánticas permiten a los desarrolladores identificar de forma rápida las diferentes secciones del documento, haciendo que el código sea más legible y fácil de mantener.
Buenas prácticas y estándares: El uso de HTML semántico está alineado con las recomendaciones del W3C (World Wide Web Consortium), lo que asegura que el sitio web siga las mejores prácticas y sea más compatible con futuros navegadores.

Diferencia entre HTML clásico y HTML semántico¶

HTML clásico utiliza etiquetas genéricas como <div> y <span> que no proporcionan información sobre el tipo de contenido. El HTML semántico introduce etiquetas específicas que sí lo hacen. Aquí tienes un ejemplo que compara ambos: HTML clásico:

<div class="header">
  <h1>Bienvenido a mi página</h1>
</div>
<div class="navigation">
  <ul>
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Blog</a></li>
  </ul>
</div>
<div class="content">
  <p>Este es el contenido principal de la página.</p>
</div>
<div class="footer">
  <p>&copy; 2024 Mi Sitio Web</p>
</div>

HTML semántico:

<header>
  <h1>Bienvenido a mi página</h1>
</header>
<nav>
  <ul>
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Blog</a></li>
  </ul>
</nav>
<main>
  <p>Este es el contenido principal de la página.</p>
</main>
<footer>
  <p>&copy; 2024 Mi Sitio Web</p>
</footer>

En el segundo ejemplo, el uso de etiquetas semánticas (<header>,<nav>, <main>, <footer>) hace que la estructura sea más fácil de entender tanto para humanos como para máquinas.

Actividades¶

AC 203 (RA1 / CE1b / IC1/ 3p) Rehaz la AC 202 de manera semántica.
AC 204 (RA1 / CE1b / IC1/ 3p) Haz una web con un menú que contenga los siguientes elementos:
Inicio
Sección 1
Sección 2
Sección 3
AP 205 (RA1 / CE1b / IC1/ 3p) Haz la estructura de una landing page. En la sección principal ha de tener un enunciado principal, una etiqueta de imagen, un párrafo que explique la marca y un footer con el Copyright