5546 sujets

Sémantique web et HTML

[Résolu] Hierarchisation des Titres hn

Bonjour

Plusieurs fois il a été fait comme remarque que mon site n'avait pas une bonne hierarchisation au niveau des titres.

J'ai décidé enfin de me plonger sérieusement dans le problème. Sauf qu'il y a certaines choses que je n'arrive pas à comprendre.

Chaque page possède à peu près cette structure (en enlevant les menus G, D, les onglets et toute la déco^^)

[DIV CONTENANT]

[DIV BANNIERE]
[H1 : bannière][/H1]
[/DIV BANNIERE]

[DIV CENTRE]
[H1 : titre][/H1]
....corps du site (h2, h3, h4, h5......)
[/DIV CENTRE]

[DIV SIGNATURE]
[H1 : signature][/H1]
[/DIV SIGNATURE]

[/DIV CONTENANT]


Le fait d'avoir 3 H1 par page et de même niveau, pose t'il vraiment un problème ? Si oui, pourquoi ?

__________________

On m'a aussi dit que mon site se résumait ainsi :

<h1>...</h1>

<h4>...</h4>

<h4>...</h4>

<h4>...</h4>

<h4>...</h4>

<h1>...</h1>


C'est vrai sur la page d'accueil, car je ne veux pas de niveau 2 et 3. Ils sont par contre utilisés dans mes dossiers et les pages plus "normal" de mon site (j'utilise bcp les puces aussi)

C'est donc plus :

<div>
<h1>
</div>
<div>
<h1>
<ul>
<li><h4></li>
<li><h4></li>
<li><h4></li>
</ul>
</div>
<div>
<h1>
</div>

pour la page d'accueil.

Et ceci pour les autres pages :

<div>
<h1>
</div>
<div>
<h1>
<h2>
<h3>
<h4>
</ul>
</div>
<div>
<h1>
</div>


Sur cette page-ci par exemple, j'utilise bien 4 codes différents pour 4 type de titre, (bon sauf les 3 h1 c vrai)
http://www.meteobell.com/_outils_affichage.php

Mais quel est donc ce qui vous choque dans mon code, comme il a été dit ici par exemple : http://forum.alsacreations.com/topic-4-17928-1-RsoluImages-en-float--taille-et-padding-en---pb-avec-opera.html

J'ai peut être besoin d'un petit cours surement pour apprendre 2, 3 trucs à ce niveau là. Y'a surement un truc que j'ai pas pigé. Smiley ohwell

PS : sinon j'ai résolu le probleme de doctype je crois.
Modifié par Damonya (12 Sep 2006 - 16:44)
<edit>
Je suis trop nul, j'ai encore oublié de dire bonjour...

... Bonjour !!! Smiley smile
</edit>

Damonya a écrit :

Chaque page possède à peu près cette structure (en enlevant les menus G, D, les onglets et toute la déco^^)


Là tu ne parles pas de structuration au sens html, mais de mise en page. Tous tes tracas viennent de là. Tu mélanges les deux choses :

. Représentation organisée sur le mode visuel de l'information qui n'existe que dans la synthèse du regard.

. Structuration de l'information en elle même qui existe hors toute représentation possible et uniquement d'un point de vue logique.


Le problème n'est pas d'avoir un <h1> suivi d'un <h4> mais bien d'avoir un <h4> non précédé d'un <h3> lui même non précédé d'un <h2> lui même non précédé d'un <h1>.

Imagine... Tu donnes rendez vous quelque part à quelqu'un à 30 minutes sans dire l'heure ni le jour ni le mois ni l'année.

A mon avis il est mal...
Modifié par clb56 (12 Sep 2006 - 00:12)
Ok je pige où se trouve l'objet du problème à vos yeux.

Mon soucis à la base était de faire le moins de code css possible

Aussi j'avais un type de titre (avec son design propre) valable pour l'ensemble de mon site.

Ainsi un h4 par exemple sera graphiquement (css) quel que soit la page du site, le même.

Là évidemment, vous me proposez de faire différemment, et va falloir pour certaines pages utilisez un h2 qui aura le même aspect visuel qu'un h4 sur une autre page.

C'est ça que me gêne surtout.....

Concretement est-ce que cela a une utilité pratique, de faire comme vous dites, ou c'est de la "branlette intellectuelle" si vous me pardonnez l'expression ? Car le résultat en tout cas semble le même, sauf que votre façon de faire est plus compliqué (il me semble).

Finirais-je par céder et à en comprendre l'utilité ?

Merci pour vos réponses.
Modifié par Damonya (12 Sep 2006 - 03:10)
Bonsoir,

Dans cet article, l'utilité pratique d'un bon titrage est clairement explicite.

Mieux vaut, en théorie, compliquer la gestion des styles css au profit d'une stucture du document cohérente.

L'idéal, bien sûr, serait que ta structure prévoit un système de titrage homogène sur toutes les pages de ton site, lequel se traduirait sur le plan visuel.

En revanche, rien ne t'empêche d'utiliser plusieurs fois <h1> sur la même page.

Voir aussi cet article du même auteur

Après cela, tu devrais, en théorie, être au point pour les titres !
Restera à intégrer concrètement ces notions pour ton site...

Bonne lecture
Smiley smile
Modifié par Vero (12 Sep 2006 - 04:30)
Damonya a écrit :
Concretement est-ce que cela a une utilité pratique, de faire comme vous dites, ou c'est de la "branlette intellectuelle" si vous me pardonnez l'expression ? Car le résultat en tout cas semble le même, sauf que votre façon de faire est plus compliqué (il me semble).


Comme exemple d'utilité pratique: un lecteur d'écran (jaws) permet de naviguer dans une table des matières qu'il construit en relevant les titres <hn>. L'utilisateur passe d'un niveau à un autre en entrant simplement le chiffre correspondant. Dans ta page d'accueil, lorsque l'utilisateur va demander à passer du niveau 1 au niveau 2, Jaws répondra qu'il n'existe pas de titre de niveau 2 et ne permettra pas d'accéder aux sous-titres...

En fait, et même si HTML4.0.1 n'a pas tranché ce point litigieux à l'époque de sa rédaction, n'importe quelle application exploitant les titres est susceptible de préjuger (tout à fait validement) qu'ils sont strictement hiérarchisés.
Modifié par Laurent Denis (12 Sep 2006 - 06:08)
Décidément, on trouve vraiment toutes les questions-réponses sur ton site Laurent Denis. Je suis loin d'en avoir fait le tour.

Merci bien pour vos 2 réponses. J'ai enfin compris. Reste plus qu'à appliquer ça sur mon site. Smiley cligne

Me voilà convaincu. Mais je garde mes 3 [H1] par page... Smiley lol Compromis.... Smiley biggrin
Modifié par Damonya (12 Sep 2006 - 13:56)
Damonya a écrit :


Me voilà convaincu. Mais je garde mes 3 [H1] par page... Smiley lol Compromis.... Smiley biggrin


Y compris celui-ci:
[H1 : signature][/H1]

Qui franchement n'introduit aucune section du document puisqu'il intervient à la fin de ton code Smiley cligne .
Bon et bien voilà. Je pense que c'est bon maintenant. Merci à tous de m'avoir fait remarquer cela d'abord, conseillé et aiguillé ensuite.

Je m'en veux de pas l'avoir fait plus tôt du coup, car ça ne demandait finallement pas tant de changements que ça dans mon code.

J'ai bien toute la panoplie h1, h2, h3, h4 à suivre et en ordre maintenant...



En ce qui concerne la dernière remarque, il me semble avoir lut que cela relevait plus de la bonne pratique générale que d'une vrai utilité établi dans les normes. Aussi trouvant déjà très limitatif les possibilités artistiques de la standardisation, je ne pense pas changer cela, au risque de m'attirer la foudre des théoriciens puristes du web. Smiley cligne (je le suis en météo, c'est donc pas une critique, rassurez-vous).
De plus mon H1 du haut étant configuré exactement de la même façon (au détail près) que celui du bas. Pourquoi je devrais changer cela ? Ce sont bien exactement les mêmes H1 et même dans ce qui est écrit dedans. Pour la bannière c'est vrai. Mais du coup, ca fait un H1 identique pour toutes les pages (le nom du site) Pas très malin. Non, vraiment pour les 3 H1, je pense pas que ce soit d'une urgence capitale de changer cela, en tout cas dans l'état actuelle de mon site. Désolé. Smiley ohwell


PS : Bon prochain objectif, passer toutes les bordures fluides en position relatives, car j'avoue avoir un peu de mal dans la pratique avec la méthodes des coins de clb56 (niveau un peu élevé pour moi, après bug IE etc par manque de maitrise surement...)....Tanpis pour les DIVs les uns sur les autres, désolé....Je prefere faire simple à gérer
Modifié par Damonya (12 Sep 2006 - 17:01)
"clb56" a écrit :
Le problème n'est pas d'avoir un <h1> suivi d'un <h4> mais bien d'avoir un <h4> non précédé d'un <h3> lui même non précédé d'un <h2> lui même non précédé d'un <h1>.

Bonsoir,

En voyant cette remarque, j'ai 2 questions qui me viennent à l'esprit :

1) Mais ne faut-il pas non plus utiliser les balises "h" en fonction de ce qu'elles représentent ???

h1 : très importante
h2 : très importante aussi
h3 : un peu moins importante que h1 et h2
...
h6 : pas importante

Personnellement, ça ne me choquerait pas de voir par exemple :

h1 suivi de h2 suivi de h3 suivi de h6

2) Question qui découle de la première remarque, est-on obligé de mettre absolument les balises "h" dans l'ordre ???

