5568 sujets

Sémantique web et HTML

Est il correct de placer une balise titre (h1,h2, ect...) dans une balise li pour favoriser le référencement naturel par exemple ?
mouze a écrit :
Est il correct de placer une balise titre (h1,h2, ect...) dans une balise li pour favoriser le référencement naturel par exemple ?
Bien sûr. Pourquoi ça ne le serait pas ? Smiley smile

Attention au <h1> par contre. En général, cette balise est utilisée seulement une fois : pour placer le nom du site OU le nom de la page.
Bonjour à toi aussi.

En quoi tu favorises le référencement naturel en plaçant une balise <hn> dans une liste ? C'est correct au niveau de la structure d'un document (X)HTML de manière absolue (un li peut contenir toute sorte de balise block), mais totalement illogique au niveau sémantique.
je pense au menu général d'un site.

<h1><mon site</h1>

ex: <ul>

<li><h2>Homme</h2></li>
<li><h2>femme</h2></li>
<li><h2>enfant</h2></li>

</ul>

mettre les balise titres ne sert il donc à rien ?
Le but des balises titres c'est de baliser des titres, donc vu ton exemple, non ce n'est pas logique. Les éléments de liste que tu présente ne sont que des éléments d'une liste et clairement pas des titres de sections.

L'utilisation des hn ne doit pas se faire pour favoriser le référencement, mais pour que la hiérarchie du document soit cohérente. D'ailleurs, le plus souvent quand c'est quand on construit sa hiérarchie logiquement, sans penser au référencement qu'on obtient les meilleurs résultats.
et plutôt voir les h[n] comme des "boîtes emboitées" qui caractérisent ce qu'elles contiennent plus que comme des titres au sens imprimerie. Il ya donc un ou plusieurs h1 (selon la structure du document) qui contiennent des h2 qui eux-mêmes etc... Ne pas se préoccuper de la taille : choisir un h2 parce que c'est plus grand que h3 est aberrant = CSS est là pour ça.

Ce qui pose un autre problème : si un document stylé doit refléter le document initial non-stylé, quid de l'utilité de CSS pour "rendre" des tailles de h[n] non- calquées sur les tailles HTML naturelles ? La solution est de concevoir/structurer le document en conséquence.

On ne met pas un h3 parce que ça aura telle ou telle taille, mais parce qu'à cet endroit du flux c'est ce niveau d'emboitage qui est nécessaire. Si le document nécessite (pour des raisons de taille/de graphisme) un h2 à cet endroit, c'est probablement qu'il est mal conçu. Du coup soit on sera obligé de mettre un h3 stylé plus grand et on perd la cohérence stylé/non-stylé, soit on met un h3 et on perd le sens porté par l'aspect... dans les deux cas on est perdant, à la fois sur le plan de la sémantique du document et sur celui du référencement naturel.
Ceci ne serait pas correct dans la fabrication d'un menu ?

<ul>
  <li><h2>Rubriques</h2>
    <ul>
      <li><a href="rubrique1">Rubrique 1</a></li>
      <li><a href="rubrique2">Rubrique 2</a></li>
      <li><a href="rubrique3">Rubrique 3</a></li>
    <ul>
  </li>
</ul>
C'est grammaticalement correct.

Sémantiquement c'est un peu bancal.

Il est également possible de présenter le menu comme ceci :
<h2>Rubriques</h2>
<ul>
  <li><a href="rubrique1">Rubrique 1</a></li>
  <li><a href="rubrique2">Rubrique 2</a></li>
  <li><a href="rubrique3">Rubrique 3</a></li>
<ul>


Ce qui allège le code.

ou même :
<ul>
  <li>Rubriques
    <ul>
      <li><a href="rubrique1">Rubrique 1</a></li>
      <li><a href="rubrique2">Rubrique 2</a></li>
      <li><a href="rubrique3">Rubrique 3</a></li>
    <ul>
  </li>
</ul>


Qui permet de tout garder dans une liste et de styler en fonction de la parenté de l'élément <li>.

A voir donc si ton cas particulier nécessite réellement de mettre un hn sur tes rubriques.
Effectivement Laurie-Anne. Ma présentation est le choix par défaut du moteur WordPress quand on utilise le système bien pratique des "widgets" dans la colonne (l'autre solution est d'écrire soit même le code des boucles que l'on veut dans la colonne pour éviter d'avoir ce <h2> dans un <li> ). Je suis allé voir son "homologue" français, DotClear, la tendance pour la colonne semble par exemple, un <h2> pour "Rubriques" et après un <ul> pour les divers liens de la rubrique, comme tu le présentes en premier lieu. Je me demande alors pourquoi ce choix de la part de la société WordPress. Je vais en faire part.
Newzic a écrit :
Je me demande alors pourquoi ce choix de la part de la société WordPress.

Une lubie de standardiste qui consiste à mettre des listes partout pour faire plus «sémantique», alors qu'en général ça apporte très peu voire rien du tout à la sémantique du document.

(C'est pas bien grave non plus. Et on a tous nos petites lubies. Smiley cligne )
Modifié par Florent V. (06 May 2009 - 14:09)