Ejercicios de HTML resueltos

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Horarios · Biblioteca municipal de Laredo</title>
</head>
<body>
  <h1>Horarios de la biblioteca</h1>
  <p>Abrimos de lunes a sábado. Consulta aquí los horarios de cada sala.</p>
</body>
</html>

lang="es" permite a los lectores de pantalla usar la pronunciación correcta, charset evita los caracteres raros en las tildes y viewport hace que el móvil no muestre la página en miniatura.

<article>
  <h1>Tortilla de patatas</h1>
  <p>Tiempo: <strong>30 minutos</strong>.</p>

  <h2>Ingredientes</h2>
  <ul>
    <li>4 patatas medianas</li>
    <li>6 huevos</li>
    <li>1 cebolla</li>
    <li>Aceite de oliva y sal</li>
  </ul>

  <h2>Preparación</h2>
  <ol>
    <li>Pela y corta las patatas y la cebolla en láminas finas.</li>
    <li>Fríelas a fuego medio hasta que estén blandas y escúrrelas.</li>
    <li>Mézclalas con los huevos batidos y cuaja la tortilla por los dos lados.</li>
  </ol>
</article>

<ul> para lo que no tiene orden, <ol> para los pasos. <strong> indica importancia; si solo quisieras resaltar visualmente, sería trabajo de CSS.

<nav aria-label="Principal">
  <ul>
    <li><a href="../index.html">Inicio</a></li>
    <li><a href="../contacto.html">Contacto</a></li>
  </ul>
</nav>

<h1 id="arriba">Clases de yoga</h1>

<footer>
  <a href="mailto:info@gimnasiocumbre.example">info@gimnasiocumbre.example</a> ·
  <a href="tel:+34942111222">942 111 222</a> ·
  <a href="#arriba">Volver arriba</a>
</footer>

yoga.html está dentro de clases/, así que hay que subir un nivel con ../. En tel: conviene escribir el número completo con prefijo y sin espacios.

<figure>
  <picture>
    <source srcset="img/faro.webp" type="image/webp">
    <img src="img/faro.jpg" alt="Faro blanco sobre un acantilado con el cielo naranja del atardecer"
         width="1200" height="800" loading="lazy">
  </picture>
  <figcaption>Faro de Cabo Mayor, Santander</figcaption>
</figure>

width y height evitan que la página salte al cargar la imagen, loading="lazy" retrasa la descarga y <picture> deja que el navegador elija el WebP si lo entiende. El alt describe lo que se ve; el lugar ya lo dice el pie.

<table>
  <caption>Clases de la mañana</caption>
  <thead>
    <tr>
      <th scope="col">Hora</th>
      <th scope="col">Lunes</th>
      <th scope="col">Martes</th>
      <th scope="col">Miércoles</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">9:00</th>
      <td>Spinning</td>
      <td>Yoga</td>
      <td>Spinning</td>
    </tr>
    <tr>
      <th scope="row">10:00</th>
      <td colspan="3">Pilates</td>
    </tr>
  </tbody>
</table>

<caption> da nombre a la tabla, scope dice si cada <th> encabeza una columna o una fila y colspan="3" une las tres celdas de Pilates.

<form action="/reservar" method="post">
  <label for="nombre">Nombre</label>
  <input id="nombre" name="nombre" autocomplete="name" required>

  <label for="correo">Correo</label>
  <input id="correo" name="correo" type="email" autocomplete="email" required>

  <label for="personas">Personas</label>
  <input id="personas" name="personas" type="number" min="1" max="10" value="2">

  <label for="fecha">Fecha</label>
  <input id="fecha" name="fecha" type="date" required>

  <label for="turno">Turno</label>
  <select id="turno" name="turno" required>
    <option value="">Elige un turno</option>
    <option value="comida">Comida</option>
    <option value="cena">Cena</option>
  </select>

  <button type="submit">Reservar</button>
</form>

La primera opción del <select> tiene value="", así que required obliga a elegir otra. Sin name, un campo no se envía.

<h1>Rutas de senderismo</h1>
<p>Te proponemos <strong>tres rutas</strong> para el fin de semana.</p>
<p>Todas son circulares.</p>
<img src="ruta-1.jpg" alt="Sendero entre hayas junto a un río" width="800" height="533">
<a href="ruta-1.html" id="ruta-1">Ver la ruta 1</a>
<a href="ruta-2.html" id="ruta-2">Ver la ruta 2</a>
<h2>Recomendaciones</h2>
<ul>
  <li>Lleva agua</li>
</ul>

1. El <h1> no se cerraba (<h1> en lugar de </h1>).
2. El <b> tampoco se cerraba; además, si el texto es importante, <strong> es más adecuado.
3. Un <p> no puede ir dentro de otro <p>.
4. La imagen no tenía alt (y conviene width y height).
5. Dos elementos con el mismo id: debe ser único en la página.
6. Dentro de <ul> solo puede haber <li>; el título va fuera.

<header>
  <p class="logo">Librería Página 42</p>
  <nav aria-label="Principal">
    <ul>
      <li><a href="/">Inicio</a></li>
      <li><a href="/novedades/">Novedades</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h1>Llega la nueva novela de Sara Ortiz</h1>
    <p>Publicada el <time datetime="2026-10-03">3 de octubre de 2026</time>.</p>
  </article>
  <aside>
    <h2>Horario</h2>
    <p>De 10:00 a 20:00</p>
  </aside>
</main>
<footer>
  <p>© 2026 Librería Página 42</p>
</footer>

Cada parte tiene ahora un significado que entienden los buscadores y los lectores de pantalla: cabecera, navegación, contenido principal, artículo, información complementaria y pie. La fecha va en <time> para que las máquinas la lean.

