Quel est l'élément de figure et comment est-il utilisé avec FigCaption dans HTML5?

L'élément <figure> dans HTML5 est utilisé pour marquer un contenu autonome comme des images, des diagrammes ou des extraits de code qui peuvent rester indépendamment dans un document. Il peut être jumelé avec l'élément <figcaption> facultatif pour fournir une légende ou un titre, qui peut apparaître comme le premier ou le dernier enfant à l'intérieur <figure>. Cette combinaison améliore l'accessibilité et le référencement en offrant une structure sémantique claire. La <figcaption> étiquette ou décrit généralement le contenu, tel que «Figure 1: croissance annuelle des ventes», tandis que l'attribut ALT dans reste essentiel pour les lecteurs d'écran. Les utilisations courantes incluent des images avec des légendes, des listes de code et des citations. Surtout, <figure> ne se limite pas aux images - elle s'applique à tout bloc multimédia autonome. 1. Utilisez pour le contenu autonome. 2. Inclure éventuellement <figcaption> au début ou à la fin pour une légende. 3. Maintenir l'accessibilité avec un texte Alt approprié et une structure sémantique. 4. Appliquer aux images, code, citations ou illustrations. 5. Assurer que le contenu reste significatif même lorsqu'il est déplacé. Cette approche améliore à la fois l'organisation des documents et l'expérience utilisateur.

L'élément <figure></figure> dans HTML5 est utilisé pour marquer le contenu autonome, tel que les images, les diagrammes, les photos, les extraits de code ou les illustrations, qui peuvent être référencées en une seule unité dans un document. Il est particulièrement utile car il permet au contenu d'être déplacé dans un document (comme dans une barre latérale ou une annexe) sans affecter le flux principal.

L'une des principales caractéristiques de <figure></figure> est qu'elle peut être associée à l'élément <figcaption></figcaption> pour fournir une légende ou un titre pour le contenu à l'intérieur de la figure.

Comment <figure></figure> et <figcaption></figcaption> fonctionnent ensemble

L'élément <figcaption></figcaption> est facultatif mais recommandé lorsque vous souhaitez ajouter une légende descriptive. Il peut être placé comme le premier ou le dernier enfant à l'intérieur de l'élément <figure></figure> . S'il est présent, il donne un titre ou une explication du contenu de la figure.

Syntaxe de base:

 <Figure>
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175566998882086.jpeg"  class="lazy"  src = "chart.png" alt = "graphique de croissance des ventes">
  <Figction> Figure 1: Croissance annuelle des ventes de 2020 à 2023. </figcaption>
</ figure>

Dans cet exemple:

• Le <figure> enveloppe l'image et sa légende.
• La <figcaption> étiquette clairement l'image comme "Figure 1" et décrit ce qu'elle montre.
• L'attribut alt dans la balise <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175566998882086.jpeg" class="lazy" alt="Quel est l'élément de figure et comment est-il utilisé avec FigCaption dans HTML5?" > reste important pour l'accessibilité, décrivant l'image pour les lecteurs d'écran.

Cas d'utilisation courants

• Images avec légendes : l'utilisation la plus courante.
• Extraits de code :

   <Figure>
    <pre class="brush:php;toolbar:false"> <code> fonction hello () {
  Console.log ("Hello, World!");
  } </code> </ pre>
    <FigCaption> Listing 1: une fonction JavaScript simple. </gigcaption>
  </ figure>

• Citations :

   <Figure>
    <lockquote cite = "https://example.com/book">
      C&#39;était le meilleur des temps, c&#39;était le pire des fois ...
    </lockquote>
    <Figcaption> - Charles Dickens, <Cite> une histoire de deux villes </cite> </gigcaption>
  </ figure>

  Points clés pour se souvenir

  • L'élément <figure></figure> n'est pas seulement pour les images - c'est pour tout support ou bloc de contenu autonome.
  • Il est sémantiquement indépendant , ce qui signifie que cela a du sens même s'il s'est éloigné du texte environnant.
  • <figcaption></figcaption> peut apparaître en haut ou en bas de la <figure></figure> - bien que le bas soit plus courant.
  • L'utilisation de ces éléments améliore l'accessibilité et le référencement en fournissant une structure de documents plus claire.

  Fondamentalement, <figure></figure> et <figcaption></figcaption> aident à rendre votre contenu plus significatif et organisé, à la fois pour les navigateurs et les utilisateurs.

  

  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!