01 - HTML

HTML (*HyperText Markup Language*) describe la estructura de una página web mediante etiquetas. El navegador la interpreta y la presenta; CSS aporta el aspecto y JavaScript (o TypeScript) el comportamiento.

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Catálogo de libros</title>
  </head>
  <body>
    <h1>Catálogo</h1>
  </body>
</html>

• <!DOCTYPE html> declara la versión del lenguaje.
• <head> contiene metadatos: codificación, título, enlaces a CSS.
• <body> contiene el contenido visible.

Las etiquetas describen el significado del contenido, no su aspecto:

<body>
  <header>
    <nav>...</nav>
  </header>
  <main>
    <section>
      <h2>Novedades</h2>
      <p>Los últimos títulos incorporados.</p>
    </section>
    <article>...</article>
  </main>
  <footer>...</footer>
</body>

<h2>Novedades</h2>
<p>Los últimos <strong>títulos</strong> incorporados.</p>

<ul>
  <li>Novela</li>
  <li>Ensayo</li>
</ul>

<a href="/books/42">Ver el libro</a>
<img src="cover.png" alt="Portada del libro">

Los formularios recogen datos del usuario y los envían al servidor:

<form action="/login" method="post">
  <label for="email">Correo</label>
  <input id="email" name="email" type="email" required>

  <label for="password">Contraseña</label>
  <input id="password" name="password" type="password" minlength="12" required>

  <button type="submit">Iniciar sesión</button>
</form>

<table>
  <thead>
    <tr><th>Título</th><th>Autor</th></tr>
  </thead>
  <tbody>
    <tr><td>Código limpio</td><td>Robert C. Martin</td></tr>
  </tbody>
</table>