Peut-on envisagé d'avoir par exemple :

h1 suivi de h2 suivi de h6 suivi de h3

si on accorde que le titre inséré entre le h2 et le h3 n'a pas du tout d'importance (d'où l'utilisation de la h6)

Smiley smile
Bonjour,

Pandore a écrit :
1) Mais ne faut-il pas non plus utiliser les balises "h" en fonction de ce qu'elles représentent ???

h1 : très importante
h2 : très importante aussi
h3 : un peu moins importante que h1 et h2


A ceci près que ces éléments ne représentent pas des choses plus ou moins importantes (sauf à l'état de fantasmes non HTML) : ils décrivent tout bêtement le sujet de la section qu'ils introduisent (cf spécification HTML4.01).

A ce titre, ils sont beaucoup plus proche des <legend> de <fieldset> que d'aucun autre élément HTML, et notamment des <em> et <strong> dont je vois déjà poindre ici l'absurde et hideuse pseudo-différence d'emphase (ah... les têtes de l'hydre qui renaîssent et se multiplient sans cesse: qui le est plus emphatique, <em>strong>...</strong></em> ou <strong><em>...</em></strong>, voire <em><em><em>...</em></em></em>... ? Smiley rolleyes )

L' aspect hiérarchisé des <hn> ne tient qu'à l'architecture de ces sections/sous-sections/sous-sous-sections/ etc, et ne traduit aucune emphase. Finalement, ce sont des éléments très mécaniques et assez pauvres, quoiqu'efficaces, qu'il faudrait peut-être désacraliser un peu Smiley cligne

