HTML en un 2 por 3

 

Parte 3 de la Serie HTML “Fácil” a lo Boricua

“Fácil a lo Boricua” es el título de una serie de artículos que intenta explicar HTML de una manera fácil. Cada parte de la serie se titula con una frase diferente utilizada por los puertorriqueños, o boricuas, para expresar facilidad. “En un 2 por 3” significa “rápido, por ende, sencillo”.

¡¿Qué es la que, Lectoras (es) ?! 👋

🎸🎶Si volviera a comenzaaaaar… 🎸🎶

Esa es la canción que me viene a la mente cuando pienso en la frase “volver a comenzar”.

Así que, 🎶volvemos a comenzar 🎶con mi adorada serie HTML Fácil a lo Boricua.

Vamos a repasar lo que hemos cubierto hasta ahora.

En la Parte 1 de la serie HTML Fácil a lo Boricua, aprendimos que HTML es un lenguaje de marcado de hipertexto para 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 la Parte 2 de la serie HTML Fácil a lo Boricua, 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, Parte 3 de la serie HTML Fácil a lo Boricua, será sobre Anidar Etiquetas HTML.

Pero antes de comenzar, apreciemos por un momento este gif de una muñeca matrioska.

Pinéame ☺️

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

Cuando aprendimos de estructura de HTML en la Parte 1 de la serie HTML Fácil a lo Boricua, una simple 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)

Como continuaste leyendo mi serie HTML Fácil a lo Boricua y tus habilidades en HTML han progresado 😎, pudiste haber notado que en la Parte 2 la estructura de las etiquetas HTML se veían más complejos.

<html>
    <head>
        <title>Hoy es que es</title>
    </head>
    <body>
        <h3>¡A escribir máquina!<h3>
        <button>Vamo' Allá</button>
    </body>
</html>

Nota como 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.

Sólo hay que ….

Tú conoces esto…

¿Lista(o) para las respuestas?

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

¿Lo entendiste?

Excelente si así fue… si no… ¡celebra también por haber tratado!

¿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 Parte 2 de la serie HTML Fácil a lo Boricua.

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

Pinéame ☺️

Leave a Reply

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