HTML · Capítulo 1
¿Qué es HTML?
Descubre el lenguaje que da estructura a la web y escribe tu primer elemento HTML.
Teoría
HTML significa HyperText Markup Language — Lenguaje de Marcado de Hipertexto. Es el lenguaje fundamental de la web: todo lo que ves en un navegador (textos, imágenes, botones, formularios) tiene HTML como base.
No es un lenguaje de programación — no tiene lógica ni algoritmos. Es un lenguaje de marcado: usas etiquetas para decirle al navegador qué es cada cosa.
<!-- Esto es HTML básico -->
<h1>Mi primera página web</h1>
<p>¡Hola, mundo! Estoy aprendiendo HTML.</p>
<strong>Este texto está en negrita</strong>💡¿Sabías que?
Los tres pilares de la web
Cada página web se construye con tres tecnologías que trabajan juntas:
- HTML → Estructura (el esqueleto)
- CSS → Estilo (la apariencia visual)
- JavaScript → Comportamiento (la interactividad)
Piénsalo como una casa: HTML es las paredes y los cuartos, CSS es la pintura y los muebles, y JavaScript es la electricidad y la plomería.
Anatomía de un elemento HTML
Un elemento HTML tiene tres partes:
1. Etiqueta de apertura: <etiqueta>
2. Contenido: El texto o elementos anidados dentro
3. Etiqueta de cierre: </etiqueta>
El nombre de la etiqueta describe su significado semántico: <h1> significa "encabezado nivel 1", <p> significa "párrafo", <img> significa "imagen".
<!-- Estructura de un elemento -->
<p>Este es un párrafo de texto.</p>
<!-- ↑ apertura ↑ contenido ↑ cierre -->
<!-- Elementos con contenido anidado -->
<p>Puedes tener <strong>texto en negrita</strong> dentro de un párrafo.</p>
<!-- Encabezados del h1 al h6 -->
<h1>Título principal (el más grande)</h1>
<h2>Subtítulo</h2>
<h3>Sección menor</h3>⚠️Etiquetas auto-cerradas
<br>→ salto de línea
<img>→ imagen
<input>→ campo de formulario
<hr>→ línea horizontal separadora
Estas etiquetas no envuelven contenido, solo insertan algo en la página.
El navegador como intérprete
Cuando abres una página web, tu navegador (Chrome, Firefox, Safari, Edge) lee el HTML y lo convierte en lo que ves en pantalla. Este proceso se llama renderizado.
Los navegadores son muy tolerantes: si cometes un error de HTML, harán su mejor esfuerzo por mostrarlo de todas formas. Pero las buenas prácticas son importantes para la accesibilidad (usuarios con discapacidades) y el SEO (posicionamiento en buscadores).
🚀Pro tip: DevTools
Ejercicio práctico
🎯 Tu misión
Tu misión: modifica el código para crear una pequeña presentación personal. Agrega un `<h1>` con tu nombre, un `<h2>` con tu carrera, y dos párrafos `<p>`: uno describiendo quién eres y otro describiendo por qué estudias informática. Usa `<strong>` o `<em>` para enfatizar palabras importantes.