Petite question sans vraiment d'importance: où placer la balise main

Bonjour,

Je fais le " nettoyage de printemps " ( ok je vous le concède : officiellement nous sommes en été) de mes codes, de mes habitudes.....
Et question qui me poursuit.....où placer la balise "main".; et ce we, je me le suis promis;; j'aurai tranché..
Mon code actuel: (simplifié bien sur) :

<div class="TopContent">
</div><!-- ./TopContent -->
<main>
    <div class="MainContent>
    </div><!-- ./MainContent -->
    <div class="Sidebar">
    </div><!-- ./Sidebar -->
</main>
<div class="BottomContent">
</div><!-- ./BottomCont -->

Et maintenant le code que j'envisage:

<main>
    <div class="TopContent">
    </div><!-- ./TopContent -->
    <div class="Content>
    </div><!-- ./Content -->
    <div class="Sidebar">
    </div><!-- ./Sidebar -->
    <div class="BottomContent">
    </div><!-- ./BottomContent -->
</main>

et naturellement avec une variante:

<main>
    <div class="TopContent">
    </div><!-- ./TopContent -->
    <div class="wrapper">
        <div class="Content>
        </div><!-- ./Content -->
        <div class="Sidebar">
        </div><!-- ./Sidebar -->
    </div><!-- ./wrapper-->
    <div class="BottomContent">
    </div><!-- ./BottomContent -->
</main>

Je suis preneur de toute réflexion, en étant bien conscient que chacun d'entre nous a ses propres habitudes pour coder.
Mais il y a quand même une "reflexion" sur cette balise main par rapport au contenu, et aux contenus auxiliaires et ce qu'elle est censée "encadrer".

Cordialement
Modifié par cpalo (01 Jul 2016 - 14:57)

Bonjour Cpalo,

Tu es sûr que nous soyons en été ?! Ma foi, nous ne sommes peut-être pas sur le même continent

De tes trois propositions, je ne vois rien de choquant.

Pour ma part, j'ai plutôt tendance à suivre ta première idée soit sortir de main header et footer.
C'est plus une question pratique que sémantique ou de norme ; cette segmentation m'est fort pratique en Css.

De tes trois propositions, la dernière est celle que j'affectionne le moins. L'idée d'ajouter des "wrapper" en sus des balises sémantiques m'est superflus.

Sur cette question je pense que c'est surtout une question de goût.
Comme dirait l'autre (dont on ne sait ni le nom ni le prénom donc difficile de le nommer) les goûts mauves...

Une vision personnelle en mode : partage publique.

Have a nice day

Petite précision, les TopContent et BottomContent ne correspondent pas aux header et footer. Par exemple le TopContent correspond au slideshow qu'on peut souvent trouver. Entierement d'accord avec toi pour sortir le he header et footer.
Et pour l'été on peut se poser la question....

<header class="SiteHeader">
</header>
<div class="TopContent">
</div>
<main>
    <div class="MainContent>
    </div>
    <div class="Sidebar">
    </div>
</main>
<div class="BottomContent">
</div>
<footer class="SiteFooter">
</footer>

Modifié par cpalo (01 Jul 2016 - 15:00)

Pour ma part, je varie les possibilités selon ce qui s'adaptera le mieux au visuel. Enfin c'est surtout le cas pratique à résoudre qui détermine la variante utilisée. Si on a ce luxe, c'est la nature du contenu qui le détermine, mais à ce niveau là ça n'a pas beaucoup d'importance.

Pour moi la balise main me sers à limiter le contenu "utile" d'une page.

Greg_Lumiere a écrit :
De tes trois propositions, la dernière est celle que j'affectionne le moins. L'idée d'ajouter des "wrapper" en sus des balises sémantiques m'est superflus.

Alors que moi c'est l'inverse : je trouve que les wrapper sont bien pratiques pour centrer le site quelque soit les cas de figure.
Modifié par Olivier C (01 Jul 2016 - 20:48)

Bonjour,

raisonnement inverse : le header de la page, la navigation et le pied de page ne doivent pas être dans l'élément main. S'il y a une vraie sidebar, non plus.
top et bottomContent qui ne sont pas le header et le footer de la page dans les cas que tu exposes : le slideshow de la page et les contenus "en bas" (après) tels qu'articles relatifs, docs à télécharger, etc font bien partie du contenu principal donc je les place dans main.

div wrapper et *-inner : j'en met autant qu'il en faut si ça simplifie mon boulot, celui du client ou ajoute un peu de cohérence entre des gabarits différents d'un même site ou entre les (dizaines de) futurs sites sur lesquels ils seront utilisés.

Bonjour,

Merci pour ces avis.
Je pense que je sortirai la sidebar du main , mais un aside ( sidebar avec contenu relatif au content) lui resterait dans le main.

Ce genre de question peut paraitre anodine, mais cela permet ainsi de prendre un peu de temps pour réflechir sur la structure de sa page web, ou sur conventions de nommage ou sur les classes css.

Cordialement