<video controls width="640" height="360" poster="img/portada-video.jpg" preload="metadata">
  <source src="video/presentacion.mp4" type="video/mp4">
  <track src="video/subtitulos-es.vtt" kind="subtitles" srclang="es" label="Español" default>
  Tu navegador no puede reproducir el vídeo. <a href="video/presentacion.mp4">Descárgalo aquí</a>.
</video>

<iframe src="https://www.openstreetmap.org/export/embed.html?bbox=-3.83,43.45,-3.78,43.48"
        title="Mapa del centro de Santander" width="640" height="360" loading="lazy"></iframe>

default activa los subtítulos, preload="metadata" evita descargar el vídeo entero al cargar la página, y el title del iframe es lo que anuncia el lector de pantalla.

<section aria-labelledby="t-faq">
  <h2 id="t-faq">Preguntas frecuentes</h2>

  <details name="faq" open>
    <summary>¿Hacéis prueba de nivel?</summary>
    <p>Sí, es gratuita y dura unos 20 minutos.</p>
  </details>

  <details name="faq">
    <summary>¿Cuántos alumnos hay por grupo?</summary>
    <p>Un máximo de ocho.</p>
  </details>

  <details name="faq">
    <summary>¿Puedo cambiar de horario?</summary>
    <p>Sí, siempre que haya plazas libres en el otro grupo.</p>
  </details>
</section>

Los <details> que comparten el mismo name forman un acordeón exclusivo: al abrir uno se cierra el que estaba abierto. open deja abierto el primero.

<search>
  <form action="/buscar">
    <label for="q">Busca un libro</label>
    <input id="q" name="q" type="search">
    <button type="submit"><img src="lupa.svg" alt="Buscar" width="20" height="20"></button>
  </form>
</search>
<img src="separador.png" alt="">
<a href="catalogo.pdf">Descarga el catálogo de otoño (PDF, 2 MB)</a>
<p class="aviso">Envío gratis desde 30 €</p>

• Un <div> con onclick no se puede usar con el teclado ni lo anuncia el lector de pantalla: un <button> sí. Su icono necesita alt, porque es el único texto del botón.
• El placeholder no sustituye a una etiqueta.
• La imagen decorativa lleva alt="" para que se ignore.
• “Pincha aquí” no dice adónde lleva el enlace; el texto nuevo indica también el formato y el tamaño.
• El gris #bbb sobre blanco no tiene contraste suficiente. Muévelo a CSS con un color más oscuro, como #4b5563.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Carrera popular de Castro Urdiales 2026 · 10 km y 5 km</title>
  <meta name="description" content="Carrera popular de Castro Urdiales el 15 de noviembre de 2026: recorridos de 5 y 10 km junto al mar, categorías, precios e inscripción online.">
  <link rel="canonical" href="https://carreracastro.example/">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="stylesheet" href="/css/estilos.css">
  <meta property="og:title" content="Carrera popular de Castro Urdiales 2026">
  <meta property="og:description" content="5 y 10 km junto al mar. Domingo 15 de noviembre.">
  <meta property="og:image" content="https://carreracastro.example/img/carrera.jpg">
  <meta property="og:type" content="website">
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "SportsEvent",
    "name": "Carrera popular de Castro Urdiales 2026",
    "startDate": "2026-11-15T10:00:00+01:00",
    "location": {
      "@type": "Place",
      "name": "Paseo marítimo de Castro Urdiales",
      "address": "Castro Urdiales, Cantabria, España"
    },
    "offers": {
      "@type": "Offer",
      "price": "12",
      "priceCurrency": "EUR",
      "url": "https://carreracastro.example/inscripcion"
    }
  }
  </script>
</head>
<body>
  <a class="saltar" href="#contenido">Saltar al contenido</a>

  <header>
    <p class="logo">Carrera de Castro</p>
    <nav aria-label="Principal">
      <ul>
        <li><a href="/" aria-current="page">Inicio</a></li>
        <li><a href="/recorrido/">Recorrido</a></li>
        <li><a href="/inscripcion">Inscripción</a></li>
      </ul>
    </nav>
  </header>

  <main id="contenido">
    <h1>Carrera popular de Castro Urdiales 2026</h1>
    <p>
      <time datetime="2026-11-15T10:00">Domingo 15 de noviembre, a las 10:00</time>,
      salida desde el paseo marítimo.
    </p>
    <img src="/img/carrera.jpg" alt="Corredores en el paseo marítimo con la iglesia de Santa María al fondo"
         width="1200" height="675">

    <h2>Categorías y precios</h2>
    <table>
      <caption>Precio de la inscripción por distancia</caption>
      <thead>
        <tr><th scope="col">Distancia</th><th scope="col">Edad mínima</th><th scope="col">Precio</th></tr>
      </thead>
      <tbody>
        <tr><th scope="row">5 km</th><td>12 años</td><td>8 €</td></tr>
        <tr><th scope="row">10 km</th><td>16 años</td><td>12 €</td></tr>
      </tbody>
    </table>

    <p><a href="/inscripcion">Inscríbete en la carrera</a></p>
  </main>

  <footer>
    <p>Organiza el Club Atletismo Castro · <a href="mailto:carrera@carreracastro.example">carrera@carreracastro.example</a></p>
  </footer>
</body>
</html>

Este ejercicio junta casi todo el curso: un <head> con título y descripción únicos, canonical, favicon y Open Graph; datos estructurados para que Google pueda mostrar el evento con fecha y precio; landmarks y enlace de salto; un solo <h1>; imagen con alt y dimensiones; una tabla con caption y scope; y fechas en <time>.