Tutorial XHTML
Unidad 3 - Etiquetas anidadas
Las etiquetas se pueden anidar unas dentro de otras, un buen ejemplo que veréis a diario cuando estéis escribiendo código, es la etiqueta "div", dicha etiqueta sirve para contener otras dentro. Veamos un ejemplo:<head>
<meta charset="utf-8">
<title>Ejemplo de etiquetas anidadas</title>
</head>
<body>
<div style="text-align: center;">
<p>Texto centrado</p>
</div>
<div style="text-align: left;">
<div style="text-align: left;">
<p>Texto alineado a la izquierda</p>
</div>
<div style="text-align: right;">
<p>Texto alineado a la derecha</p>
</div>
</body>
</div>
<div style="text-align: right;">
<p>Texto alineado a la derecha</p>
</div>
</body>
Cómo puedes ver, tenemos para empezar, las etiquetas "meta" y "title" anidadas dentro de "head". Después tenemos los "divs" anidados dentro del "body" y a su vez, tenemos párrafos anidados dentro de los "divs".
Para terminar esta tercera unidad, veamos el correcto orden de apertura y cierre de las etiquetas al anidarlas.
<p>Aquí tenemos un texto normal <span style="color: red;"> y aquí se vuelve rojo.</span>Aquí vuelve a ser normal.</p>
Si cargamos esto en el navegador, aparecerá de esta forma:
Aquí tenemos un texto normal y aquí se vuelve rojo.Aquí vuelve a ser normal.
Si en lugar del anterior código, lo hicieramos así, por ejemplo, estaría mal:
<p>Aquí tenemos un texto normal <span style="color: red;"> y aquí se vuelve rojo.Aquí vuelve a ser normal.</p></span>
Este código, en el navegador se vería así:
Aquí tenemos un texto normal y aquí se vuelve rojo.Aquí vuelve a ser normal.
Aún escribiendo el código mal, el span funciona, pero no estaríamos cumpliendo los estándares del HTML.
Es importante que sepas ya desde el principio, que etiqueta que se abre, si anida otras dentro, se cierra la última.
En el ejemplo, la etiqueta "p" anida la etiqueta "span", por lo que se cierra por último la etiqueta "p".
Cualquier duda que tengas hasta ahora, es importante que me la pongas en los comentarios, te ayudaré a resolverla.
0 comentarios:
Publicar un comentario
Si te a gustado o necesitas ayuda, tus comentarios son agradecidos :D