← Todas las lecciones
Lección 06 de 7
HTML — el esqueleto de la web
HTML no es programación, es un lenguaje de marcado. Le dice al navegador qué es cada pedazo de contenido.
1 · Qué es
HyperText Markup Language
Qué es
HTML es el lenguaje de marcado de todas las páginas web: pone etiquetas al contenido para decir qué es cada cosa.
Por qué existe
El navegador necesita saber: «esto es un título», «esto es un párrafo», «esto es una imagen». Sin etiquetas, solo vería texto plano sin estructura.
Cómo funciona (paso a paso)
- Abres una etiqueta con <…>.
- Pones el contenido (texto, imagen, etc.).
- Cierras con </…> (salvo etiquetas vacías como img).
- El navegador lee esas marcas y arma la página.
Ejemplo sencillo
<p>Hola mundo</p> = «esto es un párrafo que dice Hola mundo».
Analogía
Como etiquetar cajas en una mudanza: «cocina», «ropa», «libros». El contenido es el regalo; la etiqueta dice qué es.
Recuerda
Las etiquetas se escriben con las boquitas < >. Cada bloque de la página es una etiqueta con contenido adentro.
2 · Tipos de etiquetas
Contenedoras vs. no contenedoras
Contenedoras
Pueden tener otras etiquetas y varios tipos de contenido adentro.
<div>
<h1>Título</h1>
<p>Texto y una <img src="..."></p>
</div>No contenedoras
Solo tienen información. No abrazan otras etiquetas.
<img src="foto.jpg" alt="...">
<br>
<hr>3 · Anatomía
Las partes de un elemento HTML
| Parte | Ejemplo | Metáfora |
|---|---|---|
| Etiqueta de apertura | <p> | Abres una caja. |
| Atributo | class="texto" | Instrucciones pegadas fuera de la caja. |
| Contenido | Hola mundo | El regalo — lo único que el usuario ve. |
| Etiqueta de cierre | </p> | Cierras y sellas la caja (con la /). |
| Elemento completo | <p>Hola mundo</p> | El paquete listo para renderizar. |
4 · Vocabulario
Palabras que debes conocer
- Elemento: etiqueta + contenido.
- Atributo: info extra que va dentro de la etiqueta de apertura.
- Documento HTML: el archivo completo. Para verse en pantalla lo procesa el DOM (que conecta el navegador con el archivo).
- Contenido: texto, imagen o dato que va dentro de la etiqueta.
- Usuario: la persona que ve la página ya renderizada.
5 · Títulos y listas
h1 · h2 · h3 · ul · ol · li
Los h1 son títulos grandes y bajan en importancia hasta h6.
<h1>Título principal</h1>
<h2>Subtítulo</h2>
<!-- Lista con viñetas -->
<ul>
<li>papa</li>
<li>papaya</li>
<li>uva</li>
</ul>
<!-- Lista numerada -->
<ol>
<li>Primero</li>
<li>Segundo</li>
</ol>Regla clave
<li> siempre va dentro de <ul> o <ol>. Nunca suelto.
6 · Regla de oro
Todo va dentro de <body>
Qué es
Todo lo que el usuario debe ver va dentro de <body>.
Por qué existe
El navegador espera el contenido visible ahí. Si lo pones fuera, el flujo se rompe y la página se comporta mal.
Cómo funciona (paso a paso)
- head = metadatos (título de pestaña, enlaces a CSS…), casi no se «ve».
- body = lo visible: títulos, párrafos, imágenes, botones.
- Los scripts de interacción suelen ir al final del body.
Ejemplo sencillo
Abres la página y ves el h1 y el p porque están dentro de body.
Analogía
body es el escenario del teatro: ahí ocurre lo que el público mira. head es el backstage (preparativos).
El código
<!DOCTYPE html>
<html>
<head>
<title>Mi página</title>
</head>
<body>
<h1>Hola</h1>
<p>Todo esto SÍ se ve.</p>
<script src="app.js"></script>
</body>
</html>