80 retos de HTML con solución

¿Qué es HTML?

¿Te atascas? Repasa la lección ¿Qué es HTML?.

Estructura básica

¿Te atascas? Repasa la lección Estructura básica.

[HTML] En este código, ¿qué relación hay entre <h1> y <p>?

<body>
  <h1>Novedades</h1>
  <p>Han llegado <strong>12 libros</strong>.</p>
</body>

<h1> es el padre de <p> Son hermanos: los dos son hijos de <body> <p> es descendiente de <h1> No tienen ninguna relación

[HTML] ¿Qué está mal en este documento?

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <title>Gimnasio Olimpo</title>
    <h1>Bienvenido</h1>
  </head>
  <body>
    <p>Abrimos todos los días.</p>
  </body>
</html>

El <h1> es contenido visible y debe ir dentro de <body>, no de <head> Falta cerrar el <meta> El <title> debe ir dentro de <body> lang="es" debe ir en el <head>

Etiquetas y atributos

¿Te atascas? Repasa la lección Etiquetas y atributos.

[HTML] ¿Qué tiene de malo este código?

<p>Esto es <strong>muy <em>importante</strong></em>.</p>

Nada, es correcto <em> no puede ir dentro de <strong> Las etiquetas se cruzan al cerrarse Falta un atributo

Atributos globales

¿Te atascas? Repasa la lección Atributos globales.

[HTML] Tienes <li data-fecha-alta="2026-09-01">. ¿Cómo lees ese valor desde JavaScript?

const socio = document.querySelector('li');

socio.dataset.fechaAlta socio.dataset['data-fecha-alta'] socio.dataset.fecha-alta socio.data.fechaAlta

El head y metadatos

¿Te atascas? Repasa la lección El head y metadatos.

Títulos y párrafos

¿Te atascas? Repasa la lección Títulos y párrafos.

[HTML] ¿Cómo muestra el navegador este código?

<p>Hola          mundo
   desde HTML</p>

Con todos los espacios y el salto de línea Hola mundo desde HTML, en una línea Da un error Hola mundo en una línea y desde HTML en otra

Bloque y en línea

¿Te atascas? Repasa la lección Bloque y en línea.

[HTML] ¿Qué es incorrecto en este código?

<p>Introducción <div>Detalles</div></p>

Nada Un <p> no puede contener elementos de bloque como <div> Falta cerrar el <div> <div> no puede tener texto

Enlaces

¿Te atascas? Repasa la lección Enlaces.

[HTML] ¿Qué atributo indica a dónde lleva un enlace?

<a ___="https://devschool.es">DevSchool</a>

src link href url

[HTML] ¿Qué ocurre al pulsar este enlace en una página de https://miweb.example?

<a href="www.wikipedia.org">Wikipedia</a>

Abre Wikipedia El navegador añade https:// automáticamente Busca www.wikipedia.org como ruta relativa dentro de tu web (https://miweb.example/www.wikipedia.org) y da un error 404 Descarga la página de Wikipedia

Rutas

¿Te atascas? Repasa la lección Rutas.

Imágenes

¿Te atascas? Repasa la lección Imágenes.

[HTML] ¿Para qué sirve el atributo alt de una imagen?

<img src="gato.jpg" alt="Gato naranja dormido en un sofá">

Para poner un título al pasar el ratón Para describir la imagen a quien no puede verla Para cambiar el tamaño Para enlazar la imagen

Imágenes responsive

¿Te atascas? Repasa la lección Imágenes responsive.

[HTML] ¿Qué le dice al navegador el atributo sizes en este código?

<img src="ruta-800.jpg"
     srcset="ruta-400.jpg 400w, ruta-800.jpg 800w, ruta-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Vista del refugio">

Qué ancho ocupará la imagen en la página según la pantalla, para elegir el archivo adecuado El tamaño real en disco de cada archivo El ancho mínimo de la ventana para mostrar la imagen El tamaño máximo al que se puede ampliar la imagen

Audio, vídeo e iframes

¿Te atascas? Repasa la lección Audio, vídeo e iframes.

Listas

¿Te atascas? Repasa la lección Listas.

[HTML] ¿Qué números muestra esta lista?

<ol start="4" reversed>
  <li>Bronce</li>
  <li>Plata</li>
  <li>Oro</li>
</ol>

1, 2, 3 4, 5, 6 4, 3, 2 3, 2, 1

Tablas

