Introducción a HTML

HTML (HyperText Markup Language o Lenguaje de Marcas de Hipertexto) es el lenguaje estándar para crear páginas web.
Con HTML defines la estructura y el contenido de una página web mediante etiquetas.

¿Qué es HTML?

HTML significa HyperText Markup Language:

  • HyperText (Hipertexto): texto que enlaza a otros textos (enlaces).
  • Markup (Marcado): usas etiquetas para “marcar” el contenido.
  • Language (Lenguaje): tiene su propia sintaxis y reglas.

Estructura básica de un documento HTML

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Mi primera página</title>
</head>
<body>
  <h1>¡Hola, mundo!</h1>
  <p>Esta es mi primera página web.</p>
</body>
</html>

✅ Ejercicio:
Crea un archivo index.html con la estructura básica y ábrelo en tu navegador.

Etiquetas básicas

Encabezados

<h1>Encabezado principal</h1>
<h2>Subtítulo</h2>
<h3>Sub-subtítulo</h3>
<!-- ... hasta h6 -->

Párrafos y saltos de línea

<p>Este es un párrafo.</p>
<p>Otro párrafo.<br />Salto de línea dentro del mismo párrafo.</p>

Texto con formato

<strong>Negrita (importante)</strong>
<em>Cursiva (énfasis)</em>
<u>Subrayado</u>
<mark>Resaltado</mark>
<small>Texto pequeño</small>
<del>Tachado</del>
<ins>Insertado</ins>
<sub>Subíndice</sub> H<sub>2</sub>O
<sup>Superíndice</sup> x<sup>2</sup>

✅ Ejercicio:
Crea un párrafo con palabras en negrita, cursiva y resaltado.

Enlaces e imágenes

Enlaces (anchors)

<a href="https://ejemplo.com">Ir a Ejemplo</a>
<a href="https://ejemplo.com" target="_blank" rel="noopener">Abrir en nueva pestaña</a>
<a href="#seccion">Enlace interno a una sección</a>
<a href="mailto:correo@ejemplo.com">Enviar email</a>
<a href="tel:+34600000000">Llamar por teléfono</a>

Imágenes

<img src="imagen.jpg" alt="Descripción de la imagen" width="300" height="200" />
  • src: ruta de la imagen.
  • alt: texto alternativo (accesibilidad y SEO).
  • width / height: dimensiones (opcional, evita saltos de layout).

✅ Ejercicio:
Añade una imagen y un enlace que abra en nueva pestaña.

Listas

Lista desordenada (viñetas)

<ul>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
</ul>

Lista ordenada (números)

<ol>
  <li>Paso 1</li>
  <li>Paso 2</li>
  <li>Paso 3</li>
</ol>

Lista de definición

<dl>
  <dt>HTML</dt>
  <dd>Lenguaje de marcas para la web</dd>
  <dt>CSS</dt>
  <dd>Lenguaje de estilos</dd>
</dl>

✅ Ejercicio:
Crea una lista de tus 3 lenguajes favoritos y una lista ordenada con pasos para hacer un café.

Tablas

<table>
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Edad</th>
      <th>Ciudad</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ana</td>
      <td>28</td>
      <td>Madrid</td>
    </tr>
    <tr>
      <td>Luis</td>
      <td>35</td>
      <td>Barcelona</td>
    </tr>
  </tbody>
</table>
  • <table>: contenedor de la tabla.
  • <thead>: encabezado.
  • <tbody>: cuerpo.
  • <tr>: fila (table row).
  • <th>: celda de encabezado.
  • <td>: celda de datos.

✅ Ejercicio:
Crea una tabla con 3 columnas y 4 filas de datos inventados.

Formularios básicos

<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" required />

  <label for="mensaje">Mensaje:</label>
  <textarea id="mensaje" name="mensaje" rows="4"></textarea>

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

Tipos de input comunes

  • text, email, password, number, tel, url
  • checkbox, radio
  • date, time, datetime-local
  • file, color, range
  • submit, reset, button

✅ Ejercicio:
Crea un formulario de contacto con nombre, email, asunto (select) y mensaje.

Elementos semánticos (HTML5)

HTML5 introdujo etiquetas con significado semántico para mejorar la accesibilidad y el SEO.

<header>Encabezado de la página o sección</header>
<nav>Navegación principal</nav>
<main>Contenido principal</main>
<article>Contenido independiente (artículo, post)</article>
<section>Sección temática</section>
<aside>Contenido lateral (sidebar)</aside>
<footer>Pie de página</footer>

Ejemplo de estructura semántica

<body>
  <header>
    <h1>Mi Blog</h1>
    <nav>
      <ul>
        <li><a href="#inicio">Inicio</a></li>
        <li><a href="#articulos">Artículos</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h2>Título del artículo</h2>
      </header>
      <section>
        <p>Contenido del artículo...</p>
      </section>
      <footer>
        <small>Publicado el 2025-08-25</small>
      </footer>
    </article>
  </main>

  <aside>
    <h3>Sobre mí</h3>
    <p>Desarrollador web...</p>
  </aside>

  <footer>
    <p>&copy; 2025 Mi Blog</p>
  </footer>
</body>

✅ Ejercicio:
Reescribe una página simple usando solo etiquetas semánticas (header, main, section, footer, etc.).

Multimedia

Audio

<audio controls>
  <source src="audio.mp3" type="audio/mpeg" />
  Tu navegador no soporta audio HTML5.
</audio>

Video

<video controls width="640" height="360" poster="portada.jpg">
  <source src="video.mp4" type="video/mp4" />
  Tu navegador no soporta video HTML5.
</video>
  • controls: muestra controles de reproducción.
  • poster: imagen de portada antes de reproducir.

Buenas prácticas y cierre

  • Usa siempre etiquetas semánticas en lugar de <div> genéricos.
  • Incluye siempre alt en las imágenes.
  • Valida tu HTML con el validador W3C.
  • Mantén una estructura limpia y bien indentada.
  • Usa lang en <html> para declarar el idioma.

🎯 Proyecto final

Crea una página personal sencilla con:

  • Un encabezado y un menú de navegación.
  • Una sección con texto e imágenes.
  • Una tabla y una lista.
  • Un formulario de contacto.
  • Estructura semántica completa (header, main, footer, article, section, etc.).