Utilisation massive de <div> et <span>

Question philosophique :

Je reviens de cette page : http://www.alsacreations.com/astuce/lire/55-balises-bloc-et-en-line-les-exceptions.html

Et je constate que la plupart des balises prédéfinie html sont pleine d'exceptions (au niveau des imbrications) ! On se croirait en langue française avec chou, genou, caillou, hibou qui prennent un x au pluriel !

Par exemple, disons que j'ai une grande page web dans laquelle j'ai une multitude de paragraphes <p>.

Exceptionnellement, ça et là, disons que j'aurais bien besoin d'une balise de bloc imbriquée (peu importe le bloc de code), j'ai deux solutions :

1. Je met tous mes paragraphes en <p> et quand j'ai besoin d'imbrications, alors, je transforme certains <p> en <div>
2. Avant de constater que j'ai peut être besoin de balises imbriquées, je n'utilise que des <div>, et je suis tranquille jusqu'à la fin des temps puisque j'imbrique mes <div> les uns dans les autres comme un légo, et j'oublie les autres balises

En utilisant la solution 2, et finalement en généralisant l'utilisation des div et span sur mon site, je suis d'accord que j'annule complètement le poids sémantique (auprès des moteurs de recherche), mais à part ça, qu'est ce que ça me simplifierait la vie !!!!

y en a-t-il parmi vous qui ont essayé d'utiliser massivement les div imbriqués et les span dans leur site, avec ou sans succès ?
Modifié par Frouppy2 (16 Sep 2009 - 15:43)

Alors déjà pose-toi la question suivante : comment se fait-il que tu ais une multitude de <p> ?

Est-ce vraiment tous des paragraphes de texte ? Où est-ce que tu les utilises pour d'autres usages ?

FlorentG a écrit :
Alors déjà pose-toi la question suivante : comment se fait-il que tu ais une multitude de <p> ?
Est-ce vraiment tous des paragraphes de texte ? Où est-ce que tu les utilises pour d'autres usages ?

Bon, c'est une question théorique : je ne suis pas devant ce cas. Mais imagine par exemple que tu as un site assez verbeux, style par exemple un ensemble d'articles de lois... Tu as bien tout plein de paragraphes les uns en dessous des autres...

Et même si ton site n'est pas si verbeux que ça... dès que tu commences à mettre un peu de texte, on peut rapidement estimer que ce sont des paragraphes...
Modifié par Frouppy2 (16 Sep 2009 - 17:00)

A mon avis tu n'utilises pas css correctement, si p existe c'est pour une raison.

Tu peux nous montrer un bout de code ?

S'il faut commencer à imbriquer une multitude de balises, et que les <p> posent problèmes, alors y'a un problème de structure.

Il faut que les balises entourent leur contenu de la manière la plus précise possible. Les <p> doivent coller leur texte, si y'a besoin de div dedans ou de moults imbrications, faut revoir la structure. On peut très bien aussi mettre des divs autour des <p>.

Il nous faut effectivement un peu de code là pour voir

FlorentG a écrit :
S'il faut commencer à imbriquer une multitude de balises, et que les <p> posent problèmes, alors y'a un problème de structure.
[...]
Il nous faut effectivement un peu de code là pour voir

Ceci par exemple :

<p>Article 1 : Il est interdit de manger des briques. Les briques sont mauvaises pour la santé.</p>
<p>Article 2 : Il est interdit de se doucher à l'eau bouillante. En effet, vous risquez de graves brûlures !
<div class="attention">Ne confondez pas Eau Bouillante et Eau tiède</div>
A partir de 60 degrés, l'eau est considérée comme trop chaude.
</p>
<p>Article 3 : Il est interdit d'uriner dans les boîtes aux lettres de ses voisins</p>
[etc...]

Admettons qu'il y ait une cinquantaine d'articles dont 3 ou 4 avec un div à l'intérieur... Vous feriez comment ?
Modifié par Frouppy2 (17 Sep 2009 - 13:52)

