<main> ou <div class=main ou <section> ?

bonjour.

j'ai une structure type :

<header ... role="banner">
  <h1> Titre du site </h1>
</header>

<nav ... role="navigation">
  <ul>
     <li>
       <a> ... </a>
     </li>
  </ul>
</nav>

<main ... role="main">
   <article ... role="article">
     <h2> Titre </h2>
     <p> contenu </p>
   </article>
   <article ... role="article">
     <h2> Titre </h2>
     <p> contenu </p>
   </article>
</main>

<aside ... role="complementary">
  <div>
     <p> contenu </p>
   </div>
</aside>

<footer ... role="contentinfo">
   <div>
      <p> contenu </p>
    </div> 
</footer>

Est-ce correcte ou est-ce que la balise <main> devrait être ainsi ??

<header ... role="banner">
  <h1> Titre du site </h1>
</header>

<nav ... role="navigation">
  <ul>
     <li>
       <a> ... </a>
     </li>
  </ul>
</nav>

<div class="main" ... role="main">
   <article ... role="article">
     <h2> Titre </h2>
     <p> contenu </p>
   </article>
   <article ... role="article">
     <h2> Titre </h2>
     <p> contenu </p>
   </article>
</div>

<aside ... role="complementary">
  <div>
     <p> contenu </p>
   </div>
</aside>

<footer ... role="contentinfo">
   <div>
      <p> contenu </p>
    </div> 
</footer>

ou voir encore comme ceci ?

<header ... role="banner">
  <h1> Titre du site </h1>
</header>

<nav ... role="navigation">
  <ul>
     <li>
       <a> ... </a>
     </li>
  </ul>
</nav>

<section class="main" ... role="main">
   <article ... role="article">
     <h2> Titre </h2>
     <p> contenu </p>
   </article>
   <article ... role="article">
     <h2> Titre </h2>
     <p> contenu </p>
   </article>
</section>

<aside ... role="complementary">
  <div>
     <p> contenu </p>
   </div>
</aside>

<footer ... role="contentinfo">
   <div>
      <p> contenu </p>
    </div> 
</footer>

Donc comme l'indique le titre, <main> ou <div class="main ... role="main"> ou encore <section> ?
Merci pour vos lumières sur la question.
Modifié par poilozorey (21 May 2016 - 02:08)

Bonjour,

Le premier exemple est le bon.

Bonjour Poilozorey,

Ta première proposition, <main role="main">, est html5 friendly et correspond aux derniers standards.[EDIT]

Elle remplace ce qu'on trouvait avant sous cette forme <div role="main"> avant la version 5 de html (ta seconde proposition en somme).

Par contre, <section role="main">, là c'est non. Quitte à utiliser une balise html5, autant prendre la bonne. Une section ne doit pas assumer ce rôle à la place de la balise homonyme.


Attention toutefois à class"main" qui n'a rien à voir avec la sémantique mais uniquement avec la personnalisation (css). Une classe "main" peut être appliquée sur n'importe quelle balise.
Ainsi il est valide de placer une classe "main" sur un menu de navigation (ton menu principale par exemple) ou pourquoi pas sur un paragraphe.
Toutefois, tu conviendra que le terme n'est pas très approprié.

C'est comme la classe "toto", tu peux l'appliquer où tu veux, ce n'est pas une faute main tu conviendra que ce n'est pas très significatif.

Une classe "main" pour un élément "main" semble très approprié mais ne concerne que la personnalisation donc ne pas confondre choix de balise et choix de classe.

Sincèrement, ton premier exemple est celui qui reflète au mieux l'architecture d'une page html5.

EDIT : "Nouveaux standards" qui ont quelques années derrières elles maintenant. Tellement l'habitude de parler des "nouvelles balises html5" que nous ne nous rendons pas compte du temps passé qui fait de nos nouveautés ce qu'ils appelleront "retro"
Modifié par Greg_Lumiere (21 May 2016 - 08:22)

Bonjour,

En fait, entre la théorie et la pratique, tout n'est malheureusement pas aussi simple.

Le choix entre les 3 propositions va également devoir dépendre de certains détails complémentaires :

1- la compatibilité navigateurs.

