¿Qué son las etiquetas HTML anidadas y cómo se utilizan?

¿Qué son las etiquetas HTML anidadas y cómo se utilizan?

¿Qué son las etiquetas HTML anidadas y cómo se utilizan?

VALORACIÓN DEL ARTÍCULO:
5/5


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.

TAMBIÉN TE INTERESA

mitos-y-verdades-sobre-redes-5G

Redes 5G: mitos y verdades

¿Hemos ido demasiado rápido pensando en el potencial de las redes 5G? ¿Se ha hablado demasiado y se han dado cosas por sentadas que aún no son ciertas? Tratamos en este post qué hay de cierto y qué no sobre el avance del 5G. Cabe recordar que esta tecnología de conectividad es la que permite

casa-airbnb-en-Santa-Cruz-de-Tenerife

Viajar solo: una opción con funciones añadidas en Airbnb

Viajar solo es una experiencia única según testimonios que se lanzan a hacer turismo en solitario. Te ayuda a conocerte a ti mismo más y mejor, te exige sacar tus habilidades sociales para conectar con gente durante la travesía y, al no tener ataduras conyugales, te permite encontrar un ligue allá donde estés. Índice de

sinalogy-BC500-y-TC500

Estas cámaras de videovigilancia de Sinalogy merecen la pena

Las cámaras de videovigilancia son un elemento fundamental para todo aquel quiera reforzar la seguridad en una casa o en una empresa. Recientemente, se ha conocido que la vivienda del jugador del Real Madrid, Rodrygo, era asaltada mientras el delantero disputaba la final de la Copa del Rey en Sevilla. No es la primera que

beneficios-de-chatGPT-para-emprendedores

8 usos de ChatGPT para cualquier emprendedor

Estamos en la era de ChatGPT y el boom de las aplicaciones de inteligencia artificial. Junto al popular desarrollo de OpenAI, han aparecido un sinfín de soluciones para usuarios y empresas. De hecho, se ha popularizado tanto la inteligencia artificial que es necesario parar porque no se sabe hasta qué punto podría ser dañina. Como

Tecnologia Linea de Gol

La tecnología detrás de la Tecnología de la Línea de Gol

La Tecnología de la Línea de Gol utiliza cámaras de alta velocidad para determinar si el balón ha cruzado completamente la línea, asegurando que los goles sean concedidos de manera más precisa. Este sistema se ha vuelto obligatorio en competiciones de fútbol en todo el mundo desde el 2012, y ha tenido un impacto positivo en la eliminación de controversias y en mejorar la experiencia de los aficionados.