Comment associer des légendes avec des images ou des médias à l'aide de la figure HTML et des éléments FigCaption?

Utilisez HTML <figure> et <figcaption> pour ajouter du texte de légende à des images ou des supports intuitivement et sémantiquement. 1. <figure> est utilisé pour envelopper le contenu multimédia indépendant, tels que des images, des vidéos ou des blocs de code; 2. <figcaption> est placé comme texte explicatif et peut être situé au-dessus ou en dessous des supports; 3. Ils améliorent non seulement la clarté de la structure de la page, mais améliorent également les effets de l'accessibilité et du référencement; 4. Lorsque vous l'utilisez, vous devez faire attention à éviter les abus et s'appliquer au contenu qui doit être mis en avant et accompagné d'instructions, plutôt que d'images décoratives ordinaires; 5. L'attribut Alt de ne peut pas être ignoré, ce qui est différent de FigCaption; 6. La figue est flexible et peut être placée en haut ou en bas de la figure au besoin. L'utilisation de ces deux balises aide correctement à créer du contenu Web sémantique et facile à comprendre.

Lors de l'ajout de texte de légende aux images ou aux médias, l'utilisation de HTML <figure></figure> et <figcaption></figcaption> est une approche très intuitive et sémantique. Ils aident non seulement à organiser la structure des pages, mais aussi à améliorer l'accessibilité et les performances de référencement. La clé est de comprendre le but et la manière correcte d'écrire ces deux balises.

Structure de base: comment connecter des images et des textes explicatifs

La balise <figure></figure> est utilisée pour envelopper un bloc de contenu indépendant, tel que des images, des graphiques, des vidéos, etc.; tandis que <figcaption></figcaption> est son "titre" ou "texte d'explication", qui est généralement placé sur <figure></figure> et peut apparaître devant ou derrière le contenu.

Par exemple:

 <Figure>
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175182660322237.jpeg"  class="lazy"  src = "example.jpg" alt = "Exemple d&#39;image">
  <Figcaption> Il s&#39;agit d&#39;une brève description de l&#39;image </gigcaption>
</ figure>

De cette façon, le navigateur et les lecteurs d'écran sauront que ce texte est une description de l'image. Vous pouvez également placer <figcaption> en haut de <figure> et laisser le texte de légende être affiché au-dessus de l'image.

Divers médias conviennent, pas seulement des images

Bien que la plus courante soit de l'utiliser avec <img alt="Comment associer des légendes avec des images ou des médias à l'aide de la figure HTML et des éléments FigCaption?" > , <figure> et <figcaption> conviennent également à d'autres types de supports, tels que des blocs audio, vidéo ou de code.

Par exemple, intégrer une vidéo avec des instructions:

 <Figure>
  <contrôles vidéo>
    <source src = "example.mp4" type = "vidéo / mp4">
    Votre navigateur ne prend pas en charge la lecture vidéo.
  </ vidéo>
  <figcaption> Il s&#39;agit d&#39;une vidéo de démonstration montrant le processus d&#39;utilisation du produit </gigcaption>
</ figure>

Par exemple, montrez un morceau de code:

 <Figure>
  <pre class="brush:php;toolbar:false"> <code> fonction helloworld () {console.log ("Hello, world!"); } </code> </ pre>
  <FigCaption> Exemple de code JavaScript de base </gigcaption>
</ figure>
</ figure>

Tant que le contenu est une "unité indépendante", vous pouvez envisager de l'emballer avec <figure></figure> et l'ajout d'instructions avec <figcaption></figcaption> .

Plusieurs détails auxquels faire attention dans les applications pratiques

• Ne vous en abusez pas : si c'est juste une image en ligne normale (comme l'image décorative de l'article), il n'est pas nécessaire d'utiliser <figure></figure> . Il est plus adapté au contenu médiatique qui nécessite un accent et une description distincts.
• Priorité sémantique : ces balises sont principalement utilisées pour améliorer la sémantique des documents plutôt que la disposition du style. Bien que vous puissiez utiliser CSS pour personnaliser le style, ne le forcez pas à l'appliquer pour la typographie.
• Le texte ALT est toujours important : même s'il y a <figcaption></figcaption> , n'oubliez pas l'attribut alt de <img alt="Comment associer des légendes avec des images ou des médias à l'aide de la figure HTML et des éléments FigCaption?" > . Ils le font différemment: alt est le texte alternatif lorsque l'image elle-même n'est pas visible, tandis que FigCaption est une description supplémentaire.
• Emplacement flexible : <figcaption></figcaption> peut être placé en haut ou en bas de l'intérieur de <figure></figure> , selon que vous souhaitez qu'il apparaisse au-dessus ou en dessous du support.

Fondamentalement c'est tout

Dans l'ensemble, <figure></figure> et <figcaption></figcaption> sont un ensemble très pratique de balises dans HTML qui sont utilisées pour ajouter des instructions au contenu multimédia. Non seulement ils rendent la structure plus claire, mais ils aident également l'accessibilité et les moteurs de recherche à identifier l'intention de contenu. Faites attention à la sémantique et aux scènes lorsque vous les utilisez, et ne les aboutisez pas.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!