5568 sujets

Sémantique web et HTML

[HTML5] titre h1 dans une section

Salut à vous,

Ma page Web va contenir 4 sections contenant à chaque fois un mini moteur de recherche. Il n'y aura donc pas de balise article dans mes sections.

Par contre, je veux y placer un titre de niveau 1.

Question : dois-je mettre mon titre de niveau 1 dans un header (ex1) ou directement dans la section (ex2)?

Exemple 1 :
<section>
<header>
<h1>Moteur de recherche</h1>
</header>
...


Exemple 2 :
<section>
<h1>Moteur de recherche</h1>
...


Merci d'avance!
Bonjour,

A mon avis la multiplication des balises H1 n'est utile que si les mots-clés sont pertinents pour le référencement.

Sinon pourquoi ne pas opter pour un titre général de la page du genre Moteurs de recherches et insérer dans chaque section un titre H2 qui nommera le moteur en question ?

Comme ceci:

<H1>Moteurs de recherche libres-services</H1>
<SECTION>
<H2>Moteur Alpha</H2>
</SECTION>
<SECTION>
<H2>Moteur Beta</H2>
...


Au cas où votre page devrait s'agrandir, vous ne risquez pas de vous retrouver pénaliser pour sur-multiplication des balises H1.
OK merci pour ta réponse mais c'est pas ça que je demandais.

Je voudrais savoir si mon titre (h1 ou h2, c'est un choix) doit être directement un enfant de <section> ou être encapsulé dans un <header> qui, ce dernier, sera un enfant de <section>.

(Voir les 2 exemples de mon premier post)
J'ai une question con, mais pourquoi utiliser <section> pour tes 4 mini moteurs et non des divs ? Est-ce que les éléments qui sont dans ta section ont un lien sémantique entre eux ou est-ce "juste" pour les grouper et les styler ensemble ?
Dans tous les cas, les specs pour les sections sont claires : le titre de la section va à l'intérieur. Pour ce qui est du <header> si tu as juste un titre h1 il est peut-être inutile de le grouper seul dans un header ? Il est surtout utilisé pour grouper plusieurs éléments en titre : h1 + un paragraphe par exemple, etc.
Un peu de lecture pour t'aider : http://html5doctor.com/avoiding-common-html5-mistakes/
Tu as un outil très utile aussi qui te permet de rapidement vérifier la structure section/articles/titres d'un document : http://gsnedders.html5.org/outliner/

Pour ce qui est de la multiplication des h1 : rien ne l'interdit dans les specs w3c. Pour le reste c'est une pratique de référencement assez vieille d'avoir qu'un seul h1, de là à savoir si ça marche toujours je me demande.
Donc pour moi, sémantiquement si chacune de tes sections est une portion sémantiquement à part, il serait logique que le 1er titre de ta section soit un h1.

Bref la sémantique HTML5 c'est un SACRE bordel ^^
@Alphonse: Il n'y a aucune obligation d'encapsuler les balises H1 dans une balise HEADER ;
Ni même dans une balise SECTION.

Les balises HEADER et SECTION à l'inverse des balises DIV et SPAN ont un rôle surtout sémantique. Mais on peut aisément remplacer l'une par l'autre, l'autre par l'une ou ne rien mettre comme dans cet exemple:

<!DOCTYPE html>
<HEAD>..</HEAD>
<BODY>
<H1></H1>
....
</BODY></HTML>


ou encore

<!DOCTYPE html>
<HEAD>..</HEAD>
<BODY>
<H1></H1>
<SECTION>
...
</SECTION>
</BODY></HTML>



@Stephane W.: Je ne suis pas tout à fait d'accord avec la sémantique HTML5 c'est un SACRE bordel.
Je trouve qu'au contraire le HTML5 simplifie énormément les choses en terme de sémantique et de structure. Pour rien au monde je ne re-coderais en Html 4.01 transitionnel avec un doctype long comme le bras.

Ensuite, je pense que le choix de l'utilisation des nouvelles balises HTML5 est une question de préférence. Perso j'aime bien l'idée de H1,Section, Sous Titre, paragraphe, Section, Sous Titre...
Bonjour,

Je rejoins la réponse de Greg_Lumiere et apporte quelques explications théoriques.

Parlons tout d'abord de l'emploi de la balise section :
Comme son nom l'indique la balise <section> est faite pour "sectionner". La plupart du temps, on l'utilise au sein d'une balise <article>, dans le but de sectionner cet article en différentes parties.

Maintenant, parlons de la balise <header> :
La balise <header> a été spécialement créée pour rassembler plusieurs titres liés entre eux. L'exemple le plus courant, c'est un article dans un journal, qui possède un titre et un sous-titre.
Les deux étant liés sémantiquement au même article, on présentera les choses de la façon suivante : 

<header>
<h1>François Hollande prépare la rentrée!</h1>
<h2>Réunion de tous les ministres à l'Elysée</h2>
</header>

Comme une section peut avoir un titre et un sous-titre, tu peux tout à fait présenter les choses de la manière suivante : 
<section>
<header>
<h1>Titre</h1>
<h2>Sous-titre</h2>
</header>
</section>

En revanche, si tu n'as qu'un titre, tu n'as pas intérêt à utiliser la balise <header>. Tu écriras donc :
<section>
<h1>Titre</h1>
</section>

Pour conclure, c'est "Exemple 2" qu'il faut utiliser dans ton cas, puisque tu n'as qu'un seul titre pour chacune de tes quatre sections ! Smiley smile
Modifié par theFrenchBoss (24 Aug 2014 - 20:57)
@Stéphanie W. J'ai l'intention d'utiliser 4 <section> (et pas 4 <div>) car ma page va contenir 4 mini-moteurs de recherche pour 4 fonctionnalités différentes. Par contre, je ne pense pas pouvoir les inclure dans la balise <article> car, sémantiquement, pas appropriée (= raison de plus d'avoir 4 <section>).

