5568 sujets

Sémantique web et HTML

Elément <section> principal ?

J'aimerais avoir votre avis.
J'ai vu sur plusieurs modèles de construction html5 un élément <section> englobant la totalité des autres éléments. Cet élément <section> était placé juste après l'élément <body>.
Franchement, je ne vois pas l'intérêt de faire une telle chose.
J'aimerais avoir vos avis s'il vous plait.

Merci par avance.
IL me semble qu'il existe <main> pour indiquer le contenu principal; à confirmer.

Mais dans tout les cas, le contenu principal n'est pas censé inclure les menus, en-tête, bannière, pied de page, et autres; il doit se limiter au contenu utile de la page hors navigation. Donc en principe il n'apparaît logiquement pas en premier dans le body. ET pour la navigation il y a <nav>, pour l'en-tête il y a <header>, donc pas vraiment de raison d'utiliser <section>.

Un <section> global qui englobe tout le body, ça paraît juste effectivement complètement crétin. Ca n'a pas trop de sens, pour faire ça autant utiliser div (encore que, on peut styler directement le body aussi).
Modifié par QuentinC (07 May 2014 - 08:01)
Bonjour (…),

+1 pour Quentin, je ne sais pas où tu as lu ça –certainement pas sur la section "Apprendre" d'Alsa Smiley cligne – mais cela n'a pas d'intérêt.

Pour schématiser un peu, on pourrais dire que <section> ou <article> va souvent contenir une partie non-récurrente des éléments qui composent une page d'un site internet. Alors que les éléments <header>, <nav>, <footer>, <aside> contiennent des éléments récurrents.

On peut ensuite imaginer jouer aux poupées russes : dans un élément <section> ou <article> lui-même il peut y avoir des éléments <nav>, <header>, <footer>… Dans ce cas, il s'agit d'éléments récurrents dans une zone de contenu (titre de l'article, navigation interne éventuelle, pied d'article avec informations complémentaires, etc.). Personnellement je ne le fais quasiment jamais pour ne pas alourdir une structuration HTML5 déjà parfois source de divergences au sein de l'équipe Smiley lol Faut savoir mettre de l'eau dans son vin comme on dit Smiley langue
Modifié par audrasjb (07 May 2014 - 10:19)
En fait, <section> n'a d'intérêt que s'il n'existe pas de balisage plus approprié, et souvent on trouvera plus approprié: main, nav, header, footer, article, aside, entres autres.

Par exemple, il est utile pour grouper plusieurs articles, pour grouper les différents chapitres d'un article, ou éventuellement pour grouper des parties qui sont plus petites qu'un chapitre mais contenant plusieurs paragraphes. Dans tous les autres cas, il y a presque toujours mieux.

Mon avis personnel est que <section> est largement sur-utilisé à tort dans les sites d'aujourd'hui.

Quant à <section> contre <div>, je pense que si le premier n'a pas de véritable sens fort lorsqu'il est pris seul à part (un sens d'un point de vue éditorial/rédactionnel/structurel), alors c'est le second qu'il aurait fallu utiliser à la place.
audrasjb a écrit :
Bonjour (…),

+1 pour Quentin, je ne sais pas où tu as lu ça –certainement pas sur la section &quot;Apprendre&quot; d'Alsa Smiley cligne – mais cela n'a pas d'intérêt.

Pour schématiser un peu, on pourrais dire que &lt;section&gt; ou &lt;article&gt; va souvent contenir une partie non-récurrente des éléments qui composent une page d'un site internet. Alors que les éléments &lt;header&gt;, &lt;nav&gt;, &lt;footer&gt;, &lt;aside&gt; contiennent des éléments récurrents.

On peut ensuite imaginer jouer aux poupées russes : dans un élément &lt;section&gt; ou &lt;article&gt; lui-même il peut y avoir des éléments &lt;nav&gt;, &lt;header&gt;, &lt;footer&gt;… Dans ce cas, il s'agit d'éléments récurrents dans une zone de contenu (titre de l'article, navigation interne éventuelle, pied d'article avec informations complémentaires, etc.). Personnellement je ne le fais quasiment jamais pour ne pas alourdir une structuration HTML5 déjà parfois source de divergences au sein de l'équipe Smiley lol Faut savoir mettre de l'eau dans son vin comme on dit Smiley langue


Bonjour quel est le problème avec les règles ?
Ce n'est pas mon premier post, et il me semble avoir été polie jusqu'à maintenant et avoir toujours dit merci lorsqu'on me répondait. Smiley sweatdrop

Pour revenir au sujet de base, ma question sur l'élément <section> porte sur l'intérêt sémantique de le mettre en section globale, comme j'ai pu le voir un peu partout. C'est pas complètement con puisqu'il contiendrait à l'arrivée le <header> et le <footer> du site. Il n'y a absolument rien sur la documentation, et j'hésite à faire de cette façon parcequ'il me semble que ça aurait un intérêt sémantique, mais ça fait rajouter une balise qui semble inutile. Cela devient compliqué d'avoir un code léger si on veut ajouter toutes les balises sémantiques. Donc je suis partagée sur la question et j'ai l'impression que tout le monde l'est. En fait c'est question d’interprétation donc ça devient libre à chacun. Alors qu'avant on se contentait d'appliquer de bonne pratiques.

En vérité je crois qu'il n'y a plus vraiment de "science exacte" du html depuis le html5.
a écrit :
Pour revenir au sujet de base, ma question sur l'élément <section> porte sur l'intérêt sémantique de le mettre en section globale, comme j'ai pu le voir un peu partout. C'est pas complètement con puisqu'il contiendrait à l'arrivée le <header> et le <footer> du site. Il n'y a absolument rien sur la documentation, et j'hésite à faire de cette façon parcequ'il me semble que ça aurait un intérêt sémantique, mais ça fait rajouter une balise qui semble inutile.

A mon sens c'est effectivement inutile, je le répète. Note que <header> et <footer> n'ont pas besoin d'être forcément dans <section> ou une autre balise de sémantique HTML5. C'est une possibilité, pas une obligation.

a écrit :
Cela devient compliqué d'avoir un code léger si on veut ajouter toutes les balises sémantiques.

IL faut quand même se rappeler qu'un moment donné, trop de sémantique tue la sémantique. A vouloir trop en faire, on se rend encore plus confus. IL faut savoir trouver le juste milieu (hélas ce n'est pas simple).