¿Te atascas? Repasa la lección Tablas.

[HTML] En la primera fila de datos, la celda del Aula 1 tiene rowspan="2". ¿Cuántas celdas debe tener la fila siguiente?

<tr><th>Hora</th><th>Aula 1</th><th>Aula 2</th></tr>
<tr><th>16:00</th><td rowspan="2">Robótica</td><td>Inglés</td></tr>
<tr><!-- ¿cuántas celdas aquí? --></tr>

1 2 3 4

[HTML] ¿Para qué sirve scope="row" en este encabezado?

<tr>
  <th scope="row">Lunes</th>
  <td>34</td>
  <td>58</td>
</tr>

Hace que la celda ocupe toda la fila Pone la fila en negrita Indica que "Lunes" es el encabezado de su fila, para que los lectores de pantalla lo asocien con los datos 34 y 58 Permite ordenar la tabla por esa fila

Formularios

¿Te atascas? Repasa la lección Formularios.

[HTML] ¿Cómo se relaciona un <label> con su campo de formulario?

<label ___="email">Email</label>
<input id="email" type="email">

name for id target

Validar formularios

¿Te atascas? Repasa la lección Validar formularios.

[HTML] ¿Qué valores acepta este campo sin mostrar error al enviar?

<input type="number" name="personas" min="1" max="8" step="1" required>

Números enteros del 1 al 8 Cualquier número Números del 1 al 8, incluidos decimales como 2.5 Cualquier número o el campo vacío

[HTML] ¿Cuál es el problema de este campo?

<input type="text" name="cp" pattern="[0-9]{5}">

pattern no funciona con type="text" Falta ^ y $ en el patrón, así que acepta textos más largos Hay que escribir pattern="/[0-9]{5}/" Si el usuario falla, el mensaje de error no le explica qué formato se espera: falta un title con la pista

HTML semántico

¿Te atascas? Repasa la lección HTML semántico.

details y dialog

¿Te atascas? Repasa la lección details y dialog.

[HTML] ¿Qué ocurre al pulsar el botón Borrar?

<dialog id="confirmar">
  <form method="dialog">
    <button value="cancelar">Cancelar</button>
    <button value="borrar">Borrar</button>
  </form>
</dialog>

Se envía el formulario al servidor y se recarga la página No pasa nada, porque falta un action El diálogo se cierra y returnValue queda vacío El diálogo se cierra y su returnValue pasa a ser "borrar"

SVG y canvas

¿Te atascas? Repasa la lección SVG y canvas.

[HTML] ¿Por qué no se ve nada en este SVG?

<svg viewBox="0 0 100 100" width="100" height="100">
  <line x1="0" y1="50" x2="100" y2="50" />
</svg>

Porque una línea no tiene relleno y necesita stroke para verse Porque falta el atributo fill Porque <line> no existe en SVG Porque falta cerrar la etiqueta con </line>

[HTML] ¿Qué dibuja este código?

const ctx = lienzo.getContext('2d');
ctx.beginPath();
ctx.arc(50, 50, 20, 0, Math.PI * 2);
ctx.fill();

Un semicírculo de radio 50 Un círculo completo relleno, con centro en (50, 50) y radio 20 Un cuadrado de 20 x 20 Nada, porque falta stroke()

Accesibilidad

¿Te atascas? Repasa la lección Accesibilidad.

[HTML] ¿Qué problema de accesibilidad tiene este código?

<div class="boton" onclick="reservar()">Reservar</div>

Ninguno, funciona con un clic Los <div> no pueden contener texto Le falta un alt No se puede enfocar con Tab ni activar con Intro, y el lector de pantalla no lo anuncia como botón

Caracteres especiales

¿Te atascas? Repasa la lección Caracteres especiales.

Buenas prácticas

¿Te atascas? Repasa la lección Buenas prácticas.

Proyecto: tu web

¿Te atascas? Repasa la lección Proyecto: tu web.

[HTML] Copias la cabecera de index.html en contacto.html. ¿Qué debes cambiar en el menú?

<li><a href="index.html" aria-current="page">Inicio</a></li>
<li><a href="actividades.html">Actividades</a></li>
<li><a href="contacto.html">Contacto</a></li>

Mover aria-current="page" al enlace de Contacto Nada, el menú es idéntico Quitar el enlace a Contacto, porque ya estás en esa página Cambiar las rutas a ../index.html

Retos de HTML