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 *