Astuce rapide: la bonne façon d'utiliser les éléments Figure & Figcaption

Les éléments figure et figcaption sont des balises HTML5 appariées sémantiquement souvent utilisées ensemble pour améliorer la structure et l'accessibilité du contenu. Ce guide offre les meilleures pratiques pour leur mise en œuvre correcte.

L'élément figure encapsule le contenu autonome, tels que des illustrations, des extraits de code ou des diagrammes. Son placement dans le document ne modifie pas la signification globale. Surtout, toutes les images ne nécessitent pas un élément figure; Seuls ceux qui sont des unités d'information indépendantes.

Images multiples dans une figure:

Plusieurs images liées peuvent résider dans un seul élément figure:

<figure>
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847332126.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847481580.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847567268.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
</figure>

au-delà des images:

L'élément figure ne se limite pas aux images. Il convient à:

• Blocs de code
• Vidéos
• Clips audio
• publicités

Exemple avec un bloc de code:

<figure>
  <code>
    p {
      color: #333;
      font-family: Helvetica, sans-serif;
      font-size: 1rem;
    }
  </code>
</figure>

Figures imbriquées:

Les éléments de nidification figure sont acceptables lorsqu'ils sont logiquement appropriés. L'utilisation d'attributs Aria peut encore améliorer la sémantique:

<figure role="group">
  <figcaption>Dog breeds</figcaption>
  <figure>
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847332126.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
    <figcaption>Adorable Maltese Terrier</figcaption>
  </figure>
  <figure>
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847481580.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
    <figcaption>Cute black labrador</figcaption>
  </figure>
</figure>

Utilisation efficace de la figure:

L'élément figcaption fournit une légende ou une légende pour le figure. Bien qu'il ne soit pas toujours nécessaire, lorsqu'il est utilisé, il doit idéalement être placé avant ou après le contenu dans le figure:

<figure>
  <figcaption>Three different breeds of dog.</figcaption>
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847332126.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847481580.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847567268.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
</figure>

ou:

<figure>
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847332126.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847481580.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847567268.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <figcaption>Three different breeds of dog.</figcaption>
</figure>

Figcaptions riches:

Pour des légendes plus détaillées, incorporez des titres et des paragraphes:

<figure>
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018848099968.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <figcaption>
    <h2 id="Puppy-School">Puppy School</h2>
    <p>Championship Class of 2016</p>
  </figcaption>
</figure>

Questions fréquemment posées (FAQ):

La section FAQ fournie reste largement inchangée, car elle aborde avec précision les questions courantes sur l'utilisation figure et figcaption. Les informations sont déjà concises et bien structurées.

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!