Empecemos por aclarar algo que confunde a mucha gente: HTML no programa nada. No tiene decisiones, ni bucles, ni funciones.

HTML es un lenguaje de marcado: sirve para decir qué es cada cosa. "Esto es un título", "esto es un párrafo", "esto es un botón".

Piénsalo así: si una página fuera una casa, HTML son los muros y las piezas, CSS es la pintura y los muebles, y JavaScript es la electricidad que hace que las cosas funcionen.

Let us clear up something that confuses a lot of people: HTML does not program anything. No decisions, no loops, no functions.

HTML is a markup language: it says what each thing is. "This is a heading", "this is a paragraph", "this is a button".

Think of it this way: if a page were a house, HTML is the walls and rooms, CSS is the paint and furniture, and JavaScript is the wiring that makes things work.

HTML se escribe con etiquetas, que van entre < y >. Casi siempre vienen de a dos: una que abre y otra que cierra con /.

<p>Esto es un párrafo</p>
 ↑                      ↑
abre                  cierra

Lo que está entre medio es el contenido. Edita el recuadro y verás el resultado al lado.

HTML is written with tags, between < and >. They almost always come in pairs: one opens, one closes with a /.

<p>This is a paragraph</p>
 ↑                       ↑
opens                  closes

What sits between is the content. Edit the box and you will see the result.

Las etiquetas pueden llevar información extra dentro, llamada atributos. Se escriben como nombre="valor".

El más importante para lo que viene es id: le pone un nombre único a un elemento, para poder encontrarlo después desde JavaScript.

Tags can carry extra information inside, called attributes. Written as name="value".

The most important one for what comes next is id: it gives an element a unique name, so you can find it later from JavaScript.

Fíjate en <img>: no lleva etiqueta de cierre. Unas pocas etiquetas son así, porque no tienen contenido adentro — la imagen viene del atributo src.

Y el alt no es opcional en la práctica: es el texto que se lee si la imagen no carga, y es lo que escucha una persona ciega usando un lector de pantalla.

Notice <img>: it has no closing tag. A few tags are like that, because they have no content inside — the image comes from the src attribute.

And alt is not really optional: it is the text shown if the image fails, and what a blind person hears through a screen reader.

Las etiquetas se meten unas dentro de otras, como cajas. Eso arma la estructura de la página.

La etiqueta genérica para agrupar es <div>: no significa nada en particular, solo "una caja".

Lo importante es cerrarlas en el orden correcto: la última que abres es la primera que cierras, igual que unos paréntesis.

Tags nest inside each other, like boxes. That builds the structure of the page.

The generic grouping tag is <div>: it means nothing in particular, just "a box".

The key is closing them in the right order: the last one you open is the first one you close, like brackets.

Que HTML describe qué es cada cosa, no cómo se ve. Las etiquetas que abren y cierran, los atributos como id y src, y cómo se anidan.

Ahora que tienes la estructura, viene hacer que se vea bien.

That HTML describes what each thing is, not how it looks. Opening and closing tags, attributes like id and src, and how they nest.

Now that you have the structure, next comes making it look good.