20 min HTML

Ejercicio final: construye una landing page completa

Has completado las 10 lecciones de HTML. Sabes crear documentos, estructurar texto, enlazar páginas, insertar imágenes, construir formularios, usar semántica, multimedia, meta tags y WebMCP. Ahora toca juntar todo en un proyecto real.

El proyecto: landing page de un producto

Vas a construir la landing page completa de un producto o servicio inventado. Puede ser lo que quieras: una app de productividad, un curso online, una herramienta para desarrolladores, un servicio de comida a domicilio, una plataforma de streaming de música indie...

Elige algo que te motive. El HTML va a ser el mismo, pero si el proyecto te interesa, vas a escribir mejor código.

Requisitos obligatorios

1. Estructura y semántica

Documento HTML5 completo con <!DOCTYPE html>, <html lang="es">
<header> con logo (puede ser texto) y <nav> con al menos 4 enlaces ancla
<main> con al menos 4 <section>
<footer> con copyright, enlaces legales y redes sociales
Jerarquía correcta de encabezados: un solo <h1>, múltiples <h2> y <h3>

2. Contenido de las secciones

Hero: título impactante, subtítulo descriptivo, botón CTA (enlace ancla al formulario)
Características: al menos 3 features del producto con icono (emoji o texto), título y descripción
Precios: tabla comparativa con al menos 3 planes (<table> con <caption>, <thead>, <tbody>)
Testimonios: al menos 2 <blockquote> con citas de usuarios ficticios
FAQ: al menos 3 preguntas con <details> y <summary>
Formulario de contacto o registro: con validación HTML nativa y WebMCP

3. Formulario con WebMCP

Atributos toolname y tooldescription en el <form>
Al menos 5 campos con diferentes type
Todos los campos con <label>
Validación: required, pattern, minlength, min/max
Un <fieldset> con <legend>
Al menos un <select> o <datalist>

4. Multimedia e imágenes

Al menos 3 imágenes con alt, width, height
Al menos una imagen con loading="lazy"
La imagen hero con fetchpriority="high"
Al menos un <figure> con <figcaption>

5. Head optimizado para SEO

<title> descriptivo (máx. 60 caracteres)
Meta description (máx. 155 caracteres)
Open Graph tags (title, description, image, url, type)
Twitter Card tags
Link canonical
Favicon
theme-color

6. Accesibilidad

aria-label en las navegaciones
Texto alternativo descriptivo en todas las imágenes
La página es navegable solo con teclado (esto HTML lo hace por defecto si usas las etiquetas correctas)

Estructura sugerida

<!DOCTYPE html>
<html lang="es">
<head>
    <!-- Meta tags básicos -->
    <!-- SEO: title, description, canonical -->
    <!-- Open Graph -->
    <!-- Twitter Card -->
    <!-- Favicon -->
    <!-- theme-color -->
</head>
<body>
    <header>
        <!-- Logo + Nav con enlaces ancla (#caracteristicas, #precios, etc.) -->
    </header>

    <main>
        <section id="hero">
            <!-- H1, subtítulo, CTA, imagen hero -->
        </section>

        <section id="caracteristicas">
            <!-- H2 + grid de features -->
        </section>

        <section id="precios">
            <!-- H2 + tabla comparativa -->
        </section>

        <section id="testimonios">
            <!-- H2 + blockquotes -->
        </section>

        <section id="faq">
            <!-- H2 + details/summary -->
        </section>

        <section id="contacto">
            <!-- H2 + formulario con WebMCP -->
        </section>
    </main>

    <footer>
        <!-- Copyright, enlaces legales, redes sociales -->
    </footer>
</body>
</html>

Checklist final

Antes de darte por satisfecho, verifica:

¿El documento pasa el validador HTML de W3C sin errores?
¿La pestaña del navegador muestra el title correcto?
¿La jerarquía de encabezados tiene sentido si los lees aislados?
¿Todos los formularios tienen labels y validación?
¿Las imágenes tienen alt descriptivo?
¿El formulario tiene atributos WebMCP?
¿Puedes navegar toda la página solo con Tab y Enter?

Construye la landing page completa siguiendo todos los requisitos descritos arriba. Crea un archivo index.html en una carpeta nueva.

Extra (opcional):

Añade un segundo formulario de búsqueda con toolautosubmit
Incluye un <dialog> para confirmar el envío del formulario
Usa <picture> con múltiples formatos (AVIF/WebP/JPEG)
Incluye un vídeo de demo del producto

Cuando termines, valida tu HTML en validator.w3.org. Cero errores es el objetivo.

Pistas

No te agobies intentando que se vea bonito — no tiene CSS todavía. Eso viene en la siguiente sección. Concéntrate en que la estructura sea impecable: semántica correcta, accesibilidad, formularios válidos y meta tags completas. Un HTML limpio es la base de todo lo que viene después.

Has completado la sección de HTML. Ya sabes estructurar documentos, manejar texto, enlaces, imágenes, formularios, multimedia, semántica, SEO y WebMCP. Tienes las bases para construir cualquier página web. En la siguiente sección vas a aprender CSS para transformar ese HTML en algo que la gente quiera mirar.

Anterior WebMCP: HTML para agentes de IA

Siguiente ¿Qué es CSS?