Aller au contenu
Nenex

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

Noter ce sujet :

Recommended Posts

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.

Partager ce message


Lien à poster
Partager sur d’autres sites

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é par Jiizen

Partager ce message


Lien à poster
Partager sur d’autres sites

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 :P (tous les titres du site sont avec hx :P).

 

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.

Partager ce message


Lien à poster
Partager sur d’autres sites

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. :) 

 

 

Partager ce message


Lien à poster
Partager sur d’autres sites

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é par Nenex

Partager ce message


Lien à poster
Partager sur d’autres sites

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

Partager ce message


Lien à poster
Partager sur d’autres sites

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.

Partager ce message


Lien à poster
Partager sur d’autres sites

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

 

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant

×
×
  • Créer...