¿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

la-IA-estará-detrás-de-todas-nuestras-compras-online

En poco tiempo, la IA estará detrás de todas nuestras compras online…

No sería descabellado pensar que la IA estuviera detrás de todas nuestras compras online en no mucho tiempo. El sector se mueve en estos momentos para proponer soluciones a los ecommerce y el cliente final termina por dejarse guiar por un sistema que va más allá de unas simples recomendaciones. Y es que las herramientas

precio-OPPO-A18

OPPO A18, no se puede pedir más a un móvil por ese precio…

OPPO acaba de lanzar al mercado el nuevo OPPO A18, un smartphone que podrá ser nuestro por una cifra irrisoria en el sector: 139 euros. No hay truco, ese el coste de un teléfono que tiene muchos argumentos para seducir a cualquiera. Evidentemente, no es un gama premium, pero si un gama media de lo

nube-personal-BeeStation

BeeStation o cómo crear una nube personal en tu casa en un periquete

La mayoría de los usuarios de dispositivos móviles utilizan uno más servicios de cloud disponibles en el mercado para el almacenamiento de los archivos. Con la llegada de la nube, el almacenamiento de los móviles y de los equipos informáticos ha pasado a un segundo plano, de manera que ya no es tan importante cuantos

anillo-inteligente-Rikki

Anillo inteligente: dos nuevas propuestas (una ya a la venta y otra en espera)

El anillo inteligente se va haciendo, poco a poco, un hueco en el mercado. Hasta ahora son pocas las referencias que existen, aunque existen algunas destacadas como el Anillo Circular, del que ya hemos hablado en este medio. En el horizonte, empiezan a surgir nuevas propuestas, llamando la atención del desarrollo que prepara Samsung y

presoterapia

La tecnología acerca la presoterapia a los domicilios con nuevos dispositivos

La presoterapia es una técnica terapéutica utilizada en el campo de la medicina estética y la fisioterapia para mejorar la circulación sanguínea y linfática, reducir la retención de líquidos, eliminar toxinas y favorecer la eliminación de la celulitis. Consiste en la aplicación de presión controlada sobre diferentes partes del cuerpo mediante el uso de dispositivos

Apple Vision Pro

Vision Pro: La revolución tecnológica que está conquistando España

Apple Vision Pro es la última revolución en la computación espacial. Integrando contenido digital y el mundo físico, ofrece experiencias de entretenimiento impactantes y captura recuerdos con su primera cámara tridimensional. A pesar de algunas debilidades, ha generado gran expectación en redes sociales y se ha convertido en un fenómeno social único. Descubre sus características,