Quelle serait la structure idéale d'une page html ?

[HYPERTHAL]

Bonjour à toute la communauté,

Je m'interroge sur la structure d'une page html, et notamment sur la hiérarchisation des titres.
Il me semble avoir compris que Google n'aimait pas qu'une page comporte plusieurs balises h1, signe évident d'une suroptimisation.

Qu'en est-il des autres balises de titre h2, h3, etc.? Peut-on trouver plusieurs h2 h3, ou bien est-ce une erreur sémantique?

Peut-on dire qu'une page web est une unité close comparable à la sous-partie d'une mémoire, d'une dissertation? Qu'en cela elle ne peut comporter qu'un titre, un sous-titre?

Y a-t-il des préconisations officielles?

Merci d'avance!

 

[Ehplod]

Pour la 1000e fois...

h1
-h2
-h2
--h3
---h4
--h3
--h3
-h2
--h3
---h4
---h4

etc...
Le balisage via les h, c'est comme pour un sommaire, cela sert à découper un contenu.

Maintenant, la taille...
- Article pour les kikoolol, c'est h1 et 2 lignes.
- Article pour les cador du sujet, c'est une plombe à lire avec tout ce qu'il faut de titre et sous titre.
-... et y a entre les deux, celui que GG et les internaute apprécient le plus.

 

[zeb]

http://webaim.org/techniques/semanticstructure/ devrait te donner une base.
une page web n'est pas un livre donc oui il est préférable de n'avoir qu'une h1, mais si ton contenu gagne a être subdivisé les h2 (sous titre) et h3 (sous titre d'un sous titre) sont les bienvenues. la notion de paragraphe est utile aussi <p>. Les abréviations, acronymes et autre joyeusetés comme l'italique et le gras sont aussi a prendre en compte.

Il faut que tu te dise qu'a chaque fois que tu utilise un balise HTML pour donner un style c'est que tu est dans l'erreur. De même écrire tout en majuscule un titre est une bétise.

Le Style avec CSS est là pour lui de son côté "déssiner" ton contenu pour les yeux.

Sinon imagine toi en train d'écrire un courrier a un officiel et dit toi que ta page c'est la même chose.

Pense aussi que mettre rapidement dans ton code le contenu sans avoir a parcourir 2000 liens de menu et de code divers genre FB Tweet et cie est mieux. Là encore l'ordre visuel de la page sera orchestré par CSS.

Pour cela diviser la page en <div> (divisions) est la bonne méthode. Les div pourront être positionnées a loisir avec CSS et contiendront donc des données structurées.

Un dernier point datant des néandertaliens est l'usage de <table> pour structurer un page. Table est un moyen de présenter des données de toutes sortes en tableau. Pas un moyen de placer un menu a droite et un autre a gauche en laissant la colonne centrale pour le contenu par exemple.

Bien évidement ne pas observer ces recommandations n'entrainera pas une fuite de tes visiteurs. En revanche l’évolution des exigences des moteurs fait que, probablement, cela pourrait bien, a l'avenir, les empêcher d'arriver sur ton site.

 

[JanoLapin]

Il me semble avoir compris que Google n'aimait pas qu'une page comporte plusieurs balises h1, signe évident d'une suroptimisation.

ils vont ramer fort avec le html 5, alors...

 

[HYPERTHAL]

Merci beaucoup pour ces précisions. Peut-être que je gagnerais à apprendre le html dans un ouvrage ou sur un site bien conçu, ce serait plus efficace que de glaner les infos à droite à gauche.

Donc, auriez-vous un ouvrage ou un site web de qualité me permettant d'apprendre le Html, voire le html 5 ? Des bases aux concepts avancés? Les librairies regorgent de bouquins, mais ils ne me paraissent pas conçus astucieusement, sont flous sur certaines questions.

Merci d'avance.

 

[spout]

Pour n'en citer que quelques-uns :
http://www.w3schools.com/
http://www.alsacreations.com/tutoriels/
http://html5boilerplate.com/
http://html5snippets.com/
http://openweb.eu.org/
http://www.opquast.com/
http://diveintoaccessibility.info/ (en FR ici: http://www.la-grange.net/accessibilite/ )
http://www.designingsocialinterfaces.com/patterns/Main_Page
http://www.siteduzero.com/
...

 

