Si mira el marcado HTML de cualquier página web hoy, verá elementos HTML contenidos en otros elementos HTML. Estos elementos que son & amp; quot; inside & amp; quot; de otros elementos se conocen 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 la anidación es pensar en & amp; amp; nbsp; etiquetas HTML como cuadros y amp; amp; nbsp; que contienen su contenido.& amp; amp; nbsp; su contenido puede incluir texto, imágenes y medios relacionados. Las etiquetas HTML son los cuadros alrededor del contenido. A veces, necesita colocar cajas dentro de otras cajas. Esos & amp; quot; inner & amp; quot; las cajas están anidadas dentro de otras.
Si tiene un bloque de texto que desea negrita & amp; amp; nbsp; dentro de un párrafo, usted & amp; apos; ll tendrá dos & amp; amp; nbsp; elementos HTML & amp; amp; nbsp; así como el texto mismo.
& lt; pre & gt; Ejemplo: Esta es una oración de texto.& lt; / pre & gt ;
Ese texto es lo que usaremos como nuestro ejemplo.& amp; amp; nbsp; Así es como se escribiría en HTML:
& lt; pre / & gt ;
Ejemplo: esta es una oración de texto.
Para hacer que la palabra oración sea negrita, agregue las etiquetas de apertura y cierre antes y después de esa palabra.
& lt; pre / & gt ;
Ejemplo: esta es una 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 par de etiquetas fuerte ), que hace que esa palabra sea negrita.
Video destacado
Cuando anide etiquetas, cierre las etiquetas en el orden opuesto para abrirlas. Abres el
primero, seguido del , lo que significa que invierte eso y cierra el y luego el
Otra forma de pensar sobre esto es usar una vez más la analogía de las cajas. Si coloca una caja dentro de otra caja, debe cerrar la interna antes de poder cerrar la caja externa o que la contenga.
Agregar más etiquetas anidadas
¿Qué pasa si solo quieres que una o dos palabras sean audaces y que otro sea cursiva?? Aquí y amp; apos; s cómo hacer eso.
& lt; pre / & gt ;
Ejemplo: esta es una oración de texto y también tiene un texto en cursiva también.
Puedes ver que nuestra caja exterior, la
, ahora tiene dos etiquetas anidadas dentro y amp; # x2014; the y the . Ambos deben cerrarse antes de que se pueda cerrar la caja que contiene.
& lt; fuerte / & gt ;
& lt; p / & gt ;
& lt; pre / & gt; & lt; br & gt ;
Ejemplo: esta es una oración de texto y también tiene un texto en cursiva también.
& lt; br & gt ;
Este es otro párrafo.
& lt; br & gt ;
En este caso, tenemos cajas dentro de cajas!& amp; amp; nbsp; La caja más externa es la
o una división . Dentro de ese cuadro hay un par de etiquetas de párrafo anidadas, y dentro del primer párrafo, tenemos un par de etiquetas siguiente y .
& lt; p / & gt ;
¿Por qué debería importarle anidar
?
El no. Una razón por la que debería preocuparse por la anidación es si usted y amp; apos; van a usar CSS. Las hojas de estilo en cascada se basan en etiquetas y amp; amp; nbsp; para anidarlas constantemente dentro del documento para que pueda saber dónde comienzan y terminan los estilos. La anidación incorrecta dificulta que el navegador sepa dónde aplicar estos estilos. Let & amp; apos; s mira un poco de HTML:
& lt; pre / & gt; & lt; br & gt ;
Ejemplo: esta es una oración de texto y también tiene un texto en cursiva también.
& lt; br & gt ;
Este es otro párrafo.
& lt; br & gt ;
Usando el ejemplo de arriba, si quisiéramos escribir un estilo CSS que afectara 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 anidación para escribir este estilo, como tal:
& lt; pre & gt; .contenido principal a {& lt; br & gt ;
& amp; amp; nbsp; color: # F00; & lt; br & gt ;
} & lt; / br & gt; & lt; / br & gt; & lt; / pre & gt ;
Otras consideraciones
La accesibilidad y la compatibilidad del navegador también son importantes. Si su HTML está anidado incorrectamente, ganó & amp;apos;No será tan accesible para los lectores de pantalla y los navegadores más antiguos;# x2014;e incluso podría romper por completo la apariencia visual de una página si los navegadores no pueden descubrir cómo representar correctamente una página porque los elementos y etiquetas HTML están fuera de lugar.
Finalmente, si usted y amp; apos; se esfuerzan por escribir HTML completamente correcto y válido, usted y amp; apos; necesitarán usar la anidación correcta. De lo contrario, cada validador marcará su HTML como incorrecto.
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
&erio; # x203A; Informática
