Structure Html de base

19 Avril 2015

C’est à dire un « contenu » central — c’est quand même le plus important —, flanqué d’une colonne latérale de navigation et/ou d’informations contextuelles, chapeauté d’un « en-tête » et borné d’un « pied de page ».

Bien que ce soit conceptuellement très simple, ça reste toujours assez délicat à mettre en page en HTML et CSS. Voici les balises HTML5correspondantes

On ne peut pas se reposer sur ces seules balises, car une page web bien structurée en HTML5 contient plusieurs balises <footer> et<header>. C’est pourquoi il vaut mieux doubler chacun de ces blocs principaux d’un sélecteur CSS homonyme :

<header class="header">header</header>

<nav class="nav">nav</nav>

...

<aside class="aside">aside</aside>

<footer class="footer">footer</footer>

avec, dans la feuille de style correspondante :

.header { ... }

.nav { ... }

...

.aside { ... }

.footer { ... }

Cela permet en outre d’utiliser le même code CSS pour des pages structurées en HTML5 ou en XHTML. Poursuivons d’ailleurs en <div>, lesquelles sont valables dans tous les cas :

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

<div class="nav">nav</div>

...

<div class="aside">aside</div>

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

Notez que pour ces blocs principaux, mieux vaut utiliser des class, et non des id, afin de se garder une bonne marge de manœuvre lors des inévitables surcharges ultérieures [1].

Nous avons donc :

.header pour l’en-tête,
.footer pour le pied de page,
et .aside pour les contenus contextuels,
sans oublier .nav pour la navigation principale — qui me donne l’idée de préfixer de même tous mes éléments de navigation :.navbar, .navtools, .navsub, .navsup, .navtop, etc.

Il manque :

un bloc .content pour le contenu principal de la page.

Voici donc notre structure élémentaire complète :

<div class="header">En-tête</div>

<div class="nav">Navigation</div>

<div class="content">Contenu</div>

<div class="aside">Contexte</div>

<div class="footer">Pied de page</div>

Pour être vraiment à l’aise en intégration CSS, il est utile d’ajouter quelques <div> englobantes :

.page (parfois appelé .container) englobe toute la page, comme son nom l’indique
.main contient les bloc centraux, ici .content et .aside, mais qui pourrait être plus nombreux : .extra, etc. On peut superposer plusieurs blocs .main, pour faire une mise en page à registres horizontaux [2].
.wrapper englobe le .content seul, juste pour faciliter la mise en page, comme dans Layout Gala, qui propose ainsi une quarantaine de variantes, rien que ça.

Voici donc :

<div class="page">

        <div class="header">En-tête</div>

        <div class="nav">Navigation</div>

        <div class="main">

                <div class="wrapper">

                        <div class="content">Contenu</div>

                </div>

                <div class="aside">Contexte</div>

        </div>

        <div class="footer">Pied de page</div>

</div>

Et pour bien faire, ajoutons quelques ancres, #content et #nav, afin de pouvoir accéder rapidement au contenu et à la navigation principale (.skiplink), car c’est bien maintenant, au moment où l’on définit la structure, qu’il faut y penser :

div class="page">

<nav class="skiplink"><a href="#content">Aller au contenu</a> | <a href="#nav">Aller au menu</a></nav>
<header class="header">En-tête</header>
<nav class="nav" id="nav">Navigation</nav>
<main class="main">
<div class="wrapper">
<article class="content" id="content">Contenu</article>
</div>
<aside class="aside">Contexte</aside>
</main>
<footer class="footer">Pied de page</footer>
</div>

Cette structure de base à cinq blocs principaux convient dans la majorité des cas, car elle permet de fabriquer une grande variété de mises en page.

Lire la suite ICI

Un énorme emrci pour ces tutos romy.tetue.net