Le div est innaproprié ici. Ce devrait être un span (si l'on souhaite différencier une portion de paragraphe) ou un p (sinon).

Et en utilisant des p et span, il n'y a rien de gênant dans le code.
Modifié par Laurie-Anne (17 Sep 2009 - 14:13)

Frouppy2 a écrit :


Ceci par exemple :

<p>Article 1 : Il est interdit de manger des briques. Les briques sont mauvaises pour la santé.</p>
<p>Article 2 : Il est interdit de se doucher à l'eau bouillante. En effet, vous risquez de graves brûlures !
<div class="attention">Ne confondez pas Eau Bouillante et Eau tiède</div>
A partir de 60 degrés, l'eau est considérée comme trop chaude.
</p>
<p>Article 3 : Il est interdit d'uriner dans les boîtes aux lettres de ses voisins</p>
[etc...]

Admettons qu'il y ait une cinquantaine d'articles dont 3 ou 4 avec un div à l'intérieur... Vous feriez comment ?

Là y'a effectivement un problème potentiel de structure.

Je metterais plutôt quelque chose du style

<div class="article">
	<h2>Article 1 :</h2>
	<p>
		Il est interdit de manger des briques. Les briques sont mauvaises pour la santé.
	</p>
</div>
<div class="article">
	<h2>Article 2 :</h2>
	<p>Il est interdit de se doucher à l'eau bouillante. En effet, vous risquez de graves brûlures !</p>
	<p class="attention">Ne confondez pas Eau Bouillante et Eau tiède</p>
	<p>A partir de 60 degrés, l'eau est considérée comme trop chaude.</p>
</div>
<div class="article">
	<h2>Article 3 :</h2>
	<p>
		Il est interdit d'uriner dans les boîtes aux lettres de ses voisins
	</p>
</div>

Laurie-Anne a écrit :
[...]en utilisant des p et span, il n'y a rien de gênant dans le code.

Ben oui mais moi je voulais vraiment un "sous paragraphe" (sous bloc en quelque sorte)

FlorentG a écrit :

[code html]
<div class="article">
<p>
Article 3 : Il est interdit d'uriner dans les boîtes aux lettres de ses voisins
</p>
</div>[/code]

Je me suis permis d'enlever le <h2>, admettons que je n'en veuille pas. Donc du coup, tu encadrerais tous les articles avec une balise <p>, et une "sur balise" <div class="article"> uniquement pour les rares cas ou je veux des "sous-blocs" dans mes paragraphes...

OK, d'accord, on peut voir les choses comme ça !

Ce qui est intéressant, mais aussi déstabilisant, c'est que des gens qui ont l'air de bien s'y connaître, comme Laurie-Anne et Florent, proposent des solutions vraiment différentes... EN tant que débutant, c'est vraiment difficile de reconnaître une bonne et une mauvaise solution, ou reconnaître deux solutions différentes, mais de qualité équivalente...

Frouppy2 a écrit :
Ce qui est intéressant, mais aussi déstabilisant, c'est que des gens qui ont l'air de bien s'y connaître, comme Laurie-Anne et Florent, proposent des solutions vraiment différentes... EN tant que débutant, c'est vraiment difficile de reconnaître une bonne et une mauvaise solution, ou reconnaître deux solutions différentes, mais de qualité équivalente...

En fait, non, on propose la même solution. Je pense que ton problème est de trop réfléchir.

Tu parle de sous paragraphe, pourtant dans un logiciel de traitement de texte, ce paragraphe serait de même niveau que les autres (avec simplement un style différent -> classe).

Frouppy2 a écrit :
Ce qui est intéressant, mais aussi déstabilisant, c'est que des gens qui ont l'air de bien s'y connaître, comme Laurie-Anne et Florent, proposent des solutions vraiment différentes... EN tant que débutant, c'est vraiment difficile de reconnaître une bonne et une mauvaise solution, ou reconnaître deux solutions différentes, mais de qualité équivalente...

C'est aussi le fait qu'il y a plusieurs possibilités. Peut-être que certains utiliseront une liste ordonnée (<ol> + <li>) au lieu d'une suite de <div>.

Il te faut définir d'abord de manière abstraite ce que tu veux structurer :

Une liste d'articles, avec dedans comme intitulé le mot Article et son numéro, suivi d'un ou plusieurs paragraphes.

Là maintenant faudra faire la balance entre le choix des éléments, l'implémentation, et le support navigateur (toujours ces méchants dans l'équation )

Alors pour la liste d'articles, soit on utilise une vraie liste (ul, ol, dl), soit des div class="article" (on créer ici un élément grâce à <div> qui est assez abstrait conceptuellement, et sa classe).

Avec les CSS, on pourrait même générer automatiquement l'intitulé "Article XXX." Mais sans CSS, *boom* ça s'afficherait pas, donc ce sera pas accessible (sans parler du support navigateur instable).

Maintenant le truc qui pour moi fait pencher la balance, c'est le fait que les Article sont numérotés, donc ordonnés. Pourquoi ne pas utiliser un <ol> alors Si l'ordre des articles n'importe pas trop, on pourra utiliser un <ul>, voire un <dl> (sujet à débat).


Donc là à ce niveau tu vois déjà le nombre de possibilités différentes qui s'offrent à nous. Pas moins de 4 structures possible.

