Utiliser figure et figcaption pour faire ça ?

**jimmylet** · 20/12/2014, 13h08

Bonjour,

Je suis étudiant en 1ère infographie. Pour le cours de WEB, nous devons réaliser un site web concernant notre groupe, etc. sur base d'un modele. Nous devons faire uniquement la page HTML de la manière sémantique la plus "parfaite", incluant toutes les contraintes d'accessibilité vue au cours.

Pour la page "Groupe", nous devons réaliser ceci.

Nom : 1344.png
Affichages : 1247
Taille : 378,8 Ko

Nom : 1344.png
Affichages : 1247
Taille : 378,8 Ko

Je bloque sur le côté droit. En réalité, chaque image redirige vers le lien du nom. A chaque fois que le nom est survolé par le curseur (ou que le curseur survole l'image), l'image associée au nom s'agrandit (un petit effet stylisé).

Aujourd'hui, je ne m'occupe pas du code CSS (on ne l'a pas encore vu au cours, on doit juste s'occuper de la partie codage (x)HTML5).

J'aimerais utiliser la balise "figure" et "figcaption". Je ne sais pas si c'est une bonne idée? J'ai aussi cru qu'on pouvait le faire sous forme de liste? Quelle est la meilleure solution ici?

Pourrais-je par la suite, effectuer la disposition comme sur l'exemple plus haut en CSS (oui, car la partie CSS de ce site, on devra la faire une fois que l'on aura vu le CSS).

Puis-je aussi mettre cette partie dans une balise sectionnante? (un nav, ou un aside par exemple?)

Je vous remercie de m'avoir lu et d'avance, pour votre aide!

Jimmylet.

**CosmoKnacki** · 20/12/2014, 18h45

L'utilisation d'une liste est une très bonne idée du point de vue sémantique, c'est clairement la liste des membres de l'équipe donc il n'y a pas photo.
Ensuite dans chaque items de la liste, tu peux placer une balise <figure> contenant dans l'ordre la balise <figcaption> avec le nom du membre et sa description, puis l'image (cette ordre te sera utile plus tard pour gérer l'effet d'agrandissement).

L'utilisation de <nav> pour placer la partie de droite est à proscrire, cette partie ne contient aucun lien, ce n'est pas du tout un élément de navigation. Par contre, <aside> est plus approprié car il s'agit d'un contenu relatif au bloc de gauche.

**jimmylet** · 20/12/2014, 20h24

Merci beaucoup CosmosKnacki ! Ton aide est très appréciable.

Je pense que ton idée est mieux que la mienne. Et cela me semble très bien.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<ul>
     <li>
         <figure>
             <img...>
             <figcaption>
                <h3 role="heading" aria-level="3">Jerome Dupont</h3>
                <p>Description</p>
              </figcaption>
           </figure>
      </li>
      <li>
       ....
</ul>

Pour la navigation, justement, chaque nom est composé d'un lien vers la page de l'élève et c'est pour cela que j'hésitais avec <nav> ? C'est toujours faux ou c'est mieux aside?

Il faut savoir que sur le site, il y a une barre de navigation ainsi qu'un deuxième <nav> pour le fil d'ariane. Donc un troisième, je ne sais pas si ce serait bien.

Merci beaucoup !

EDIT : Et il sera réalisable de disposer cela en CSS par la suite comme sur l'exemple ?

Merci

**CosmoKnacki** · 20/12/2014, 21h18

Dans ce cas c'est différent, si chaque item est un lien, <nav> est approprié car il s'agit bien d'un bloc de liens.
Maintenant si tu veux marquer la différence par rapport à ta barre de navigation principale, <aside> reste une meilleur option car son contenu est relatif à celui du bloc de gauche, tout en restant parfaitement adapté pour une navigation additionnelle.

En ce qui concerne la mise en forme, oui c'est tout à fait possible.

**jimmylet** · 20/12/2014, 21h43

Merci beaucoup ! Je vais donc suivre tes conseils!

**NoSmoking** · 21/12/2014, 09h11

Bonjour,
il me semble également que l'utilisation d"une DL serait, sémantiquement parlant, pas mal.

**jimmylet** · 21/12/2014, 12h14

Bonjour,

