5546 sujets

Sémantique web et HTML

[semantique] <section> en conteneur principal

Pages :
Bonjour,

Je cherche à travailler au plus proche côté sémantique et me demandais si on pouvait imaginer un layout comme suis:

<html>
<head></head>
<body>
    <section>
        <header>
            <nav></nav>
        </header>
        <section>
            <article></article>
            <article></article>
        </section>
        <footer></footer>
     </section>
</body>
</html>

Ou je suis complètement à côté de la plaque...Merci d'avance pour vos réponses
En fait, je suis dans la création du layout de mon projet et je voudrais qu'il soit le plus rigoureux possible au niveau sémantique, du coup est ce que c'est sensé d'utiliser une <section> en conteneur principal?
Oui désolé j'ai vu ta question dans le titre qu'après, je pense que tu cherches ça :

Definition and Usage
The <main> tag specifies the main content of a document.
Dans ce cas-ci une div wrapper serait plus approprié.

Pour le cas de <main>, c'est la beauté du html, quand un navigateur ne reconnait pas une balise, elle l'ignore. Dans ton css tu n'as qu'à définir <main> en display:bloc et le tour est joué.
Hello,

Oui, si tu as absolument d'un "wrapper" entre tes divers éléments et body (à vérifier tout de même), autant utiliser un élément neutre tel qu'une division.

Pour main, faut voir la valeur ajoutée sémantique par rapport au simple <body role="document">…
a écrit :
Pour main, faut voir la valeur ajoutée sémantique par rapport au simple <body role="document">…


La différence est énorme !

Si on combine la balise main avec role="main", les lecteurs d'écran les plus récents sont capables de démarrer la lecture immédiatement à cet élément, ou proposer un raccourci rapide pour le faire. Par exemple, touche q avec Jaws 15+. Vous avez donc tout intérêt à la placer à un endroit stratégique. Dans l'exemple donné, à la place du <section> qui englobe les articles serait une bonne idée.

Quant à role="document" sur le body, c'est une erreur. Premièrement parce que role="document" sur le body fait switcher incorrectement certaines versions de lecteurs d'écran en mode application, et deuxièmement parce que role="document" n'a d'utilité que dans le cadre d'un élément englobant avec role="application"; ce dernier étant lui-même 99% du temps mal utilisé, car il ne devrait s'appliquer que dans des cas très spécifiques.

Pour en revenir au sujet principal du topic, le <section> global ne gêne pas, mais il n'est pas très utile. Donc autant le remplacer par <div>. Ne pas mettre de <section> n'empêche pas d'utiliser <header> et <footer>, qui sont ici utilisés de manière tout à fait appropriée.
Intéressant! Mais du coup tu me fais douter sur la structure de mon propre site... 
<html>
<head></head>
<body>
<div id="wrap">
    <header id="header" role="heading">
        <a class="logo" href=""><img ...  /></a>
        <nav role="navigation"></nav>
    </header>
    <main class="clearfix " role="main">
        <section></section>
        <section></section>
    </main>
</div>
<footer id="footer" class="clear">
    <nav></nav>
</footer>
</body>
</html>

Modifié par juliesunset (04 Nov 2014 - 21:01)
Modérateur
Et ne pourquoi pas coupler le MAIN à une balise englobante ?

En appliquant un rôle main à l'élément MAIN et en définissant les métadonnées sur ce même élément, nous nous adressons là à aux robots. Si je ne m'abuse ces robots reconnaissent cet élément (lecteurs, bots etc).

Maintenant si on applique le style graphique non pas sur MAIN mais sur la doublure -une DIV autour ou dedans qui entoure elle aussi notre sujet principal, cela a un côté négatif ?
Greg_Lumiere a écrit :
Et ne pourquoi pas coupler le MAIN à une balise englobante ?

En appliquant un rôle main à l'élément MAIN et en définissant les métadonnées sur ce même élément, nous nous adressons là à aux robots. Si je ne m'abuse ces robots reconnaissent cet élément (lecteurs, bots etc).


Tu t’abuses (ou j’ai mal compris ta remarque Smiley smile ). Les lecteurs d’écrans ne sont pas des robots mais des interfaces de surcouche des navigateurs - dont les utilisateurs sont tout à fait humains. Comme le dit QuentinC, <main role="main"> est un atout précieux pour certains utilisateurs.

Le dernier exemple de juliesunset est presque parfait :
- le rôle heading sur la balise <header> doit être retiré, il n’est pas approprié. Sa valeur sémantique est celle d’un <hn>. Le rôle qui peut être approprié sur <header> est role="banner" ;
- De plus sur <footer> il est très probable que le role="contentinfo" soit indiqué.

Pour en revenir à la discussion de base, il faut signaler qu’un élément <section> a une valeur sémantique importante, et doit être intitulée soit par un <hn> enfant, soit associée à un texte à l’aide de aria-labelledby par exemple. Si le conteneur n’a pas de valeur sémantique, il faudra toujours préférer un <div>.
a écrit :
Pour en revenir à la discussion de base, il faut signaler qu’un élément <section> a une valeur sémantique importante, et doit être intitulée soit par un <hn> enfant, soit associée à un texte à l’aide de aria-labelledby par exemple. Si le conteneur n’a pas de valeur sémantique, il faudra toujours préférer un <div>.


+1000! En tant qu'utilisateur de lecteur d'écran, je ne vous dis pas comment j'adore les sites qui se font un malin plaisir d'imbriquer les <section> n'importe comment, juste pour montrer qu'ils sont in et qu'ils font de la sémantique. Résultat, la page contient 10, 15 ou 20 régions mais aucune est labélisée correctement et donc, elles ne servent à rien et même pire, elles embrouillent ou tout au moins rajoutent du bruit inutile.
Modifié par QuentinC (05 Nov 2014 - 19:19)
Modérateur
Je voulais ajouter quelques précisions, si quelqu'un lit encore ^^:

Tout d'abord il est étrange de parler de sémantique, sans avoir ni contexte ni contenu pour juger. La sémantique a pour rôle d'apporter de la signification à la structure, afin d'aider à la compréhension du document. Beaucoup de solutions sont possibles, mais il s'agit de trouver une bonne solution pour une situation précise. Analyser des structures vides porte plus sur la syntaxe que la sémantique.

Sinon, pour section, il s'agit de séparer un document (ou une sous-partie d'un document) en blocs logiques selon le contenu (chapitres, étapes, pages tabulées, ou autre). Section est un cas générique, lorsque les autres balises de section (nav, header, footer, article, aside, body) ne peuvent pas être utilisées pour marquer une section.
Dans le cas présenté en premier, la section principale est body.

1) Si on sépare élément en sections il devrait y en avoir plusieurs de même niveau(enfants directs ou indirects de la même section) pour que ça ait du sens. (nav et article peuvent faire exception à cette règle)
2) Les sections servent à naviguer et se repérer dans un contenu. Des sections d'une ligne de contenu sont peu utiles. Ce serait comme organiser un système thématique de classement pour trier 3 livres. ça amène plus de tracas que d'utilité.
3) Pour faire une analogie visuelle, lorsque l'on garde que les balises de sections dans une page, cela devrait donner un structure fil de fer de la page, comme on l'aurait dessiné sur une feuille de papier.
Modérateur
kustolovic a écrit :
si quelqu'un lit encore

On est au moins 2, tu vois ça valait la peine.

A force de recherche sur les Section, Article, structure [...] et imbrication j'ai la sensation que finalement le choix relève pratiquement du cas par cas, non ?
Pages :
Sujet clos
Aller à