Méthodologie / code

Bonjour,

Débutant en CSS et voulant coder au mieux mon site j'ai décidé de suivre la méthodologie proposée sur ce site, d'abord le html puis la mise en forme.

Je suis soucieux de votre avis, ais-je bien respecté l'utilisation des balises, l'ordre, etc... ?

Je joins un screen simplifié de ma maquette et mon code :

<img src="logo" border="0" width="135" height="105" alt="logo">
<h2>baseline du logo</h2>
<ul id="menu_aide"> 
    <li><a href="#" title="qui sommes nous">Qui sommes nous</a></li> 
 	<li><a href="#" title="nos avantages">Nos avantages</a></li> 
    <li><a href="#" title="devis gratuit">Devis gratuit</a></li> 
    <li><a href="#" title="aide">Aide</a></li> 
</ul>
<ul id="menu_navigation"> 
    <li><a href="#" title="home">home</a></li> 
 	<li><a href="#" title="menu 1">menu 1</a></li> 
    <li><a href="#" title="menu 2">menu 2</a></li> 
    <li><a href="#" title="menu 3">menu 3</a></li> 
</ul>
<h1>les plus populaires</h1>
<img src="" border="0" width="175" height="200" alt="">
<p><a href="#" title="toute la gamme">voir toute la gamme</a></p>
<h1>les moins chers</h1>
<img src="" border="0" width="175" height="200" alt="">
<p><a href="#" title="toute la gamme">voir toute la gamme</a></p>
<h1>les hauts de gamme</h1>
<img src="" border="0" width="175" height="200" alt="">
<p><a href="#" title="toute la gamme">voir toute la gamme</a></p>
<h1>les écologiques</h1>
<img src="" border="0" width="175" height="200" alt="">
<p><a href="#" title="toute la gamme">voir toute la gamme</a></p>
<a href="#" title="catalogue">Voir tout le catalogue</a>

<ol><li id="info">
	     <ul> 
            <li>adresse</li> 
            <li>tel : 00 00 00 00 00</li>
			<li>texte déscriptif</li>
		 </ul>
	</li>
	<li id="credit">
	     <ul> 
            <li>n° de siret :</li> 
            <li>rcs de paris :</li>
			<li>crédits :</li>
	     </ul>
	</li>
	<li id="menu">
	     <ul> 
            <li>home</li> 
            <li>menu 1</li>
			<li>menu 2</li>
			<li>menu 3</li>
         </ul>
	</li>
	<li id="liens">
	     <ul> 
            <li>newsletter</li> 
            <li>lien 1</li>
			<li>lien 2</li>
			<li>lien 3</li>
         </ul>
	</li>
</ol>

Merci à la communauté !
Emmanuel

emmanuel a écrit :
ais-je bien respecté l'utilisation des balises

Non. Il y a des choses ok, mais aussi des erreurs:
- Avoir un logo avec pour texte alternatif "logo" (un aveugle, ça lui fait une belle jambe qu'on lui dise "logo", il voudrait surtout qu'on lui donne le nom du site ou de l'entreprise ou du produit qui est sur le logo...).
- Avoir une baseline codée en H2, ce qui est incohérent car il n'y a aucun H1 placé avant, et parce que la baseline est codée comme un titre tandis que le logo est un simple texte (en général, c'est plutôt <h1>Nom du site - Baseline</h1> ou <h1>Nom du site</h1><p>Baseline</p>).
- Les title sur les liens, ça sert à rien, en plus tu ne reproduit pas fidèlement l'information car tu supprimes les majuscules (WTF?).
- Pourquoi le lien «voir tout le catalogue» est-il un A esseulé, tandis que les liens «voir toute la gamme» sont des A dans des P? Par souci de cohérence, j'aurais utilisé un P également pour ce dernier lien isolé.
- Le OL avec pour contenu un LI unique, ayant pour contenu un UL dont chaque LI contient à nouveau des UL... euh, au mieux là ça fait deux niveaux de liste de trop (sur trois)... et au pire ça fait trois niveaux de listes de trop (sur trois). Les listes, c'est bien quand c'est des listes. Autrement, c'est pas des listes. Oui je sais, ça surprend mais c'est comme ça.

Salut,

Et j'ajouterai que le border=0 est inutile, car répété sur chaque image, et pourrait être fait par une seule instruction en CSS, plus légère surtout si le nombre d'images est important dans la page.

