HTML

La estructura de toda página

Reconoce

Pregunta 1 de 5

<h1>Mis facturas</h1>
<p>Gestiona tus ingresos</p>

¿Cuál es el título principal de esta página?

Clona la card

Reproduce la tarjeta de la derecha escribiendo el HTML correcto en el editor

Pendiente

Escribe en el editor el HTML que reproduce exactamente la tarjeta del panel derecho. Necesitas un h1, un p y un a con href.

Tu código

<div>
  
</div>

Objetivo

Convierte esto en HTML semántico

Sustituye los div genéricos por las etiquetas semánticas correctas

Pendiente

Este código funciona, pero es semánticamente pobre. Todo son div. Sustituye los div apropiados por las etiquetas semánticas correctas para que cualquier desarrollador, buscador o lector de pantalla entienda la estructura de la página.

Pista: necesitas header, nav, main, article, h1 y footer.

Tu código

<div class="top">
  <div class="logo">Mi App</div>
  <div class="menu">
    <div>Inicio</div>
    <div>Precios</div>
    <div>Contacto</div>
  </div>
</div>
<div class="contenido">
  <div class="articulo">
    <div class="titulo-grande">Bienvenido a mi app</div>
    <div>Esta es la descripción principal de la página.</div>
  </div>
</div>
<div class="pie">
  <div>© 2026 Mi App</div>
</div>

Vista previa

Monta un formulario de contacto

Construye un formulario con los campos y atributos correctos para que sea usable y accesible

Pendiente

Monta un formulario de contacto dentro de la etiqueta form. Tiene que incluir un campo de nombre, un campo de email y un botón de enviar. Usa label para cada campo, el atributo type correcto en cada input, y el atributo required donde tenga sentido.

Pista: necesitas label con for, input con id, type y required, y un button type submit.

Tu código

<form>
  
</form>

Vista previa

Recursos

Documentación y material de apoyo para este reto

Documentación oficial

MDN Web Docs

Cheatsheet visual

Referencia rápida de etiquetas

Vídeo de la sesión

Sesión 3.1 del módulo

Estado del reto