Les balises de contenu embarqué

En dehors du contenu textuel, une page HTML peut contenir un ensemble de contenus embarqués : images, vidéos, sons… C’est ce qu’on appelle des contenus embarqués.

`figure`

source ↗

La balise <figure> sert à encapsuler un élément intégré au sein de la page. Elle est utilisée pour englober un élément “externe” qui n’affecte pas directement la compréhension de la page. Si vous souhaitez ajouter une légende à cette <figure>, vous pouvez y intégrer une balise <figcaption>.

index.html

  <figure>
    <img src="https://source.unsplash.com/random/800x500?nature" alt="" width="800" height="500" />
  </figure>

`figcaption`

source ↗

La balise <figcaption> permet d’ajouter une légende à une <figure> pour faciliter la compréhension du contenu embarqué pour les utilisateurs et les lecteurs d’écran.

index.html

  <figure>
    <img src="https://source.unsplash.com/random/800x500?nature" alt="" width="800" height="500" />
    <figcaption>Une image récupérée depuis le site Unsplash</figcaption>
  </figure>

Une image récupérée depuis le site Unsplash

`source`

source ↗

La balise <source> permet de renseigner le chemin vers une ressource destinée à être intégrée dans une balise <picture>, <audio> ou <video>.

Attributs

Les deux attributs obligatoires sont src pour indiquer le chemin du média, et type pour indiquer le type du fichier (au format MIME ↗).

Vous pouvez également renseigner l’attribut media, qui permet de déclencher l’affichage d’une source en particulier en fonction d’une media query CSS ↗ :

index.html

<source src="[[ url ]]" media="(min-width: 500px)" type="image/jpeg" />

Les autres attributs disponibles sont les suivants, documentés dans la partie <img> : srcset, sizes, height et width.

Exemple

index.html

  <picture>
      <source src="https://source.unsplash.com/random/800x500?nature" type="image/jpeg" />
      <img src="https://source.unsplash.com/random/800x500?nature" />
  </picture>