Structure d'un thème (1/4) : généralités HTML 5

21/08/2012 19:54

La nouvelle version d'Overblog est conforme aux nouvelles spécifications du W3C, consortium international qui normalise le code HTML de nos pages Web. En effet avec l'ancienne version d'Overblog, nous utilisions HTML 4.0 qui maintenant est devenu obsolète sur pas mal de périphériques d'affichage (smartphone, tablette Web TV, nouveaux navigateurs Web).
Donc la volonté d'Overblog, avec cette nouvelle version, est de proposer une plateforme de blogs "up to date". Ce qui implique aux blogueuses et aux blogueurs de penser autrement la conception de leur blog.

La nouvelle structure HTML des thèmes.

Je vais vous présenter ci-dessous, les nouveaux éléments constitutifs d'une page de blog qui utilise les recommandations HTML5. D'autres posts à venir vous montreront la structure simplifiée mais complète d'un thème Overblog (squelette de thème).

Les balises principales

Doctype

Le doctype est simplifié :

<!DOCTYPE html>

Il n'est pas sensible à la casse (on peut écrire

<!doctype html>

par exemple), et son rôle est uniquement d'éviter un rendu en mode «Quirks» (ou mode de compatibilité) pour les anciens navigateurs.

Section

L'élément

<section>

permet de définir les grandes sections d'un document comme par exemple les chapitres, les en-tête et pied-de-page, ou toute autre section dans un document. Il peut être combiné avec les éléments

h1, h2, h3, h4, h5, et h6

pour une meilleure définition de la structure du document.

Article

<article>

représente un texte indépendant, une portion de contenu, comme par exemple un article de journal, de blog ou de forum.

<article>
  <p>
    <a href="http://monblog.overblog.com/comprendre-le-code-html">
    Comprendre le code HTML</a>
    <br /> 
    Bruno m'a invité sur ce blog et je suis heureux d'y publier mon premier article sur la nouvelle plateforme. J'ai découvert cette dernière il y a un mois et elle présente de nombreuses insuffisances... Par exemple, pour vraiment personnaliser son blog, il faut passer par une modification du code HTML, ce qui n'est pas à la portée de tout le monde. Mais le langage HTML se révèle vite assez simple, comparé à d'autres langages (PHP, script).
  </p>
</article>

Documentation sur l'élément Article

Aside

L'élément

<aside>

est destiné au contenu tangentiel, une sorte de bonus au contenu principal, que ce soit pour un article ou l'ensemble d'un document HTML.

<aside>
  <h1>Archives</h1>
  <ul>
    <li><a href="/archive/2012-06">Juin 2012</a></li>
    <li><a href="/archive/2012-07">Juillet 2012</a></li>
    <li><a href="/archive/2012-08">Août 2012</a></li>
  </ul>
</aside>

Documentation sur l'élément Aside

Header

L'élément

<header>

représente l'en-tête d'une section ou d'une page.

Documentation sur l'élément Header

Footer

L'élément

<footer>

représente le pied de page d'une section ou d'une page pour mettre les informations concernant l'auteur, les mentions légales…etc.

Documentation sur l'élément Footer

Nav

L'élément

<nav>

représente une section de liens de navigation.

<nav>
  <ul>
    <li><a href="/">Page d'accueil</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

On peut aussi inclure dans la balise, d'autres éléments de votre blog :

<nav>
  <ul>
    <li><a href="/2012-08">Archive Août 2012</a></li>
    <li><a href="/2012-09">Archives Spetembre 2012</a></li>
  </ul>
</nav>

Documentation sur l'élément Nav

Figure

L'élément

<figure>

peut être utilisé pour regrouper des éléments tels que des images ou des vidéos avec leur légende

<figcaption>

.

<figure>
  <img src="http://photonautesassocies.zenfolio.com/img/s2/v59/p450567420-5.jpg" alt="Bateau à la palette graphique" />
  <figcaption>UBateau à la palette graphique</figcaption>
</figure>

D'autres nouvelles balises

Nous verrons dans la prochaine partie comment utiliser ces différents éléments avec les informations de contenu de notre blog.
A suivre.

Je vous recommande aussi la contribution de Iv-oam sur ce blog à propos du HTML

Voir aussi :

Structure d'un thème (2/4) : structure générale