L'élément <main> est le plus récent du lot parmi les "nouvelles" balises HTML5. De ce fait, il n'est reconnu qu'à partir de IE11 (pour tous les autres éléments, c'est IE9).
C'est un détail non négligeable.

2- les spécifications ARIA

Les specs ARIA proposent un tableau de "bon usage" de l'attribut "role" selon l'élément.
Ce tableau demande aux auteurs de ne pas avoir de rôles redondant avec l'élément HTML.
Exemple : ne pas utiliser <main role="main">. Idem pour banner sur <header> navigation sur <nav>, etc.

3- la compatibilité des assistances techniques

Les assistances techniques ne sont pas toujours suffisamment au point avec les spécifications. En clair, pour certaines AT, il faut volontairement contourner les specs pour que cela fonctionne (en clair, quand même écrire <main role="main">).

Bref, c'est compliqué

Alors certes, les points que tu évoques Raphaël sont tout à fait exacts.

Il est tout aussi bon de savoir que concernant la compatibilité navigateur, celle-ci peut-être étendue par l'utilisation d'un mini script JavaScript qui créera les balises non reconnues.

De même que concernant le second point sur les spécifications ARIA. Celui-ci est contesté[EDIT]. Je te cite comme exemple Atalan qui recommande sur ce point dans la notice Accede-web : 1-3 Structurer la zone de contenu principal avec <main role="main">.
Libre à chacun de se positionner sur la question.

Le troisième point m'est étranger. Je me renseignerais de savoir s'il n'y a pas de fallback qui existe.


J'espère que tout ceci ne va pas embrouiller notre ami Poilozorey


EDIT : "contester" n'est peut-être pas le terme. Nous sommes dans le cadre des recommandations. Il ne faut les prendre au pied de la lettre mais se faire un avis en connaissance de cause.
Dans nombre de situation, les choix que nous faisons ne sont qu'un juste ratio fait de compromis. Ils deviennent légitimes lorsqu'il sont soumis à réflexion et confrontés à nos connaissances sur le sujet.
Modifié par Greg_Lumiere (21 May 2016 - 09:02)

Greg_Lumiere a écrit :
Libre à chacun de se positionner sur la question.

Tu as raison de préciser cela.

Pour être encore plus clair, il conviendrait de préciser qu'il est préférable d'écrire une syntaxe qui soit multi-compatible aujourd'hui (<main role=main>) plutôt que de suivre les spécifications sur ce point, car elles ne correspondent pas (encore) à la réalité du terrain.

Enfin, je rajouterais que dans notre convention interne de l'agence Alsacréations, nous utilisons actuellement "<main id="main" role="main">".

EDIT :

Greg_Lumiere a écrit :
Il est tout aussi bon de savoir que concernant la compatibilité navigateur, celle-ci peut-être étendue par l'utilisation d'un mini script JavaScript qui créera les balises non reconnues.

Par contre, employer un HTMLShim JS *juste* pour pouvoir utiliser <main> est un peu bazookesque, non ?
Modifié par Raphael (21 May 2016 - 09:08)

Raphael a écrit :

Par contre, employer un HTMLShim JS *juste* pour pouvoir utiliser &lt;main&gt; est un peu bazookesque, non ?

Effectivemement, comme tu dis les "Shim", "Shiv" et les autres "je ne sais pas quoi" semblent "bazookesques".

