Si usted mira la marcación HTML para cualquier página web hoy en día, verá los elementos HTML contenidos dentro de otros elementos HTML. Estos elementos que están «dentro» de otros son lo que se conoce como «elementos anidados», y son esenciales para construir cualquier página web hoy en día.
¿Qué significa anidar etiquetas HTML?
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.
Si tiene un bloque de texto que desea en negrita dentro de un párrafo, tendrá dos elementos HTML además del texto mismo.
Ejemplo:
Ejemplo: Esta es una oración de texto.Ese texto es el que usaremos como ejemplo. Así es como se escribiría.
Example: Esta es una oración de texto.
Debido a que desea que la palabra "frase" sea en negrita, agregue etiquetas de apertura y cierre en negrita antes y después de esa palabra.
Example: Esta es una sentencia fuerte de texto .
Como puede ver, tenemos una caja (el párrafo) que contiene el contenido/texto de nuestra oración, más una segunda caja (el par de etiquetas fuertes), que hará que esa palabra sea negrita.
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.
Adición de más etiquetas anidadas
¿Qué pasa si sólo quieres que una o dos palabras sean en negrita y otra en cursiva? Así es como se hace.
Puedes ver que nuestra caja exterior, la
, ahora tiene dos etiquetas anidadas dentro de ella - la y la . Ambos deben estar cerrados antes de que se pueda cerrar la caja que los contiene.
Ejemplo: Esta es una sentencia fuerte de texto y también tiene algo de texto en cursiva.Este es otro párrafo.
En este caso tenemos cajas dentro de cajas! La caja más out es la o una "división". Dentro de esa caja hay un par de etiquetas de párrafo anidadas, y dentro del primer párrafo tenemos un siguiente par de etiquetas y . Una vez más, mire cualquier página web hoy y verá que esto y mucho más nesting está sucediendo! Así es como se construyen las páginas - cajas dentro de cajas.
Por qué debería preocuparse por el anidamiento
La razón número uno por la que debería preocuparse por el anidamiento es si va a utilizar CSS. Las Hojas de Estilo en Cascada se basan en etiquetas que se anidan consistentemente dentro del documento para que puedan decir dónde comienzan y terminan los estilos. Si configura un estilo que debería afectar a todos los "enlaces que están dentro de la división con una clase de texto'contenido principal'" en la página, el anidamiento incorrecto dificulta que el navegador sepa dónde aplicar estos estilos. Veamos algo de HTML:
Ejemplo: Esta es una sentencia fuerte de texto y también tiene algo de texto en cursiva.Este es otro párrafo.
Usando el ejemplo que acabo de mencionar, si quisiera escribir un estilo CSS que impactara el enlace dentro de esta división, y sólo ese enlace (a diferencia de cualquier otro enlace en otras secciones de la página), necesitaría usar el anidamiento para escribir mi estilo, como tal:
.main-content a {
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>. color: #F00;
}Otras razones incluyen la accesibilidad y la compatibilidad de los navegadores. Si su HTML está incorrectamente anidado, no será tan accesible para los lectores de pantalla y los navegadores más antiguos, e incluso podría romper completamente la apariencia visual de una página si los navegadores no pueden averiguar cómo renderizar correctamente una página porque los elementos HTML y las etiquetas están fuera de lugar.
Por último, si te esfuerzas por escribir HTML completamente correcto y válido, necesitarás usar un anidamiento correcto. De lo contrario, cada validador marcará su HTML como incorrecto.