Je viens d'aller voir sur un autre site qui parle de l'utilisation d'une DL. Cependant, il y a des personnes qui sont pour et d'autres qui sont contre. Je pense donc utiliser le couple figure figcaption incorporé dans une liste, cette nouvelle balise semble faire l'unanimité et cela est très bien. Mais grâce a ton commentaire, j'ai appris que la DL pouvait être utilisée dans plusieurs cas et non seulement dans une liste mots/définitions

**NoSmoking** · 21/12/2014, 14h59

Cependant, il y a des personnes qui sont pour et d'autres qui sont contre.

Ca c'est le propre de l'interprétation

Je pense donc utiliser le couple figure figcaption incorporé dans une liste

perso je pense que FIGURE n'est pas ce qui représente le mieux ce que tu souhaites présenter, mais comme dit plus haut il y a les pour et les contre.

exemple de représentation

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Utilisation DL</title>
<meta name="Author" content="NoSmoking">
<style>
section {
  font:100%/125% Verdana,sans-serif;
  margin:1em;
}
dl{
  margin: 2em 0;
  padding: 0;
  width: 12em;
  text-align: center;
  font-size:0.8em;
}
dt{
  background-color:#A7CFCF;
  background: linear-gradient(to bottom, #A7CFCF 0%,#23456A 100%);
  color: #EEF;
  padding:.5em;
  font-weight: bold;
}
dd{
  margin:0;
  padding:.5em;
  font-style: italic;
  border-left: 1px solid #ABC;
  border-right: 1px solid #ABC;
}
dd:nth-child(3n){
  border-bottom: 1px solid #ABC;
  margin:0 0 1em 0;
}
</style>
</head>
<body>
<section>
  <h1>Quelques responsables DVP</h1>
  <dl>
    <dt>Bovino</dt>
    <dd><img src="http://www.developpez.net/forums/avatars/243304-bovino.gif?dateline=1214391152" alt="Bovino"></dd>
    <dd>Responsable Développement Web</dd>
 
    <dt>snake264</dt>
    <dd><img src="http://www.developpez.net/forums/avatars/125580-snake264.gif?dateline=1323444237" alt="snake264"></dd>
    <dd>Responsable Web sémantique</dd>
 
    <dt>Vermine</dt>
    <dd><img src="http://www.developpez.net/forums/avatars/226061-vermine.gif?dateline=1417677130" alt="Vermine"></dd>
    <dd>Responsable JavaScript &amp; AJAX</dd>
  </dl>
</section>
</body>
</html>

**jimmylet** · 21/12/2014, 18h54

C'est vrai, je remarque qu'il y a plusieurs possibilités. Le tout est de trouver la meilleure. C'est la première fois que l'on a un aussi gros travail à faire. Généralement, c'était des exercices sur ce que l'on voyait dans le cours en théorie. Aujourd'hui, c'est l'application complète. On a pas encore vu tout l'HTML (ça c'est pour ceux qui se destine au web, comme moi) et encore rien en présentation (c'est pour après janvier).

Ton exemple me fait maintenant hésité, je vais devoir peser le pour et le contre. Comme je n'y connais encore rien en présentation, est-ce que ton exemple me permet aussi de réaliser ce que je devrais faire par la suite sur le modèle ? Ce que je veux dire par la, est-ce que je pourrais "dissocier" les images du reste du bloc nom+description ?

Merci pour ton aide en tout cas!

**CosmoKnacki** · 22/12/2014, 00h11

Dissocier les images n'est pas un problème, avec le CSS, tu peux très bien positionner un élément en dehors de son bloc d'origine.

En ce qui concerne l'utilisation des listes de définitions, du point de vue sémantique, je dis pourquoi pas. Par contre c'est une structure plus contraignante parce que dl ne peut avoir pour enfants que les éléments dt et dd, il n'est pas possible d'encapsuler chaque item (l'ensemble nom+description+image) dans un élément qui lui soit propre.
Avec cette structure:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<dl>
    <dt>nom1</dt>
    <dd>desc1</dd>
    <dd><img src="nom1.jpg" alt="nom1" /></dd>
</dl>

Pour pouvoir rendre tous les éléments cliquables, tu devras dupliquer le même lien pour chaque élément puisque tu ne peux pas encadrer l'ensemble:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<dl>
    <dt><a href="nom1.htm">nom1</a></dt>
    <dd><a href="nom1.htm">desc1</a></dd>
    <dd><a href="nom1.htm"><img src="nom1.jpg" alt="nom1" /></a></dd>
</dl>

Il ne sera pas possible d'illuminer (ou autre effet) le nom et/ou la description au survol de l'image (pour lier visuellement la photo avec le nom de la personne), car malheureusement en CSS on ne peut pas atteindre l'élément précédent qui est au même niveau. (par contre on peut atteindre les éléments suivant, donc l'effet sur l'image est toujours possible au survol du nom)

L'utilisation d'une liste ul permet d'éviter ces deux problèmes, car rien n'empêche d'encadrer l'ensemble nom+description+image dans un seul et même lien, ce qui rend possible du même coup le déclenchement des effets quelque soit la zone de survol, il suffit des les déclencher au survol du lien.
Après, tout dépend de ton cahier des charges.

**NoSmoking** · 24/12/2014, 14h57

Je n'avais pas pris en compte ton besoin d'effet et dans ce cas il est parfois nécessaire de s'assoir légèrement sur la sémantique des balises pour une autre moins forte.

Tu pourrais également créer autant de DL que tu as d'acteurs, le tout dans une UL, et dans ce cas tu pourrais obtenir ton résultat en jouant sur les positions relative/absolute des éléments.

Mais au final comme l'a écrit CosmoKnacki

Après, tout dépend de ton cahier des charges.

**Bovino** · 24/12/2014, 14h59

Envoyé par CosmoKnacki

Par contre c'est une structure plus contraignante parce que dl ne peut avoir pour enfants que les éléments dt et dd, il n'est pas possible d'encapsuler chaque item (l'ensemble nom+description+image) dans un élément qui lui soit propre.

Je comprends pas...

Tu as exactement la même contrainte avec une liste <ul> : les enfants ne peuvent être que des <li>.

**CosmoKnacki** · 24/12/2014, 17h41

Envoyé par Bovino

Je comprends pas...

Tu as exactement la même contrainte avec une liste <ul> : les enfants ne peuvent être que des <li>.

Bien sûr, mais si tu veux rendre tout cliquable, tu peux écrire ça:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<ul>
    <li><a href...>...</a></li>
    <li><a href...>...</a></li>
    <li><a href...>...</a></li>
</ul>

où le lien englobe et le nom, et la description, et l'image.

par contre avec une liste de définitions tu es obligé de dupliquer le même lien pour chaque élément de l'item:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<dl>
    <dt><a href...>nom</a></dt>
    <dd><a href...>desc</a></dd>
    <dd><a href...><img...></a></dd>
 
    <dt><a href...>nom</a></dt>
    <dd><a href...>desc</a></dd>
    <dd><a href...><img...></a></dd>
 
    <dt><a href...>nom</a></dt>
    <dd><a href...>desc</a></dd>
    <dd><a href...><img...></a></dd>
</dl>

Et, au delà du surplus d'écriture, on ne peut pas déclencher une illumination du nom et/ou de la description au survol de l'image, car on se retrouve coincé au niveau des sélecteurs css (il n'y a pas de sélecteur :previous). Cet effet me semble nécessaire du fait de la disposition particulière des images par rapport à l'ensemble nom/description, le lien visuel n'est pas immédiat.

**Bovino** · 24/12/2014, 17h47

Certes, mais qu'est-ce qui t'empêche de regrouper les éléments dans un unique <dd> comme tu le fais avec les <li> ? La seule contrainte étant d'extraire un terme plus générique sans forcément de lien (hypertexte s'entend, pas sémantique) pour le placer dans un <dt>.

Bon, je te concède toutefois que la liste est quand même plus simple à utiliser et me semble plus appropriée.

**NoSmoking** · 27/12/2014, 12h24

Voilà en fait à quoi je pensais, ou pas loin

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<section>
  <h1>Quelques responsables DVP</h1>
  <ul>
    <li>
      <a href="http://www.developpez.net/forums/u243304/bovino/">
        <dl>
          <dt>Bovino</dt>
          <dd><img src="http://www.developpez.net/forums/avatars/243304-bovino.gif?dateline=1214391152" alt="Bovino"></dd>
          <dd>Responsable Développement Web</dd>
        </dl>
      </a>
    </li>
    <li>
      <a href="http://www.developpez.net/forums/u125580/snake264/">
        <dl>
          <dt>snake264</dt>
          <dd><img src="http://www.developpez.net/forums/avatars/125580-snake264.gif?dateline=1323444237" alt="snake264"></dd>
          <dd>Responsable Web sémantique</dd>
        </dl>
      </a>
    </li>
    <li>
      <a href="http://www.developpez.net/forums/u226061/vermine/">
        <dl>
          <dt>Vermine</dt>
          <dd><img src="http://www.developpez.net/forums/avatars/226061-vermine.gif?dateline=1417677130" alt="Vermine"></dd>
          <dd>Responsable JavaScript &amp; AJAX</dd>
        </dl>
      </a>
    </li>
  </ul>
</section>

et coté CSS on peut quand même faire pas mal de truc

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
html, body{
  background:#F0E8D8;
}
h1{
  color: #706040;
  text-shadow:1px 1px 0px #FFF;
}
section {
  font:100%/125% Verdana,sans-serif;
  width:40em;
  margin:auto;
}
ul{
  padding:0;
  list-style:none;
  width:10em;
  margin:auto;
}
ul a{
  text-decoration:none;
  border:0;
  color:#000;
}
dl{
  position:relative;
  margin: 2em 0;
  padding: 0;
  width: 12em;
  text-align: center;
  font-size:0.8em;
  cursor:pointer;
}
dl img {
  position:absolute;
  right:100%;
  top:0;
  transition: all 0.5s ease;
  transform:rotate(-10deg) scale(0.75);
}
dl:hover img{
  transform:rotate(0deg);
  right:90%;
}
dl:hover dt{
  color:#F00;
}
dt{
  padding:.5em;
  font-weight: bold;
  color:#706040;
  transition: all 0.5s ease;
}
dd{
  margin:0;
}

pour au final obtenir ce code de test

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Utilisation DL</title>
<meta name="Author" content="NoSmoking">
<style>
html, body{
  background:#F0E8D8;
}
h1{
  color: #706040;
  text-shadow:1px 1px 0px #FFF;
}
section {
  font:100%/125% Verdana,sans-serif;
  width:40em;
  margin:auto;
}
ul{
  padding:0;
  list-style:none;
  width:10em;
  margin:auto;
}
ul a{
  text-decoration:none;
  border:0;
  color:#000;
}
dl{
  position:relative;
  margin: 2em 0;
  padding: 0;
  width: 12em;
  text-align: center;
  font-size:0.8em;
  cursor:pointer;
}
dl img {
  position:absolute;
  right:100%;
  top:0;
  transition: all 0.5s ease;
  transform:rotate(-10deg) scale(0.75);
}
dl:hover img{
  transform:rotate(0deg);
  right:90%;
}
dl:hover dt{
  color:#F00;
}
dt{
  padding:.5em;
  font-weight: bold;
  color:#706040;
  transition: all 0.5s ease;
}
dd{
  margin:0;
}
</style>
</head>
<body>
<section>
  <h1>Quelques responsables DVP</h1>
  <ul>
    <li>
      <a href="http://www.developpez.net/forums/u243304/bovino/">
        <dl>
          <dt>Bovino</dt>
          <dd><img src="http://www.developpez.net/forums/avatars/243304-bovino.gif?dateline=1214391152" alt="Bovino"></dd>
          <dd>Responsable Développement Web</dd>
        </dl>
      </a>
    </li>
    <li>
      <a href="http://www.developpez.net/forums/u125580/snake264/">
        <dl>
          <dt>snake264</dt>
          <dd><img src="http://www.developpez.net/forums/avatars/125580-snake264.gif?dateline=1323444237" alt="snake264"></dd>
          <dd>Responsable Web sémantique</dd>
        </dl>
      </a>
    </li>
 
    <li>
      <a href="http://www.developpez.net/forums/u226061/vermine/">
        <dl>
          <dt>Vermine</dt>
          <dd><img src="http://www.developpez.net/forums/avatars/226061-vermine.gif?dateline=1417677130" alt="Vermine"></dd>
          <dd>Responsable JavaScript &amp; AJAX</dd>
        </dl>
      </a>
    </li>
  </ul>
</section>
</body>
</html>

Utiliser figure et figcaption pour faire ça ?

HTML

Discussions similaires

Partager

Partager