Marcado semántico HTML — guía completa para desarrolladores

What Is HTML Semantic Markup?

El HTML semántico usa elementos que describen significado, no solo apariencia. Un <nav> dice a lectores de pantalla «esto es navegación». Un <div class='nav'> no. Motores y tecnología asistiva dependen de la semántica.

Why HTML semantic markup Matters

Google and screen readers parse semantic tags to understand page structure — directly affecting rankings and accessibility scores.

Replacing div soup with <article>, <nav>, and <main> gives crawlers explicit signals about which content is navigation versus primary editorial text.

HTML semantic markup — Key Ideas You Must Know

• <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>
• Un solo <main> por página para contenido principal
• Jerarquía de encabezados: un <h1>, h2–h6 anidados
• Landmarks mejoran navegación con lector de pantalla
• HTML semántico apoya rich snippets en Google

HTML semantic markup Code Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Page</title>
</head>
<body>
  <header><nav>...</nav></header>
  <main>
    <article>
      <h1>Page Title</h1>
      <p>Content here.</p>
    </article>
  </main>
  <footer>...</footer>
</body>
</html>

Common HTML semantic markup Mistakes

• Usar <div> para todo
• Saltar niveles de encabezados (h1 a h4)
• Varios elementos <main>
• Atributos alt vacíos en imágenes informativas

Practice HTML semantic markup with Free Lessons

Trabaja el tutorial HTML gratis en Sturdee — elementos y semántica, luego una landing semántica.

Marcado semántico HTML — FAQ