<figure> est une balise sémantique utilisée pour envelopper le contenu multimédia indépendant, telles que des images, des graphiques, des vidéos, etc., indiquant que le contenu peut être autonome;
Les éléments <figure></figure>
et <figcaption></figcaption>
en HTML sont principalement utilisés pour mieux organiser et décrire le contenu multimédia dans des documents, tels que des images, des graphiques, des vidéos, etc. Ils rendent non seulement la structure de la page plus claire, mais améliorent également l'expression sémantique, qui est bonne pour l'accessibilité et le référencement.

<figure></figure>
: "conteneur" qui enveloppe le contenu multimédia
<figure></figure>
est une balise sémantique utilisée pour envelopper des blocs de contenu indépendants, généralement des contenus multimédias tels que des images, des illustrations, des graphiques ou des exemples de code. Cela signifie que cette partie du contenu est autonome et peut exister indépendamment des autres contenus sur la page.
Par exemple, si vous mettez une image dans l'article, et que l'image n'affectera pas sa signification même si elle est retirée séparément, elle est très adaptée à être placée sur <figure></figure>
.

<Figure> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175199709741621.jpeg" class="lazy" src = "chart.png" alt = "Sales Data Trend Chart"> </ figure>
L'un des avantages de l'utilisation <figure>
est qu'il permet au navigateur et aux assistants de savoir que ce contenu est une unité distincte qui aide à améliorer la lisibilité et la clarté structurelle de la page.
<figcaption>
: Ajoutez une légende à <figure>
Les images seules peuvent ne pas être suffisamment claires, donc un titre ou une description est nécessaire pour compléter les informations. <figcaption>
est utilisé pour le faire. Il peut appara?tre comme un élément enfant de <figure>
, généralement au début ou à la fin de <figure>
.

Par exemple:
<Figure> <img src = "chart.png" alt = "Sales Data Trend Chart"> <Figcattion> Comparaison des ventes dans chaque trimestre de 2023 </gigcaption> </ figure>
L'avantage de cela est que non seulement l'utilisateur peut comprendre le contenu de l'image, mais le lecteur d'écran peut également identifier correctement le titre ou la description de l'image, aidant ainsi les utilisateurs malvoyants à comprendre le contexte.
-
<figcaption></figcaption>
peut appara?tre dans l'élément de premier ou dernier enfant dans<figure></figure>
. - A
<figure></figure>
ne peut avoir ni ou un seul<figcaption></figcaption>
. - Il ne peut pas être seulement un titre, il peut également être une brève description ou des informations source.
Utilisez des scénarios et des précautions
Les scénarios d'utilisation communs comprennent:
- Photos dans les articles de blog
- Affichage du graphique de données
- Image unique dans la galerie de photos
- Instructions pour l'intégration vidéo ou audio
Ce qui doit être noté est:
- N'abusez pas
<figure></figure>
, toutes les images n'en ont pas besoin. Si l'image est uniquement décorative ou est étroitement intégrée au texte, il n'a pas besoin d'être placé sur<figure></figure>
. - Ajoutez toujours un attribut
alt
à l'image, même si<figcaption></figcaption>
est présent, il ne peut pas remplacer la fonction d'alt
. - Si vous avez besoin de plusieurs légendes, telles que la source de titre, vous pouvez les mettre dans la même
<figcaption></figcaption>
et les séparer avec des lines ou des paragraphes.
Fondamentalement, c'est tout. L'utilisation rationnelle de <figure></figure>
et <figcaption></figcaption>
peut rendre votre HTML plus clair et plus accessible, et il n'est pas compliqué à mettre en ?uvre, mais il est facile à ignorer.
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!

Outils d'IA chauds

Undress AI Tool
Images de déshabillage gratuites

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Clothoff.io
Dissolvant de vêtements AI

Video Face Swap
échangez les visages dans n'importe quelle vidéo sans effort grace à notre outil d'échange de visage AI entièrement gratuit?!

Article chaud

Outils chauds

Bloc-notes++7.3.1
éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

L'attribut de r?le d'Aria est utilisé pour définir le r?le des éléments Web et améliorer l'accessibilité. 1. L'attribut de r?le aide la technologie d'assistance à comprendre les fonctions des éléments, tels que les boutons, la navigation, etc. 2. Utilisez des attributs de r?le pour attribuer des r?les spécifiques aux éléments HTML non sémantiques. 3. L'attribut de r?le doit être cohérent avec le comportement de l'élément et être vérifié par le test d'outil d'accessibilité.

