Elementos HTML

Ya conoces el esqueleto básico del documento. Esta lección se centra en los bloques de construcción dentro de la página: elementos HTML. Cada encabezado, párrafo y la mayoría de las demás piezas de una página son elementos.

¿Qué es un elemento HTML?

Un elemento HTML es una unidad completa de marcado. Para la mayoría de elementos que envuelven contenido tiene tres partes:

1. Una etiqueta de inicio — por ejemplo <p>
2. El contenido — el texto o elementos anidados dentro
3. Una etiqueta de fin — por ejemplo </p>
   Juntos, <p>Hola</p> es un elemento de párrafo.

Respuesta directa

Un elemento HTML suele significar una etiqueta de inicio, contenido opcional y una etiqueta de fin que coinciden. El navegador usa ese par para saber dónde empieza y termina el elemento. Algunos elementos vacíos no envuelven contenido y por tanto no usan una etiqueta de fin separada.

Leer el ejemplo

• <p> abre un elemento de párrafo
• El texto entre las etiquetas es el contenido
• </p> cierra el párrafo
• El encabezado funciona igual con <h1> y </h1>

Elementos anidados

Los elementos pueden situarse dentro de otros. Eso se llama anidación. El elemento interno debe abrirse y cerrarse por completo antes de que cierre el exterior.

Aquí el elemento strong está anidado dentro del elemento p. La anidación marca significado dentro de trozos mayores de contenido. Mantén el árbol limpio: no solapes etiquetas abriendo p, abriendo strong y cerrando p antes que strong.

Elementos vacíos (void)

Algunos elementos no envuelven contenido. A menudo se llaman vacíos o void. Un ejemplo habitual para principiantes es el salto de línea:

La etiqueta <br> crea un salto de línea. No tiene etiqueta de cierre separada ni texto interior. Más adelante verás otros elementos vacíos como las imágenes. Por ahora recuerda: no todo elemento parece un sándwich inicio-contenido-fin.

Etiquetas frente a elementos

A veces se dice «etiqueta» y «elemento» como si fueran lo mismo. Una etiqueta es el marcado entre corchetes angulares. Un elemento es la unidad completa que entiende el navegador — a menudo etiqueta de inicio + contenido + etiqueta de fin. Decir «el elemento p» suele significar la unidad completa de párrafo.

Pruébalo tú mismo

1. Abre tu archivo HTML básico
2. Añade un párrafo con texto strong anidado
3. Añade un segundo párrafo que use <br> entre dos líneas cortas
4. Guarda y actualiza el navegador
5. Confirma que el texto en negrita y el salto de línea aparecen como esperas

Errores comunes

• Olvidar la etiqueta de cierre en elementos que la necesitan
• Solapar etiquetas en lugar de anidarlas limpiamente
• Tratar cada etiqueta como si debiera tener contenido y etiqueta de fin (los vacíos difieren)
• Nombre de cierre incorrecto, como emparejar </p> con <h1>
• Poner contenido visible de la página fuera de body

Resumen

• La mayoría de elementos HTML usan etiqueta de inicio, contenido y etiqueta de fin
• Los elementos anidados deben cerrarse en el orden correcto
• Elementos vacíos como br no envuelven contenido
• Una etiqueta es el marcador entre corchetes; un elemento es la unidad completa
• Practica anidación y un salto de línea simple en tu página
• Los atributos, que añaden información extra a las etiquetas, llegan en la siguiente lección