img {border:none;}

Bonjour,

Merci de vos contributions.

Je vais essayer d'expliquer les raisons de points que vous relevez :

a écrit :
Avoir un logo avec pour texte alternatif "logo" (un aveugle, ça lui fait une belle jambe qu'on lui dise "logo", il voudrait surtout qu'on lui donne le nom du site ou de l'entreprise ou du produit qui est sur le logo...)

- Le texte alternatif "logo" est simplement là pour matérialiser l'espace, je ne souhaitais pas diffuser le nom de mon entreprise sur le forum mais c'est vrai, dans un but de clarté, j'aurai pu écrire "le nom de mon entreprise".

a écrit :
Avoir une baseline codée en H2, ce qui est incohérent car il n'y a aucun H1 placé avant, et parce que la baseline est codée comme un titre tandis que le logo est un simple texte (en général, c'est plutôt <h1>Nom du site - Baseline</h1> ou <h1>Nom du site</h1><p>Baseline</p>)

- Oui effectivement il y a une incohérence. Disons que je voyais la baseline (en texte) comme un sous-titre (d'où le choix du H2) du logo (en image). L'insérer entre des balises <p> serait peut-être plus judicieux. (?)

a écrit :
Les title sur les liens, ça sert à rien, en plus tu ne reproduit pas fidèlement l'information car tu supprimes les majuscules (WTF?)

- Ok pour les title, je ne savais pas ça.
En ce qui concerne les majuscules je comptais le faire au moment de la mise en forme css avec un "uppercase". Peut-être est-il plus sage d'écrire directement avec la casse désirée ?

a écrit :
Pourquoi le lien «voir tout le catalogue» est-il un A esseulé, tandis que les liens «voir toute la gamme» sont des A dans des P? Par souci de cohérence, j'aurais utilisé un P également pour ce dernier lien isolé

- Les liens "voir toute la gamme" sont dans un <p> uniquement pour éviter qu'il soit aligné à l'image qui les précède, j'ai voulu contourner le <br>.
Pour le lien "voir tout le catalogue" le problème ne se posait pas voila pourquoi je n'ai pas utilisé de <p> mais si ça engendre une incohérence je mais en ajouter un.

a écrit :
Le OL avec pour contenu un LI unique, ayant pour contenu un UL dont chaque LI contient à nouveau des UL... euh, au mieux là ça fait deux niveaux de liste de trop (sur trois)... et au pire ça fait trois niveaux de listes de trop (sur trois). Les listes, c'est bien quand c'est des listes. Autrement, c'est pas des listes. Oui je sais, ça surprend mais c'est comme ça

- Je n'ai pas vraiment compris ce point :
Dans mon cas j'ai une liste principale (<ol>) avec 4 éléments (<li id="info", <li id="crédit", <li id="menu", <li id="liens") qui représentent les 4 colonnes de mon footer.
Chacun de ces 4 éléments contient également une liste (<ul>) avec les détails (<li>) de chaque colonne. Peut-être est-il possible de simplifier tout ça, pourtant ça me paraissait correctement ordonné (?).

a écrit :
Et j'ajouterai que le border=0 est inutile, car répété sur chaque image, et pourrait être fait par une seule instruction en CSS, plus légère surtout si le nombre d'images est important dans la page.

- Exact !!

Je retourne potasser les tutoriaux et astuces du site en attendant vos conseils

Prochaine étape, la mise en forme, ça ne va pas être une mince affaire, toute l'organisation du haut de page (jusqu'a "image 1") me pose déjà des problèmes de logique...


Bonne journée,

Emmanuel
Modifié par emmanuel (11 Nov 2009 - 14:26)

Salut,

a écrit :
En ce qui concerne les majuscules je comptais le faire au moment de la mise en forme css avec un "uppercase". Peut-être est-il plus sage d'écrire directement avec la casse désirée ?

Non, tu dois rédiger ton texte comme en français classique, à savoir une majuscule au début de la phrase et sur les initiales des noms propres. Si ton texte doit être tout en majuscule par la suite, il conviendra alors d'utiliser ton text-transform en conséquence.

a écrit :

- Je n'ai pas vraiment compris ce point :
Dans mon cas j'ai une liste principale (<ol>) avec 4 éléments (<li id="info", <li id="crédit", <li id="menu", <li id="liens") qui représentent les 4 colonnes de mon footer.
Chacun de ces 4 éléments contient également une liste (<ul>) avec les détails (<li>) de chaque colonne. Peut-être est-il possible de simplifier tout ça, pourtant ça me paraissait correctement ordonné (?).