Comment créer une disposition de site Web? 1. Utilisez des balises HTML pour définir la structure de contenu, telle que ,,. 2. Styles et positions de contr?le via CSS, à l'aide du modèle de bo?te, de la disposition Float ou Flexbox. 3. Optimiser les performances, réduire les demandes HTTP, utiliser du cache et optimiser les images et assurer une conception réactive.

Améliorer la lisibilité et la maintenabilité du code HTML peut être réalisée par les étapes suivantes: 1. Utilisez des balises sémantiques, telles que, etc. pour rendre la structure du code claire et améliorer l'effet SEO; 2. Gardez le code formaté et utilisez une indentation et des espaces cohérents; 3. Ajoutez des commentaires appropriés pour expliquer l'intention du code; 4. évitez la nidification excessive et simplifiez la structure; 5. Utilisez des feuilles et des scripts de style externe pour garder le HTML concis.

La clé pour suivre les normes HTML et les meilleures pratiques est de le faire intentionnellement plut?t que de le suivre aveuglément. Tout d'abord, suivez les journaux de résumé ou de mise à jour des sources officielles telles que WhatWG et W3C, comprendre de nouvelles balises (telles que) et des attributs, et les utiliser comme références pour résoudre des problèmes difficiles; Deuxièmement, abonnez-vous aux newsletters et aux blogs de développement Web de confiance, passez 10 à 15 minutes par semaine pour parcourir les mises à jour, se concentrer sur les cas d'utilisation réels plut?t que de simplement collecter des articles; Deuxièmement, utilisez des outils de développeur et des liners tels que HTMLHINT pour optimiser la structure du code par rétroaction instantanée; Enfin, interagissez avec la communauté des développeurs, partagez des expériences et acquérir des compétences pratiques des autres, afin d'améliorer continuellement les compétences HTML.

La raison de l'utilisation des balises est d'améliorer la structure sémantique et l'accessibilité des pages Web, faciliter les lecteurs d'écran et les moteurs de recherche pour comprendre le contenu de la page et permettre aux utilisateurs de passer rapidement au contenu de base. Voici les points clés: 1. Chaque page ne doit contenir qu'un seul élément; 2. Il ne doit pas inclure le contenu qui est répété sur les pages (comme les barres latérales ou les pieds de page); 3. Il peut être utilisé en conjonction avec les propriétés Aria pour améliorer l'accessibilité. Habituellement situé après et avant, il est utilisé pour envelopper un contenu de page unique, tel que les articles, les formulaires ou les détails du produit, et doit être évité dans ou dans; Pour améliorer l'accessibilité, des Aria-marqués ou des ARIA-label peuvent être utilisés pour identifier clairement les pièces.

Pour créer un document HTML de base, vous devez d'abord comprendre sa structure de base et écrire du code dans un format standard. 1. Utilisez le type de document de déclaration au début; 2. Utilisez la balise pour envelopper l'intégralité du contenu; 3. Inclure et deux pièces principales, qui sont utilisées pour stocker des métadonnées telles que des titres, des liens de feuille de style, etc., et inclure un contenu visible par l'utilisateur tel que les titres, les paragraphes, les images et les liens; 4. Enregistrez le fichier au format .html et ouvrez l'effet de visualisation dans le navigateur; 5. Ensuite, vous pouvez progressivement ajouter plus d'éléments pour enrichir le contenu de la page. Suivez ces étapes pour créer rapidement une page Web de base.

Pour créer une case HTML, utilisez l'attribut Type pour définir l'élément de la case à cocher. 1. La structure de base comprend des balises ID, nom et étiquette pour s'assurer que le texte de clic peut changer d'options; 2. Les cases à cocher plusieurs liées doivent utiliser le même nom mais différentes valeurs et les envelopper avec Fieldset pour améliorer l'accessibilité; 3. Masquer les commandes natives lors de la personnalisation des styles et utilisez CSS pour concevoir des éléments alternatifs tout en conservant les fonctions complètes; 4. Assurer la disponibilité, les étiquettes de paire, prendre en charge la navigation au clavier et éviter de compter uniquement sur les invites visuelles. Les étapes ci-dessus peuvent aider les développeurs à implémenter correctement les composants à cocher qui ont à la fois fonctionnel et esthétique.
