HTML: Anidar Etiquetas

 

¡Hola, Lectoras (es)! 👋

En el artículo HTML para principiantes, aprendimos que lenguaje de marcado de hipertexto (HTML por sus siglas en inglés) es el lenguaje que crea documentos de la web. Aprendimos que HTML tiene una estructura que require etiquetas que denotan los elementos del documento web. Incluso, vimos cómo lucen las etiqueta de HTML en el navegador.

En el artículo HTML: Atributos de etiquetado, aprendimos sobre los atributos de las etiquetas de HTML. También programamos los atributos de etiquetados y los pudimos observar en acción!

Así que este artículo será sobre anidar etiquetas HTML.

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.

Y probablemente el concepto vino por el factor de que 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:

  1. Etiqueta de apertura
  2. Contenido entre etiquetas
  3. Etiqueta de clausura
<p>Mi gata come mucho.</p>
(1)        (2)        (3)

En HTML: Atributos de etiquetado 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 la anidar etiquetas HTML.

Cómo anidar etiquetas correctamente

Las etiquetas tienen que estar 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.

Y preguntas, ¿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 es un tag de apertura y la mitad inferior de la muñeca es un tag de clausura. Cuando separas ambas partes, hay una muñeca más pequeña en su interior, ¿cierto?

Para continuar con la analogía, la muñeca que está en el interior de la muñeca mas externa pudiera verse como 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>

¡Otro ejercicio!

¿Puedes identificar cuántas etiquetas están anidadas en la etiqueta de body?

Como siempre, sigue los gifs para las respuestas correctas.

Respuestas: La etiqueta title no esta anidada correctamente y hay 2 etiquetas dentro de la etiqueta de body.

¿Cómo te fué?

Excelente si te fue bien. Si no, ¡celebra también por haber intentado!

¿Por qué la anidar etiquetas HTML es importante?

Además de evitar errores de visualización de páginas web, anidar etiquetas se utiliza especialmente 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 del estilo (denotado por el etiqueta de apertura) y el final del estilo (denotado por la etiqueta de clausura).

Para aprender más sobre los atributos de etiquetas HTML puedes visitar HTML: Atributos de etiquetado.

Punto aparte

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

Leave a Reply

Your email address will not be published. Required fields are marked *