Curso gratuito de HTML

HTML Demos

// 07 de 09

07 · HTML Semántico

Las etiquetas semánticas dan significado al contenido para navegadores, lectores de pantalla y buscadores. No son solo para layout.

<main><article><section> <aside><nav><time> <address><figure>

Estructura de página típica

<header> — logo + branding
<nav> — navegación principal
<main> — contenido principal (único por página)
<article> — contenido independiente
<section> — bloque temático con heading
<section> — otro bloque temático
<aside>
contenido
relacionado
<footer> — info del sitio, copyright, contacto

Elementos inline semánticos

<time> Publicado el
<address>
Ada Lovelace · ada@example.com
<figure>
imagen
<figcaption> pie
<nav>

article vs section — article es contenido que tiene sentido solo (un post, un tweet, una noticia). section agrupa contenido relacionado dentro de algo mayor.

time datetime — el texto visible puede ser legible para humanos; el atributo datetime da el formato estándar para máquinas.

Código importante

<body>
  <header>
    <nav aria-label="principal">
      <a href="/">Inicio</a>
    </nav>
  </header>

  <!-- main: único por página -->
  <main>
    <!-- article: contenido independiente -->
    <article>
      <header>
        <h1>Título del post</h1>
        <time datetime="2024-03-15">
          15 marzo 2024
        </time>
      </header>

      <!-- section: bloque temático -->
      <section>
        <h2>Introducción</h2>
        ...
      </section>

      <footer>
        <address>
          Por <a href="mailto:a@b.com">Ada</a>
        </address>
      </footer>
    </article>

    <aside>
      <!-- Contenido relacionado -->
    </aside>
  </main>

  <footer>...</footer>
</body>

<!-- figure + figcaption -->
<figure>
  <img src="foto.jpg"
       alt="descripción accesible">
  <figcaption>Pie de foto</figcaption>
</figure>

<!-- nav con aria-label si hay varios -->
<nav aria-label="breadcrumb">...</nav>