[Résolu] Sémantique article img+commentaire

Bonjour à tous !

J'ai créé un article avec : Un titre, Une image et un commentaire d'image.
Mais j'hésite entre plusieurs sémantiques et voulais savoir quel est la meilleure ?
Mais surtout savoir qu'elle est la différence entre elles.

N°1 ( le plus courant ) :

<section>
<!-- autres balises de la page -->
<article>
<h3>titre de l'article</h3>
<img src="monimage.png" alt="Mon image" />
<p>Description de l'image</p>
</article>
</section>

N°2 :

<section>
<!-- autres balises de la page -->
<article>
<header>
<h3>titre de l'article</h3>
</header>
<img src="monimage.png" alt="Mon image" />
<footer>
<p>Description de l'image</p>
</footer>
</article>
</section>

N°3 :

<section>
<!-- autres balises de la page -->
<article>
<header>
<h3>titre de l'article</h3>
</header>
<ul>
<li><img src="monimage.png" alt="Mon image" /></li>
<li><p>Description de l'image</p></li>
</ul>
</article>
</section>

Merci a ceux qui pourront m'éclaircir sur ce sujet

Bonne fin d'après midi !

Bonsoir.

A priori la plus sémantique.

N°4 :

<section>
<!-- autres balises de la page -->
<article>
   <h3>titre de l'article</h3>
    <figure>
      <img src="monimage.png" alt="Mon image" />
      <figcaption>Description de l'image</figcaption>
   </figure>
</article>
</section>

Modifié par Zelena (29 Nov 2016 - 17:41)

Bonsoir.

La sémantique porte sur le sens et la signification. Pas de sémantique sans contenu et contexte. Avec le peu d'information que l'on a la seule chose que l'on peut dire c'est la remarque de Zelena. Hormis cela, paragraphe ou pas, header ou pas, j'ai envie de dire ça dépend (mais à priori le header on peut s'en passer).

Bonsoir,

Je me range sur les avis précédents, le probable meilleur balisage est avec <figure>. Mais sauf dans un cas: si ton article se limite à cette image et la description qui l'accompagne, i.e. il n'y a rien d'autre à part ça. Parce que <figure> est une sorte d'appartée spécialisé pour placer des illustrations au milieu d'un plus grand article.

Bonjour, merci d'avoir répondu à ma question.
J'avais complètement oublier la balise <figure>..
Le seul problème chez I.E c'est qu'elle n'est supporter uniquement si elle est dans une balise globaliser <main> c'est sa ?

Le site sur lequel je travaille contient des articles avec de nombreuses illustrations. Chaque illustration est une <figure> (parfois sans <figcaption>, quelquefois avec un <h3> dans <figure>). Ça n'a pas l'air de présenter la moindre difficulté avec IE.

D'accord, je vais essayer tout ça
Merci

Et n'oubliez pas l'outil indispensable : Google : Outil de test des données structurées