a écrit :
En vérité je crois qu'il n'y a plus vraiment de "science exacte" du html depuis le html5.

La sémantique n'a jamais été une science exacte ! C'est juste que le HTML5 donnant plus de possibilités qu'avant, et la notion même de sémantique étant beaucoup plus répandue aujourd'hui qu'avant, inévitablement, on se pose beaucoup plus de questions et on peut avoir beaucoup plus d'interprétations différentes.
Je pense aussi que c'est inutile.

J'ai été étonnée de trouver ce schéma un peu partout sur le web, c'est pourquoi je voulais avoir les avis d'autres personnes.
Je sais que le <header> et le <footer> ne sont pas forcément contenus dans une <section> =)
J'essayais juste de comprendre le raisonnement qui avait amené certains dev front à mettre cet élément <section> en élément principal juste après le <body>.
Je pense que certains en sont venus là à trop vouloir bien faire.

D'ailleurs c'est marrant mais j'ai vérifié mes cours de formation, mais je me rends compte que mes profs m'avaient inculqué cette façon de faire, et que j'ai même fait ça sur mon portfolio ! Alors qu'aujourd'hui je trouve ça bizarre. LOL Bah en 2 ans on change lol

Je suis justement d'accord avec toi pour ne pas trop ajouter et surtout ne pas alourdir le code. Parfois c'est un peu la prise de tête parcequ'il faut trancher lol

Oui "science exacte", que j'ai justement placé entre guillemets n'est peut-être pas l'expression exacte, mais c'est vrai que les choses étaient assez carrées avant les nouvelles balises html5 selon moi.
a écrit :
J'essayais juste de comprendre le raisonnement qui avait amené certains dev front à mettre cet élément <section> en élément principal juste après le <body>.
Je pense que certains en sont venus là à trop vouloir bien faire.

Je pense même pas que c'est une histoire de vouloir trop bien faire. Je pense plutôt que quelqu'un leur a dit de faire comme ça, ou bien ils ont vu que tel site le faisait alors si tel site le fait c'est sûrement parce que c'est bien, et ils ont copié-collé sans se poser la moindre question.

Il faut dire que HTML5 est nouveau, et que tout le monde a envie d'en faire des tonnes. Il faut le temps que certaines choses se tassent un peu.
Je pense que dans le cas que tu propose, l'utilisation d'un élément section englobant tout le site est necessaire pour le centrer par exemple, donc ce n'est pas forcément inutile. Perso j'utilise une div.warp pour cela. Mais c'est la seul explication que j'a trouvé pour justifier cela.
a écrit :
Je pense que dans le cas que tu propose, l'utilisation d'un élément section englobant tout le site est necessaire pour le centrer par exemple, donc ce n'est pas forcément inutile.

Le centrage, c'est un problème de présentation pure, ça n'a rien à faire avec de la sémantique. C'est div qu'il faut utiliser dans ce cas, pas section.
Bonjour,

L'utilisation de cette section globale qu'on retrouve assez souvent peut être utile suivant la mise en forme du site.
Personnellement je l'utilise pratiquement tout le temps mais en l'intitulant
<div class="website-wrapper"> aussitôt après le body ou après chacun des éléments principaux ( header, nav, main, footer).
Ce qui me permet d'avoir un site "fluide" centré dans la fenêtre et ne prenant pas toute la largeur de celle-ci.

Un exemple:

<body class="degrade-orange" id="top" role="document">

    <div class="website-wrapper">

        <header id="website-header" role="banner">
        </header>
        
    </div><!-- fin wrapper du website-header -->
    
    <div class="website-wrapper">
    
        <nav id="website-nav" role="navigation">
        </nav>
        
    </div><!-- fin wrapper du website-nav -->
    
    <section class="website-wrapper">

        <div id="main-wrapper">

            <div role="main" id="main-content" class="width-sidebar-right">
            </div>
            
            <div id="sidebar" role="complementary">
            </div>
            
        </div>
        
    </div><!-- fin wrapper du website-main -->
    
    <footer id="website-footer" class="website-wrapper" role="contentinfo">
    </footer>
    
</body>


Cordialement
Modifié par cpalo (25 May 2014 - 07:57)
Sujet clos
Aller à