Discussion :

[jimmylet]

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.



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]

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]

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]

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]

Merci beaucoup ! Je vais donc suivre tes conseils!

[NoSmoking]

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