¿Qué es HTML?

En esta lección vas a entender qué es HTML, cómo se escribe y vas a crear tu primer archivo .html funcionando en el navegador. Es el primer paso de todo desarrollador web: absolutamente todas las páginas del mundo están hechas sobre HTML.

Concepto

HTML significa HyperText Markup Language (lenguaje de marcado de hipertexto). No es un lenguaje de programación: no hace cálculos ni toma decisiones. Es un lenguaje de marcado, es decir, sirve para etiquetar el contenido y decirle al navegador qué es cada cosa.

Imagina que le entregas a alguien un texto impreso y con marcadores de colores señalas: "esto es el título", "esto es un párrafo", "esto es una lista", "esto lleva a otra página". Eso es exactamente lo que hace HTML.

• Hipertexto: texto que contiene enlaces hacia otros textos (la esencia de la web).
• Marcado: anotaciones (etiquetas) que rodean el contenido para darle significado.

Etiquetas

Una etiqueta es una palabra clave entre los signos menor que y mayor que. La mayoría van en pareja: una de apertura y una de cierre (con una barra /):

<p>Esto es un párrafo.</p>

• <p> es la etiqueta de apertura.
• </p> es la etiqueta de cierre.
• "Esto es un párrafo." es el contenido.

Elementos

Un elemento es el conjunto completo: etiqueta de apertura + contenido + etiqueta de cierre. Cuando decimos "el elemento párrafo" nos referimos a todo eso.

Algunos elementos son vacíos (void elements): no tienen contenido ni etiqueta de cierre, porque no envuelven nada. Por ejemplo:

<br>       <!-- salto de línea -->
<hr>       <!-- línea divisoria -->
<img src="foto.jpg" alt="Una foto">  <!-- imagen -->
<input type="text">                  <!-- campo de formulario -->
<meta charset="UTF-8">               <!-- información del documento -->

¿Y la barra al final?

Es opcional en HTML5. Verás <br /> en código antiguo (XHTML) o en JSX de React. En HTML moderno ambas formas son válidas; elige una y sé consistente.

Atributos

Los atributos dan información extra a un elemento. Van siempre en la etiqueta de apertura, con la forma nombre="valor":

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

• href indica a dónde lleva el enlace.
• target="_blank" indica que se abra en una pestaña nueva.

Algunos atributos son booleanos: basta con escribirlos para que estén activos.

<input type="email" required>   <!-- required = obligatorio -->
<button disabled>No disponible</button>

Atributos globales que puedes usar en casi cualquier elemento:

Atributo	Para qué sirve
id	Identificador único en la página (para CSS, JS o anclas).
class	Una o varias clases para aplicar estilos (se repiten sin problema).
style	Estilos CSS en línea (úsalo poco).
title	Texto de ayuda que aparece al pasar el mouse.
lang	Idioma del contenido de ese elemento.
hidden	Oculta el elemento.
data-*	Datos personalizados para JavaScript, p. ej. data-precio="45".

Anidamiento

Los elementos pueden ir dentro de otros. A eso se le llama anidar. La regla de oro: el último que abres es el primero que cierras, como cajas dentro de cajas.

<!-- ✅ Correcto: strong se abre y se cierra dentro de p -->
<p>Esto es <strong>muy importante</strong>.</p>

<!-- ❌ Incorrecto: las etiquetas se cruzan -->
<p>Esto es <strong>muy importante.</p></strong>

Al anidar se forma un árbol: un elemento que contiene a otro es su padre, el contenido es su hijo y los elementos al mismo nivel son hermanos. A este árbol el navegador lo llama DOM y lo usarás mucho en CSS y JavaScript.

Comentarios

Los comentarios no se muestran en la página. Sirven para dejar notas a ti o a tu equipo:

<!-- Esto es un comentario: el navegador lo ignora -->

Ojo

Los comentarios sí se ven si alguien abre "Ver código fuente". Nunca pongas contraseñas ni información privada en ellos.

Ejemplo: tu primer archivo HTML

1. Crea una carpeta llamada mi-primer-sitio.
2. Ábrela en VS Code y crea un archivo llamado index.html (el nombre index es el que los servidores buscan por defecto).
3. Pega este código:

