Cómo estructurar una landing page efectiva con HTML5 y landmarks

Cuando diseñamos una landing page, no se trata solo de que “se vea bonita”.
Una buena arquitectura HTML con etiquetas semánticas y landmarks bien definidos puede marcar la diferencia en accesibilidad, SEO y experiencia de usuario.

En este artículo vamos a construir una estructura paso a paso usando como ejemplo la landing de un concurso de MIA APP.

🏗 Arquitectura recomendada

La estructura básica de la página incluye:

Header (sticky) con logo y navegación mínima.
Hero principal con el H1 y CTA de descarga.
Galería del premio con imágenes y video.
Sección “Cómo participar” con pasos numerados.
Countdown con <time> semántico.
Formulario de registro accesible.
Bases del concurso (link a PDF o modal).
Footer con redes sociales y copyright.

📌 Landmarks y su función

Los landmarks son puntos de referencia semánticos en HTML5.
Ayudan a que los lectores de pantalla y buscadores entiendan la jerarquía del contenido.

<header> → cabecera global o de sección.
<main> → el contenido principal (solo uno por página).
<section> → bloques temáticos con título.
<aside> → contenido complementario (ej: mockup de app).
<footer> → cierre de la página (redes, legal, copyright).

💡 Así, una persona con discapacidad visual puede saltar directamente de la cabecera al contenido principal sin perder tiempo.

📝 Ejemplo de estructura semántica

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Gana este tocador con MIA APP</title>
  <meta name="description" content="Participa descargando MIA APP y gana un tocador increíble.">
</head>
<body>
  <header>
    <a href="/" class="logo"><img src="/logo.svg" alt="MIA APP"></a>
  </header>

  <main id="main-content">
    <section class="hero">
      <h1>Gana este tocador con <span>MIA APP</span></h1>
      <p>Renueva tu espacio, renueva tu rutina</p>
      <a href="#">Descargar en App Store</a>
      <a href="#">Descargar en Google Play</a>
    </section>

    <section class="prize-media">
      <h2>Es hermoso, ¡y es para ti!</h2>
      <img src="/img/tocador.jpg" alt="Tocador con luces, premio del concurso">
      <video controls><source src="/video/premio.mp4" type="video/mp4"></video>
    </section>

    <section class="steps">
      <h2>¿Cómo participar?</h2>
      <ol>
        <li>Descarga MIA APP</li>
        <li>Regístrate como usuario</li>
        <li>Etiqueta a @miaapp.cl en una historia</li>
      </ol>
    </section>

    <section class="countdown">
      <h2 class="sr-only">Cuenta regresiva</h2>
      <time datetime="P10D">10 días</time>
    </section>

    <section class="signup">
      <h2>Regístrate</h2>
      <form>
        <label for="name">Nombre</label>
        <input id="name" type="text" required>
        <label for="email">Correo</label>
        <input id="email" type="email" required>
        <label><input type="checkbox" required> Acepto términos y condiciones</label>
        <button type="submit">Enviar</button>
      </form>
    </section>
  </main>

  <footer>
    <nav>
      <a href="#">Facebook</a>
      <a href="#">Instagram</a>
    </nav>
    <small>© 2025 MIA App. Todos los derechos reservados.</small>
  </footer>
</body>
</html>

📖 Explicación de las etiquetas HTML

Etiquetas de títulos

<h1> → Título principal de la página (solo uno).
<h2> → Títulos de secciones principales.
<h3> a <h6> → Subniveles dentro de cada sección.

💡 Piensa en esto como los capítulos y subcapítulos de un libro.

Etiquetas de texto

<p> → Un párrafo de texto.
<a> → Enlace (usa href).
<span> → Contenedor en línea para estilos o resaltar partes de texto.
<strong> → Negrita con valor semántico (importante para accesibilidad y SEO).
<b> → Negrita solo visual.
<em> → Cursiva con énfasis semántico.
<i> → Cursiva visual.
<br> → Salto de línea.

Listas

<ul> → Lista no ordenada (viñetas).
<ol> → Lista ordenada (numeración).
<li> → Cada ítem de la lista.

🧾 Chuleta de etiquetas

Etiqueta	Función	Ejemplo	Resultado esperado
`<h1>`	Título principal (único)	`<h1>Bienvenido a MIA APP</h1>`	Bienvenido a MIA APP
`<h2>`	Sección principal	`<h2>Cómo participar</h2>`	Cómo participar
`<h3>`	Sub-sección de h2	`<h3>Paso 1</h3>`	Paso 1
`<p>`	Párrafo de texto	`<p>Participa ahora</p>`	Participa ahora
`<a>`	Enlace	`<a href="#">Ir</a>`	Ir (link)
`<strong>`	Negrita semántica	`<strong>Importante</strong>`	Importante
`<b>`	Negrita visual	`<b>Oferta</b>`	Oferta
`<em>`	Cursiva semántica	`<em>Atención</em>`	Atención
`<i>`	Cursiva visual	`<i>Palabra</i>`	Palabra
`<br>`	Salto de línea	`Lunes<br>Martes`	Lunes ⏎ Martes
`<ul>`	Lista con viñetas	`<ul><li>A</li></ul>`	• A
`<ol>`	Lista numerada	`<ol><li>A</li></ol>`	1. A
`<li>`	Ítem de lista	`<li>Descargar app</li>`	• Descargar app
`<span>`	Resaltar inline	`<span class="rojo">Texto</span>`	Texto (con estilo)

✅ Buenas prácticas de UX y accesibilidad

Un solo <h1> en la página.
Jerarquía clara con <h2> y <h3> para subsecciones.
Imágenes con alt descriptivo.
CTAs de descarga en varios puntos (hero + pasos).
Formulario accesible con labels y required.
Countdown con <time> + aria-live="polite" para usuarios de lector de pantalla.
Checkbox de términos obligatorio, enlazado a bases.

🎯 Conclusión

Una landing bien estructurada no solo se ve bien, sino que también:

Mejora la experiencia del usuario.
Aumenta la accesibilidad para todos.
Refuerza el SEO con semántica clara.

Si vas a lanzar tu próxima campaña, recuerda: el diseño visual es importante, pero la estructura HTML es la base que lo hace funcional y accesible.

Etiquetas:

html5uxuilanding pageaccesibilidadseodesarrollo web