[zeb]

http://www.w3schools.com/

De loin, celui que j'utilise le plus souvent comme bibliothèque de référence.

j'ajouterai juste a la liste de spout http://validator.w3.org/ qui aide bien a se faire une idée des pages que l'on réalise.

 

[Ehplod]

Il me semble avoir compris que Google n'aimait pas qu'une page comporte plusieurs balises h1, signe évident d'une suroptimisation.

ils vont ramer fort avec le html 5, alors...

Ca leur bougera peut-être le Q pour prendre enfin en compte la validation des pages en fonction des doctypes en fonction du contenu fournit.

 

[zeb]

A propos, et limite HS, qqun a t'il une solution pour virer un frameborder="0" dans un code iframe et ainsi être valid html5 (html5 a cause des microformats que je viens d'intégrer qui passe pas en XHTML strict) ?

J'ai essayé avec CSS de mettre une bordure blanche solide de mettre border none, dans le fichier CSS ou carrément inline et je sais plus quoi encore cet empa*é d'IE me colle systématiquement un effet relief de !@%#!!!

pour la petite histoire (ça peut en intéresser certains), l'iframe contiens une page chargée dynamiquement suite a un clic sur une image "spéciale réseaux sociaux" et seulement alors on voie apparaitre les gadgets indispensables mais très "voyeurs".
L'idée est ne charger la page plus vite et de ne pas fliquer les visiteurs sans perdre l'usage des réseaux et sans systématiquement plomber les perf d'une page. j'économise de nombreux appels de ressources et des résolutions DNS avec ça. plusone ne passe pas avec cette technique j'ai pas encore trouvé de parade (du coup j'ai viré).

 

[fredfan]

Google s'en fout du nombre de h1 ou de h2, de leur ordre, et encore plus de la validation w3c

 

[Ehplod]

Google s'en fout du nombre de h1 ou de h2, de leur ordre, et encore plus de la validation w3c

Bah il ne devrait pas.
C'est aussi un facteur de qualité...

 

[zeb]

Google s'en fout du nombre de h1 ou de h2, de leur ordre, et encore plus de la validation w3c

oui peut être et il se foutait aussi du DC des boutiques il y a quelques semaines. un peut avant il se moquait royalement de toucher de l'argent sur des pages de recherche indexées (demande a Bonweb par exemple don c'était un fond de commerce) etc ... et puis un jour il décide de purger les site a clic et hop ... on s’intéresse un peut plus a la sémantique, au w3c ou a autre chose ... c'est comme on veu en fait de toute façon le navigateur se débrouille pour afficher.

 

[JanoLapin]

je n'ai plus le nom exact du thread de WRI concerné, et je n'ai pas le temps de fiare des recherches, mais je me rappelle que la questiondu DTD xhtml compatible avec les microformats y a été évoquée, et une solution donnée.
(par moi, mais j'i plus l'url non plus )

 

[fredfan]

Je ne dis pas qu'il faut écrire comme un goret, mais il ne faut pas mélanger "Google devrait en tenir compte parce que c'est logique" avec "tenez-en compte et votre page va monter"
De toute façon la généralisation du html5 va régler tout ça naturellement

 

[zeb]

De toute façon la généralisation du html5 va régler tout ça naturellement

je sais pas trop, et pourtant j'ai le nez dedans. un truc d'ailleurs que je viens de remarque c'est l'omniprésence des analyse sémantiques avec les validateurs justement. On peut y voire justement un élan prépondérant pour la sémantique.

Quoi qu'il en soit tu as en bonne partie raison aujourd'hui, mais quitte à se renseigner sur la structure d'une page "propre", il est impossible de passer la sémantique sous silence. Et de toute façon le méssage est clair sur l'usage des <h> :

(Headings should reflect the logical structure of the document; they should not be used simply to add emphasis, or to change the font size.)

la questiondu DTD xhtml compatible avec les microformats y a été évoquée, et une solution donnée.

Merci pour le tuyau ;-) J'ai changé le doctype et suis passé a html5 ça règle le problème. Et pour les frames je vais les gérer en dynamique (de toute façon j'ai recours a javascript pour les charger) du coup j'en aurait plu dans les pages.