Si usted mira la marcación HTML para cualquier página web hoy en día, verá elementos HTML contenidas dentro de otros elementos HTML.
A estos elementos (o etiquetas) que pueden contener a otros (uno o varias) son lo que se les suele denominar como «elementos anidados», y son esenciales para construir cualquier página web hoy en día. Entonces hablamos de etiquetas "que se pueden anidar".
Técnicamente, ¿qué significa anidar etiquetas HTML?
El significado de anidar es según la RAE hallarse o existir en alguien o algo.
Exactamente esto es lo que hacemos cuando escribimos html: anidar etiquetas.
Por ejemplo si vamos al caso más exagerado de todos cualquier etiqueta se encuentra dentro de <html></html>.
Pero vayamos a algo más habitual.
¿Cómo se anida exactamente una etiqueta dentro de otra?
La forma más fácil de entender el anidamiento es pensar en las etiquetas HTML como cajas que contienen el contenido. Su contenido puede incluir texto, imágenes, etc. Las etiquetas HTML son las cajas alrededor del contenido. A veces, es necesario colocar las cajas dentro de otras cajas. Esas cajas «interiores» están anidadas dentro de otras.
Por ejemplo:
<head>
<title> Título de la página </title>
<meta name= "author" content= " Angel Paz " >
</head>
/* Etiquetas anidadas */En este caso tenemos cajas dentro de cajas. La caja más out es la etiqueta <head> . Dentro de esa caja hay un par de etiquetas anidadas.
En este caso vemos que la etiqueta <head> tiene como contenido a otra etiqueta <title> . En este caso se dice que:
- La etiqueta
<head>es el padre de la etiqueta<title>y<meta>. - Y que la etiqueta
<title>y<meta>son hijas de la etiqueta<head>. - La etiqueta
<title>y<meta>son hermanas.
Si nos fijamos, además, la etiqueta anidada <title> está en una nueva línea y con un nivel de indentación/sangrado mayor. Esto es así por una convención mundial a la que se ha llegado para que los programadores escribamos código de una manera similar, tanto para hacernos más fácil y comprensible el código cuando este crezca, como para cuando tengamos que compartirlo con otros programadores.
Cuando anida etiquetas, es muy importante que cierre las etiquetas en el orden opuesto al que las abrió. Primero se abre la puerta, luego el fuerte, lo que significa que se invierte y se cierra el fuerte, y luego el fuerte.
Otra manera de pensar sobre esto es usar una vez más la analogía de las cajas. Si coloca una caja dentro de otra caja, tiene que cerrar la interna antes de poder cerrar la externa o la que contiene la caja.
Para ir a Indice:
Diferencia entre etiquetas anidadas y no anidadas
En la imagen a continuación las etiquetas <strong> y <em> se encuentran dentro de <p>.
La etiqueta <em> se encuentra anidada dentro de <strong>.
En la imagen posterior las etiquetas <strong> y <em> se encuentran dentro de <p>.
Pero la etiqueta <strong> no se encuentra anidada dentro de <em>.
La norma que debemos seguir es que la última etiqueta en abrirse es la primera en cerrarse.