J'en ai essayé plusieurs dont certains que je n'ai jamais sus faire fonctionner (à noël c'est JS Pour Les Nuls qu'il faut m'offrir ) et d'autre oui, enfin je crois.

Gardons en mémoire toutefois que ce genre de script ne nécessite aucune maintenance. Ben oui, pas de MAJ à prévoir. Quand on sera à Html6 il sera encore temps de voir.

De plus, en ciblant les navigateurs concernés de manière conditionnelle, nous nous assurons que ce script ne sera que rarement chargé.

Fully cachable.

Enfin, il m'apparaît indispensable de nettoyer les parties du script qui concernent des balises inutilisées au sein des pages qui les requiers.


Alors tu vas me dire "ha ha et si je désactive JS sur mon IE8 ?" Et bien je l'ai dans le "baba"
Rien n'est parfait

Désolé de mettre mon grain de sel dans cette discussion, mais je ne comprends pas très bien.

"Normalement" quand un navigateur rencontre une balise inconnue, il la remplace par un <div>.
Donc si IE ne connait pas <main> en tant que tel, il devrait considérer que c'est une <div>, et ça ne devrait pas poser de problème.

Ou bien est-ce que parmi les incongruités de IE il ferait autre chose de cette balise inconnue?

PapyJP a écrit :
"Normalement" quand un navigateur rencontre une balise inconnue, il la remplace par un &lt;div&gt;.

Il ne me semble pas que ce soit son comportement naturel, il l'ignore me semble-t-il. D'où l'application d'un script dynamique.
Modifié par Greg_Lumiere (21 May 2016 - 10:24)

En complément d'un script on applique la propriété display: block; à ces balises insérées par le script.
D'où l'importance de charger le script avant les déclarations css ou alors d'inclure ces déclarations par le dit script (méthode moins élégante je trouve).

Greg_Lumiere a écrit :
Il ne me semble pas que ce soit son comportement naturel, il l'ignore me semble-t-il. D'où l'application d'un script dynamique.

C'est quoi le "bon" script?
Pour le moment j'ai mis

<!--[if lt IE 9]>    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

en tête de mes pages, est-ce le bon script?
Modifié par PapyJP (21 May 2016 - 10:32)

PapyJP a écrit :

C'est quoi le "bon" script?
Pour le moment j'ai mis

<!--[if lt IE 9]>    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

en tête de mes pages, est-ce le bon script?

Pour ma part, j'utilise ...

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

Merci a tous pour vos avis.
Du coup la première structure <main role="main"> ne semble pas "négative" je vais donc laisser comme cela.
Modifié par poilozorey (21 May 2016 - 13:52)

PapyJP a écrit :
"Normalement" quand un navigateur rencontre une balise inconnue, il la remplace par un &lt;div&gt;.
Donc si IE ne connait pas &lt;main&gt; en tant que tel, il devrait considérer que c'est une &lt;div&gt;, et ça ne devrait pas poser de problème.

C'est depuis que me suis rendu compte de ce comportement d'IE que je me suis passé d'html5shiv et autres document.createElement()...

Greg_Lumiere a écrit :
Il ne me semble pas que ce soit son comportement naturel, il l'ignore me semble-t-il. D'où l'application d'un script dynamique.

A priori IE n'ignore pas ces balises car les mises en page de mes sites ne sont pas cassées sous ce navigateur. Pourtant j'utilise toujours la balise <main>, depuis un moment déjà.
Modifié par Olivier C (21 May 2016 - 19:31)

Greg_Lumiere a écrit :

Par contre, <section role="main">;, là c'est non. Quitte à utiliser une balise html5, autant prendre la bonne. Une section ne doit pas assumer ce rôle à la place de la balise homonyme.

En ce qui concerne la <section>, j’utilise un thème adapté d'un thème gratuit bootstrap (grayscale).
Pourriez-vous m'indiquer (à propos de la structure ce thème) si quelque chose "cloche" en ce qui concerne le code et de l'utilisation de la "<section id="content" role="main">" svp ?

Version courte :
- quand un navigateur ne reconnait pas une balise, il fait comme si c'était un span (donc un élément neutre inline)
- quand IE ne reconnait pas une balise, il fait pareil. Mais en pire : on ne peut pas styler cette balise du tout.

Olivier C a écrit :

C'est depuis que me suis rendu compte de ce comportement d'IE que je me suis passé d'html5shiv et autres document.createElement()...

Il est vrai que mes tests sur IE ont été effectués après l'application de mon script à base document.createElement(). Je n'ai jamais vérifié si mon script était la conséquence du maintient de mon affichage.

Raphael a écrit :
quand IE ne reconnait pas une balise, il fait pareil. Mais en pire : on ne peut pas styler cette balise du tout

Çà je me l'étais noté !
C'est peut-être bien là l'information essentielle, une balise Html5 non reconnue par I.E. ne peut pas être stylisée.

Curieux, sur IE11, je n'ai qu'à déclarer main { display: block }, sans le moindre JavaScript, pour que cette balise y soit affichée correctement.

thierry a écrit :
Curieux, sur IE11, je n'ai qu'à déclarer main { display: block }, sans le moindre JavaScript, pour que cette balise y soit affichée correctement.

Ce qui rejoins les conclusions d'Olivier...