Trucsweb.com

Trucsweb.com

HTML

HTML5

RDFFav

HTML5 : La balise Figure

Wow, 4 trente-sous pour une piastre! La belle affaire, on remplace une classe par une balise!images, responsive, figure, html5HTML5 : La balise Figure

Wow, 4 trente-sous pour une piastre! La belle affaire, on remplace une classe par une balise! Ce n’est visiblement pas la même équipe! Moi je m’en balance, du HTML ou du CSS, ou même du Googlliage, du moment que l’on se branche! On est habitué aux revendications de la W3C qui tournent au discours philosophique! Mais ici je n’ai pas trouvé de différence outre Saint-Augustin avec une simple classe « .figure ». C’est ça le HTML5, une compréhension sémantique, historique et humoristique! Mais c’est quand même le fun et sans ambiguïté quand on creuse un peu.

Quant à la philosophie de son usage, je vous invite à lire le tutoriel « La Structure du HTML5 ».

Où ça?, quelle image?
La balise <figure> est libre et autonome mais doit rester, malgré tout, attaché au contenu qui y réfère!

Comme le Québec, un médaillon associé à un Canada tout en pouvant s’y dissocier, en principe ; -) Sans m’embourber dans les virgules et les paragraphes, littéralement, le cas de « figure » peut être sorti de son contexte et se retrouver n’importe où dans la page. Cette distinction faite, il ne faut pas non plus virer fou, car quelques paragraphes plus bas, la W3C recommande : « ...d’ajouter une ancre vers la figure si on utilise la position pour y faire référence
ex : « la photographie ci-contre » ou « comme le montre l’image ».

C’est une pub, alors on utilise la balise <aside>!

En résumé tout est possible dans une balise <figure> pourvu qu’un lien quelconque entre le texte et la figure demeure accessible. À ne pas confondre avec la seule question à se poser, est-ce que la « figure » est relative ou non au texte principal, en principe présent entre les balises <main> et </main>? Dans ce cas la W3C recommande d’utiliser la balise « <aside> ». C’est tout.

La balise <figure>

<figure id="oMaFigure">
  <img src="image.png" alt="Text alternatif" />
</figure>

Élément <figure>

figure {
  display: block;
  margin-before: 1em;
  margin-after: 1em;
  margin-start: 40px;
  margin-end: 40px;
}

Élément <div>

div {
  display: block; }

Figure 1.0 : Comparatif des propriétés par défaut

C’est en fait une unité de contenu, un encart pour isoler un bloc avec un contenu principalement constitué de un ou plusieurs éléments : multimédias, diagrammes, tableaux, illustrations, exemples, codes, images, vidéos, ou carrément du texte... Voir les balises <canvas> ou <svg>. Tout ce que l’on met en médaillon et/ou qui a une légende. D’ailleurs je prend mes vieux encarts HTML4, je remplace div par figurer et vice versa... et c’est du pareil au même. C’est donc une unité de contenu, exactement comme le serait une balise <div>, dans lequel s’insèrent divers éléments multimédia. J’ai beau chercher je ne trouve aucune différence à part une marge par défaut. Permettez ces quelques mots qui valent bien une image comme on peu voir ci contre, ou plus haut selon votre résolution ...voir la figure 1.0 pour les autres ;-).

J’ai depuis toujours utilisé une balise « div » avec une classe conteneur pour mes images, mes vignette. Ironiquement certain utilisait même la mnémonique « figure »! Mais contrairement ;a la W3C uniquement pour mes images médaillon. Généralement aligné à droite ou à gauche, je ne veux pas nécessairement que la balise « figure » réagisse toujours ainsi. J’utilise donc une classe avec la balise « figure »!

<article>
  <h1>Exemple avec la balise « figure »</h1>
  <figure id="oMaFigure" class="figure">
    <img src="image.png" alt="Text alternatif" />
    <figcaption>Légende</figcaption>
  </figure>
  <p>Article faisant référence au texte...</p>
    ...
</article>

La balise <figcaption>

Attaché à la balise <figure>, la balise <figcaption> permet de donner une légende ou une description du contenu de la figure.

<figure id="oMaFigure">
  <img src="image.png" alt="Text alternatif" />
  <figcaption>Légende</figcaption>
</figure>

<figcaption> n’est pas toujours de mise, en effet la balise <footer> doit être privilégié dans certains cas. Lire « La balise Footer ».

Exemples

Avec une vidéo.

<figure>
  <video src="video.mp4"></video>
  <figcaption>Légende</figcaption>
</figure>

Avec du texte.

<figure>
  <p>Texte</p>
  <figcaption>Légende</figcaption>
</figure>

Combiner plusieurs figures

Un exemple simple pour combiner des éléments.

<figure>
  <img src="image.png" alt="Texte alternatif" />
  <img src="image.png" alt="Texte alternatif" />
  <img src="image.png" alt="Texte alternatif" />
  <figcaption>Légende</figcaption>
</figure>

On pourrait s’en contenter mais on peut aussi imbriquer la balise « figure » de cette façon. Est-ce que les sous-figures son aussi autonome? Je vous laisse sur cette exemple de la W3C...

<figure>
  <figcaption>Exemple de figure multiple</figcaption>
  <figure>
    <figcaption>Exemple 1</figcaption>
    <img src="image.png" alt="Texte alternatif" />
  </figure>
  <figure>
    <figcaption>Exemple 1</figcaption>
    <img src="image.png" alt="Texte alternatif" />
  </figure>
  <figure>
    <figcaption>Exemple 1</figcaption>
    <img src="image.png" alt="Texte alternatif" />
  </figure>
</figure>

Compatibilité

Les nouveaux éléments de block HTML5 comme <footer> doivent être déclarés pour les vieux navigateurs.

  header, section, footer, aside, nav, main, article, figure {
    display: block;
  }


Références
, Analyste programmeurConception oznogco multimédia (https://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

  • Comme je souhaiterais passer mon site en HTML5, j'aimerais juste savoir si je peux mettre une balise figure pour mette en avant mes derniers articles.
    64x64
    Dextarian
    Date (GMT) : 2015-03-26 15:44:17 (UTC +0000)
    • Salut, En principe non, dans la mesure où la balise <figure> est un complément plus ou moins relatif à un texte. Si c'est une référence en exergue, par exemple les derniers articles concordants. À la base il doit y avoir un lien entre la <figure> et le texte principal. Mais dans ton cas pour les derniers articles du site, il s'agit carrément d'une section. Et donc pourquoi pas une balise <section>. D'autre part, la balise <figure> est plutôt flottante. Alors qu'une section est davantage fixe par définition. Sinon, ça reste de simples conventions pour puriste dans un monde qui ne s'en formalise pas beaucoup, et Google probablement absolument pas! Alors c'est du pareil au même, on pourrait le remplacer par une balise <div> sans aucun problème. Ciao
      64x64
      oznog
      Date (GMT) : 2015-03-26 16:53:42 (UTC +0000)


    Ajouter un commentaire
    Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
    Votre évaluation du tutoriel

    8/10 sur 1 revues.
           Visites : 14638 - Pages vues : 14933
    X

    Trucsweb.com Connexion

    Connexion

    X

    Trucsweb.com Mot de passe perdu

    Connexion

    X

    Trucsweb.com Conditions générales

    Conditions

    Responsabilité

    La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

    Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

    Droit applicable et juridiction compétente

    Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Glossaire

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Trucsweb

    Conditions

    Aucun message!

    Merci.

    X
    Aucun message!
    X

    Trucsweb.com Créer un compte

    Créer un compte

    .
    @