Choix de balises (sémantique)

Bonjour,

je suis en train de compléter une page de mon site perso : http://www.evestudio.fr/apropos

En bas de page, je vais ajouter une liste de mes compétences sous cette forme :

Compétences

Type compétence 1
* Compétence 1
* Compétence 2
* Compétence 3

Type compétence 2
* Compétence 1
* Compétence 2
* Compétence 3

etc..etc...

Et donc ce qu'il se passe, c'est que j'ai un petit doute quand au choix des balises à mettre en oeuvre, surtout en terme de sémantique.

J'hésite entre :

<h3></h3>
        <h4></h4>
              <p></p>
              <p></p>
              <p></p>

ou

<h3></h3>
        <p></p>
              <ul>
                 <li></li>
                 <li></li>
              </ul>

ou encore un mix des deux..

D'avance merci pour votre temps

Plutôt la deuxième à mon avis.

J'en étais presque sûr mais faut mieux mettre un <p> ou un <h4> ?

Ca me fait toujours bizarre de mettre une balise <h*> sans qu'il y ait de <p> en-dessous

Et pourquoi pas cela ?

<h3></h3> 
<h4></h4> 
  <ul> 
    <li></li> 
    <li></li> 
  </ul>

<h4></h4> 
  <ul> 
    <li></li> 
    <li></li> 
  </ul> 

Vu que tu liste des compétences
Modifié par Fabious (08 Jan 2010 - 16:29)

Je partage la préconisation de Fabious.

Oui voilà c'est ce que je disais, un <h4> au lieu du <p>

Merci à tous d'avoir confirmé

Bonsoir,

Pour ce qui est de la sémantique, si tu veux afficher un titre avant de lister tes compétences, <h4></h4> est plus adapté que des <p></p> .

Après, si tu ne souhaites pas insérer de titre libre à toi d'utiliser des <p></p>.

Bonjour,

Moi j'utiliserais plutôt des listes imbriquées:

<h3>Compétences</h3>
<ul>
  <li><h4>Comp 1</h4>
    <ul>
      <li>Liste de comp</li>
      <li></li>
    </ul>
  </li>
  <li><h4>Comp 2</h4>
    <ul>
      <li>Liste de comp</li>
      <li></li>
    </ul>
  </li>
</ul>

Car compétence 1 et 2 sont également une liste.

Laurie-Anne a écrit :
Car compétence 1 et 2 sont également une liste.

Je me souviens d'une discussion, il y a quelques-années (ailleurs), où la recherche de la sémantique des listes avait abouti à structurer la page entière sous forme de listes imbriquées.

Si vous partez sur "ceci est également une liste", vous pouvez en effet l'étendre à la totalité de chaque page Web.

Pour revenir à la notion de "sémantique", une liste est appropriée quand elle permet une exploitation par les UA, utile... à l'utilisateur.

Mettre des listes autour des titres est typiquement inutile :
:* des titres seuls permettent à l'utilisateur de prendre connaissance de l'organisation des contenus et d'y naviguer. Il permettent à d'autres outils d'indexer le contenu (de manière particulièrement courante).
* des listes imbriquées seules permettent à l'utilisateur de prendre connaissance de l'organisation des contenus et d'y naviguer (de manière moins utilisable dans certaines aides techniques, tels que les lecteurs d'écran, mais bon). Dans l'absolu, ils permettraient des indexations de contenu, mais limitées dans la pratique.

Le cumul des deux n'apporte qu'un peu de verbosité superflue dans la restitution.

J'appuie la proposition de Fabious, et les réserves de Laurent sur les listes imbriquées combinées à des titres.

Une autre solution possible serait d'utiliser des listes imbriquées sans H4. Personnellement, je suis pas fan.

Merci pour vos réponses.

Personellement, je vais partir sur la structure de Fabious qui était mon idée de départ

Complément d'informations sur ce post.