Bonjour
J'ai fait une restructuration de ce genre récemment, je me suis donc posé ce genre de question et voici le résultat de mes réflexions.
Comme dit Thierry, la structure de la page dépend de la signification de son contenu. Quand on parle de "sémantique" c'est bien ce que ça signifie.
Le
site en question a en gros 3 types de pages
- les pages d'index, qui contiennent des liens vers certaines pages, regroupées par domaine., la plus complexe étant
la page d'accueil qui comporte plusieurs listes de liens
- les pages dites "de doc", qui contiennent chacune soit un document complet, par exemple
cette page, soit une partie d'un document trop long pour être raisonnablement contenu dans une seule page, l'objectif étant qu'un lecteur intéressé puisse facilement lire un document complexe partie par partie, par exemple
cette page est la 7ème page d'un document qui en comporte 14
- les pages dites "de News", qui comportent les nouvelles du mois depuis juin 2001, par exemple
la page d'août 2017
Pour regarder la structure des pages dont j'ai mis des liens ci-dessus, il faut utiliser les "outils de développement", car les codes sources sont fortement modifiés par des scripts JS (pour diverses raisons, j'ai été conduit à utiliser JS alors que personnellement je préfère PHP, c'dst à dire générer des sources prêts l'affichage.
Structure des pages:
Toutes les pages ont une structure générale
<body>
<div id="container">
<script>document.write(headHTML());</script> //génère le bandeau et le menu
<main id="pageBody" class="..."> //la classe donne le type de page
<!-- c'est là que l'on met le contenu de la page -->
</main>
<script>document.write(pageFooter());</script> //génère le bas de la page
</div>
</body>
Pour les pages d'index, on a:
<main id="pageBody" class="indexPage">
<header id="pageTitle">
<h1>..........</h1>
</header>
<section class="tileList description notframed">
<p>
<!-- liste des documents à indexer -->
</p>
</section>
</main>
Ce sont des scripts qui génèrent les "tuiles" qui contiennent une image, la description du document et un lien vers le document, en partant d'une part de la liste des pages à indexer, d'autre part de la description de chaque document, contenue dans un fichier propre à chaque document.
Pour les pages de doc, on a
<main id="pageBody" class="docPage">
<article> //une "page de doc" contient un article, ou une partie d'un article
<header>
<figure id="pageTitle">.......</figure> //une image en haut de page
<h1>............</h1>
<!-- c'est ici que des scripts génèrent le "manu de pagination" entre pages -->
</header>
<section class="...">
<header>......</header>
<!-- le contenu de la section -->
</section>
<footer>
<!-- bibliographie et crédits dans la dernière page du document -->
</footer>
</article>
</main>
Pour les pages de News, qui comportent plusieurs nouvelles brèves
(notes de lecture d'articles avec des liens vers ces articles s'ils sont en ligne)
<main id="pageBody" class="newsPage">
<header id="pageTitle">
<img src="" alt=""/> <!-- image éventuelle au dessus du titre -->
<h1 class="newsTitle"></h1>
</header>
<!-- article de News -->
<article class="news">
<header class="title">
<h2><span lang="fr"><!-- frTitle --></span><span lang="en"><!-- enTitle --></span></h2>
<p>...</p>
</header>
<script>diapo(..........)</script> //génère une image dans l'article
<p lang="fr"><!-- frText --></p>
<p lang="en"><!-- enTitle --></p>
<footer>
<nav><!-- liste des liens --></nav>
</footer>
</article>
<!-- fin de l'article -->
<!-- article suivant -->
........................
</main>
Je crois que tu as l'essentiel de ce que j'ai fait ces deux dernières années
Modifié par PapyJP (22 Sep 2017 - 14:42)
