Curso de HTML / Organizar la página con elementos semánticos

Los elementos semánticos de HTML indican qué función cumple cada región de una página. nav representa navegación principal, main el contenido principal del documento y article una pieza que tiene sentido de forma independiente. Sus significados no dependen de que CSS coloque las regiones arriba, abajo o a un lado.

Elegir una región por su función

Decide primero el papel del contenido y después su posición mediante CSS. Un aside puede aparecer debajo del artículo en una pantalla estrecha sin dejar de ser información complementaria. Cambiar nombres de etiquetas sin revisar textos, encabezados y orden de lectura no garantiza accesibilidad ni mejores posiciones en buscadores.

Construir y recorrer una página completa

Guarda este código como index.html en UTF-8. Sus enlaces principales llevan a fragmentos del mismo archivo, por lo que no necesitas crear páginas adicionales.

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Plants for Spring | Small Garden</title>

</head>

<body>

  <header>

    <p>Small Garden</p>

    <nav aria-label="On this page">

      <a href="#article">Read the article</a>

      <a href="#sunlight">Sunlight needs</a>

    </nav>

  </header>



  <main>

    <article id="article">

      <h1>Plants to Grow in Spring</h1>

      <section id="sunlight">

        <h2>Sunlight needs</h2>

        <p>Different plants need different amounts of sunlight.</p>

      </section>

    </article>

    <aside>

      <p>Check the last frost date for your area before planting.</p>

    </aside>

  </main>



  <footer>

    <p>Small Garden guide</p>

  </footer>

</body>

</html>

El nombre del sitio, la navegación, el artículo, la nota y el pie aparecerán aproximadamente en orden vertical. Selecciona “Sunlight needs” y comprueba que el destino tiene id="sunlight". El encabezado h1 pertenece al documento de la práctica, no añade un encabezado principal al cuerpo de este artículo.

Si quieres que la nota aparezca junto al artículo, añade un diseño CSS. No cambies su significado para forzar una posición. Después de dividir las regiones, revisa la jerarquía de los encabezados para que los subtemas pertenezcan al apartado correcto.

Distinguir article, section y un contenedor genérico

Una entrada de blog que puede leerse por sí sola es candidata a article. Dentro, los temas de luz y riego pueden formar secciones con sus encabezados. Un simple contenedor para poner un borde alrededor de dos tarjetas puede ser un div, sin atribuirle una autonomía que no tiene.

Un conjunto de noticias puede tener un article por noticia si cada pieza es independiente. No es necesario envolver todo encabezado y párrafo en una sección: úsala cuando represente una agrupación temática útil. Los criterios de div y span ayudan a reconocer cuándo solo necesitas un objetivo para CSS.

La referencia de secciones del estándar HTML detalla los significados. Las regiones deben seguir siendo comprensibles aunque quites los estilos de distribución.

Poner nombre a navegaciones distintas

Una página puede tener navegación del sitio y navegación dentro del artículo. Nombres diferentes permiten distinguir sus finalidades:

<nav aria-label="Site navigation">
  <a href="index.html">Home</a>
  <a href="about.html">About</a>
</nav>
<nav aria-label="Sections in this article">
  <a href="#sunlight">Sunlight</a>
  <a href="#watering">Watering</a>
</nav>

Este segundo bloque es un fragmento ilustrativo. Debes crear los archivos y los identificadores que menciona o adaptar sus destinos a páginas reales. No asumas que el documento completo anterior contiene también una sección watering.

aria-label proporciona un nombre accesible; no escribe automáticamente un título visible junto al menú. Cuando el nombre o las rutas no corresponden a la función real, el atributo tampoco soluciona el problema. La guía de nombres de regiones de W3C WAI explica esta diferenciación.

Para comprobar la estructura, recorre el documento en su orden de origen. Verifica que no haya varios contenidos principales visibles, secciones vacías sin un tema y elementos auxiliares utilizados solo por su posición. Sigue los enlaces internos y comprueba los destinos antes de dar la página por terminada.