Maintenant quelque-soit la solution utilisée, il reste quelque chose en commun : on a chaque fois un intitulé, suivit d'un ou plusieurs paragraphes. Donc dans tous les cas on utilisera une balise titre pour l'intitulé (h1...h6), suivi des paragraphes.

Ce qui est important aussi, c'est de toujours mettre le div class="article" (ou le li), même s'il y n'a qu'un seul paragraphe. La structure doit rester la même pour tout le monde.


Imagine tu veux mettre un peu d'interactivité : genre à l'affichage de la page, y'a juste les intitulés, et en cliquant dessus, hop les paragraphes correspondants s'affichent. Faudra bien itérer sur tous les articles pour greffer les évènements souris. Ça sera 10x plus simple si toute la structure sera la même, suffira de récupérer tous les div class="article", et y mettre un évènement souris au click.

Si maintenant t'as un mix de div et de p dans tous les sens, ça risque de poser problème. Sans parler des CSS, difficile de faire un style uniforme si ça part dans tous les sens

Ah Merci beaucoup Florent d'avoir pris le temps de cette réponse détaillée ! J'avais un peu l'impression de ne plus rien comprendre... Mais il y a quand même de quoi : il n'y a effectivement pas qu'une solution, et chacun voit midi à sa porte... C'est presque de la politique ce CSS

FlorentG a écrit :

Avec les CSS, on pourrait même générer automatiquement l'intitulé "Article XXX." Mais sans CSS, *boom* ça s'afficherait pas, donc ce sera pas accessible (sans parler du support navigateur instable).

Là, la question que je me pose, c'est pourquoi utiliser une "méta-balise" <div> ou <span>, alors que, come tu le précises, un peut directement générer ses propres balises : "Article XXX."... De toute façon, qu'il s'agisse d'un <div> générique ou d'une balise complètement inventée, dans tous les cas, le navigateur a besoin d'une définition CSS, non ?

OK, le <div> est prédéfini comme balise de bloc et <span> comme balise inline, mais c'est tout...

On utiliserait donc les balises préféfinies html uniquement dans l'éventualité que certains navigateurs exotiques, pda, ou navigateurs du futur décident de refuser les balises personnalisées ? ... Je trouverais ça étonnant... J'ai plutôt l'impression que c'est de l'intérêt de tout les concepteurs de navigateurs de les accepter...

Rien qu'à la lecture du code source, je trouve tellement plus simple de lire :

<Article>
   <TitreArticle>Article1 : Bla bla bla</TitreArticle>
   <CorpsArticle>Bla bla bla bla bla. Bla bla
      <Attention>BLA BLA BLA ! BLA BA</Attention>
   Bla bla bla bla.
   </CorpsArticle>
</Article>

que

<div class="article">
   <h1>Article1 : Bla bla bla</h1>
   <p class="corpsarticle">Bla bla bla bla bla. Bla bla
      <strong class="attention">BLA BLA BLA ! BLA BA</strong>
   Bla bla bla bla.
   </p>
</div>

Non ?

C'est effectivement plus simple à lire, mais ça n'a pas trop de valeur sémantiquement. Des outils, comme les moteurs de recherche, utilisent justement les balises connues pour le référencement.

En XML, on peut inventer ses propres balises. Mais comme partout, on a besoin de conventions.

C'est le rôle de l'XHTML : certaines balises sont normalisées. Leur sens est bien défini. Alors évidemment c'est ultra-générique, l'XHTML étant avant tout un langage de description de documents.

Une solution parfois retenue (mais un peu lourdingue), est d'utiliser le couple XML+XSLT. T'as ta page en XML, avec tes propres balises définies par toi-même (Article, Titre, Corps, etc.), et ensuite avant affichage t'as un fichier XSLT qui le transforme en XHTML standard. Ainsi de ton côté, tu rédiges tes pages comme tu le veux, mais côté "client" on a une page normalle.

FlorentG a écrit :
[...]Des outils, comme les moteurs de recherche, utilisent justement les balises connues pour le référencement.

Bon, là, justement, ça peut vite donner une discussion "politique"... Quel est le poids sémantique des balises prédéfinies accordées par les moteurs de recherche, notamment Google ? On ne sait absolument rien de l'algorithme utilisé pour leur fameux Page Rank... Si ça se trouve, l'algorithme éclate de rire en voyant les balises prédéfinies... à part h1 jusqu'à h6, je ne suis pas certain que le reste ait un bien gros poids...

FlorentG a écrit :
[...]T'as ta page en XML, avec tes propres balises définies par toi-même (Article, Titre, Corps, etc.), et ensuite avant affichage t'as un fichier XSLT qui le transforme en XHTML[...]

Oui mais du coup, tu perds également le poids sémantique...
Modifié par Frouppy2 (18 Sep 2009 - 12:02)