En fait je pense que tu fais un peu d'abus sur les listes à cet endroit là, et qu'il est vraiment possible d'avoir un code bien plus simple. Surtout que tu fais une liste qui ressemble plus à une liste de courses qu'une liste d'élément cohérents entre eux (coordonnées, informations légales, reprise de la navigation, et navigation complémentaire).
Ce sont 4 types d'informations différentes structurés en 4 blocs différents. A mon avis, 4 blocs au sens html (<div>) dans lesquels tu dispose l'information serait bien plus approprié.
Quand aux listes imbriquées, je pense qu'au moins les deux premiers blocs ne méritent pas non plus d'être en liste, mais simplement comme paragraphe dans lesquel tu fais de la mise en forme et des passages à la ligne. Ni plus ni moins.

emmanuel a écrit :
Disons que je voyais la baseline (en texte) comme un sous-titre (d'où le choix du H2) du logo (en image). L'insérer entre des balises <p> serait peut-être plus judicieux. (?)

Il n'y a pas de notion de sous-titre en HTML. Il y a juste des titres de section. Quand tu as un titre suivi d'un sous-titre, ça se code soit <hn><span>Titre</span><br /><span>Sous-itre</span></hn> (les SPAN étant utilisés pour la mise en forme), soit <hn>Titre</hn><p class="subtitle">Sous-titre</p>. Enfin, si tu ne considères pas ton logo comme un titre, tu ne peux pas considérer la baseline comme un sous-titre.

Pour ma part c'est le genre de chose que je code ainsi sur une page d'accueil:

<h1 id="logo">Nom du site</h1>
<p id="baseline">Baseline</p>

et ainsi sur les autres pages:

<p id="logo">Nom du site</p>
<p id="baseline">Baseline</p>

On peut aussi garder le H1 dans tous les cas de figure. Il n'y a pas vraiment de «meilleure» manière de faire, il faut juste être cohérent et tâcher de produire un plan du document correct.

a écrit :
En ce qui concerne les majuscules je comptais le faire au moment de la mise en forme css avec un "uppercase". Peut-être est-il plus sage d'écrire directement avec la casse désirée ?

Il est plus sage d'écrire une information claire et ne présupposant pas un affichage en tout-majuscules, tout-minuscules, petites capitales, etc. Et utiliser text-transform en CSS par le suite. Les intitulés des liens me semblent corrects, c'est le fait de passer le contenu des title en minuscules qui me semblait étrange. Mais comme tu vas supprimer les title (sauf s'ils ont une utilité concrète?), le problème est réglé.
(Je précise à tout hasard que ces histoires de capitalisation sont des détails.)

a écrit :
Pour le lien "voir tout le catalogue" le problème ne se posait pas voila pourquoi je n'ai pas utilisé de <p> mais si ça engendre une incohérence je mais en ajouter un.

C'est surtout une question de lisibilité du code. Pour ma part je code en général les micro-contenus qui ne sont pas des titres comme des paragraphes (élément P). D'autres sont d'avis que c'est un usage abusif de l'élément P (d'après HTML5, ils ont tort ), donc ça ne fait pas consensus.
Là aussi, c'est de l'ordre du détail.

a écrit :
Dans mon cas j'ai une liste principale (<ol>) avec 4 éléments (<li id="info", <li id="crédit", <li id="menu", <li id="liens") qui représentent les 4 colonnes de mon footer.

J'avais vu un OL avec pour contenu un LI unique, je m'étais planté en lisant ton code mal indenté, apparemment. (Ah tiens, une critique voilée. )

Sur le fond: imbriquer des listes dans des listes, c'est pas terrible si ça ne correspond pas précisément à des cas d'usage comme la mise en avant d'une hiérarchie d'éléments, par exemple un plan de site. Pour ma part j'évite les listes imbriquées. Leur principaux effets et d'aider l'auteur du code HTML à se sentir mieux car il a utilisé des éléments «sémantiques» plutôt que des DIV pour ses besoins de mise en forme d'une part, et de rendre le parcours du contenu un peu moins clair avec un lecteur d'écran d'autre part. Le test que j'applique est le suivant: je désactive les styles, et si je vois dans le rendu par défaut du navigateur des puces ou des numéros de liste qui trainent et dont le rôle n'est pas évident, c'est que j'ai des listes en trop.

a écrit :
Chacun de ces 4 éléments contient également une liste (<ul>) avec les détails (<li>) de chaque colonne. Peut-être est-il possible de simplifier tout ça

Oui: tu peux remplacer le OL avec 4 LI par une série de 4 DIV. Le fait d'utiliser des listes séparées pour chaque colonne fait déjà une séparation claire entre les contenus (reste à voir si elle est pertinente ou si c'est un abus nécessaire pour des fins de mise en page ), avoir un OL comme conteneur est rigoureusement inutile.

