Structure html5

Bonjour

Une petite question en rapport avec la structure de thème et le html5.

Un thème structuré comme ceci :

<header role="banner">
<nav role="navigation">
<section role"main">
<article role="article">
</section>
<aside role="complementary">
<footer role="contentinfo">

Est-il important/primordiale/obligatoire de mettre le "<main>" et "<article>" en "<section>"

Un thème qui serait par exemple en :

<header role="banner">
<nav role="navigation">
<div id="main" role"main">
<article role="article">
</div>
<aside role="complementary">
<footer role="contentinfo">

est-il également correcte coté hiérarchie/sémantique/validation/séotisation etc ???
Modifié par poilozorey (13 May 2015 - 00:28)

Bonjour,

Il serait même mieux. Une section doit sectionner du contenu : ceci induit qu’il y a plusieurs sections. De plus une section a la valeur sémantique d’un sous-ensemble de la page : elle doit avoir un contenu hiérarchisé et structuré. Le cas d’usage d’une section est peu courant, dans la majorité des cas un article (contenu entier, potentiellement listé comme sur un blog) ou une div (si l’objectif est d’appliquer des styles ou de contenir d’autres éléments) est préférable.

Autrement, si la sémantique t’intéresse, penche-toi également sur l’élément <main>. Ton deuxième exemple serait encore mieux avec :

<main id="main" role="main">

PS: À l’avenir l’attribut role ne devra pas redonder le rôle implicite de la balise, mais il reste utile de le faire pour des questions de compatibilité de certaines technologies d’assistance.

bonjour Ten

donc si je t'ai bien compris, la structure qui est actuellement :

<header role="banner">
<nav role="navigation">
<div id="main" role"main">
<article role="article">
</div>
<aside role="complementary">
<footer role="contentinfo">

devrait être en :

<header role="banner">
<nav role="navigation">
<main id="main" role"main">
<article role="article">
</main>
<aside role="complementary">
<footer role="contentinfo">

c'est bien ca?

Attention, aside n'est pas nécessairement une sidebar (c'est ce que je devine de ton code là). C'est même plutôt rarement le cas...

La structure à peu près passe-partout que j'utilise :

<div class="site">
	<header class="site-header">
	</header>

	<main class="site-content">
		<section class="site-section home">
		</section>

		<section class="site-section our-work">
		</section>

		<section class="site-section contact">
		</section>
	</main>

	<footer class="site-footer">
	</footer>
</div>

Les séparations en section sont particulièrement marquées sur ce genre de sites : http://quilmo.com/ On les voit clairement et visuellement.

Comme dit Ten, il ne faut pas le confondre avec article, qui représentent du contenu "indépendant" du site (c'est à dire qui ne perdent pas de leur sens si on les extrait du site).

À toi donc de nous préciser ce que tu veux faire.

Bonjour et désolé de répondre si tardivement...

la structure que j'aborde est celle utilisée à grande échelle sur les formats "blog"
(thèmes wordpress dotclear, dupral etc...) et ou les post/billets/articles y sont en <article> et/ou egalement de manière générale les "sidebar" y sont en <aside>.

D’où ma question de départ car il m'arrive de voir des "structures" avec :

<header role="banner">
<nav role="navigation">
<main id="main" role"main">
<article role="article">
</main>
<aside role="complementary">
<footer role="contentinfo">

ou

<header role="banner">
<nav role="navigation">
<section id="main" role"main">
<article role="article">
</section>
<aside role="complementary">
<footer role="contentinfo">

Donc, je cherchais un peu de lumière et un retour d’expérience pour savoir si ...
les <article> dans une <section> étaient plus "seo-friendly" ou dans le cas contraire une incidence négative coté seo ...
Voir ni positif, ni négatif qu'ils soient en <section> ou pas ??

Ni l'un ni l'autre. Main n'empêche d'ailleurs pas d'utiliser section. Mais les articles dans des sections ne sont pas forcément pertinents.

Merci pour ton retour, je vais donc pour l'instant laisser la structure du type :

<header role="banner">
 <nav role="navigation"> </nav>
</header>
<div id="main" role="main">
 <article role="article"> </article>
</div>
<aside role="complementary"> .. </aside>
<footer role="contentinfo"> ... </footer>

Petit complément d'infos....
Comme je le disais plus haut, bon nombre de thèmes (blog) comportent la sidebar en <aside>

Exemple :
http://www.alsacreations.com/xmedia/doc/full/schema2.png

Source : HTML5 : Nouveaux éléments de section, article, header, footer, aside, nav

Du coup lorsque tu dit :

"Manumanu" a écrit :

Attention, aside n'est pas nécessairement une sidebar (c'est ce que je devine de ton code là). C'est même plutôt rarement le cas...

j'ai un peu de mal à suivre ...

Beaucoup de templates sont mal codés aussi, mais ce n'est pas la question.

En effet, après relecture de la doc, aside est parfaitement autorisé pour du contenu "extérieur" au propos principal de la page, donc tu peux partir sur ton idée sans tenir compte de ma remarque.

Mais pour la expliquer ce que je disais, aside représente généralement un complément d'information - ce qu'une sidebar n'est pas forcément (elle PEUT l'être), souvent elle contient plutôt un ensemble de menus pour le site.

Une très bonne utilisation de sidebar qui pourrait être un aside : l'infobox des pages wikipedia.



Mais l'un dans l'autre, un aside n'est pas nécessairement présenté comme ça, et peut parfaitement s'insérer dans un contenu :

<article>
	<p>Le dessin animé <em>La petite Sirène</em> est sorti en1989.</p>
	<aside>Les bénéfices du film s'élevèrent à 87 millions de dollars.</aside>
	<p>Plus d'informations sur ce film...</p>
</article>

merci d'avoir pris le temps de répondre et pour ta confirmation