HTML & CSS : organiser une page avec beaucoup de contenu

Pour éviter la multiplication des pages d'un site certains développeurs imaginent des pages avec beaucoup de contenu chacune (textes et images).
Il existe même des sites qui ne comprennent qu'une page ...
La navigation dans une page très longue peut devenir fastidieuse sauf emploi de quelques astuces : ancres, masquage par défaut, etc.

Première technique : les ancres

Grâce à une "ancre" on peut accéder à un endroit très précis de la page courante voire à un endroit très précis dans une autre page.

Extrait du code

...
<h1 id ="haut">Page très longue</h1>
<nav>
	<a href ="#partie1" >1ère partie </a>
	<a href ="#partie2" >2ième partie </a>
	<a href ="#partie3" >3ième partie</a>
</nav>
<h2 id ="partie1">Première partie de la page</h2>
<p>Ac ne quis a nobis hoc ita dici forte miretur, ...
facultas sit ingeni, neque haec dicendi ratio aut disciplina, 
...
<a href ="#haut">Retour haut de page</a>

<h2 id ='partie2'>Deuxième partie de la page </h2>
<p>Ultima Syriarum est Palaestina per intervalla magna protenta, 
cultis abundans terris et nitidis et civitates habens ...
...
<a href ="#haut">Retour haut de page</a>

<h2 id ='partie3'>Troisième partie de la page</h2>
<p>Ultima Syriarum est Palaestina per intervalla magna protenta, 
cultis abundans terris et nitidis et civitates habens quasdam egregias, ...
...
<a href ="#haut">Retour haut de page</a>
</body></html>

Commentaire

Dans cette page il y a quatre ancres. Une ancre est créée avec l'attribut ID.
Les ancres sont ici : <h1 id ="haut"> ... <h2 id ="partie1"> ... <h2 id ="partie2"> ... <h2 id ="partie3"> ...

Pour accéder à une ancre il suffit de créer un lien hypertexte (balise A) avec en valeur de l'attribut href "#nom_ancre"
Dans l'exemple il y a six liens vers des ancres de la page qui sont : <a href ="#partie1" >1ère partie </a> <a href ="#partie2" >2ième partie </a> <a href ="#partie3" >3ième partie</a> <a href ="#haut">Retour haut de page</a>

Observez le rendu !

Lien vers une ancre située dans une autre page

Imaginons que la page en question se nomme "page_longue.htm". Dans d'autre pages vous pouvez écrire des liens avec les valeurs suivantes pour l'attribut href : "page_longue.htm#partie1" OU "page_longue.htm#partie3".

Deuxième solution : masquer une grande partie du contenu

Pour qu'une page ne soit pas trop longue il suffit de masquer par défaut une grande partie de son contenu.
Ce masquage peut être réalisé avec CSS ou en HTML5 ou encore en JavaScript et plus précisément (pour simplifier le code) avec une extension de la fameuse bibliothèque de jQuery.
Je n'en dis pas plus car il y a dans mon site tout un tuto sur jQuery.
Jquery UI - une extension de jQuery

Masquage du contenu : solution CSS

Extrait du code de la page

<style>
	article {height : 50px; overflow : hidden; }
	article:hover {height : auto; }
	article h2 {height : 40px; margin-bottom : 10px; }
	...
<h1 >Page très longue</h1>
<article>
<h2>Première partie de la page</h2>
<p>Ac ne quis a nobis hoc ita dici forte miretur, quod alia ...
neque haec dicendi ratio aut disciplina, 
...
</article>

<article>
<h2>Deuxième partie de la page </h2>
<p>Ultima Syr iarum est Palaestina per intervalla magna protenta, ...
et nitidis et civitates habens quasdam egregias, nullam nulli
...
</article>

<article>
<h2>Troisième partie de la page</h2>
<p>Ultima Syriarum est Palaestina per intervalla magna protenta, ...
et nitidis et civitates habens quasdam egregias, nullam nulli cedentem sed 
...
</article>
...

Notez la présence d'une feuille de style interne avec trois règles.
Chacune des parties est désormais contenue dans une balise ARTICLE par contre les ancres et les liens vers celles-ci ont disparu !

La feuille de style précise que la hauteur par défaut de chaque boite ARTICLE est 50 pixels seulement et que le reste du contenu est masqué (overflow :hidden).
50px c'est la hauteur (hauteur totale) de la boite H2 contenue dans ARTICLE. Donc par défaut on ne voit que que le titre de la partie !
Si survol de la boite alors la hauteur s'ajuste pour afficher tout le contenu !
Observez le rendu !

Masquage contenu : solution HTML5

La version 5 de HTML propose deux nouvelles balises (doubles) de type block qui fonctionnent obligatoirement ensembles.
Le contenu d'une partie doit être à l'intérieur du conteneur details ; le contenu affiché par défaut à l'intérieur du conteneur summary.

Extrait du code

