¡Hola, Lectoras (es)! 👋
En el artículo HTML para principiantes (versión en inglés aquí), aprendimos que lenguaje de marcado de hipertexto (HTML por sus siglas en inglés) es el lenguaje que crea documentos de la web. También conocimos sobre la estructura HTML y que esta require etiquetas que denotan los elementos del documento web. Incluso, vimos cómo lucen las etiquetas de HTML en el navegador.
En el artículo Atributos de etiquetado HTML (versión en inglés aquí) se tocó el tema sobre los atributos de las etiquetas de HTML. Además de programar los atributos de etiquetados y observarlos en acción.
Así que este artículo será sobre anidar etiquetas HTML (versión en inglés aquí).
Pero antes de comenzar, apreciemos por un momento este gif de una muñeca matrioska.
¿Qué es anidar etiquetas HTML ?
Cuando leí “nesting” (aprendí sobre el concepto en inglés) por primera vez instantáneamente pensé en un nido de pájaros.
Asumo que el concepto vino porque los nidos son “contenedores” (contienen objetos, o huevos). Mantén esto en mente cuando continúes leyendo.
En HTML para principiantes aprendimos que una denotación de un elemento HTML consiste de:
- Etiqueta de apertura
- Contenido entre etiquetas
- Etiqueta de clausura
<p>Mi gata come mucho.</p>
(1) (2) (3)En Atributos de etiquetado HTML la estructura de las etiquetas HTML eran más complejas.
<html>
<head>
<title>Hoy es que es</title>
</head>
<body>
<h3>¡A escribir máquina!<h3>
<button>Vamo' Allá</button>
</body>
</html>Ahora hay etiquetas entre etiquetas.
Etiquetas entre etiquetas es anidar etiquetas HTML.
¿Cómo se anidan las etiquetas correctamente?
Las etiquetas tienen que estar anidadas en el orden correcto para que los documentos HTML puedan ser accesibles a los lectores de pantallas y puedan ser compatibles con muchos de los navegadores de web.
Entonces, ¿cuál es el orden correcto de anidación?
La etiqueta que abrió más reciente es siempre la próxima etiqueta en cerrar.
¿Recuerdas la muñeca matrioska que apreciamos hace un rato?
Imaginemos que la mitad posterior de la muñeca matrioska es una etiqueta de apertura y la mitad inferior de la muñeca matrioska es una etiqueta de clausura. Hay otra muñeca matrioska cuando separas ambas partes, ¿verdad?
Para continuar con la analogía, la muñeca que está en el interior de la muñeca mas externa puede representar el contenido entre etiquetas de HMTL.
Digamos que confundiste la mitad posterior de la muñeca mas externa con la mitad inferior del contenido. La muñeca, lo mas probable, no podrá volver a su estado original porque sus partes no encajan correctamente.
Algo similar pasa cuando las etiquetas no están anidadas correctamente.
Es muy probable que anidar incorrectamente las etiquetas HMTL cause que el diseño visual de la página web se rompa debido a que el navegador será incapaz de leer las etiquetas que están fuera de lugar. Otros errores también pueden ocurrir.
¡Hora de practicar!
¿Puedes seguir el orden correcto si regresamos al ejemplo complejo de anidar etiquetas? ¿Puedes identificar si hay algún error en estas etiquetas HTML anidadas?
<html>
<head>
<title>Hoy es que es</head>
</title>
<body>
<h3>¡A escribir máquina!</h3>
<button>Vamo' Allá</button>
</body>
</html>¡Otra pregunta!
¿Puedes identificar cuántas etiquetas están anidadas en la etiqueta de body (<body></body>)?
Como siempre, sigue los gifs para las respuestas correctas.
Respuestas: La etiqueta title (<title></title>) no esta anidada correctamente. Hay 2 etiquetas dentro de la etiqueta de body: le etiqueta h3 (<h3></h3>) y la etiqueta button (<button></button>).
¿Cómo te fué?
Excelente si te fue bien. Si no, ¡celebra también por haber intentado!
¿Por qué anidar etiquetas HTML es importante?
Además de evitar errores de visualización de páginas web, anidar etiquetas se utiliza con CSS (Hojas de estilo en cascada ó Cascading Style Sheets en inglés).
Cuando las etiquetas están anidadas, CSS depende de los atributos de HTML clase y id para identificar en dónde aplicar el comienzo (denotado por el etiqueta de apertura) y el final (denotado por la etiqueta de clausura) del estilo.
Para aprender más sobre los atributos de etiquetas HTML puedes visitar Atributos de etiquetado HTML.
¡Gracias por leer!
Puedes obtener notificaciones de nuevos artículos directamente a tu buzón electrónico registrándote en el siguiente enlace.
Artículos relacionados
Los siguientes artículos de CTRL-Y están relacionados a este escrito. ¡Deberías de echarles un vistazo!
- Una mañana en el terminal Mac de una desarrolladora de front-end
- HTML para Principiantes
- HTML: Atributos de etiquetado
- Recursos para programadoras de web novatas
- Estados HTTP Puerto Rico
- Las partes generales del lenguaje de programación
- ¿Qué es el motor de renderizado?
- Aprende a programar: Bajando el pedestal de programación
Punto aparte – Una lista de reproducción para tí
Este artículo fue escrito mientras escuchaba Boy Harsher Radio generado por Spotify. Me enseñaron de esta banda a principios de este año y ¡no me canso de ellos! Siento que me he perdido mucho por no haber escuchado de esta banda antes. Me encanta la vibra de synth-pop obscuro. Ellos definitivamente me han inspirado a regresar a jugar con mi “drum pad”.