La structure d'HTML5

Il est temps de me retrousser les manches et de passer au codage dans mon Core sNews pour qu'il émette du HTML5.

Il faut d'abord que j'organise la structure.

D'après ce que je comprends, HTML5 possède des blocs d'éléments qui offrent plus de sens au balisage et au contenu.

• • •

Nous avons donc :

  • header
    qui contient les informations d’introduction ou de présentation de la page.
  • nav
    qui contient des liens vers d’autres pages ou vers des sections de la page courante.
  • section
    qui détermine un bloc de contenus divers en relation thématique avec le sujet.
  • article
    définit une entité à part entière de la page : un billet dans un blog, voire un commentaire…
  • aside
    une boiboîte destinée à recevoir des éléments propre à enrichir le contenu directement lié à l'article lui-même.
  • footer
    C'est le pied de page. Mais un footer peut être aussi un footer d'article.

On verra tout ça plus tard quand j'aurai avancé de mon côté.

Le gabarit de la page d'accueil aura (à quelque chose près) ces éléments :

  • nav, une barre d'accès rapide (ou menu) à des pages, des sections, à la recherche...
  • Le header de ma page (nom du site, le logo...)
  • Le contenu central dans un wrapper div id="content"
  • Les articles dans la colonne principale
    • Titres des articles en H2
    • Le texte de l'article ...
    • Et dans son footer, ses métadonnées
  • La Sidebar
    • Titre de la rubrique en H3
    • Son contenu
    • etc
  • Pied de page footer

Si je reproduis le crayonné sur ma feuille, ça va donner :

exemple de la structure d'une page Web en HTML5
La structure de la future page d'accueil du Bloc-notes en HTML5

Classique. Pas de fioritures. Ça va être spartiate ; tout du moins dans un premier temps.

NB : L'illustration ci-dessus est entourée des balises figure /figure qui enserrent des éléments audio, vidéo, images...
Contrairement à ce que j'ai lu ici il ne semble pas possible d'inclure dans la balise figure, la balise legend qui est toujours réservée aux formulaires et obligatoirement liée à la balise fieldset qui la précède.




Commentaires :

Pierre||#1
Pierre
Il semblerait que la structure possible soit plus complexe que ce schema à la Léonidas, dans la mesure où l'élément header peut se retrouver également dans le sidebar, en en-tete de sections et articles etc., tout comme l'élément footer (qui peut être le pied d'une section ou d'un article). La valeur sémantique de ces balises dépend ainsi du contexte de parenté.
Philippe||#2
Philippe
Cet article date d’il y a plus d’1 an à une époque où je composais la maquette.
Sur la structure d’HTML5 il faudrait plutôt se reporter à celui là, plus récent : La structure sémantique d’HTML5.
Pierre||#3
Pierre
Well, merci pour votre travail, je suis le lien ! (not : I am the link! but I follow it)

Les commentaires pour ce billet sont fermés