Si intentamos desarrollar una pagina, con pocas etiquetas, y menos conocimientos, nos ocurre algo como lo que vimos en el articulo anterior. Necesariamente nos queda…pobre.
HTML ya disponía de un montón de etiquetas que nos permitían gestionar el contenido; la mayoría siguen vigentes en HTML5, y ademas se han añadido otras, vamos a ver las que no hemos comentado anteriormente, y así tener una buena visión del conjunto.
Primero, terminemos de ver unas cuantas etiquetas semánticas que gestionan bloques y que no hemos revisado.
< figure > / < figcaption >
Se trata de una unidad de contenido, equivalente a «article» pensada para recoger una o mas imágenes, y que puede, opcionalmente, disponer de un pie de foto, con la etiqueta «figcaption». Dado que establece una relación de dependencia entre el contenido de «figure» y «figcaption», se puede utilizar también para subtitular texto.
Con imágenes quedaría algo como:
< figure >
< h1 >Presentacion del proyecto</h1>
< img src="imagen1.jpg"/>;
< img src="imagen2.jpg" alt="" />
< figcaption>
Imagenes del proyecto
</figcaption>
</figure>
y con texto, hariamos:
<figure>
Siempre que se hace una historia
se habla de un viejo, de un niño, o de si
pero mi historia es dificil,
no voy a hablarles de un hombre comun
....
<figcaption>
Cancion del elegido. Silvio Rodrigues
</figcaption>
</figure>
< details > / < summary >
Se trata de dos etiquetas que cubren una función que llevamos tiempo debiendola implementar con javascript, y ahora nos viene de serie…. La posibilidad de dejar a la vista solo una etiqueta «summary», y desplegar el texto al hacer click.
La implementacion seria:
<details> <summary> Cantares </summary> Todo pasa y todo queda,
pero lo nuestro es pasar,
pasar haciendo caminos,
caminos sobre el mar.
Nunca perseguí la gloria,
ni dejar en la memoria
de los hombres mi canción;
yo amo los mundos sutiles,
ingrávidos y gentiles,
como pompas de jabón. </details>
A continuación, podéis ver como queda en nuestra web
Cantares
Todo pasa y todo queda,
pero lo nuestro es pasar,
pasar haciendo caminos,
caminos sobre el mar.
Nunca perseguí la gloria,
ni dejar en la memoria
de los hombres mi canción;
yo amo los mundos sutiles,
ingrávidos y gentiles,
como pompas de jabón.
Si quisiéramos que el bloque «details» se mostrara desplegado, le añadiríamos el atributo «open» como
<details open>.......
Si queremos controlar desde la hoja de estilos las propiedades, podemos utilizar dos selectores:
- selector «details {………}» para controlar el aspecto cuando esta cerrado
- selector «details[open] {………}» para controlar cuando está abierto
< address >
Este bloque debe contener datos respecto a la dirección de contacto del autor del ámbito. De todo el web, si esta a primer nivel, o de un articulo en particular, si esta dentro de un «article»
Aunque la idea es su utilización para direcciones electrónicas, no hay ningún inconveniente en utilizarlo para direcciones postales, teléfonos,….
< main >
Aunque lo comentemos ahora, se trata de la etiqueta que ha de contener el texto mas importante de la web. Debería estar a primer nivel, sin contener aside, header, o footer
Creo que con esto, podéis hacer una nueva revisión del ultimo ejercicio, para ver donde podemos poner «main», y de paso, añadir alguna imagen, como lo hicimos el el ejercicio 1, pero, esta vez utilizando las etiquetas comentadas.
En el siguiente articulo, revisaremos todas aquellas etiquetas que no están pensadas para dirigir bloques, si no, solo pequeños espacios de texto
