Figure Tag dans HTML

HTML5 a introduit un HTML " Mots clés.

Élément de figure de style

chiffre
Border: 5px solide # b69898;
Affichage: flex;
marge: auto;
flexion-flux: colonne;
largeur maximale: 290px;
rembourrage: 2px;

Les propriétés CSS suivantes sont appliquées à l'élément de figure:

• "frontière«La propriété est une propriété scolarisée qui définit la frontière de l'élément. Il spécifie des valeurs pour la largeur de la bordure, le style de la bordure et la couleur de la bordure.
• "afficher"Avec Value Flex fait une disposition réactive pour les éléments.
• "marge»La propriété est utilisée pour placer l'élément horizontalement au centre.
• "flexion»La propriété avec la colonne de valeur spécifie la direction et le comportement d'enveloppe du conteneur flex.
• "largeur maximale»Spécifie la valeur de la largeur maximale d'un élément.
• "rembourrage»Produit de l'espace autour du contenu de l'élément.

Élément IMG de style

img
max-height: 140px;
largeur maximale: 290px;

Voici la description des propriétés ajoutées:

• "hauteur maximum»La propriété avec la valeur 140px définit la hauteur maximale de l'élément à 140px.
• "largeur maximale»La propriété avec la valeur 140px définit la largeur maximale de l'élément à 140px.

Actuellement, notre page Web ressemble à ceci:

Maintenant, style l'élément dans la section ci-dessous.

Élément de figure de style

Figcaption
Color en arrière-plan: RVB (25, 11, 104);
Couleur: Ghostwhite;
Texte-aligne: Centre;
Police: italique plus petit sans-serif;
rembourrage: 6px;

Appliquez les propriétés CSS suivantes à l'élément FigCaption:

• "Couleur de l'arrière plan»La propriété est utilisée pour appliquer la couleur sur l'arrière-plan de l'élément.
• "couleur»Spécifie la couleur de la police.
• "alignement de texte»La propriété définit l'alignement de l'élément en fonction de sa valeur.
• "Police de caractère”La propriété avec la valeur définie en italique plus petit sans-serif indique le style de police comme italique, taille petite et familiale comme sans-serif.
• "rembourrage»La propriété ajoute de l'espace autour du contenu de l'élément.

En fournissant les propriétés CSS ci-dessus aux éléments, nous obtiendrons le résultat comme indiqué ci-dessous:

Nous avons compilé les informations essentielles liées à la balise de figure HTML dans HTML.

Conclusion

Il existe différentes propriétés que nous pouvons appliquer aux éléments HTML pour les rendre beaux et organisés. De même, les balises OR sont utilisées pour insérer des images dans le HTML. Plus précisément, l'élément gère le groupe de contenu tels que la liste de code, les diagrammes ou les photos. Il peut également contenir pour ajouter une légende au contenu. Cet article a démontré l'utilisation de l'étiquette de figure HTML avec un exemple pratique.