¿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.

Deja un comentario

TAMBIÉN TE INTERESA

casa-conectada-domótica

Tener una casa conectada ayuda y mucho a combatir el calor del verano

Tener una casa conectada implica una cierta inversión que en muchos casos no es apta para todos los bolsillos. Sin embargo, al mercado han llegado una gran cantidad de dispositivos que están ayudando a democratizar la domótica en los hogares. Tanto en verano como en el invierno, tener el control de los servicios del hogar

Convertir-PDF-a-Word

Convertir PDF a Word y mucho más… desde la plataforma SizePDF

Convertir PDF a diferentes formatos se ha convertido en una auténtica necesidad para los usuarios. Al formato Word, Excel, PPT… El objetivo es que se pueda editar y transformar un PDF a estándares más trabajados en el mundo, de forma que casi cualquier documento que circule se pueda personalizar sin la necesidad de muchos conocimientos.

MacBook-Air-M2-2022

El nuevo MacBook Air estrena el flamante chip M2 de Apple

Como si de un superdeportivo se tratara, Apple lanza el nuevo MacBook Air con motor potente, el chip M2 que el que pretende una experiencia del todo fluida en nuestras tareas habituales. Siendo un hijo pequeño de los portátiles mayores de la marca, esto es importante porque este pequeño gran ordenador nos va a permitir

hacker-efecto-okupa

Los hackers se pueden pasar 15 días husmeando en un equipo

Cada vez surgen más y variadas noticias al respecto del cibercrimen y la ciberseguridad. La delincuencia se está pasando al formato virtual y los hackers pueden hacer sembrar el pánico con solo unos clics.   La líder mundial en ciberseguridad de última generación, Sophos, ha publicado un informe con cifras y asuntos relevantes que, aunque

iOS 16

Apple lanza el iOS 16: hora de lucirse en la personalización

El iOS 16 es oficial. El sistema operativo de Apple para su dispositivos móviles es una realidad tras su presentación en la conferencia para desarrolladores WWDC 2022. La marca se ha centrado en la personalización y en la mejora de la mensajería, aunque hay muchos detalles que pueden ilusionar a los fans de la compañía.

enviar-un-correo-electrónico

¿Contamina enviar un correo electrónico?

Enviar un correo electrónico es, quizás, la forma más primaria de utilizar internet en la actualidad. Sin duda, este método ha resuelto infinidad de procesos desde su creación y ha dejado el correo postal en cifras bastante marginales. Seguramente también ha ayudado mucho a proteger el medio ambiente evitando el uso de toneladas y toneladas