Inserer un span dans une UL : est-ce propre ?

[Nenex]

Salut

 

Je me pose une question : est-ce que c'est propre de mettre un span dans une balise UL

<ul>
	<span></span>
	<li></li>
	<li></li>
  <li></li>
</ul>

En fait, je voudrais mettre un titre a des listes à puces. Mais ces listes je vais devoir les déplacer. Pour que chaque titre soit "attacher" à sa liste je voulais les mettre dans une DIV :

 

<div>
	<span></span>
	<ul>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

Mais je me suis dit que ça serait aussi bien de mettre directement le titre dans la balise UL. Etant donné que le span peut etre mis dans une balise P, je me suis dit que pourquoi pas dans un UL. Vous en pensez quoi ?

 

Merci d'avance pour vos réponses.

[Jiizen]

Mon enseignant m'a dit que dans un ul, on ne pouvait mettre que des li. Après, tu es libre de mettre plus ou moins ce que tu veux au sein des li mais mettre autre chose que des li dans un ul n'est pas propre... 

 

Tu dis que tu veux mettre un titre au niveau de ta liste où j'ai mal compris ? Sémantiquement, un titre correct, c'est un h1, h2, h3,... Il y a des balises de titres exprès pour les tableaux par exemple mais pour les listes, il n'y en a pas à ma connaissance. Pourquoi un span et pas une balise de titre ? 

 

<div>
  <h1> Mon titre </h1> 
  <ul>
    <li>Élément de liste 1</li>
    <li>Élément de liste 2</li>
    <li>Élément de liste 3</li>
  </ul>
</div>

Edit : Si je ne fais pas erreur, span est un peu la div du texte. (Même si elle est utilisée pour d'autres choses mais bon... x3). C'est pour faire une sélection précise de texte que tu pourras mettre en forme par la suite. Petit lien sur span.

Modifié 5 Novembre 2016 par Jiizen

[Nenex]

C'est se que je voulais faire, mettre un h3 en titre. Par contre dans mon 1° message j'ai mis la même structure que toi mais avec un span au lieu d'un hx. J'ai fait un copier-collé de mon code exemple précédent, mais j'ai oublié de changer span par hx (tous les titres du site sont avec hx ).

 

Avec le span dans le UL je me suis dit que ça simplifierait le code. Et comme on peut le mettre dans une balise P, je me disais que peut être que ça pouvait le faire dans un UL. Mais si c'est pas du tout propre je vais faire avec une balise hx.

 

Merci pour ton avis.

[Jiizen]

Bah, disons que s'il n'y a pas d'autre choix, on peut utiliser un span. Mais s'il y a un "sens" à ta balise et que cette balise existe, il faut toujours privilégier l'utilisation de la balise prévue à cet effet. C'est ce qui est recommandé et ce qui permettra aussi à Google de mieux te référencer.

 

C'est important que la structure de la page soit la plus correcte possible mais j'avoue qu'il est parfois nécessaire de bidouiller... XD Malgré la bonne volonté, parfois il n'y a pas le choix (Généralement avec un CSS capricieux x3). 

 

(N'hésitez pas à me reprendre si je dis une bêtise, autres gens du forum, merci x3) 

 

Tant mieux si ça a pu aider, bon site.  

 

 

[Nenex]

Je suis d'accord avec toi, et c'est pour ça que j'ai demandé ce qu'en pense la communauté . J'essaye aussi toujours d’alléger au maximum mon CSS, mais en restant avec du code propre. En tout cas merci pour ton avis.

Modifié 9 Novembre 2016 par Nenex

[Dudu]

Bonjour

 

Alléger son code CSS, c'est bien. Alléger aussi son code HTML, c'est mieux.

 

Les <div> et les <span>, ce sont des rustines de secours quand vraiment on ne peut rien mettre d'autre. Et il faut les éviter au maximum.

 

J'ai l'habitude de dire -à vrai dire, voilà bientôt 10 ans que je me tue à le dire- qu'une page ne devrait pas contenir plus de 5 <div>, et que s'il y en a plus, ils sont inutiles et reflètent une mauvaise compréhension de la logique HTML.

 

D'ailleurs, j'estime (au pifomètre) à 99% le nombre de <div> inutiles sur une page lambda.

 

De plus, HTML 5 a apporté tout un tas de nouvelles balises qui permettent d'éviter de surcharger ses pages.

 

Dans ton cas, ce qui me semble le plus approprié serait l'utilisation des listes de définition. Ci-joint un article de référence à ce sujet : tu remarqueras que l'article date de mars 2004, autant dire une éternité en temps internet. Ce n'est donc rien de dire qu'il date d'avant HTML 5.

Dans les exemples de l'article, tu verras que tu peux styliser à ton gré, et surtout ! sans le moindre <div> ni <span>.

 

Bonne lecture : http://www.pompage.net/traduction/listesdefinitions

[Nenex]

Dans mon cas c'est vrais qu'une liste de définition c'est ce qui serait le mieux. J'utilise le DT pour le titre et je met des puces aux DD. Merci pour le lien (que je vais mieux regarder) et le conseil.

[Jiizen]

Ha, j'avais complètement oublié l'existence de cette balise, tiens. X3 (Vive les forums \o/). Merci pour le rafraîchissement.