¿Qué es HTML?

HTML (HyperText Markup Language) es la base de la web. No es un lenguaje de programación—es un lenguaje de marcado que define la estructura y el contenido de las páginas web usando elementos (etiquetas). Cada sitio web que visitas está construido con HTML.

Piensa en HTML como el esqueleto de una página web: proporciona estructura. CSS añade el estilo (piel y ropa), y JavaScript añade interactividad (movimiento y comportamiento).

Ejemplo: Cuando ves un encabezado en una página web, está envuelto en etiquetas HTML como <h1>Encabezado</h1>. El navegador lee estas etiquetas y muestra el contenido de acuerdo a ellas.

Estructura Básica de HTML

Todo documento HTML sigue esta estructura básica:

<!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 Web</title>
</head>
<body>
  <h1>Bienvenido a Mi Página</h1>
  <p>Este es un párrafo de texto.</p>
</body>
</html>

Entendiendo Cada Parte

<!DOCTYPE html> — Indica al navegador que este es un documento HTML5 (¡siempre inclúyelo primero!)
<html lang="es"> — El elemento raíz; lang="es" ayuda a los lectores de pantalla y motores de búsqueda
<head> — Contiene metadatos (información sobre la página) que no aparecen en la página misma
<meta charset="UTF-8"> — Establece la codificación de caracteres (soporta todos los idiomas y símbolos)
<meta name="viewport"...> — Hace que tu sitio sea compatible con móviles (¡esencial!)
<title> — Se muestra en las pestañas del navegador y en los resultados de búsqueda
<body> — Todo lo visible en la página va aquí

Elementos de Texto

HTML proporciona varios elementos para estructurar contenido de texto:

Encabezados (h1 a h6)

Este es un encabezado h1

Este es un encabezado h2

Este es un encabezado h3

Este es un encabezado h4

Este es un encabezado h5

Este es un encabezado h6

<h1>Encabezado Principal de la Página</h1>
<h2>Encabezado de Sección</h2>
<h3>Encabezado de Subsección</h3>
<!-- h4, h5, h6 para niveles más profundos -->

¡Usa solo UN h1 por página! Es como el título de un libro.

Párrafos y Formato de Texto

Este es un párrafo normal con algo de texto en negrita y texto en cursiva.

Este párrafo tiene una sección resaltada y algo de código en línea.

<p>Texto de párrafo regular.</p>

<strong>Texto en negrita</strong> (importante)
<em>Texto en cursiva</em> (énfasis)
<mark>Texto resaltado</mark>
<code>Código en línea</code>
<small>Texto más pequeño</small>

<!-- Saltos de línea -->
Línea uno<br>
Línea dos

<!-- Línea horizontal -->
<hr>

Enlaces e Imágenes

Enlaces (Etiquetas Anchor)

Enlace externo a example.com

Enlace interno a /about

Saltar a #section en esta página

Enlace de correo electrónico

<!-- Enlace externo -->
<a href="https://example.com">Visitar Example</a>

<!-- Enlace interno -->
<a href="/about">Página Acerca de</a>

<!-- Enlace ancla (salta a sección en la misma página) -->
<a href="#section-id">Saltar a Sección</a>

<!-- Abrir en nueva pestaña -->
<a href="https://example.com" target="_blank" rel="noopener">
  Nueva Pestaña
</a>

<!-- Enlace de correo -->
<a href="mailto:hello@example.com">Envíanos un correo</a>

<!-- Enlace de teléfono -->
<a href="tel:+1234567890">Llámanos</a>

Imágenes

<!-- Imagen básica -->
<img src="foto.jpg" alt="Descripción de la imagen" />

<!-- Con dimensiones -->
<img src="foto.jpg" alt="Foto" width="400" height="300" />

<!-- Imagen responsive -->
<img src="imagen.jpg" alt="Descripción" style="max-width: 100%; height: auto;" />

¡SIEMPRE incluye el atributo alt! Es crucial para la accesibilidad y el SEO.

Listas

Lista Desordenada (Viñetas)

Café
Té
Leche

<ul>
  <li>Café</li>
  <li>Té</li>
  <li>Leche</li>
</ul>

Lista Ordenada (Números)

Primer paso
Segundo paso
Tercer paso

<ol>
  <li>Primer paso</li>
  <li>Segundo paso</li>
  <li>Tercer paso</li>
</ol>

Listas Anidadas

Frutas
- Manzanas
- Naranjas
Verduras
- Zanahorias
- Brócoli

<ul>
  <li>Frutas
    <ul>
      <li>Manzanas</li>
      <li>Naranjas</li>
    </ul>
  </li>
  <li>Verduras
    <ul>
      <li>Zanahorias</li>
      <li>Brócoli</li>
    </ul>
  </li>
</ul>

Atributos HTML

Los atributos proporcionan información adicional sobre los elementos HTML. Siempre van en la etiqueta de apertura:

<!-- id: Identificador único (solo uno por página) -->
<div id="header">Solo un elemento puede tener este id</div>

<!-- class: Identificador reutilizable (para CSS/JS) -->
<p class="text-large blue">Puede tener múltiples clases</p>

<!-- style: CSS en línea (no recomendado para producción) -->
<p style="color: red; font-size: 18px;">Texto rojo</p>

<!-- title: Texto de tooltip al pasar el cursor -->
<abbr title="HyperText Markup Language">HTML</abbr>

<!-- data-*: Atributos de datos personalizados -->
<button data-user-id="123" data-action="delete">Eliminar</button>

<!-- Atributos comunes de input -->
<input type="text" placeholder="Ingresa nombre" required disabled />

Contenedores: div y span

Contenedores genéricos para agrupar contenido:

<div> - Contenedor de Bloque

Bloque 1

Bloque 2

<div>
  <p>Ocupa todo el ancho</p>
  <p>Comienza en nueva línea</p>
</div>

<span> - Contenedor en Línea

Este es texto en línea con spans.

<p>
  Texto con <span>contenedor</span>
  en línea.
</p>

Errores Comunes de Principiantes

Olvidar etiquetas de cierre: <p>Texto (mal) vs <p>Texto</p> (bien)
Usar etiquetas obsoletas: <center>, <font> (usa CSS en su lugar)
Falta de alt en imágenes: ¡Siempre inclúyelo para accesibilidad!
Anidamiento incorrecto: <p><div></div></p> (no puedes poner bloque dentro de línea)
Múltiples etiquetas h1: Solo un h1 por página para SEO
Usar onclick en HTML: Usa event listeners de JavaScript en su lugar

Mejores Prácticas de HTML

Siempre incluye <!DOCTYPE html> al inicio
Usa HTML semántico (¡lo cubriremos a continuación!)
Indenta los elementos anidados para legibilidad
Usa minúsculas para etiquetas y atributos
Siempre cierra las etiquetas (incluso las autocerrantes con />)
Incluye el atributo lang en <html>
Valida tu HTML con el Validador W3C

Fundamentos de HTML