Etiquetas figure y figcaption. Nuevas y viejas etiquetas

La etiqueta <figure> se utiliza para insertar elementos que tienen que ver con el contenido, pero a la vez son independientes, las imágenes cumplen esa condición, también elementos de video, elementos de flash...

Veamos un ejm.

<!DOCTYPE html>
<html lang="es">
<head>

</head>
<body>
<section>
<article>
<header>Título de la noticia</header>
<figure>
<img src="imagen.jpg" />
<figcaption>texto de la imagen</figcaption>
</figure>
<p>Texto de la noticia</p>
<p>Texto 2 de la noticia</p>
<footer>Pie de la noticia</footer>
</article>
</section>
</body>
</html>

Los formatos admitidos en HTML5 son:

  • jpg
  • gif (256 colores aceptados)
  • png (admite 8 o 16 bits)

Estos 3 formatos son comprimidos

La etiqueta <figcaption> nos permite poner un pie de imagen con texto. Tiene que estar dentro de <figure>.

Nuevas etiquetas HTML5

  • <mark> </mark>: sirve para resaltar texto. Tiene el típico efecto de rotulador resaltador que en principio no tiene que dar importancia o énfasis.
  • <em> </em>: sustituye en la actualidad a la etiqueta <i></i> (en desuso). Indica énfasis, lo pone en cursiva.
  • <strong> </strong>: sirve para marcar texto importante. El efecto es el mismo que el de la etiqueta <b>, está sustituyendo a dicha etiqueta, que aunque a día de hoy se sigue utilizando, con el tiempo desaparecerá.
  • <b> </b>: tiene el mismo uso que <strong> para cada día se utiliza menos.
  • <small> </small>: es para presentar textos legales, como 'derechos reservados' en el footer.
  • <cite> </cite>: sirve para resaltar títulos de libros, canciones, películas...
  • <address> </address>: esta etiqueta se supone que debe ir siempre en el footer, e indicaría la dirección, el tlfo. Es un tipo de etiqueta blocklevel, que significa que es una etiqueta que tiene un salto de línea tanto por arriba como por abajo.
  • <time> </time>: representa fechas y horas. Puede lleva el atributo datetime que lo que hace es referencia a la fecha y a la hora a la que estamos haciendo referencia, y la notación debe ser: 2021-05-09 (año-mes-dia) (<time datetime="2021-05-09" pubdate>Noticia publicada el 21-01-2021</time>). El atributo pubdate nos indica que se trata de una etiqueta fecha/hora.