HTML semántico

HTML semántico

HTML semántico es el uso de etiquetas de HTML que describen el significado del contenido que contienen, en lugar de solo estructurarlo visualmente. Esto mejora la accesibilidad, el SEO (posicionamiento en buscadores), y la mantenibilidad del código.

Ejemplo de HTML no semantico

<div class="header">Mi sitio</div>
<div class="nav">Inicio | Contacto</div>
<div class="content">Bienvenidos a mi página...</div>
<div class="footer">© 2025</div>

Ejemplo de HTML semántico

<header>Mi sitio</header>
<nav>Inicio | Contacto</nav>
<main>
  <section>
    <h1>Bienvenidos a mi página</h1>
    <p>Contenido principal...</p>
  </section>
</main>
<footer>© 2025</footer>

 

 

Beneficios del HTML semántico

✅ Mejora el SEO: Google entiende mejor el contenido.

 ♿ Accesibilidad: lectores de pantalla pueden navegar mejor.

🧹 Código limpio y mantenible: más fácil de entender para otros desarrolladores.

🧠 Buena práctica profesional: demuestra conocimiento técnico.

Etiquetas semánticas mas comunes

Etiqueta     Uso
    
    <header>     Encabezado del sitio o de una sección
    <nav>     Área de navegación (menú)
    <main>     Contenido principal de la página
    <section>     Sección de contenido relacionada
    <article>     Contenido independiente (como un post de blog)
    <aside>     Información secundaria o complementaria
    <footer>     Pie de página o sección
    <figure>     Contenedor de imagen o gráfico
    <figcaption>     Título o descripción de una imagen
    <time>     Representa una fecha u hora
    <mark>     Texto resaltado o marcado
    <address>     Información de contacto     

Fuente:

https://www.w3schools.com/html/html5_semantic_elements.as

https://validator.w3.org/#validate_by_upload+with_options

https://gsnedders.html5.org/outliner/