le Le tag a été introduit avec HTML5 il y a quelque temps déjà, bien que vous ne sachiez peut-être toujours pas ce qu'il fait ou comment il peut être utilisé dans de nombreuses situations différentes. Dans ce tutoriel, vous apprendrez la différence entre et d’autres balises comparables, et comment commencer à l’utiliser pour améliorer la façon dont vous regroupez les éléments dans votre balise..
Ceci est un tutoriel de niveau débutant, mais servira également de rappel utile pour les autres.
Utilisations typiques pour
Voyons d'abord ce que le docteur HTML5 a à dire sur le sujet:
L'élément figure représente une unité de contenu, avec éventuellement une légende, qui est autonome, qui est généralement référencée comme une seule unité dans le flux principal du document et qui peut être éloignée du flux principal du document sans affectant la signification du document. -Richard Clark
Alors le figure element spécifie un contenu autonome, tel que des illustrations et des photos. Cela signifie que vous utiliserez toujours le figure tag pour abriter quelque chose d'autre.
Une idée fausse commune est que figure ne peut être utilisé que pour des images. En fait, il peut être utilisé pour regrouper un grand nombre d'éléments différents, y compris, sans toutefois s'y limiter, les blocs image, vidéo, audio et de code..
Définir la structure de la page
le figure est une racine de sectionnement, ce qui signifie qu’elle isole efficacement son contenu de la structure de son ancêtre. Tout ce qui est à l'intérieur de la figure ne contribue pas au contour du document en dehors de celle-ci. Il se comporte comme un élément structurel de la page et peut donc contenir ses propres en-têtes, commençant par un et en descendant la hiérarchie à travers , et ainsi de suite, mais cela n'a aucune incidence sur la hiérarchie extérieure:
La hiérarchie dans la figure n'a aucune incidence sur les contours de son ancêtre
Des éléments tels que celui-ci sont souvent utilisés pour introduire du contenu externe dans le document, comme une citation par exemple.. est un autre exemple d'élément racine de sectionnement.
Images
Voici un exemple typique de la façon dont le figure tag peut être utilisé pour afficher une image.
Maintenant, vous pensez peut-être: "Pourquoi embêter mon tag img dans un balisage supplémentaire?" C'est une bonne question, mais cela commence à avoir du sens une fois que vous vous rendez compte qu'un peut contenir plus d'un élément enfant, tel qu'une légende.
Il y a aussi une balise pour une légende, ou plutôt, figcaption. En prenant cela en compte, vous pourrez l’utiliser de la manière suivante.
Quoi de neuf? Je suis une légende!
Images multiples
En utilisant juste une série de img Les éléments permettant d’afficher des images ensemble fonctionnent bien, même si chaque image individuelle est autonome et constitue son propre bloc de code, sans aucun lien avec les autres. Dans les cas où les images partagent une relation quelconque figure vient à la rescousse. Ces trois images sont liées et partagent un seul résumé dans le figcaption.
Trois images différentes, regroupées dans une figure et sous-titrées avec figcaption.
En utilisant pour les blocs de code
le figure Le talent d’élément pour le regroupement d’éléments ayant un thème commun ne s’arrête pas là. Peut-être souhaitez-vous regrouper du code en ligne, avec une légende, dans un tutoriel par exemple, puis vous pouvez utiliser figure et figcaption de la manière suivante:
La vie est belle, a dit HTML5 en XHTML.
Dans ce bloc de code, nous voyons HTML5 parler à XHTML.
figure peut être utilisé de cette façon avec code, pré, et samp, facilitant le groupement des blocs de code.
Emballer
C'est tout! Vous avez appris à utiliser le figure élément, avec figcaption et d'autres éléments pour regrouper plusieurs éléments. Comment utilisez-vous le figure élément en ce moment? Est-ce que cela va changer à la suite de la lecture de cette astuce? Dites le nous dans les commentaires!
Share
Accentsconagua
La hiérarchie dans la figure n'a aucune incidence sur les contours de son ancêtre
