El contenido tiene una función

Antes de elegir colores o tamaños, conviene preguntarse qué representa cada parte de una página. Una cabecera presenta, una navegación reúne enlaces y el contenido principal responde al propósito de la visita.

En FULL TIME, servicios, preguntas y contacto tienen objetivos distintos. Darles una estructura clara facilita leer la página y recorrerla con herramientas de asistencia.

Un documento pequeño y bien ordenado

HTML · estructura mínima
<header>
  <nav aria-label="Navegación principal">
    <a href="#servicios">Servicios</a>
    <a href="#contacto">Contacto</a>
  </nav>
</header>
<main>
  <h1>Lavandería y sastrería</h1>
  <section id="servicios" aria-labelledby="titulo-servicios">
    <h2 id="titulo-servicios">Nuestros servicios</h2>
    <p>Información sobre lavado y arreglos.</p>
  </section>
  <section id="contacto" aria-labelledby="titulo-contacto">
    <h2 id="titulo-contacto">Contacto</h2>
    <a href="mailto:negocio@example.com">Escribir al negocio</a>
  </section>
</main>
<footer><p>Información del negocio</p></footer>

Elegir por significado

  • main contiene el contenido principal; en estas páginas uso uno.
  • section agrupa un tema y normalmente tiene un título.
  • article representa una pieza independiente, como este artículo o una tarjeta de proyecto.
  • div sigue siendo útil cuando solo hace falta un contenedor de diseño.

Los títulos describen la organización. Un h2 no se elige porque “se ve más pequeño”: su tamaño se define en CSS.

Una comprobación práctica

Lee la página sin estilos. ¿El orden tiene sentido? ¿Los enlaces explican su destino? Después recórrela con el teclado y comprueba que el foco sea visible.

La semántica ayuda a describir el contenido, pero no sustituye los textos útiles, la accesibilidad ni la revisión de SEO. Evita convertir cada contenedor visual en una sección sin un tema real.