Je vais vous expliquer ci-dessous comment je m’y suis pris pour construire ma propre interface de blog en HTML5 (que j’ai par la suite adaptée pour Wordpress, mais que je ne décrirai pas dans ce billet).

Tout d’abord, il nous faut notre en-tête principal qui contiendra le titre, le slogan et la navigation principale du site.

L’utilisation de la nouvelle balise <header> est parfaite pour nos besoins mentionnés plus haut. Nous utiliserons cette balise qui elle-même contiendra la balise <hgroup> (voir mon billet la nouvelle balise hgroup) qui elle s’occupera de contenir le titre (<h1>) et slogan du site (<h2>).

Voici le code jusqu’à maintenant :

<header>
    <hgroup>
        <h1><a href="http://www.blog-html5.com" title="Blog HTML5">
        html<span>5</span></a></h1>
        <h2>The future is near</h2>
    </hgroup>
</header>

Nous avons donc en place notre en-tête qui contient le titre et slogan du site. Il nous faut maintenant y intégrer notre navigation principale.

<nav>
    <ul>
        <li><a href="http://www.blog-html5.com" title="Blog HTML5 - html5">
        HTML 5</a></li>
        <li><a href="http://www.blog-html5.com" title="Blog HTML5 - html5">
        HTML 5</a></li>
        <li><a href="http://www.blog-html5.com" title="Blog HTML5 - html5">
        HTML 5</a></li>
        <li><a href="http://www.blog-html5.com" title="Blog HTML5 - html5">
        HTML 5</a></li>
    </ul>
</nav>

À noter que nous utilisons maintenant la balise <nav> pour contenir notre navigation principale. Cette balise a été créé pour aider la sémantique du code en HTML5 afin que l’on repère plus facilement les zones navigables d’un site web. Il faut par contre faire attention de ne pas surutiliser cette balise qui ne doit pas être utilisée à chaque fois que l’on a une série de liens.

Jusqu’à maintenant, rien de trop complexe, seulement la mise en place des nouvelles balises à leurs endroits respectifs. Nous pouvons déjà remarquer que la sémantique est améliorée et que l’on ne retrouve pas de div=” header” ou ul=”nav”.

Une fois l’en-tête créé, on s’attaque au contenu même de l’interface. Le contenu contient évidemment nos articles de blog. Nous avons donc besoin d’une section qui contiendra plusieurs articles. Comme si c’était arrangé avec le gars des vues, la balise <section> ainsi que la balise <article> vont s’occuper de tout ça.

La balise <section> parle assez d’elle-même. Elle sert à définir une section quelconque d’un site Web. Dans notre cas, c’est la section qui contient nos articles de blog.

Voici le code qui va répondre à nos besoins :

<section>
    <article>
        <header>
            <h3>Mon blog sur HTML5</h3>
            <p class="articleDate"><time>12 octobre 2009</time></p>
        </header>
        <p>HTML5 est pour bientôt. Blablabla.</p>
        <footer>
            <ul>
                <li>Auteur Simon Guérin</li>
            </ul>
        </footer>
    </article>
</section>

Encore une fois ici, la sémantique parle d’elle-même. Nous avons une section qui contient un article qui lui-même contient un en-tête (titre du blog + sa date de publication), le texte de l’article et finalement un pied de page (auteur de l’article).

Rien de très sorcier mise à part de comprendre la mise en place des nouvelles balises HTML5. Un article a toujours un titre et une date de publication. Il est donc logique de placer le tout dans l’en-tête de l’article (<header>). Nous retrouvons également le pied de page défini par la nouvelle balise <footer> qui est parfaite pour définir l’auteur de l’article. L’approche utilisée ici peut s’appliquer à beaucoup d’autres scénarios. Il suffit de prendre le temps d’analyser chacune des sections d’un site web.

Nous avons un en-tête, nos articles, mais il manque quelque chose non? L’affichage de nos tweets! Nous allons placer à la droite de nos articles, nos derniers tweets provenant de Twitter. Pour ce faire, je vais utiliser la balise <aside> qui a pour définition de représenter une section qui est reliée au contenu tout près de cette même balise. Elle peut également servir pour représenter une « sidebar ». Je crois que cette nouvelle balise va fortement être utilisée pour souvent représenter le contenu à droite dans un blog (Twitter, tags clouds, derniers billets, etc).

Le code à rajouter est le suivant :

<aside id="twitter_div">
    <h2>My Twitter feed</h2>
    <ul id="twitter_update_list">
        <li></li>
    </ul>
</aside>

Vous devez également rajouter les 2 lignes suivantes avant la fermeture de la balise </body>. Ces 2 lignes permettent de synchroniser le tout avec Twitter. À noter que vous devrez changer mon nom americanwhore par votre Twitter username.

<script type="text/javascript" src="http://twitter.com/javascripts/
blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/
user_timeline/americanwhore.json?callback=twitterCallback2&amp;
amp;count=10"></script>

En somme, les nouvelles balises HTML5 vues dans ce billet n’ont pas été créé par hasard. HTML5 va grandement améliorer la sémantique des pages Web et il deviendra plus simple d’interpréter le contenu de chaque page.

Télécharger l’exemple complet pour créer une simple interface de blog en HTML5.

Vous pouvez également voir un autre exemple que j’ai fait en gardant le même code HTML5, mais arrangé différemment avec CSS.

Tweet This Post