...
<details>
	<summary>
		<h2>Première partie de la page</h2>
		<p>Ac ne quis a nobis hoc ita dici forte miretur, ...
		neque haec dicendi ratio aut disciplina. 
		<p class ="remarque">Cliquez sur la flèche au dessus du titre pour afficher tout le texte.
	</summary>
<p>Post haec indumentum regale quaerebatur et ministris fucandae purpurae ...
sine manicis textam, 
Maras nomine quidam inductus est ut appellant Christiani diaconus, ... 
Graeco sermone ad Tyrii textrini 
...
</details>

<details>
	<summary>
		<h2>Deuxième partie de la page </h2>
		<p>Ultima Syriarum est Palaestina per intervalla ...
		terris et nitidis et civitates habens quasdam egregias, ...
		...
		<p class ="remarque">Cliquez sur la flèche au dessus du titre pour afficher tout le texte.
	</summary>
	<h2>Deuxième partie de la page </h2>
	<p>Ultima Syriarum est Palaestina per intervalla magna protenta, ...
	terris et nitidis et civitates habens quasdam egregias, nullam nulli 
	...
</details>

<details>
<!--début troisième partie-->
...

Comme dans la version précédente les ancres et les liens vers celles-ci ont disparu.

La balise double summary est obligatoirement "enfant" du conteneur details !
Donc gros avantage par rapport à la solution précédente : le développeur gère le contenu affiché par défaut. Une partie développée par le visiteur le reste tant que ce dernier n'a pas demandé la rétractation.
Mais inconvénient : le code HTML est un peu lourd puisque pour chaque partie de la page il faut rajouter quatre balises ...

orientée vers la droite, elle indique que la partie est repliée
orientée vers le bas, elle indique que le texte est déplié

Cliquez sur la flèche pour déplier ou replier.
Observez le rendu !

Afficher en permanence la zone de navigation

Vous avez pu constater que sur certains site et lorsque vous défilez vers le bas, la zone de navigation dans le site, est toujours visible ; c'est le reste de la page qui glisse sous ce menu.
Donc la navigation est facilitée ; il n'est plus nécessaire de remonter en haut de page pour accéder au menu.

Le code HTML

 ...
 <nav>
	<h2 id ="haut">Page très longue</h2>
		<a href ="#" >Page 1 </a>
		<a href ="#" >Page 2 </a>
		<a href ="#" >Page 3</a>
		...
</nav>
<section>
<h2>Première partie de la page 7</h2>
<p>Ac ne quis a nobis hoc ita dici forte miretur, ...
...
<h2>Deuxième partie de la page 7 </h2>
<p>Ultima Syriarum est Palaestina per intervalla magna protenta, ...
...
<h2>Troisième partie de la page 7</h2>
<p>Ultima Syriarum est Palaestina per intervalla magna protenta, ...
nitidis et civitates habens quasdam egregias, nullam nulli cedentem sed 
...
</section>
...

Tout le contenu est dans le bloc SECTION et la zone de navigation est le bloc NAV.
Les liens ne fonctionnent pas : "liens morts".

Le code CSS

...
	nav {position : fixed ; width : 90% ; background : aqua;   
		top : 0px; left : 50% ; margin-left : -45%;   
		height : 140px; z-index : 999;  }
	section {position : relative ; width : 90% ; background : skyblue; 
		top: 150px ; margin-left : auto ; margin-right : auto ; z-index : 1; }
...

La feuille de style est un peu compliquée.
Cette solution suppose de bien maitriser la propriété POSITION et les propriétés qui sont associées (top, left, bottom, right, margin).
Et aussi de connaitre les limites. Ainsi pour des raisons mystérieuses position : absolute / fixed est incompatible avec margin: auto.
Donc pour centrer horizontalement le bloc NAV (positionné en fixe) il faut jouer sur deux propriétés left : 50% & margin-left : - moitié de la largeur du bloc donc ici 45% puisque le bloc fait 90% de large.
Notez aussi la propriété z-index qui gère l'ordre d'apparition des blocs lorsqu'ils se superposent.

Je n'en dis pas plus. Il y a dans ce même tuto tout un chapitre sur la propriété POSITION (voir menu de ce tutoriel).

Observez le rendu de cette dernière solution

Surtout faites défiler la page vers le bas pour constater que le menu est toujours affiché en haut de l'écran. C'est le contenu de SECTION qui glisse sous le bloc NAV.
Les liens de la zone de navigation sont des "liens morts".

Traduction

Débuter en HTML & CSS - sommaire

Initiation au HTML & CSS

Pour des pages dynamiques : PHP & SQL

Débuter en HTML & CSS - recherche

L'auteur : Patrick Darcheville

HTML & CSS : organiser une page avec beaucoup de contenu

Première technique : les ancres

Extrait du code

Commentaire

Lien vers une ancre située dans une autre page

Deuxième solution : masquer une grande partie du contenu

Masquage du contenu : solution CSS

Extrait du code de la page

Masquage contenu : solution HTML5

Extrait du code

Afficher en permanence la zone de navigation

Le code HTML

Le code CSS