Bloque 2: Estructura semántica y multimedia

<header>
  <h1>El Diario Web</h1>
  <nav><ul>
    <li><a href="#">Portada</a></li>
    <li><a href="#">Deportes</a></li>
  </ul></nav>
</header>

<main>
  <article><h2>Noticia 1</h2><p>…</p></article>
  <article><h2>Noticia 2</h2><p>…</p></article>
  <aside><h2>Lo más leído</h2><ul>
    <li><a href="#">Artículo popular</a></li>
  </ul></aside>
</main>

<footer><small>© 2026 El Diario Web</small></footer>

<header>Mi Tienda</header>
<nav><a href="#">Inicio</a></nav>
<main>
  <article>Ofertas de agosto</article>
  <aside>Envíos gratis hoy</aside>
</main>
<footer>Contacto: <address>info@tienda.es</address></footer>

<article>
  <header>
    <h2>La ciudad estrena carril bici inteligente</h2>
    <p>
      <time datetime="2026-08-20T09:30">
        20 de agosto de 2026, 09:30
      </time>
    </p>
  </header>

  <p>El nuevo carril conecta once barrios…</p>
  <p>Los vecinos celebran la medida…</p>

  <footer>
    <address>
      Por <a href="mailto:marta@diario.es">Marta Ruiz</a>
    </address>
  </footer>
</article>

<table>
  <caption>Horario semanal — Grupo A</caption>
  <thead><tr>
    <th scope="col">Tramo</th>
    <th scope="col">Lun</th>
    <th scope="col">Mar</th>
    <th scope="col">Mié</th>
    <th scope="col">Jue</th>
    <th scope="col">Vie</th>
  </tr></thead>
  <tbody>
    <tr>
      <th scope="row">09–11</th>
      <td>MATE</td><td>LENG</td><td>FÍS</td><td>QUIM</td><td>INGL</td>
    </tr>
    <tr><td colspan="6">Recreo</td></tr>
    <tr>
      <th scope="row">12–14</th>
      <td>HIST</td><td>ED.FÍ</td><td>ART</td><td>MÚS</td><td>TUTO</td>
    </tr>
  </tbody>
  <tfoot><tr>
    <td colspan="6">Total: 10 horas semanales</td>
  </tr></tfoot>
</table>

<table>
  <caption>Ventas Q3 2026 (miles €)</caption>
  <thead><tr>
    <th scope="col">Categoría</th>
    <th scope="col">Producto</th>
    <th scope="col">Julio</th>
    <th scope="col">Agosto</th>
  </tr></thead>
  <tbody>
    <tr>
      <th rowspan="2" scope="row">Hardware</th>
      <td>Teclados</td><td>12</td><td>15</td>
    </tr>
    <tr><td>Ratones</td><td>9</td><td>11</td></tr>
  </tbody>
  <tfoot><tr>
    <td colspan="2">Total</td>
    <td>21</td><td>26</td>
  </tr></tfoot>
</table>

<section id="contacto">
  <h2>Contacta con nosotros</h2>
  <form action="/contacto" method="post">
    <fieldset>
      <legend>Mensaje</legend>

      <label for="cNombre">Nombre:</label>
      <input type="text" id="cNombre" name="nombre" required>

      <label for="cEmail">Email:</label>
      <input type="email" id="cEmail" name="email" required>

      <label for="cAsunto">Asunto:</label>
      <select id="cAsunto" name="asunto">
        <option value="consulta">Consulta general</option>
        <option value="soporte">Soporte técnico</option>
      </select>

      <label for="cMsg">Mensaje:</label>
      <textarea id="cMsg" name="mensaje" rows="6" required></textarea>

      <button type="submit">Enviar</button>
    </fieldset>
  </form>
</section>

<fieldset>
  <legend>¿Qué te llama más?</legend>
  <input type="radio" id="fe" name="rama" value="front" checked>
  <label for="fe">Frontend</label>
  <input type="radio" id="be" name="rama" value="back">
  <label for="be">Backend</label>
</fieldset>

<fieldset>
  <legend>Lenguajes que conoces</legend>
  <input type="checkbox" id="html" name="langs" value="html">
  <label for="html">HTML</label>
  <input type="checkbox" id="css" name="langs" value="css">
  <label for="css">CSS</label>
</fieldset>

<label for="paisE">País:</label>
<select id="paisE" name="pais">
  <optgroup label="Europa">
    <option value="es">España</option>
  </optgroup>
  <optgroup label="América">
    <option value="mx">México</option>
  </optgroup>
</select>

<label for="nextLang">Siguiente lenguaje:</label>
<input list="sugerencias" id="nextLang" name="siguiente">
<datalist id="sugerencias">
  <option value="JavaScript">
  <option value="PHP">
  <option value="Python">
</datalist>

<form action="/registro-rapido" method="post">
  <label for="rEmail">Email:</label>
  <input type="email" id="rEmail" name="email"
         autocomplete="email" required>

  <label for="rPass">Contraseña:</label>
  <input type="password" id="rPass" name="pass"
         minlength="8" required>

  <label for="rCP">Código postal:</label>
  <input type="text" id="rCP" name="cp"
         pattern="[0-9]{5}"
         title="Introduce exactamente 5 dígitos" required>

  <label for="rEdad">Edad:</label>
  <input type="number" id="rEdad" name="edad"
         min="13" max="120">

  <label for="rWeb">Web personal (opcional):</label>
  <input type="url" id="rWeb" name="web"
         placeholder="https://…">

  <button type="submit">Crear cuenta</button>
</form>

<figure>
  <audio controls preload="metadata">
    <source src="media/ep07.mp3" type="audio/mpeg">
    <source src="media/ep07.ogg" type="audio/ogg">
    Tu navegador no reproduce audio nativo.
  </audio>
  <figcaption>
    Episodio 07 — Formularios que se validan solos
  </figcaption>
</figure>

<figure>
  <video controls poster="media/portada-curso.jpg"
         width="720" height="405"
         preload="metadata">
    <source src="media/clase01.mp4" type="video/mp4">
    <source src="media/clase01.webm" type="video/webm">
    <track src="media/clase01-es.vtt" kind="subtitles"
           srclang="es" label="Español" default>
    <track src="media/clase01-en.vtt" kind="subtitles"
           srclang="en" label="English">
    <p>¿Sin soporte? Descarga la
      <a href="media/clase01-transcripcion.txt" download>
        transcripción completa</a>.</p>
  </video>
  <figcaption>Clase 01 — Estructura semántica</figcaption>
</figure>

<section id="donde-estamos">
  <h2>Dónde estamos</h2>

  <iframe
    src="https://www.google.com/maps/embed?pb=TU_CODIGO"
    title="Mapa con la ubicación de la academia"
    width="720" height="360"
    style="border:0"
    loading="lazy"
    allowfullscreen></iframe>

  <h3>Conócenos en 2 minutos</h3>
  <iframe
    src="https://www.youtube.com/embed/TU_ID"
    title="Vídeo de presentación de la academia"
    width="720" height="405"
    loading="lazy"
    allowfullscreen></iframe>
</section>