4Strict & 5Royals — spécification (4S5R)
Principe général. Le système 4Strict&5Royals impose une structure HTML stricte : le body doit contenir exactement quatre conteneurs structurels — header.hd, nav.mn, main.ct et footer.ft — et des règles CSS associées. Ces conteneurs ont des rôles sémantiques précis et ne doivent pas être substitués par d'autres wrappers structurels.
4Strict — quatre balises, quatre rôles
header.hd— l'en‑tête du document (branding, titre, résumé).nav.mn— menu de navigation (structure stricte :ol > li > a; pas d'enveloppes additionnelles).main.ct— contenu principal : règle stricte expliquée ci‑dessous.footer.ft— pied de page (métadonnées, attribution).
5Royals — la règle du slug
La règle 5Royals exige qu'au moins une section identifiée par un id (le « slug ») soit présente dans main.ct. Ex. : <section id="slug">. Cette section#slug constitue la portée sémantique et CSS principale du contenu.
Règle stricte pour main.ct. Les enfants directs de main.ct doivent être uniquement des éléments section. Autrement dit, main.ct = zéro ou plusieurs section (mais au moins une), et aucun autre élément structurel (pas de div, article, etc.) directement sous main.ct. À l'intérieur d'une section, vous pouvez utiliser librement d'autres éléments (article, div, pre, code, etc.).
Exemple minimal conforme
<body>
<header class="hd">…</header>
<nav class="mn">…</nav>
<main class="ct">
<section id="slug">…contenu…</section>
<!-- autres sections possibles -->
</main>
<footer class="ft">…</footer>
</body>Règles CSS
Les règles CSS ciblant le contenu doivent être scoppées sur l'ID de la section (par ex. #slug) : #slug { }, #slug h1 { }, #slug table { }. Évitez de cibler les sections sans ID. Limitez la profondeur des sélecteurs à 3 niveaux ; pour des contextes additionnels, ajoutez une classe de contexte sur la même section : <section id="slug" class="ctx-example">.
Attribution : 4Strict&5Royals — Jean‑Yves 'JoYz' Cornet / joyz.pro