Mikachu a écrit :
Quand aux listes imbriquées, je pense qu'au moins les deux premiers blocs ne méritent pas non plus d'être en liste, mais simplement comme paragraphe dans lesquel tu fais de la mise en forme et des passages à la ligne. Ni plus ni moins.

Je suis d'accord.

Merci beaucoup !

J'ai apporté les modifications au code et effectivement ça me semble plus lisible et logique :

<body>

<h1 id="logo">Nom du site</h1> 
<p id="baseline">Baseline</p>

<ul id="menu_aide"> 
    <li><a href="#">Qui sommes nous</a></li> 
    <li><a href="#">Nos avantages</a></li> 
    <li><a href="#">Devis gratuit</a></li> 
    <li><a href="#">Aide</a></li> 
</ul>

<ul id="menu_navigation"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">menu 1</a></li> 
    <li><a href="#">menu 2</a></li> 
    <li><a href="#">menu 3</a></li> 
</ul>

<h1>Les plus populaires</h1>
<img src="image 1" width="175" height="200" alt="image 1">
<p><a href="#">Voir toute la gamme</a></p>

<h1>Les moins chers</h1>
<img src="image 2"  width="175" height="200" alt="image 2">
<p><a href="#">Voir toute la gamme</a></p>

<h1>Les hauts de gamme</h1>
<img src="image 3"  width="175" height="200" alt="image 3">
<p><a href="#">Voir toute la gamme</a></p>

<h1>les écologiques</h1>
<img src="image 4" width="175" height="200" alt="image 4">
<p><a href="#">Voir toute la gamme</a></p>

<p><a href="#">Voir tout le catalogue</a></p>

<div id="info">
<p>Adresse</p>
<p>Tel : 00 00 00 00 00</p>
<p>Texte déscriptif</p>
</div>

<div id="credit">
<p>N° de siret :</p>
<p>RCS de Paris :</p>
<p>Crédits :</p>
</div>

<div id="menu">
<ul>
<li>Home</li>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>

<div id="liens">
<ul>
<li>Newsletter</li>
<li>Lien 1</li>
<li>Lien 2</li>
<li>Lien 3</li>
</ul>
</div>

</body>

Les "title" ne sont pas importants pour le référencement ?

Je vais commencer la mise en forme, à votre avis faut-il que je prévois un div pour le header, contenu et footer ou c'est suffisamment simple pour être fait élément par élément sans ajouter de div? (je vote pour les div...)
Modifié par emmanuel (11 Nov 2009 - 15:47)

emmanuel a écrit :
Les "title" ne sont pas importants pour le référencement ?

Non.

emmanuel a écrit :
à votre avis faut-il que je prévois un div pour le header, contenu et footer ou c'est suffisamment simple pour être fait élément par élément sans ajouter de div? (je vote pour les div...)

C'est toujours pratique d'avoir quelques conteneurs sémantiquement neutres (DIV pour les blocs, SPAN pour le niveau texte) qui peuvent être utilisés comme supports pour des styles CSS, pour gérer le dépassement des flottants (avec la propriété overflow), etc. Même lorsqu'ils ne sont pas absolument nécessaires, ça permet en général de produire un code CSS plus robuste, moins soumis aux aléas de positionnement dûs aux flottants par exemple.

Florent V. a écrit :
Il n'y a pas de notion de sous-titre en HTML.

En HTML5, si.

C'est pas faux. Il y a effectivement un élément spécialement prévu pour faire des regroupements de titres/sous-titres (voire sur-titres). Exemple du brouillon actuel de HTML5:

<hgroup>
 <h1>Dr. Strangelove</h1>
 <h2>Or: How I Learned to Stop Worrying and Love the Bomb</h2>
</hgroup>