Etiquetas y Estructura

¿Qué es HTML?

Un documento HTML está formado por elementos que consisten en una etiqueta de apertura, contenido y una etiqueta de cierre. El navegador interpreta estas etiquetas y renderiza la página.

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <title>Mi primera página</title>
  </head>
  <body>
    <h1>¡Hola Mundo!</h1>
    <p>Bienvenido a mi sitio web.</p>
  </body>
</html>
HTML

Etiquetas esenciales

Estas son las etiquetas que usarás en casi todos los proyectos:

Ejemplo: Listas y enlaces

<ul>
  <li>Elemento uno</li>
  <li>Elemento dos</li>
</ul>

<a href="https://google.com" target="_blank">
  Ir a Google
</a>

<img src="foto.jpg" alt="Descripción" width="300">
HTML

HTML Semántico

Las etiquetas semánticas describen el significado del contenido, mejorando la accesibilidad y el SEO. Usa <div> solo cuando ninguna otra etiqueta semántica aplique.

<body>
  <header><nav>...</nav></header>
  <main>
    <section>
      <article>...</article>
    </section>
    <aside>...</aside>
  </main>
  <footer>...</footer>
</body>
HTML

Formularios

Los formularios permiten al usuario ingresar y enviar datos. Cada campo <input> tiene un atributo type que define qué tipo de dato acepta.

<form action="/enviar" method="POST">

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

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

  <select name="pais">
    <option value="co">Colombia</option>
    <option value="mx">México</option>
  </select>

  <textarea name="mensaje" rows="4"></textarea>

  <button type="submit">Enviar</button>
</form>
HTML

Ejercicio Interactivo

Escribe HTML en el editor y presiona Ejecutar para ver el resultado en el panel de la derecha:

Ejercicio 2 — Tabla HTML

Construye una tabla con <table>, <tr>, <th> y <td>:

Tareas

Pon a prueba lo aprendido completando estos retos: