Si miras el HTML margen para cualquier página web actual, verá elementos HTML contenidos dentro de otros elementos HTML. Estos elementos que están "dentro" de otros elementos se conocen como elementos anidadosy son esenciales para crear cualquier página web en la actualidad.
¿Qué significa anidar etiquetas HTML?
La forma más fácil de entender el anidamiento es pensar en Etiquetas HTML como cajas que contienen su contenido. Su contenido puede incluir texto, imágenes y medios relacionados. Las etiquetas HTML son los recuadros que rodean el contenido. A veces, es necesario colocar cajas dentro de otras cajas. Esas cajas "internas" 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 así como el propio texto.
Ejemplo: esta es una oración de texto.
Ese texto es lo que usaremos como ejemplo. Así es como se escribiría en HTML:
Ejemplo: esta es una oración de texto.
Para hacer la palabra oración negrita, agregue etiquetas de apertura y cierre antes y después de esa palabra.
Ejemplo: este es un oración de texto.
Como puede ver, tenemos un cuadro (el párrafo) que contiene el contenido de la oración, más un segundo cuadro (el fuerte par de etiquetas), lo que hace que esa palabra esté en negrita.
Cuando anide etiquetas, ciérrelas en el orden opuesto al que las abrió. Abres el
primero, seguido por el , lo que significa que inviertes eso y cierras el y luego el.
Otra forma de pensar en esto es utilizar una vez más la analogía de las cajas. Si coloca una caja dentro de otra caja, debe cerrar la interior antes de poder cerrar la caja exterior o contenedor.
Agregar más etiquetas anidadas
¿Qué pasa si solo quieres que una o dos palabras sean negrita y otro en cursiva? He aquí cómo hacerlo.
Ejemplo: este es un oración de texto y también tiene algunos texto en cursiva también.
Puede ver que nuestra caja exterior, la
, ahora tiene dos etiquetas anidadas en su interior: la y el . Ambos deben cerrarse antes de que se pueda cerrar la caja que los contiene.
Ejemplo: este es un oración de texto y también tiene algunos texto en cursiva también.
Este es otro párrafo.
En este caso, ¡tenemos cajas dentro de cajas! La caja más externa es la
o a. división. Dentro de esa caja hay un par de anidados. etiquetas de párrafo, y dentro del primer párrafo, tenemos un siguiente. y par de etiquetas.¿Por qué debería importarle el anidamiento?
La razón número uno por la que debería preocuparse por la anidación es si va a utilizar CSS. Hojas de estilo en cascada confíe en que las etiquetas se aniden de forma coherente dentro del documento para que pueda decir dónde comienzan y terminan los estilos. El anidamiento incorrecto dificulta que el navegador sepa dónde aplicar estos estilos. Veamos algo de HTML:
Ejemplo: este es un oración de texto y también tiene algunos texto en cursiva también.
Esto es otro párrafo.
Usando el ejemplo anterior, si quisiéramos escribir un Estilo CSS eso afectaría el enlace dentro de esta división, y solo ese enlace (a diferencia de cualquier otro enlace en otras secciones de la página), necesitaríamos usar el anidamiento para escribir este estilo, como tal:
.main-content a {
color: # F00;
}
Otras Consideraciones
La accesibilidad y la compatibilidad del navegador también son importantes. Si su HTML está anidado incorrectamente, no será tan accesible para los lectores de pantalla y los navegadores más antiguos, e incluso podría romper por completo el apariencia visual de una página si los navegadores no pueden averiguar cómo representar correctamente una página porque los elementos HTML y las etiquetas están fuera de lugar.
Finalmente, si se está esforzando por escribir HTML completamente correcto y válido, deberá usar el anidamiento correcto. De lo contrario, cada validador marcará su HTML como incorrecto.