HTML: Anidación de etiquetas
Un concepto importante en HTML es la anidación de etiquetas. Dentro de una etiqueta HTML se pueden colocar no solo texto, como se hizo anteriormente, sino también otras etiquetas. Esto permite crear diseños complejos en los que las áreas están separadas entre sí: el menú del encabezado del sitio, el bloque publicitario del contenido principal, y así sucesivamente.
Algunos elementos en HTML requieren la anidación de unas etiquetas dentro de otras. Por ejemplo, las listas:
<ul>
<li>Primer elemento de la lista</li>
<li>Segundo elemento de la lista</li>
</ul>
- Primer elemento de la lista
- Segundo elemento de la lista
Para definir una lista se utiliza la etiqueta <ul>, que indica que es una lista marcada. Dentro de ella se encuentran las etiquetas <li>, que definen los elementos de nuestra lista.
Estas anidaciones son similares a los árboles, donde hay un nodo raíz (la etiqueta <ul>) y hojas (las etiquetas <li>)
|──ul
| |──li
| |──li
Interesante: una etiqueta que contiene otras etiquetas también se llama wrapper o envoltorio
El árbol puede seguir creciendo. En las lecciones sobre listas se mostrará que dentro de los elementos de la lista pueden haber otras listas, y este proceso es casi infinito.
Pero también hay excepciones. En HTML no se pueden anidar párrafos dentro de párrafos. El siguiente ejemplo sería incorrecto:
<p>Párrafo
<p>Aquí hay otro párrafo dentro del párrafo</p>.
El párrafo no está satisfecho con esta proximidad
</p>
En esta lección hemos aprendido sobre el concepto de anidación de etiquetas en HTML y lo hemos visto en el ejemplo de la creación de listas marcadas. A lo largo del curso, aprenderás muchas situaciones en las que la anidación es la mejor solución, así como conocerás las etiquetas que no se pueden anidar entre sí.
Tarea
Crea una lista marcada con tres elementos. Este tipo de lista lo has aprendido en la lección
¿El ejercicio no pasa la prueba, qué debo hacer? 😶
Si te quedaste atascado, es el momento perfecto para hacer una pregunta en las "Discusiones".
* Asegúrate de incluir la salida de las pruebas. Sin ella, es casi imposible entender qué está mal, incluso si muestras tu código. Los programadores tienen dificultades para ejecutar el código en su mente, pero casi siempre es posible entender a dónde mirar a partir del error que recibiste.
Mi código funciona en mi entorno, pero no aquí 🤨
Las pruebas están diseñadas de manera que verifican la solución de diferentes maneras y con diferentes datos. A menudo, una solución funciona con ciertos datos de entrada pero no con otros. Para entender este punto, revisa la pestaña "Pruebas" y presta atención a los mensajes de error, que suelen contener pistas.
Mi código es diferente a la solución del profesor 🤔
Esto es normal 🙆. En programación, una tarea puede tener muchas soluciones diferentes. Si tu código pasa la prueba, cumple con los requisitos de la tarea.
En raras ocasiones, la solución puede estar ajustada para pasar las pruebas, pero esto suele ser evidente.
Leí la lección, pero no entendí nada 🙄
Crear materiales de aprendizaje comprensibles para todos es bastante difícil. Hacemos nuestro mejor esfuerzo, pero siempre hay margen para mejorar. Si encuentras material que no entiendes, describe el problema en las "Discusiones". Es ideal si puedes formular los aspectos que no entiendes en forma de preguntas. Por lo general, necesitamos unos días para hacer mejoras.
Por cierto, tú también puedes contribuir a mejorar los cursos: en la parte inferior hay un enlace al código fuente de las lecciones, que se puede modificar directamente en el navegador.