[Résolu] Titrage html5 et outline

Bonjour,

Je pense avoir mal géré mon titrage.

Mes pages contiennent toutes une section principale qui possède un titre.
J'ai divisé (le mot est explicite j'aurais du rebondir dessus bien avant) cette section en articles (voire article + aside) mais pour lesquels je ne mets pas de titres.

Ce qui me génère un outline que je pense mauvais.


Pourriez-vous me confirmer qu'il serait bon au vu de mon site que je remplace chaque article utilisé par une div ? (dans ce cas, idem pour les aside ?)
Modifié par Manhattan (27 Jun 2015 - 10:03)

Bon, n'ayant pas de réponse, je vais simplifier la question

Une balise article, (au même titre qu'une section voire un aside) peut-elle exister sans titre ou bien est-ce systématiquement à proscrire ?

Dans la logique du html5 je ne mettrais pas de signification sémantique là où il n'y en a pas besoin. Un découpage en div devrait donc suffire pour votre usage.

Maintenant, entre nous, et pour l'instant, Google s'en fou (mais pour combien de temps ? dans ce domaine tout va très vite)...

D'accord. Je vous remercie.
Il me paraissait logique au début d'indiquer une section pour l'élément principal de ma page, et de mettre des articles pour les différentes sous-parties. Mais ces dernières n'ayant pas de titres, lorsque j'ai vu l'outline, je me suis posé des questions.

Je vais donc remplacer mes articles par des div et idem pour les quelques balises aside que j'ai utilisées.

Les balises asides ne sont pas forcément inopportune, je l'utilise pour mes articles. Je vous laisse regarder dans le code source de mon site pour voir comment je m'y prends (attention : la structure dépend du modèle de page, évidement). Et il n'y a pas qu'une seule manière de faire, surtout à l'heure actuelle.
Modifié par Olivier C (20 Jun 2013 - 23:02)

Merci.



J'avoue que je ne sais plus quoi penser. En regardant votre code, je vois que vous utilisez des sections sans titrage, par contre les articles en ont.

Je crois que vous avez raison lorsque vous dites :

a écrit :
Et il n'y a pas qu'une seule manière de faire, surtout à l'heure actuelle.

Modifié par Manhattan (21 Jun 2013 - 10:40)

En fait c'est simple : les articles ont une valeur sémantique, les sections n'en on pas. Par contre, en théorie, ces dernières permettent de diviser la page en autant de sections indépendantes les unes des autres, ce que ne fait pas une div.

Donc, en théorie, en html5 on devrait pouvoir mettre plusieurs titre h1 sur une page. Une par section. Sauf que, en pratique, sur un plan SEO il ne faut pas le faire : les moteurs de recherche ne regardent pas le découpage des pages de manière aussi poussée (pour l'instant du moins).

Oui, mais...

A la lecture du très bon ouvrage de Dew himself (HTML5 une référence pour le développeur web), je ne suis pas sur de cela (les articles ont une valeur sémantique, les sections n'en on pas).

D'ailleurs un "exemple d'usage de section englobant des articles" tiré du livre :

<section>

<h1>Articles</h1>

<article>
<h2>Titre de l'article</h2>
<p>Contenu de l'article</p>
</article>

<article>
<h2>Titre de l'article</h2>
<p>Contenu de l'article</p>
</article>

<article>
<h2>Titre de l'article</h2>
<p>Contenu de l'article</p>
</article>

</section>

Enfin, pour le citer (et donner envie à d'autres d'acquérir l'ouvrage en question ) :

a écrit :

Element fondamental de la nouvelle approche de découpe sémantique des documents, section...
... Il peut être introduit par des éléments de titraille pour structurer le document.

Bon, j'ai l'impression que je me prends la tête pour rien peut-être

Olivier C a écrit :
Donc, en théorie, en html5 on devrait pouvoir mettre plusieurs titre h1 sur une page. Une par section. Sauf que, en pratique, sur un plan SEO il ne faut pas le faire : les moteurs de recherche ne regardent pas le découpage des pages de manière aussi poussée (pour l'instant du moins).

ça c'est tout sauf sûr. Un peu de légende, un soupçon de rumeurs, et surtout aucunes information fiables.
Les numérotations de titrages qui repartent à 1 dans l'html5 me sont tellement utiles que je m'en sert avec plaisir. Et puis même si cela était vrai, il y a tellement mieux à faire pour le référencement…

Quant à la valeur sémantique des éléments: section, nav, header, footer, article etc. sont des alternatives à certains divs qui ont le bénéfice d'apporter un sens supplémentaire et convenu (au contraire des classes et ids). Par contre leur utilisation correspond à des normes précises. Ils ont bien donc tous une valeur sémantique. Cependant on pourrait en effet stipuler que la valeur sémantique de certains est plus forte que d'autres.

Concernant les articles, il est plutôt normal qu'ils aient un titre: Le but est d'identifier du contenu réutilisable hors contexte. Je prend l'<article> et je le pose dans un autre site, dans un encadré, est-ce que ça aura du sens? Effectivement un titre est bienvenu, et recommencer le titrage à 1 aussi par ailleurs: Les valeurs de titrages hiérarchiques sur toute la page n'ont de sens que dans le contexte du site.

@kustolovic:

De ce que j'ai pu lire, et de ce qui me semble couler sous le sens, c'est que Google attend qu'une techno telle que html5 soie suffisamment implantée pour en tirer des stats d'utilisation auprès des sites qui l'utilisent. Le moteur s'intéressant plus à l'utilisation concrète des balises par les sites que par la spes W3C, tout cela dans le but de mieux indexer le contenu des sites.

Il y a donc une différence entre spécification html et SEO, sachant que cette tendance s'amenuise au cour du temps (je repasserais peut-être à plusieurs h1 un jour).

Maintenant vous faites bien comme vous voulez.
Modifié par Olivier C (22 Jun 2013 - 06:58)

Je vous remercie tous les 2 de participer à ce post.

Pour m'y retrouver, je vous propose 2 cas concrets sur le site en question, avec la question évidente : Que changeriez-vous dans les 2 cas ?

<section id="histoire" class="contenu" role="main">
	<h1>l'histoire</h1>
	<ul>
		<li><a href="#article_1">un</a></li>
		<li><a href="#article_2">deux</a></li>
		<li><a href="#article_3">trois</a></li>
	</ul>
	<article id="article_1">
		<div class="gauche">
			<h2>un</h2>
			<p></p>
			<p></p>
		</div>
		<aside class="droite">
			<img>
		</aside>
	</article>
	<article id="article_2" class="masque">
		<div class="gauche">
			<h2>deux</h2>
			<p></p>
			<p></p>
		</div>
		<aside class="droite">
			<img>
		</aside>
	</article>
	<article id="article_3" class="masque">
		<div class="gauche">
			<h2>trois</h2>
			<p></p>
		</div>
		<aside class="droite">
			<img>
		</aside>
	</article>
</section>

<section id="bi" class="contenu" role="main">
	<h1>bi</h1>
	<article>
		<div class="gauche">
			<p></p>
			<p></p>
			<p></p>
		</div>
		<aside class="droite">
			<div id="car">
				<img>
				<img>
				<img>
			</div>
		</aside>
	</article>
</section>

Merci d'avance.


Modifié par Manhattan (27 Jun 2015 - 10:05)

Pour histoire, l'article est toute l'histoire, les chapitres étant séparés en sections.
j'ai séparé le balisage original en 2: une div class="contenu" (ou section) qui sera probablement présente sur toutes les pages et l'article à l'intérieur. (toutes les pages n'ont pas forcément un article.)

<div class="contenu" role="main"><!-- ou <section> -->
<article id="histoire">
	<h1>l'histoire</h1>
        <!-- on pourrait englober le ul dans un nav, voir un header, ou les 2, mais il ne faut pas non plus sur-baliser juste pour le faire -->
	<ul>
		<li><a href="#article_1">1895 à 1960</a></li>
		<li><a href="#article_2">1961 à 1988</a></li>
		<li><a href="#article_3">1988 à nos jours</a></li>
	</ul>
	<section id="article_1">
		<div class="gauche">
			<h2>1895 à 1960</h2>
			<p></p>
			<p></p>
		</div>
		<aside class="droite"><!-- ou div -->
			<img>
		</aside>
	</section>
	<section id="article_2" class="masque">
		<div class="gauche">
			<h2>1961 à 1988</h2>
			<p></p>
			<p></p>
		</div>
		<aside class="droite">
			<img>
		</aside>
	</section>
	<section id="article_3" class="masque">
		<div class="gauche">
			<h2>1988 à nos jours</h2>
			<p></p>
		</div>
		<aside class="droite">
			<img>
		</aside>
	</section>
</article>
</div>

Second cas

un peu comme avant…

<div class="contenu" role="main"><!-- ou <section> -->
<article id="joaillier">
	<h1>le joaillier</h1>
	<div><!-- ou rien, ici ça ne sert qu'à du styling -->
		<div class="gauche">
			<p></p>
			<p></p>
			<p></p>
		</div>
		<aside class="droite">
			<div id="carousel">
				<img>
				<img>
				<img>
			</div>
		</aside>
	</div>
</article>
</div>

Olivier C a écrit :

De ce que j'ai pu lire, et de ce qui me semble couler sous le sens, c'est que Google attend qu'une techno telle que html5 soie suffisamment implantée pour en tirer des stats d'utilisation auprès des sites qui l'utilisent. Le moteur s'intéressant plus à l'utilisation concrète des balises par les sites que par la spes W3C, tout cela dans le but de mieux indexer le contenu des sites.

Autrement dit, c'est à nous de travailler proprement et à Google de s'adapter. Si on attend que Google change, qui lui attend que l'on change, on prend les standards du web et on les met à la poubelle. De plus, je le répète, mais les multiples h1 anti-SEO tient du mythe. Et surtout, il y a bien mieux à faire pour le SEO: avoir un contenu intéressant et faire venir du monde paiera bien plus.

Merci.

Si je comprends bien vos modifications, ce qui pour moi était un conteneur devient une div (mais pourrait rester une section), contenant un article dont les sous-parties sont des sections. Là où moi je considérais que les articles étaient des sous-parties d'une section.

Bien, je vais prendre le temps d'analyser tout ça et de modifier mon code en fonction, afin de voir les conséquences sur l'outline.

Ce que suggère kustolovic est très bien. Je remplacerais simplement ceci :

<div class="contenu" role="main"><!-- ou <section> -->

... par ceci :

<main>

La dernière balise html5 en date. Tout a fait valide W3C. Je l'utilise sur mon site.

Merci Olivier, j'attendais votre retour pour clôturer

J'avais longuement hésité à utiliser main justement, et je ne me souviens plus ce qui m'avait fait ne pas la prendre. Je changerai donc ça aussi.

Encore merci à vous deux.