Comment utiliser le HTML5 & lt; Figure & gt; et & lt; Figcaption & gt; Éléments pour présenter des images avec des légendes?

Utilisation <figure></figure> et <figcaption></figcaption> pour les images avec des légendes

Les éléments HTML5 <figure></figure> et <figcaption></figcaption> fournissent une façon sémantiquement correcte de présenter des images (ou d'autres supports) ainsi que leurs légendes. L'élément <figure></figure> agit comme un conteneur pour le support et sa légende, tandis que l'élément <figcaption></figcaption> contient spécifiquement le texte de légende. Cette structure améliore l'accessibilité et le référencement de votre site Web. Voici comment vous les utilisez:

 <code class="html"><figure> <img src="/static/imghw/default1.png" data-src="image.jpg" class="lazy" alt="Descriptive alt text"> <figcaption>This is the caption for the image.</figcaption> </figure></code>

Dans cet exemple, l'élément <img src="/static/imghw/default1.png" data-src="video.mp4" class="lazy" alt="Comment utiliser le HTML5 & lt; Figure & gt; et & lt; Figcaption & gt; Éléments pour présenter des images avec des légendes?" > réside à l'intérieur de l'élément <figure></figure> . L'élément <figcaption></figcaption> , contenant la légende, suit l'image. L'ordre est important - la légende doit logiquement se rapporter aux médias au sein de la <figure></figure> . L'attribut alt sur la balise <img src="/static/imghw/default1.png" data-src="video.mp4" class="lazy" alt="Comment utiliser le HTML5 & lt; Figure & gt; et & lt; Figcaption & gt; Éléments pour présenter des images avec des légendes?" > est crucial pour l'accessibilité, fournissant une description de texte pour les utilisateurs qui ne peuvent pas voir l'image.

Meilleures pratiques pour l'accessibilité et le référencement

L'utilisation <figure></figure> et <figcaption></figcaption> stimule correctement l'accessibilité et le référencement. Voici comment:

• Accessibilité: la structure sémantique définit clairement la relation entre l'image et sa légende, ce qui facilite les lecteurs d'écran et d'autres technologies d'assistance pour interpréter le contenu. L'attribut alt sur l'élément <img src="/static/imghw/default1.png" data-src="video.mp4" class="lazy" alt="Comment utiliser le HTML5 & lt; Figure & gt; et & lt; Figcaption & gt; Éléments pour présenter des images avec des légendes?" > est paramount; Il fournit un contexte pour les utilisateurs malvoyants. Un attribut alt bien écrit doit décrire de manière concise le contenu et le but de l'image. Évitez d'utiliser des phrases comme "Image de ..."
• SEO: les moteurs de recherche comprennent la signification sémantique de <figure></figure> et <figcaption></figcaption> . Cela les aide à mieux comprendre le contexte de vos images, améliorant le classement de votre site Web pour les recherches d'images pertinentes. L'utilisation de légendes descriptives améliore encore le référencement en fournissant un contexte riche en mots clés pour les moteurs de recherche et les utilisateurs. Assurez-vous que vos légendes reflètent avec précision le contenu de l'image.
• Maintenir le flux logique: le placement de l'élément <figure></figure> dans votre document doit avoir un sens dans le flux du contenu. Ne le placez pas arbitrairement; Il doit se rapporter au texte environnant.

Styling <figure></figure> et <figcaption></figcaption> avec CSS

Styling <figure></figure> et <figcaption></figcaption> avec CSS permet des présentations visuellement attrayantes. Vous pouvez contrôler l'espacement, l'alignement et l'apparence des deux éléments pour les intégrer de manière transparente dans la conception de votre site Web. Voici un exemple:

 <code class="css">figure { margin: 20px auto; /* Center the figure */ max-width: 600px; /* Limit the width */ text-align: center; /* Center the caption */ } figcaption { font-style: italic; font-size: 0.9em; margin-top: 10px; /* Add some space above the caption */ text-align: center; /* Center the caption */ }</code>

Ce code CSS centre la figure, limite sa largeur et styles la légende avec l'italique et la taille de police plus petite. Vous pouvez personnaliser ces styles pour s'adapter à la conception de votre site Web. N'oubliez pas de considérer la réactivité et de vous assurer que vos styles s'adaptent bien aux différentes tailles d'écran.

Utilisation <figure></figure> et <figcaption></figcaption> avec d'autres types de médias

Oui, vous pouvez utiliser <figure></figure> et <figcaption></figcaption> avec des types de médias au-delà des images. Ils fonctionnent parfaitement bien avec d'autres contenus intégrés tels que des vidéos, des fichiers audio, des extraits de code, des diagrammes, etc. La clé est que la <figcaption></figcaption> fournit une légende ou une explication des supports intégrés dans la <figure></figure> . Voici un exemple avec une vidéo:

 <code class="html"><figure> <video controls> Your browser does not support the video tag. </video> <figcaption>A captivating video demonstrating [video content description].</figcaption> </figure></code>

N'oubliez pas de toujours fournir un contenu alternatif approprié pour les utilisateurs qui ne peuvent pas accéder aux supports intégrés (par exemple, une transcription pour une vidéo). La signification sémantique reste cohérente: <figure></figure> contient les médias et sa légende explicative dans <figcaption></figcaption> .

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!