¿Qué es la semántica en el contexto del desarrollo…

La semántica en el desarrollo web es el uso de etiquetas HTML de acuerdo con su propósito semántico, y no solo para estilizar. Ayuda a describir la estructura y el significado del contenido, haciendo que la página web sea más comprensible para los navegadores, motores de búsqueda, lectores de pantalla y otros analizadores.

Las principales ventajas del marcado semántico:

Accesibilidad: Mejora la interacción con el sitio para personas con discapacidades que utilizan lectores de pantalla.
SEO: Ayuda a los motores de búsqueda a entender mejor la estructura y el contenido de la página, lo que afecta positivamente el posicionamiento.
Mantenibilidad: Hace que el código sea más legible y comprensible para otros desarrolladores.
Compatibilidad: Asegura la correcta visualización del contenido en diferentes dispositivos y navegadores.

Ejemplos de etiquetas semánticas en HTML5:

<header>: Representa la introducción o navegación para todo el documento o una sección específica.
<nav>: Representa un grupo de enlaces de navegación.
<main>: Representa el contenido principal del documento.
<article>: Representa un fragmento de contenido completo y autónomo, que puede ser distribuido independientemente (por ejemplo, una entrada de blog, una noticia).
<section>: Representa una sección independiente del contenido en el documento.
<aside>: Representa contenido que está indirectamente relacionado con el contenido principal de la página (por ejemplo, una barra lateral).
<footer>: Representa el pie de página para todo el documento o una sección específica.
<figure> y <figcaption>: Representan un elemento multimedia (imagen, diagrama, etc.) y su descripción.
<time>: Representa una fecha y hora.

Comparación entre enfoque semántico y no semántico:

Enfoque no semántico	Enfoque semántico
Uso de `<div>` y `<span>` para todo	Uso de etiquetas específicas (`<header>`, `<nav>`, `<article>`)
Describir la estructura mediante clases (`class="header"`)	Uso de etiquetas que describen inherentemente la estructura
Dependencia del CSS para entender la estructura	La estructura es comprensible por el código HTML

Ejemplo de marcado no semántico:

<!-- non-semantic.html -->
<div class="header">
  <div class="logo"></div>
  <div class="nav">
    <ul>
      <li><a href="#">Inicio</a></li>
      <li><a href="#">Acerca de</a></li>
    </ul>
  </div>
</div>
<div class="content">
  <div class="article">
    <h2>Título</h2>
    <p>Contenido...</p>
  </div>
</div>
<div class="footer">
  <p>&copy; 2023</p>
</div>

Ejemplo de marcado semántico:

<!-- semantic.html -->
<header>
  <img src="logo.png" alt="Logo">
  <nav>
    <ul>
      <li><a href="#">Inicio</a></li>
      <li><a href="#">Acerca de</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h2>Título</h2>
    <p>Contenido...</p>
  </article>
</main>
<footer>
  <p>&copy; 2023</p>
</footer>

El marcado semántico no reemplaza a CSS para la estilización, pero hace que el documento HTML sea más informativo y útil para diferentes consumidores de contenido.

¿Qué es la semántica en el contexto del desarrollo web?