HTML5 : En-tête et Corps d’une page web

by karim

Beaucoup de concepteurs de pages web n'abordent pas ou trop peu le positionnement des éléments constituant leur page web par CSS.

C'est pourtant le moyen le plus simple pour avoir des pages homogènes et dont la présentation est stable sur tous les navigateurs. C'est ce qu'on va s'efforcer de démontrer ici.

En HTML5 - comme en HTML4 d'ailleurs -, il existe deux type d'éléments:

  • les éléments qui délimitent les blocs: div, table, h1, etc...
  • les éléments qui délimitent des portions de texte et ne sont pas des blocs: span, a, b, etc...

On ne peut positionner avec CSS que des éléments de type blocs. Exemple:

 <div style="position: absolute; top: 10px; left: 40px; background-color: yellow;">
 Ce texte est positionné
 </div>

Ici, le contenu de l'élément div sera positionné en haut de page. Par contre:

 <span style="position: absolute; top: 10px; left: 40px; background-color: yellow;"> 
Ce texte n'est pas positionné
 </span>

Le contenu de l'élément span ne sera pas positionné, car span n'est pas un élément délimitant un bloc.

En HTML5, de nouveaux éléments servent de marqueurs sémantiques destinés à se substituer à l'élément div:article aside section header footer etc....

Ces nouveaux éléments ne délimitent pas des blocs. Initialement l'élément div marque un bloc. Pour remplacer ceci:

 <div class="header"> 
Mon en tête de page 
 </div>

par ceci:

 <header>Mon en tête de page</header>

Il est nécessaire d'indiquer par l'intermédiaire de CSS que cet élément header est un bloc:

 <header style="display: block;">Mon en tête de page</header>

A partir de cet instant, header se comportera comme div et on pourra le positionner en CSS. Pour ne pas oublier d'indiquer les nouveaux éléments HTML5 comme éléments en tant que délimiteurs de blocs, on définira en tête de son CSS ceci:

 article, aside, header, footer, nav {
 display: block;
 } 
 <div id="tetePage">...texte de l'en-tête... </div>
 <div id="contenuPage">....contenu du corps de page...</div>
 <div id="piedPage">...contenu du pied de page...</div>

et que nous allons préalablement réécrire avec des éléments HTML5. Il est entendu que ces nouveaux éléments sont définis en CSS comme délimitant des blocs:

 <header>...texte de l'en-tête... </header>
 <article>....contenu du corps de page...</article>
 <footer>...contenu du pied de page...</footer>

Voici le code CSS appliqué à l'élément header pour le positionner:

 body header { 
 position: absolute ; top: 0px; left: 0px; width:600px; height:50px; background-color:hotpink;
 }

 body article {
 position: absolute ; top: 50px; left: 0px; width:600px; height:400px; background-color:aquamarine; 
}

 body footer { 
position: absolute ; top: 450px; left: 0px; width:600px; height:50px; background-color:yellow; 
}

Il est vrai que pour notre exemple, le positionnement css n'est pas nécessaire. Mais si on veut rajouter un bloc latéral aside, ça devient plus compliqué de le réaliser sans positionnement css:

 body header {
 position: absolute ; top: 0px; left: 0px; width:800px; height:50px; background-color:hotpink; 
 }

 body aside {
 position: absolute ; top: 50px; left: 0px; width: 200px; height: 400px; background-color: greenyellow; 
 }

 body article {
 position: absolute ; top: 50px; left: 200px; width:600px; height:400px; background-color:aquamarine; 
 }

 body footer {
 position: absolute ; top: 450px; left: 0px; width:800px; height:50px; background-color:yellow; }

et le code HTML qui va avec:

 <header>...texte de l'en-tête... </header> <aside>bloc latéral</aside> <article>....contenu du corps de page...</article> <footer>...contenu du pied de page...</footer>

Là où ça devient intéressant, c'est quand on imbrique les éléments. Ainsi, un élément article peut contenir ses propres éléments header ou footer.

A partir du moment où un élément est positionné par feuille de style CSS, il est isolé du contexte général. Pour bien comprendre ce mécanisme, voici comment on peut réaliser une mise en page très simple:

 <aside>bloc latéral</aside> <article>....contenu du corps de page...</article>

et qui aura rigoureusement le même effet si on écrit ceci:

 <article>....contenu du corps de page...</article> <aside>bloc latéral</aside>

L'inversion de l'écriture des éléments positionnés par feuille de style n'a aucune incidence sur leur positionnement par feuille de style. Voici un exemple très simple de code HTML avec un contexte général et un bloc latéral marqué par aside:

 <body>
 Ceci est le début du texte dans le contexte général.
 <aside>bloc latéral</aside>
 Ceci est la suite du texte dans le contexte général. </body>

Dans un élément positionné par feuille de style css, donc indépendant du contexte général, on peut positionner des sous- éléments. Ces sous-éléments seront positionnés par rapport à l'élément qui l'englobe. Exemple:

 body aside {
 position: absolute ; top: 50px; left: 0px; width: 200px; height: 400px; background-color: greenyellow; 
}
 body aside header {
 position: absolute ; top: 6px; left: 6px; width: 188px; heigh: 24px; background-color: white;
 }

et le code HTML associé:

 <body>
 Ceci est le début du texte dans le contexte général. 
 <aside><header>
 tête bloc latéral </header>
 bloc latéral </aside>
 Ceci est la suite du texte dans le contexte général. </body>

 

Nous allons maintenant déplacer le bloc latéral en le positionnant du coté droit:

 /* début css inchangé */
 body aside { 
 position: absolute ; top: 50px; left: 600px; width: 200px; height: 400px; background-color: greenyellow; 
 } 
 body aside header { 
 position: absolute ; top: 6px; left: 6px; width: 188px; heigh: 24px; background-color: white; 
 } 
 body article {
 position: absolute ; top: 50px; left: 0px; width:600px; height:400px; background-color:aquamarine; 
 } 
 /* fin css inchangé */

et le code HTML complet pour cet exemple:

<header>...tête de page...</header>
 <aside> <header>tête bloc latéral </header> bloc latéral </aside> 
<article>...corps de page... </article>
 <footer>...pied de page...</footer>