SimpleSL HTML5

README_simplesl-html5.md · rescrit au format editorial 4S5R · Site officiel : simplesl.com · Regles de slug : README_SLUGIFY.html

SimpleSL HTML5 est une convention de structure HTML minimaliste basee sur les elements semantiques natifs de HTML5. Son objectif est de produire une architecture simple, lisible, maintenable et independante des frameworks, avec une separation claire entre structure, fonctionnalite, presentation et comportement.

Philosophie. HTML natif avant tout, structure stable et previsible, CSS local naturellement scope, JavaScript limite au comportement metier, minimum de dependances externes, et vision webmaster full-stack orientee long terme.

4 Zones Fondamentales

Classe	Element	Role
`.hd`	`header`	En-tete
`.mn`	`nav`	Navigation
`.ct`	`main`	Contenu principal
`.ft`	`footer`	Pied de page

Ces quatre zones constituent la structure fondamentale de tout document SimpleSL.

4Strict & 5Royals

Le mode strict SimpleSL impose une structure minimale precise : un header, une nav, un main, au minimum une section, puis un footer.

<html>
<head>
    <title></title>
</head>
<body>
    <header class="hd"></header>
    <nav class="mn"></nav>
    <main class="ct">
        <section id=""></section>
    </main>
    <footer class="ft"></footer>
</body>
</html>

La structure canonique devient donc :

html
├─ head
└─ body
   ├─ header.hd
   ├─ nav.mn
   ├─ main.ct
   │  └─ section
   └─ footer.ft

Hierarchie et niveaux d'architecture

SimpleSL organise le document en une progression claire : Page -> Sections -> Composants -> Elements HTML. Les composants ne sont jamais la base du systeme ; la section reste l'unite fonctionnelle principale.

Niveau	Nom	Description
1	Document	`html`, document HTML complet.
2	Structure	`hd`, `mn`, `ct`, `ft` : structure globale du site.
3	Fonctionnel	`section` : zone metier autonome, ecran, fonctionnalite ou contexte.
4	UI	Exemples : `card`, `table`, `form`, `grid`, `modal`, `tabs`.
5	HTML natif	Exemples : `h1`, `p`, `a`, `img`, `button`, `article`, `figure`.

Principe fondamental : la section est l'unite fonctionnelle. Les composants sont des outils internes a cette section et n'existent jamais independamment du contexte metier qui les porte.

Scope CSS naturel

SimpleSL exploite la structure HTML pour obtenir un scope CSS naturel sans systeme complexe de nommage. Une meme classe peut porter des comportements differents selon la section metier qui l'englobe.

<section id="news">
    <article class="card">
        ...
    </article>
</section>

<section id="contact">
    <form class="card">
        ...
    </form>
</section>

#news .card {
    border-left: 4px solid;
}

#contact .card {
    max-width: 40rem;
}

Meme composant, meme classe, contexte different, comportement different. La section devient automatiquement le contexte fonctionnel de reference.

#dashboard table {}
#news article {}
#gallery figure {}
#contact form {}

Cette approche facilite la maintenance, la lecture du code, la reduction des conflits CSS et l'evolution modulaire des pages.

Vision architecture

HTML = structure simple
Section = scope fonctionnel et dynamique
CSS = presentation locale unifiee
JS = comportement local securise

Glossaire

Terme	Signification
`hd`	head / header / en-tete
`mn`	menu de navigation
`ct`	content / contenu
`ft`	footer / pied de page
`ctx`	contexte
`tbl`	table

Addenda

Le selecteur canonique

main.ct section#hero p

main = contenu principal
section = contexte metier
p = element metier

Le pattern general devient main.ct section#slug element.

SimpleSL + SLUGIFY

Le slug devient le pivot du systeme. Il sert d'ancre HTML, d'identifiant metier, de cible CSS, de cible JS, de cible HTMX, de cible analytics, de cible SEO et d'identite canonique pour chaque section publique.

Pour la specification detaillee des regles de normalisation, d'unicite, de collisions et d'implementation Laravel, voir README_SLUGIFY.html.

<section id="hero">
<section id="news">
<section id="portfolio">
<section id="contact">

Conceptuellement :

SimpleSL -> Structure
SLUGIFY -> Identite
CSS -> Presentation
JS -> Comportement

Le couple section + slug porte une responsabilite unique : 1 structure, 1 identite, 1 responsabilite.

Implementations annoncees

README_simplesl-html5.md : convention canonique
README_simplesl-laravel.md : implementation Laravel
README_simplesl-htmx.md : implementation HTMX
README_simplesl-css.md : conventions CSS
README_simplesl-js.md : conventions JavaScript

Resume. SimpleSL HTML5 repose sur une idee directe : utiliser la structure native du Web pour construire des sites durables, lisibles et maintenables, sans surcouche inutile.