Qué es un elemento HTML
Un elemento HTML es todo lo que va desde la etiqueta de inicio hasta la etiqueta de cierre, incluido el contenido que hay entre las dos.
<nombredeetiqueta> El contenido va aquí... </nombredeetiqueta>
Ejemplos de algunos elementos HTML:
<h1>Mi primer encabezado</h1> <p>Mi primer párrafo.</p>
| Etiqueta de inicio | Contenido del elemento | Etiqueta de cierre |
|---|---|---|
<h1> | Mi primer encabezado | </h1> |
<p> | Mi primer párrafo. | </p> |
<br> | ninguno | ninguna |
Nota: algunos elementos HTML no tienen contenido, como el elemento <br>. Esos se llaman elementos vacíos. ¡Los elementos vacíos no tienen etiqueta de cierre!
Elementos HTML anidados
Los elementos HTML pueden estar anidados, es decir, un elemento puede contener otro dentro de él.
Todos los documentos HTML están hechos de elementos anidados. El siguiente ejemplo contiene cuatro elementos HTML: <html>, <body>, <h1> y <p>.
<!DOCTYPE html> <html> <body> <h1>Mi primer encabezado</h1> <p>Mi primer párrafo.</p> </body> </html>
Ejemplo explicado
El elemento <html> es el elemento raíz y define todo el documento HTML. Tiene una etiqueta de inicio <html> y una etiqueta de cierre </html>.
Luego, dentro del elemento <html> hay un elemento <body>:
<body> <h1>Mi primer encabezado</h1> <p>Mi primer párrafo.</p> </body>
El elemento <body> define el cuerpo del documento. Tiene una etiqueta de inicio <body> y una etiqueta de cierre </body>.
Luego, dentro del elemento <body> hay otros dos elementos: <h1> y <p>:
<h1>Mi primer encabezado</h1> <p>Mi primer párrafo.</p>
El elemento <h1> define un encabezado. Tiene una etiqueta de inicio <h1> y una etiqueta de cierre </h1>:
<h1>Mi primer encabezado</h1>
El elemento <p> define un párrafo. Tiene una etiqueta de inicio <p> y una etiqueta de cierre </p>:
<p>Mi primer párrafo.</p>
Nunca te saltes la etiqueta de cierre
Algunos elementos HTML se muestran correctamente aunque olvides la etiqueta de cierre:
<html> <body> <p>Esto es un párrafo <p>Esto es un párrafo </body> </html>
Cuidado: ¡nunca confíes en eso! Si olvidas la etiqueta de cierre pueden producirse resultados inesperados y errores.
Elementos HTML vacíos
Los elementos HTML que no tienen contenido se llaman elementos vacíos. La etiqueta <br> define un salto de línea y es un elemento vacío sin etiqueta de cierre:
<p>Esto es un <br> párrafo con un salto de línea.</p>
HTML no distingue entre mayúsculas y minúsculas
Las etiquetas HTML no distinguen entre mayúsculas y minúsculas: <P> significa lo mismo que <p>.
El estándar HTML no exige etiquetas en minúscula, pero el W3C recomienda usarlas y son obligatorias en documentos más estrictos como XHTML. En este laboratorio siempre escribimos los nombres de las etiquetas en minúscula.
Referencia de etiquetas
| Etiqueta | Descripción |
|---|---|
<html> | Define la raíz de un documento HTML |
<body> | Define el cuerpo del documento |
<h1> a <h6> | Definen los encabezados HTML |
<p> | Define un párrafo |
<br> | Define un salto de línea (elemento vacío) |