Mais c'était bien tenté Smiley ravi
Modifié par Laurent Denis (12 Sep 2006 - 19:20)
Laurent Denis a écrit :
Bonjour,

A ceci près que ces éléments ne représentent pas des choses plus ou moins importantes (sauf à l'état de fantasmes non HTML) : ils décrivent tout bêtement le sujet de la section qu'ils introduisent (cf spécification HTML4.01).

A ce titre, ils sont beaucoup plus proche des <legend> de <fieldset> que d'aucun autre élément HTML, et notamment des <em> et <strong> dont je vois déjà poindre ici l'absurde et hideuse pseudo-différence d'emphase (ah... les têtes de l'hydre qui renaîssent et se multiplient sans cesse: qui le est plus emphatique, <em>strong>...</strong></em> ou <strong><em>...</em></strong>, voire <em><em><em>...</em></em></em>... ? Smiley rolleyes )

L' aspect hiérarchisé des <hn> ne tient qu'à l'architecture de ces sections/sous-sections/sous-sous-sections/ etc, et ne traduit aucune emphase. Finalement, ce sont des éléments très mécaniques et assez pauvres, quoiqu'efficaces, qu'il faudrait peut-être désacraliser un peu Smiley cligne

Mais c'était bien tenté Smiley ravi


Pour faire court ...

... +1

En plus c'est bien dit et bien expliqué.
Donc si je te suis bien, il faut utiliser ces balises "h" en se focalisant uniquement sur l'aspect "structure" de la page (sections/sous-sections/sous-sous-sections/). Intéressant ... Smiley biggrin
Damonya a écrit :

(je le suis en météo, c'est donc pas une critique, rassurez-vous).
....
PS : Bon prochain objectif, passer toutes les bordures fluides en position relatives, car j'avoue avoir un peu de mal dans la pratique avec la méthodes des coins de clb56 (niveau un peu élevé pour moi, après bug IE etc par manque de maitrise surement...)....Tanpis pour les DIVs les uns sur les autres, désolé....Je prefere faire simple à gérer


La météo me rappelle la soumission de la première version de ton site : il a bien évolué depuis !

Les choses évoluent doucement ... mais sûrement !

Smiley cligne Smiley biggrin
lol oui Merci.
J'ai presque honte du 1er site maintenant alors que j'en étais bien content à l'époque. 1 an seulement entre les 2. Pfiouuu ça m'a parut plus long (bon avec quelques longues pauses faut dire aussi)

Pour ce qui est de la météo, pour l'instant c'est surtout 1 an de technique. Il me tarde d'en finir et de commencer les choses sérieuses (mes photos....^^)
Modifié par Damonya (13 Sep 2006 - 01:02)
Sujet clos
Aller à