HTML5

Agregar epígrafes de manera semántica con HTML5

Actualmente cuando queremos ponerle el epigrafe al pie una imagen (caption) haríamos algo así

   <img src="path/a-la/imagen" alt="Acerca de la imagen" />  
   <p>Breve descripción de lo que hay en la imagen</p>

Esta forma de hacerlo no dejaba asociado de manera semántica la imagen a su epígrafe.
Pero hoy con HTML5 y los elementos figure y figcaption se puede hacer de la siguiente manera.

   <figure>  
      <img src="path/to/image" alt="About image" />  
      <figcaption>  
         <p>This is an image of something interesting. </p>  
      </figcaption>  
   </figure>  

Para ver el soporte que tiene en los navegadores podés checkearlo http://caniuse.com/#search=figurea

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s