vamos a estudiar dos elementos o etiquetas, que para los que estáis siguiendo el "curso" os sonará bastante. No porque conozcáis estos elementos, si no, porque son dos elementos que tienen mucho que ver con la semántica en la web.
Os hablo de los elementos <figure> y <figcaption> y que deben ser utilizadas para por ejemplo, prensa, revistas o con imágenes, gráficos, tablas, vídeos o fragmentos de código acompañados de un texto explicativo de dicho elemento. Hasta la aparición de HTML5 no era posible dar ningún carácter semántico a este tipo de elementos.Las etiquetas <figure> y <figcaption>, crean una figura que contiene una leyenda (o texto explicativo), que queda unido a la figura y le aporta un significado semántico.
Antes de comenzar con los ejemplos, voy hacer una breve explicación de un elemento que no hemos visto aun, pero que es necesario para ver los ejemplos. Estoy hablando de la etiqueta <img>, que es la encargada de cargar imágenes en HTML5, la cual no lleva cierre y contiene 2 atributos. El primero es src="logo.png" donde especificamos la ruta donde se encuentra alojada la imagen. El segundo es alt="logo html5" que se encarga de dar un mensaje descriptivo de la imagen cuando por cualquier motivo el navegador no puede cargarla.
La etiqueta <figcaption> es la que contiene el texto explicativo o leyenda y puede estar al comienzo o al final de la etiqueta <figure>, pero nunca en medio y solo se puede definir una vez. El objetivo de <figcaption> es asociar algún contenido con un titulo de manera semántica.
Definirlas es bastante sencillo y seguro que cuando veáis como se hace ya lo utilizareis siempre. Pero no solo porque os apetezca, es una obligación utilizar <figure> y <figcaption> si queremos desarrollar un sitio web de la manera correcta. Solo vamos a necesitar un ejemplo para que entendáis todo esto así que vamos a ello.
Obviamente el resultado visual es muy básico, posteriormente podríamos añadirle algunos estilos con CSS3. Pero hasta llegar a CSS3, nos queda bastante camino de HTML5 por delante. Lo que importa es que ya hemos aprendido otro elemento importante para nuestro sitio web y sabemos definirlo de la manera correcta.
Nada más que añadir sobre los elementos <figure> y <figcaption>, creo que ha quedado bastante claro su uso pero si tienes dudas, puedes lanzar tus preguntas. Nada más por ahora y os recuerdo que justo debajo, tenéis el listado de las clases que llevamos hasta la fecha. Me gustaría que compartieses esta publicación con tus amigos, nos regales un me gusta en la página de Facebook y si te apetece únete a la comunidad de Facebook.
0 Comentarios