<!DOCTYPE html>
<html lang="es">
<head>
  <!-- Codificación para que se vean bien acentos y la ñ -->
  <meta charset="UTF-8">
  <!-- Para que se vea bien en celulares -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Texto de la pestaña del navegador -->
  <title>Mi primera página</title>
</head>
<body>
  <!-- Todo lo que el usuario ve va dentro de body -->
  <h1>¡Hola, mundo!</h1>
  <p>Esta es mi <strong>primera página web</strong> escrita con HTML.</p>
  <ul>
    <li>HTML define la <em>estructura</em>.</li>
    <li>CSS define el <em>aspecto</em>.</li>
    <li>JavaScript define el <em>comportamiento</em>.</li>
  </ul>
  <p>
    <a href="https://developer.mozilla.org/es/docs/Web/HTML" target="_blank" rel="noopener">
      Documentación de HTML en MDN
    </a>
  </p>
</body>
</html>

4. Guarda y haz doble clic en el archivo: se abrirá en tu navegador.

Así se ve (con un poco de CSS para que luzca mejor):

Mi primera página

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Buena práctica: usa Live Server

En VS Code instala la extensión Live Server y da clic en "Go Live". Tu página se recargará sola cada vez que guardes. Te ahorrará cientos de recargas manuales.

Cómo lee el navegador tu HTML

1. Descarga el archivo .html.
2. Lo lee de arriba hacia abajo y construye el árbol DOM.
3. Si encuentra CSS o imágenes, los descarga también.
4. "Pinta" el resultado en pantalla.

El navegador es muy tolerante: si olvidas cerrar una etiqueta, intentará adivinar qué quisiste decir. Eso parece una ventaja, pero en realidad esconde errores que después causan comportamientos raros. Por eso un profesional siempre valida su código (lo verás en Buenas prácticas).

Casos de uso reales

• Inspeccionar cualquier sitio: da clic derecho en una página y elige "Inspeccionar". Verás su HTML. Es la mejor forma de aprender de sitios reales.
• Correos electrónicos: los boletines que recibes están escritos en HTML.
• Aplicaciones: React, Vue o Angular terminan generando HTML. Si dominas HTML, dominarás mejor cualquier framework.

Error común

Guardar el archivo como index.html.txt sin darte cuenta (Windows oculta las extensiones). Activa "Mostrar extensiones de archivo" en el Explorador para evitarlo.

Ejercicios

1. Crea un archivo sobre-mi.html con un título <h1> con tu nombre, dos párrafos sobre ti y una lista con tres pasatiempos.
2. Encuentra los errores en este código:

<p>Me gusta <em>programar</p></em>
<img src="gato.jpg">
<a href=google.com>Google</a>

3. Agrega un comentario en tu archivo que explique qué hace cada sección.

Ver solución

Ejercicio 1:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sobre mí</title>
</head>
<body>
  <!-- Encabezado con mi nombre -->
  <h1>Ana López</h1>
  <!-- Presentación -->
  <p>Soy estudiante de desarrollo web y vivo en Guadalajara.</p>
  <p>Quiero crear sitios para negocios locales.</p>
  <!-- Pasatiempos -->
  <ul>
    <li>Leer</li>
    <li>Andar en bici</li>
    <li>Cocinar</li>
  </ul>
</body>
</html>

Ejercicio 2:

<!-- Las etiquetas estaban cruzadas -->
<p>Me gusta <em>programar</em></p>
<!-- Faltaba el atributo alt -->
<img src="gato.jpg" alt="Mi gato dormido">
<!-- Faltaban comillas y el protocolo https:// -->
<a href="https://google.com">Google</a>

Resumen

• HTML es un lenguaje de marcado que da estructura y significado al contenido.
• Una etiqueta se escribe entre signos menor/mayor; un elemento es apertura + contenido + cierre.
• Los elementos vacíos (<img>, <br>, <input>) no tienen cierre.
• Los atributos van en la etiqueta de apertura con la forma nombre="valor".
• Al anidar, lo último que abres es lo primero que cierras.
• El archivo principal de un sitio se llama index.html.