Si observa el marcado HTML de cualquier página web hoy, verá 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 en la actualidad.
¿Qué significa anidar etiquetas HTML?
La forma más fácil de entender el anidamiento es pensar en las etiquetas HTML como cuadros que contienen su contenido. Su contenido puede incluir texto, imágenes, etc. Las etiquetas HTML son los cuadros alrededor del contenido. A veces, necesitas 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 texto en sí.
Ejemplo: esto es un frase de texto
Ese texto es lo que usaremos como nuestro ejemplo. Así es como se escribiría.
Ejemplo: Esta es una oración de texto. Como quiere que la palabra "oración" esté en negrita, agregue etiquetas de apertura y cierre antes y después de esa palabra.
Ejemplo: esto es un frase de texto Como puede ver, tenemos un cuadro (el párrafo) que contiene el contenido / texto de nuestra oración, más un segundo cuadro (el par de etiquetas fuertes), que hará que esa palabra aparezca en negrita. Cuando anida etiquetas, es sumamente importante que cierre las etiquetas en el orden opuesto al que las abrió. Abres el primero, seguido por el , lo que significa revertir eso y cerrar la y luego el Otra forma de pensar acerca de esto es usar una vez más la analogía de las cajas. Si coloca un cuadro dentro de otro cuadro, debe cerrar el interior antes de poder cerrar el cuadro exterior o contenedor. ¿Qué sucede si solo quiere que una o dos palabras estén en negrita, y que otro conjunto esté en cursiva? Aquí es cómo hacer eso. Ejemplo: esto es un frase de texto y también tiene algunos texto en cursiva también. Se puede ver que nuestra caja exterior, la , ahora tiene dos etiquetas anidadas en su interior - la y el . Ambos deben cerrarse antes de que la caja contenedora pueda cerrarse. Ejemplo: esto es un frase 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! El cuadro más fuera es el La razón número uno por la que debería preocuparse por el anidamiento es si va a usar CSS. Las hojas de estilo en cascada confían en que las etiquetas se aniden constantemente dentro del documento para que pueda indicar 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 de" contenido principal "en la página, el anidamiento incorrecto dificulta que el navegador sepa dónde aplicar estos estilos. Veamos algunos HTML: Ejemplo: esto es un frase de texto y también tiene algunos texto en cursiva también. Este es otro párrafo. Usando el ejemplo que acabo de decir, si quisiera escribir un estilo CSS que impactaría el enlace dentro de esta división, y solo ese enlace (a diferencia de otros enlaces en otras secciones de la página), necesitaría usar el Anidando para escribir mi estilo, como tal: .main-content a { color: # F00;}
Otras razones incluyen la accesibilidad y la compatibilidad del navegador. 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 completamente el aspecto visual de una página si los navegadores no pueden encontrar la manera de representar una página correctamente, ya que los elementos y etiquetas HTML están fuera de lugar Finalmente, si te estás esforzando por escribir HTML completamente correcto y válido, necesitarás usar el anidamiento correcto. De lo contrario, cada validador marcará su HTML como incorrecto. Agregar más etiquetas anidadas
¿Por qué debería preocuparse por la anidación?