@theFrenchBoss Merci pour la confirmation.

@Greg_Lumiere Merci aussi mais je ne suis pas du tout convaincu par le fait de sortir ton <h1> de la <section> lorsque celui-ci contient un <article>. Mais éventuellement OK dans mon cas de figure (même si je placerais tout de même mon <h1> dans <section>). Smiley cligne
Les balises spécifiques à HTML5 sont à voir, je pense, différemment des balises connues jusque lors.
Certes, chaque balise à une valeur sémantique, une hiérarchie, une structure. Là dessus tout est commun. On peut d’ailleurs étendre l'idée à la programmation en générale.

Là où les balises HTML5 diffèrent, c'est dans l'ordre dans lequel il faut les utiliser. Je vais développer.

Les balises HTML5 dont je parle, pour rappel, sont ARTICLE, SECTION, HEADER, FOOTER, ASIDE et.. (j'ai un trou).bref !

Ce que j'entends par là c'est la construction si bien évoquée par theFrenchBoss correspond aux Recommandations du W3C (voir wikipedia pour signification consortium W3C). Soit des Recommandations, non des obligations ou devoirs mais disons que voila au mieux, c'est comme ça.

Mais, et oui, il y a toujours un mais. Et bien là il y en a deux.

Il est tout à fait acceptable d'utiliser ces balises dans un autre ordre. Par exemple, un HEADER pour faire un menu. Ou un HEADER dans chaque ARTICLE.
Et pourquoi pas une SECTION qui contient HEADER + ARTICLES + FOOTER.
Et des SECTIONS dans un FOOTER ? Pourquoi pas !
Par contre pas de SECTION dans une liste ou un lien, faut pas abuser non plus !

La question est surtout de garder une certaine logique, faire les pages en gardant toujours la même logique car c'est essentiellement de logique qu'il s'agit, c'est cette donnée que les robots analyses.


Alors oui certaines balises ont un poids sémantique qui est utilisé pour le référencement. Tout est relatif car ce poids sémantique n'est aujourd'hui rien face au SEO. En effet, un SEO très bien renseigner peut faire de votre référencement une réussite.


Enfin je dis pas ça pour dire qui a tord ou raison. C'est juste l'idée que je me fais de la programmation et après avoir beaucoup lu j'essaie d'apporter un avis constructif. Ce qui m'intéresserai c'est de voir ce pour quoi Alphonse a opté au final.

@theFrenchBoss : si j'avais pu me faire expliquer tout ça par toi ? Quelle éloquence ! Au lieu de ça j'ai traduit par mon maigre anglais le site du W3C Smiley smile
Modifié par Greg_Lumiere (25 Aug 2014 - 21:15)
Greg_Lumiere a écrit :

@Stephane W.: Je ne suis pas tout à fait d'accord avec la sémantique HTML5 c'est un SACRE bordel.
Je trouve qu'au contraire le HTML5 simplifie énormément les choses en terme de sémantique et de structure. Pour rien au monde je ne re-coderais en Html 4.01 transitionnel avec un doctype long comme le bras.


Pardon je me suis mal expérimée. L'ajout de nouveaux éléments sémantiques est excellent, le bordel c'est comprendre quand utiliser quoi. La preuve, ce topic Smiley lol Tu lis 3 articles, les 3 interpreteront les specs d'une autre façon, de quoi mettre dans quoi, quand utiliser nav, section ou asside, etc. Du coup pas forcement toujours facile de s'y retrouver. Moi non plus je ne retournerai pas en HTML4.01, mais je n'utilise pas forcément encore tout les nouveaux éléments non plus.
Modifié par Stéphanie W. (26 Aug 2014 - 17:59)
@Stephanie W. : Ha alors là oui, absolument d'accord !

C'est parce que (en partie sûrement) nous nous posons la question là où elle n'est pas. Le but dans cette standardisation et de créer un raisonnement commun et non une structure commune.

Le but étant lequel ? Il est multiple en fait. D'abord pour donner un sens, une hierarchie à la structure, mais pas uniquement. Cela a été évoqué dans ce sujet, il y a aussi la prise compte de la sémantique. D'autant que le HTML5 est maintenant plus accès sur le renseignement dans la langue "robot", le multi-media et l'accessibilité.
Il y en a d'autre bien sûr mais je ne m'étend pas.

Par contre, si j'avais un reproche à faire aux exemples pris lorsque le code est expliqué, ce serait celui de prendre de façon récurrente l'exemple du "journal" ou "article de journal/magazine".

Or qui utilise ce genre d'affichage ? Une page internet n'est pas un journal. Personnellement je propose quelques tutoriels. Pour ça j'ai besoin d'une présentation verticale linéaire. Donc quand on me prend pour exemple un encart pour m'expliquer la balise ASIDE, ben j'ai du mal à l'intégrer dans la mesure où dans ma présentation je ne prévois pas la possibilité de placer des encarts (choix personnel, contrainte etc les raisons peuvent être multiples).
Alors qu'en fait, elle est magnifique cette balise car elle prévoit de donner moins d'importance au texte de son contenu (théoriquement) et permet de ne pas forcément placer son code à l'endroit de son affichage (insertion hors flux). C'est pourquoi elle pourrait tout à fait faire office de pied de page ou de pied de section par exemple. Mais ça on ne nous le dit pas ! Pas explicitement en tout cas.

D'où ces questions que nous nous posons et qui en réalité n'ont pas vraiment lieu d'être dans la mesure bien sûr où on respecte une certaine logique, non ?

Bonne journée
Modifié par Greg_Lumiere (27 Aug 2014 - 07:26)
Greg_Lumiere a écrit :
Par contre, si j'avais un reproche à faire aux exemples pris lorsque le code est expliqué, ce serait celui de prendre de façon récurrente l'exemple du &quot;journal&quot; ou &quot;article de journal/magazine&quot;.

Entièrement d'accord ! Smiley cligne

theFrenchBoss a écrit :
La balise <header> a été spécialement créée pour rassembler plusieurs titres liés entre eux. L'exemple le plus courant, c'est un article dans un journal, qui possède un titre et un sous-titre.

Je ne comprends pas bien l'utilisation concrète de placer tous ses titres de niveau à l'intérieur d'une balise <header>. Sur mon site, j'ai un <h1> puis un <p> puis un <h2> puis plusieurs <p> puis encore un <h2>, etc. Regrouper tous ses titres de niveau dans une balise <header> puis le retrouver dans <article> : c'est redondant !!

Greg_Lumiere a écrit :
Ce qui m'intéresserai c'est de voir ce pour quoi Alphonse a opté au final.

Finalement j'ai opté pour le <h1> à l'intérieur de <section> sans <header> c'est-à-dire exemple 2.
a écrit :
C'est pourquoi elle pourrait tout à fait faire office de pied de page ou de pied de section par exemple. Mais ça on ne nous le dit pas ! Pas explicitement en tout cas.


Ah non, pour les pieds de page ou de section, ça devrait plutôt être <footer>, d'après la logique.

Faire le raisonnement <aside> = hors du flux, aussi bien que hors du flux = <aside>, est faux dans les deux sens.

IL faut apprendre à bien distinguer le sens du document qu'on doit pouvoir induire logiquement de son balisage, et sa mise en forme visuelle. Ce sont deux chose différentes et qui ne devraient normalement pas être liées.


Du coup ici la bonne question à se poser à mon avis, c'est plutôt, qu'est-ce qui différencie un encart d'un pied de section; qu'est-ce qu'on peut/doit trouver dans l'un et pas dans l'autre? et de cette réponse, choisir <aside> ou <footer>.
a écrit :
Ah non, pour les pieds de page ou de section, ça devrait plutôt être <footer>, d'après la logique.


Mais rien n'empêche les deux soit un footer en guise de pied de page avec une section intercalée avant le footer.
Pour le DOM tu reste correct et concernant le standard même chose. A contrario, ça ne fait pas partie des recommandations du W3C je te l'accorde.


En ce qui concerne les Aside, je me suis peut-être mal exprimé. Bien sûr que l'emplacement d'un aside doit respecter la hierarchie du DOM. Ce que j'entend par "hors flux", pour la balise aside, c'est que tu n'est pas obligé de l'insérer au sein du conteneur dans lequel elle va s'afficher. L'avantage n'est pas des moindre car sémantiquement c'est correct et en plus cela permet à ton aside de ne pas hériter des propriétés css du conteneur.


C'est ce côté qui me séduit dans la version 5 du Html, la possibilité laissée au codeur de choisir (partiellement) ses balises selon son contexte et non suivant un standard stricte et immuable.

Je pense aussi qu'il faut nuancer standard, qui sous entend "une obligation de faire tel quel" (on ferme les balises ouvertes, on commence par le doctype etc...)
et recommandations qui correspondent ni plus ni moins à des "suggestions" fortement conseillées (un peu comme le prix maximum conseillé).

Après quoi je suis d'accord avec le fait de tenter de suivre un maximum de recommandations du W3C !
Mais il faut garder à l'esprit que ce n'est pas parce qu'on ne les suit pas toutes que le code ne correspond pas au standard.


[du moins c'est ce que j'ai crus comprendre, me tromperais-je ?]
a écrit :
Ce que j'entend par "hors flux", pour la balise aside, c'est que tu n'est pas obligé de l'insérer au sein du conteneur dans lequel elle va s'afficher. L'avantage n'est pas des moindre car sémantiquement c'est correct et en plus cela permet à ton aside de ne pas hériter des propriétés css du conteneur.


J'ai l'impression que tu mélanges sémantique et apparence visuelle. Le CSS est hors sujet ici vu qu'on parle de sémantique. Et techniquement tu peux faire ce que tu décris avec n'importe quelle balise HTML...
Sujet clos
Aller à