Par exemple, à Montréal, le W3Québec organise des HTML5 Meetup. L’information se retrouve ici : http://www.meetup.com/HTML5mtl/. Et nous avons besoin d’aide pour traduire les articles des doctors. D’autres articles sont en cours de traduction, nous ne vous avons pas oubliés ! À bientôt!

Pour le moment, Google indexe les microdonnées, mais ne vous récompense ni ne vous pénalise pour cela :

Cela pourrait changer, à mesure qu’HTML 5 gagne en popularité et comme nous analysons les éléments de balisage spécifiques qui ajoutent de la valeur à notre système d’indexation, mais pour le moment rien ne présume d’un bénéfice à utiliser HTML 5 plutôt qu’une autre variante. (…)

En ce qui me concerne, je recommanderai d’utiliser HTML 5 dès lors que cela ajoute du sens, en revenant peut-être à du HTML 4 si vous pouvez détecter que le navigateur ne supporte pas les éléments HTML 5 que vous utilisez. Bien que cela ne constitue pas un avantage pour votre contenu dans nos résultats de recherche, cela ne devrait pas vous desservir non plus.

Google Webmaster Central: Does semantic html5 matter to google yet

Les moteurs tiendront compte d’HTML 5 lorsque celui-ci sera devenu courant et ils semblent encourager son expérimentation :

Notre stratégie globale est d’attendre de voir comment, en pratique, le contenu est balisé sur le web, avant de s’y adapter. Si nous découvrons de plus en plus de contenus qui utilisent HTML 5, que ce balisage apporte plus d’information, et que cela ne pose pas de problème si les webmasters l’utilisent mal (ce qui arrive toujours au début), alors nous tenterons de l’ajouter à nos algorithmes.

HTML 5 est encore en cours d’élaboration, donc c’est génial de voir des sites à la pointe de la technologie qui mettent en oeuvre ses nouvelles possibilités

Google Webmaster Central: How well does Googlebot deal with non-standard tags?

Le conseil du Docteur est donc de suivre les consignes bien établies par Google : écrire du code HTML valide, compatible, accessible, ne pas détourner le balisage ou essayer de tricher avec CSS, faire un site avec une structure claire et des liens texte, et écrire du bon contenu :

Concevez un site utile et riche en informations et rédigez des pages présentant votre contenu de façon claire et pertinente.

Consignes aux webmasters

Bonne année. Et que vos bonnets restent blancs.

J’aime la syntaxe xhtml, c’est avec cela que j’ai appris. Je suis habitué au code en minuscules, aux attributs entre guillemets et aux barres obliques à la fin des éléments comme br et img. Ils me rendent bien confortable, comme une tasse de Ovaline et le film The Evil Dead à la télé.

Ce n’est peut-être pas le cas pour vous. Peut-être que vous désirez des MAJUSCULES CRIANTES pour les balises, pas de barres obliques à la fin des éléments[en], et des attributs minimisés [en].

À cause du principe « pave the cowpaths » [en] (suivre le chemin laissé par les vaches), c’est votre choix. Comme vous le voulez, peu importe, à vous de choisir.

Mais ne laissez personne vous dire que le HTML 5 tue le XML – voici maintenant XHTML 5.

XHTML 5 est la sérialisation XML de HTML 5 et, comme vous le verrez, il possède des règles d’analyse syntaxique plus rigoureuses que vous pourriez peut-être vous y attendre (particulièrement si vous êtes habitués aux DOCTYPE XHTML). Il doit être envoyé par le serveur avec un type MIME XML comme application/xml ou application/xhtml+xml (donc, pas de rendu dans Internet Explorer pour le moment, en tout cas pas avant la version 9) et ne fonctionnera pas du tout dès qu’une erreur de mauvaise rédaction (well formedness) est rencontrée. (Voir Serving XHTML with the Right MIME Type [en] pour plus d’information).

Les règles usuelles pour le XML s’appliquent : aucun document.write n’est admis, le DOCTYPE n’est pas nécessaire, quelques différences de syntaxe et de scripting pour dérouter les non-initiés et vous pouvez utiliser les espaces de noms.

Les différences les plus importantes sont résumées sur le wiki officiel du WHATWG : Differences Between HTML and XHTML. (en anglais). Il est possible aussi d’écrire des documents polyglottes [en] qui peuvent être traités comme XHTML ou HTML dépendamment du type MIME utilisé.

Magne a envoyé un courriel au Docteur qui demandait « Est-ce OK d’utiliser les balises HTML5 sur une page avec le DOCTYPE XHTML 1.1 ? Lequel devrais-je utiliser, qu’est-ce qui est recommandé présentement ? »

Si vous voulez utiliser les nouvelles fonctionnalités, vous devez utiliser le DOCTYPE de HTML 5 ou XHTML 5. Étant donnée que Internet Explorer ne traite pas le XHTML, pour des raisons pragmatiques, le Docteur conseille d’utiliser HTML 5.

Selon la spécification

L’élément <footer> représente le pied de page pour son ancêtre le plus près qui définit une section ou pour l’élément racine. Typiquement, <footer> contient de l’information sur sa section, comme son auteur, des liens vers des documents reliés, les données sur les droits d’auteur et ainsi de suite.

Note: ceci est une traduction libre de la spécification HTML5. Vous pouvez vous référer à la version originale en anglais ou attendre qu’une version officielle en français soit disponible.

Allons-y

Avant de disséquer ce nouvel élément, nous devons mettre en place les prémisses de cet article. Comme nous l’avons déjà mentionné, la plupart des développeurs auraient organisé le pied de page de cette manière.

<div id="pied-de-page">
  <ul>
     <li>droits d’auteur</li>
     <li>carte du site</li>
     <li>contactez-nous</li>
     <li>retour au début de la page</li>
  </ul>
<div>

Nous pouvons le faire autrement en HTML5. Vous vous rappelez sûrement qu’il n’est plus nécessaire d’utiliser <div> dans bien des cas en HTML5. Pour notre exemple, lorsque nous référons à un pied de page, un balisage correct utilise <footer>.

<footer>
  <ul>
     <li>droits d’auteur</li>
     <li>carte du site</li>
     <li>contactez-nous</li>
     <li>retour au début de la page</li>
  </ul>
</footer>

Auparavant, nous utilisions un seul pied de page par document. Avec l’ajout de l’élément <footer>, nous pouvons réutiliser ce concept pour chaque section ou article d’un document. Nous pouvons donc afficher de l’information supplémentaire reliée à ceux-ci de façon plus sémantique.

Utiliser l’élément <footer>

Vous pouvez utiliser de cette manière, et ce plus d’une fois par page :

Section

<section>
   Le contenu de la section apparaît ici.
   <footer>
   L’information du pied de page pour cette section.
   </footer>
</section>

Article

<article>
   Le contenu de l’article apparaît ici.
   <footer>
   L’information du pied de page pour cet article.
   </footer>
</article>

Si vous voulez voir un bon exemple de <footer>, vous pouvez regarder le code source de cet article. À la fin de celui-ci, vous remarquerez une section de texte gris, juste en dessous de la section « pour en savoir plus ». Cette section vous donnera de l’information sur les rétroliens, les commentaires, les catégories et les « tags ». Elle utilise l’élément <footer>.

Pied de page

Pour l’utilisation de <footer> comme pied de page traditionnel, regardez le premier exemple de son utilisation ci-haut.

Modèle de contenu

Le modèle de contenu de <footer> accepte aussi les éléments créant des sections comme <header> et <nav>. En fait, <footer> fonctionne pratiquement de la même manière que <header>. Il est important de noter que <footer> lui-même n’introduit pas une nouvelle section.

D’autres observations

J’ai été initialement surpris du nom très « présentation » de l’élément ; mon utilisation du pied de page ici n’est pas à la fin de la page, ni même à la fin de l’article, mais elle semble correspondre à la définition de l’élément – c’est de l’information sur sa section, qui contient le nom de l’auteur, des liens vers des documents reliés (les commentaires) et ainsi de suite. Il n’y a pas de raison de penser que vous ne pouvez pas avoir plus d’un élément <footer> par page ; la description de l’élément dans la spécification dit « l’élément <footer> représente un pied-de-page pour la section à laquelle il fait référence » et vous pouvez avoir plusieurs sections dans une page. La spécification dit aussi « Les pieds de page ne doivent pas nécessairement apparaître à la fin d’une section, mais vont généralement l’être »

Bruce Lawson – http://www.brucelawson.co.uk/2009/marking-up-a-blog-with-html-5-part-2/

En conclusion

L’élément <footer> nous donne la chance de mieux définir les pages Web et de leur donner le balisage sémantique qu’elles méritent. Il est toutefois vital de bien utiliser les nouveaux éléments pour ce pourquoi ils ont été créés. Il ne faut pas faire les mêmes erreurs que nous avons déjà faites avec les <table> et les <div>.

Pour en savoir plus

• Liens vers l’article L’élément footer en anglais
• Liens vers l’article Mise à jour : Élément footer en anglais
• http://www.whatwg.org/specs/web-apps/current-work/#the-footer-element (en anglais)

Les navigateurs de premier rang (A-grade) [en], comprenant IE 8 et les versions antérieures, Firefox 2 et Camino 1 (ces deux derniers navigateurs utilisent le moteur de rendu Gecko, ce qui explique pourquoi ils sont touts les deux affectés).

Débutons avec Internet Explorer.

IE ne reconnaît pas les éléments HTML 5

IE ne voit ni les éléments HTML 5 ni les styles.

En fait, c’est la même situation que nous avions avant HTML 5, lorsque l’élément <abbr> ne pouvait pas être stylé dans IE 6, ouvrant la porte vers toutes sortes [en] de solutions de contournement [en]. (Pendant que nous y sommes, nous allons aussi régler le problème de l’élément <abbr> en apprenant à IE à reconnaître les éléments HTML 5).

La solution

Il y a de l’espoir! La solution, découverte par Sjoerd Visscher [en] est de tout simplement créer le nouvel élément en utilisant du JavaScript et voilà [en français dans le texte], IE est capable de le styler :

document.createElement('header');

John Resig a aussi écrit sur cette particularité du HTML [en].

Par exemple, vous souhaitez rendre l’élément <time> en italiques :

<!DOCTYPE html>
<html>
<head>
  <title>Header test</title>
  <style>
  time { font-style: italic; }
  </style>
</head>
<body>
  <time datetime="2009-09-13">my birthday</time>
</body>
</html>

Cette capture d’écran montre le rendu dans IE avant d’appliquer la solution :

On applique la solution en ajoutant la ligne de code indiquée :

<!DOCTYPE html>
<html>
<head>
  <title>Header test</title>
  <style>
  time { font-style: italic; }
  </style>

  <!-- Ajouter cette ligne -->
  <script>document.createElement('time');</script>
</head>
<body>
  <time datetime="2009-09-13">my birthday</time>
</body>
</html>

Et après avoir appliqué cette solution, le style est correct dans IE:

Un coup, une solution

Pour simplifier la vie de tout le monde, j’ai écrit un fichier JavaScript qui peut être inclus pour créer tous les éléments de HTML 5 (et l’élément <abbr>) pour IE.

Télécharger le script pour activer HTML 5 dans IE

Ajoutez le script dans votre balise <head> et vous serez en mesure de styler correctement les éléments dans IE:

<!--[if lte IE 8]>
<script src="html5.js" type="text/javascript"></script>
<![endif]-->

J’ai utilisé une condition pour que la solution ne s’applique qu’à IE 8 et aux versions antérieures. J’espère que les éléments HTML 5 seront supportés dans IE 9 et les versions subséquentes, lorsque ce jour arrivera, vous devrez quand même vous assurer de valider la condition!

Conditions & pièges

Soyez conscient des détails suivants lors de l’utilisation de cette solution HTML5.

JavaScript requis

Évidemment, cette solution signifie que votre mise en page dépend du Javascript. Personnellement, je constate que si vous avez utilisé un balisage sémantique sur votre site et que les éléments ne peuvent être stylés, le contenu est encore complètement lisible.

Voici une capture d’écran du site Full Frontal [en] balisé avec des éléments HTML 5, et rendu dans IE sans Javascript:

Vous voyez dans la seconde capture que le contenu n’est pas parfait, mais qu’il est toujours lisible. La cascade se fait correctement, un peu comme si le CSS était désactivé.

C’est toujours bon d’utiliser sa tête

Si vous créez le nouvel élément et n’utilisez pas une balise <body> tag (ce qui est tout à fait valide en HTML 5), IE va insérer les éléments créés dans une balise <head>. Un peu étrange, mais vous pouvez aisément éviter ce problème en utilisant les balises <head> et <body> dans votre code. Leif Halvard explique plus avec quelques démonstrations [en].

Un bogue de rendu avec Firefox 2 et Camino 1

Il y a un bogue dans l’engin de rendu Gecko (précisément les versions avant 1.9b5) qui affecte Firefox 2 et Camino:

Firefox 2 (et tout autre navigateur basé sur Gecko avec une version antérieure à 1.9b5) ont un problème lors de l’affichage (parsing). Tout élément inconnu sera fermé lorsqu’il rencontrera le début d’un élément de type « bloc » : p, h1, div et ainsi de suite.

Selon les statistiques de W3 Schools [en], Firefox 2 possède environ 3% du marché – peut-être est-ce si peu qu’on peut l’ignorer. Il est raisonnable de supposer que Camino 1 a encore une part de marché plus petite.

Toutefois, si on ignore ce problème, un site peut être « cassé » dans ces navigateurs. Comment peut-on régler ce problème?

Le problème fait surface lorsque Gecko ne reconnaît pas un élément. En gros, Gecko lit un élément et ne le reconnaît pas, il enlève le contenu de l’élément et l’affiche à côté de ce dernier.

Pour l’exemple, considérez le code suivant :

<body>
  <header><h1>Titre</h1></header>
  <article><p>...</p></article>
</body>

Gecko (version antérieure à 1.9b5) l’interprétera comme si le balisage était comme suit :

<body>
  <header></header>
  <h1>Titre</h1>
  <article></article>
  <p>...</p>
</body>

Le résultat visuel est similaire à celui de la capture d’écran de IE sans JavaScript (avec quelques différences subtiles puisque l’arbre du DOM et en fait dans un ordre différent auquel vous et l’auteur vous attendez).

La solution

Il y a deux approches pour régler ce problème, et, jusqu’à présent, je n’en ai utilisé avec succès que l’approche sans JavaScript.

La solution JavaScript

La première méthode est d’utiliser JavaScript pour traverser le DOM et de réarranger les éléments au fur et à mesure qu’un problème surgit. Simon Pieters a un petit exemple fonctionnel [en] sur la méthode à suivre (vers le bas de la page). Toutefois, personnellement je n’ai jamais réussi à le faire fonctionner dans mon code. Il n’y a aucun doute que ce problème puisse être réglé avec du JavaScript, mais cette solution doit être peaufinée pour gérer toutes les permutations de balisage.

La solution XHTML

La seconde approche est de servir du XHTML à Gecko. Cette méthode m’a semblé plus simple lorsqu’on génère une page dynamiquement (avec du PHP par exemple) où vous pouvez aussi créer votre propre fichier .htaccess pour utiliser le mod_rewrite d’Apache.

Le premier changement à faire dans votre balisage est d’ajouter l’attribut xmlns à votre balise <html>:

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

Ensuite, nous devons aller chercher la chaîne indiquant le navigateur (typiquement, cette approche n’est pas bonne, mais elle est justifiée lorsqu’on cherche à viser un groupe d’usagers spécifique). Si la version de Gecko est antérieure à 1.9, la valeur de l’en-tête Content-type doit être application/xhtml+xml.

Si vous souhaitez utiliser mod_rewrite dans un fichier .htaccess (ou dans le fichier httpd.conf), vous devez suivre les règles suivantes :

RewriteCond %{REQUEST_URI} .html$
RewriteCond %{HTTP_USER_AGENT} rv:1.(([1-8]|9pre|9a|9b[0-4]).[0-9.]+).*Gecko
RewriteRule .* - [T=application/xhtml+xml]

Cette règle envoie le bon en-tête Content-type à tout les navigateurs basés sur Gecko ayant une version antérieure à 1.9 ou « rv:1.9pre » ou « rv:1.9a » ou « rv:1.9bx » quand x est inférieur 5.

Si vous ne voulez pas utiliser l’approche mod_rewrite, vous devez envoyer les en-têtes manuellement dans vos scripts de serveurs. Voici une solution PHP :

if (preg_match('/rv:1.(([1-8]|9pre|9a|9b[0-4]).[0-9.]+).*Gecko/', $_SERVER['HTTP_USER_AGENT'])) {
  header('Content-type: application/xhtml+xml');
}

Cet extrait de code doit être inséré avant l’impression de n’importe quel contenu par votre script — c’est à dire dès que possible.

Piège: L’écran jaune de la mort (Yellow Screen of Death)

L’écran jaune de la mort surgit dès qu’il y a une erreur XML sur la page. Lorsque vous servez votre contenu comme du XML et demandez au navigateur de l’interpréter strictement comme du XML, le navigateur ne peut servir de caractère qu’il ne reconnaît pas, sinon il devient fou:

Ci-dessous, quelques exemples pour éviter les erreurs d’interprétation XML.

Soyez strictes dans votre balisage

Vous devez vous assurer que votre balisage est impeccable — facille, puisque vous êtes déjà un Jedi du balisage, n’est-ce pas?

Servez-vous des entités XML

Il faut éviter à tout prix les entités HTML. Désolé, mais • ne fonctionnera plus. Il faut utiliser les entités XML, c’est-à-dire la représentation numérique des caractères.

J’ai développé un outil pour chercher les entités [en] qui affiche l’entité HTML et la valeur XMLde cette entité. Par exemple, la valeur de • est 8226, donc l’entité XML est •.

Nettoyez le contenu généré par les usagers

S’il y a du contenu généré par les usagers sur votre site (par exemple, des commentaires sur un blogue), vous devez nettoyer le contenu généré par les usagers pour vous assurer qu’aucun problème de validation ne lance l’écran jaune de la mort.

Ce problème justifie l’utilisation de la solution JavaScript à lui seul.

Est-ce que ça vaut la peine?

Ceci dit, Firefox a un excellent programme de mise à jour. En regardant les statistiques sur le site de W3Schools [en], on peut présumer que le nombre d’usagers de Gecko diminue rapidement.

Pour en savoir plus :

• Lien vers l’article original en anglais
• Problème de rendu de Firefox 2 sur le blogue du WHATWG[en]
• IE / problématique de la balise head manquante pour IE[en]
• HTML 5 shiv[en]
• Script rendant possible HTML 5[en]

Premièrement, regardons comment la spécification HTML5 défini la balise <aside>.

Note : Ceci est une traduction libre de la spécification. Référez-vous à l’original en anglais ou à la traduction officielle lorsqu’elle sera disponible.

« L’élément aside représente une section de la page qui renferme du contenu qui est tangentiellement relatif au contenu autour de l’élément aside, et qui peut être considéré comme étant séparé de ce contenu. Ces sections sont souvent représentées par des encadrés en imprimerie. »

Le contenu de la balise <aside> doit pouvoir exister par elle-même et être relative à son contexte dans la page (généralement un article). Si votre contenu respecte cette définition, vous aurez un élément de plus pour renforcer la sémantique de la structure de votre document et pour y appliquer des règles CSS.

Nous pouvons en fait utiliser <aside> dans deux contextes, le premier est un article et le second le site Web lui-même, il est donc crucial d’y bien faire attention. Quand <aside> est à l’intérieur de la balise <article>, le contenu doit être relié à l’article (glossaire, des citations de l’article, liens relatifs à celui-ci). Lorsqu’utilisé en dehors d’une balise <article>, le contenu de <aside> doit être relié au site dans son ensemble (liste de liens préférés du blogue, navigation additionnelle, et même de la publicité si elle est reliée à la page).

Voici quelques exemples : le premier démontre l’utilisation de <aside> dans les deux contextes et les suivants portent sur l’utilisation de <aside> à l’intérieur d’une balise <article> :

<body>
  <header>
    <h1>Mon Blogue</h1>
  </header>
  <article>
    <h1>Mon billet de mon blogue</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <aside>
      <!—Vu que ce aside est à l’intérieur de la balise article, l’analyseur syntaxique va comprendre que le contenu de la balise est directement relié à l’article lui-même. -->
      <h1>Glossaire</h1>
      <dl>
        <dt>Lorem</dt>
        <dd>ipsum dolor sit amet</dd>
      </dl>
    </aside>
  </article>
  <aside>
    <!—Ce aside est en dehors de la balise article. Son contenu est relié à la page, mais pas autant que la balise aside à l’intérieur de la balise article. -->
    <h2>Mes liens préférés</h2>
    <ul>
      <li><a href="#">Mon ami</a></li>
      <li><a href="#">Mon autre ami</a></li>
      <li><a href="#">Mon meilleur ami</a></li>
    </ul>
  </aside>
</body>

Comme il est suggéré dans la spécification, une citation prise de l’article est un excellent exemple de contenu qui est séparé du corps de l’article, mais qui y est encore relié.

<article>
    <header>
        <h1>Lorem Ipsum Dolor Sit Amets</h1>
    </header>
    <p>Aliquam erat volutpat. Vestibulum eleifend pellentesque urna, at
    sodales est faucibus sit amet. Praesent in mi dui. <q>Aliquam sed
    bibendum nisl. Mauris pharetra enim sit amet ipsum dictum placerat. Sed
    lacinia pulvinar iaculis. Nam sit amet hendrerit purus.</q> Sed a urna
    laoreet lorem pulvinar fermentum. Aenean vel luctus libero. Ut tincidunt
    metus sagittis ante viverra feugiat.</p>
    <aside>
        <q>Mauris pharetra enim sit amet ipsum dictum placerat.</q>
    </aside>
    <p>Nulla quis lacus non quam luctus vestibulum. Pellentesque imperdiet
    risus gravida ante consectetur fermentum. Vivamus et est nec risus volutpat
    elementum. Ut faucibus, lectus consectetur volutpat dapibus, quam diam
    luctus enim, vitae mollis enim purus non ante.</p>
</article>

Sur une page Web comprenant un style CSS, ou plus couramment, dans l’imprimé, cet élément serait représenté visuellement dans un encadré sur le côté de l’article. Cet <aside> est relié à l’article, mais n’a pas besoin de faire proprement partie de l’article pour être compris par le lecteur.

Voici un autre exemple représentant un glossaire de la terminologie utilisée dans un article.

<article>
    <header>
        <h1>Technologies Web</h1>
    </header>
    <p>Curabitur dignissim lorem a CSS diam posuere tempor. Nam hendrerit,
    eros vel condimentum tempor, ipsum justo cursus justo, quis vestibulum
    turpis turpis sit amet tellus. Quisque quis PHP magna eget ipsum faucibus
    bibendum at non diam. Sed sapien est, cursus ac ullamcorper id, egestas vel
    urna JavaScript. Nullam aliquam dolor vitae quam pharetra auctor.</p>
    <aside>
        <dl>
            <dt>CSS</dt>
            <dd>Un ensemble de standards pour définir la présentation de document sur le World Wide.</dd>
            <dt>PHP</dt>
            <dd>Un langage de scripting côté serveur utilisé pour créer des documents HTML dynamiques pour le.</dd>
            <dt>JavaScript</dt>
            <dd>Un langage de scripting côté client utilisé pour manipuler les documents <abbr>HTML</abbr> à l’intérieur d’un navigateur.</dd>
        </dl>
    </aside>
</article>

Utilisation incorrecte de <aside>

Attention à la publicité, si celle-ci n’est pas reliée à l’article ou la page, elle ne doit pas être dans un <aside> peut être très utile pour améliorer la sémantique de la structure d’un document HTML. Elle peut être utiliser pour faire ressortir certaines parties d’un article ou ajouter de l’information complémentaire. Le contenu de <aside> doit pouvoir exister par lui-même et ne pas être essentiel à l’article ou la page qui y est associée.

La balise <aside> peut inclure du contenu secondaire à la page et au site, en plus du contenu secondaire à un article. Il est important de se rappeler que <aside> ne veut pas nécessairement dire colonne de droite. La présentation de la balise ne doit pas dicter son utilisation. Pour le contenu qui est secondaire, mais quand même relié à l’article (ou la page), aside est ce dont vous avez besoin, peu importe sa présentation visuelle.

HTML5 offre plusieurs nouvelles balises sémantiques qui vous aideront à mieux structurer vos documents HTML, utilisez-les avec sagesse.

Pour en savoir plus :

• Liens vers l’article Comprendre Aside en anglais
• Liens vers l’article Aside revisité en anglais

Pour l’instant, cette balise ne sera fonctionnelle que sur les dernières versions des navigateurs, soit Safari 3.1 et plus, Firefox 3.5 et plus, Opera 10 et plus et bien sûr Google Chrome.

La vieille façon

Regardez ce bout de code horrible :

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" />
<param name="allowfullscreen" value="true" />
<embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true">
</embed>
</object>

Affreux. Et comme vous le savez sûrement, vous aurez besoin du plugiciel Flash pour exécuter le tout. Dans plusieurs cas, le code sera généré par du javascript. C’est loin d’être idéal.

La façon HTML5

Du code propre et minimal :

<video width="640"  height="360" src="http://www.youtube.com/demo/google_main.mp4"  controls autobuffer>
<p> Essayez cette page avec Safari 4 ! Ou vous pouvez  <a  href="http://www.youtube.com/demo/google_main.mp4">télécharger le vidéo</a> à la place.</p>
</video>

Autoplay

La balise <video> possède un attribut qui vous permet d’activer le vidéo dès que la page est téléchargée.

<video src="abc.mov" autoplay>
</video>

Toutefois, est-ce que autoplay est une mauvaise pratique ? Les sites du type de Youtube commencent à faire jouer leurs vidéos dès que la page est téléchargée. Vous devriez toutefois bien peser le pour et le contre d’une telle pratique, car elle peut fortement incommoder des utilisateurs.

Téléchargement

Si le navigateur ne reconnaît pas la balise video, ou s’il y a une erreur d’affichage, vous pouvez offrir à l’utilisateur de télécharger le film.

Autobuffer

L’attribut autobuffer est utilisé lorsque autoplay ne l’est pas et lorsque l’auteur de la page pense que la vidéo sera regardée après le téléchargement. Avec cet attribut activé, le téléchargement du film se fera en arrière-plan. Lorsque l’utilisateur la regardera, celui-ci sera en partie téléchargé, et une bonne partie du vidéo pourra être visionné sans attente. Si les attributs autoplay et autobuffer sont tous les deux spécifiés, autobuffer sera ignoré.

Il est important de noter que présentement les navigateurs téléchargent automatiquement les vidéos, avec ou sans autobuffer et qu’on ne peut pas changer ce comportement. Ceci a un impact sur la bande passante utilisée par votre site Web, particulièrement si vous avez plusieurs vidéos sur une même page.

Poster

L’attribut poster sert à afficher une image du vidéo (en format jpg, png ou autre) si le vidéo ne se charge pas pour une raison ou une autre. Cette image peut être locale au serveur accédé ou peut provenir d’ailleurs sur le Web.

<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp" autobuffer controls poster="whale.png">
<p>Essayez cette page avec Safari 4 ou vous pouvez <a href="http://www.youtube.com/demo/google_main.mp4">téléchargez le vidéo</a>.</p>
</video>

Vous devriez utiliser l’attribut poster pour s’assurer que l’internaute ne tombe pas sur une page blanche.

Controls

En ajoutant cet attribut, vous pourrez fournir vous même les boutons de commande (Jouer, Pause, etc.) pour votre vidéo. Par exemple, Safari possède des boutons de base très bien, mais vous pourrez créer les vôtres pour personnaliser votre site Web.

Sous-titres

Il n’y a malheureusement pas encore d’attributs pour les sous-titres. Il y a beaucoup de discussions à ce sujet dans le groupe HTML5. Il existe un moyen d’ajouter des sous-titres avec du javascript. Idéalement, nous ne devrions pas avoir besoin de script pour y arriver.

Problématiques

Codecs

Je ne suis pas un expert en codecs vidéo et audio, mais il subsiste encore quelques problèmes à ce sujet.

Internet Explorer

Internet Explorer ne supporte pas présentement la balise <video> et nous devrons trouver une solution à ce problème important. Heureusement, les docteurs HTML5 ont quelques astuces qui seront présentées dans un articles bientôt ! (Mise à jour : Internet Explorer 9 semble supporter la balise. C’est une très bonne nouvelle.)

Fichier physique

Jusqu’à maintenant, la balise <video> doit inclure un lien vers un fichier physique (comme dans l’exemple au début de l’article). Ce que nous avons souvent besoin est d’importer un vidéo d’un autre site, comme Youtube, et ce, de la même manière que nous le faisons actuellement avec les balises <object> et <embed>.

Quand j’ai commencé à écrire cet article, je voulais vous faire rigoler avec une vidéo de Rick Asley comme si nous étions en 2008, mais je n’ai pas encore trouvé le moyen de le faire avec une balise <video>.

Voici ce que je pense que nous devrions pouvoir faire avec une balise <video> :

<video src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" autoplay>
</video>

Ce serait génial non ?

En conclusion

Nous sommes encore loin de pouvoir utiliser intégralement la balise video, mais celle-ci a vraiment beaucoup de potentiel. La problématique des codecs est réelle et risque de durer longtemps, mais vous pourrez toujours utiliser le lien vers la vidéo en mode alternatif. Vous pouvez aussi utiliser une combinaison des balise video, object et embed. Toutefois, ce code est plutôt horrible à maintenir :

<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" autobuffer controls poster="whale.png">
<object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640"height="360" codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param value="http://www.youtube.com/demo/google_main.mp4">
<param value="true">
<param value="false">
<embed src="http://www.youtube.com/demo/google_main.mp4" width="640"height="360" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/">
</embed>
</object>
</video>

En attendant

Si vous ne voulez pas utiliser tout de suite la balise <video>, vous pouvez toujours utiliser du code XHTML valide pour afficher une vidéo :

<object width="460" height="265" data="http://vimeo.com/moogaloop.swf?clip_id=5072163" type="application/x-shockwave-flash">
<param value="http://vimeo.com/moogaloop.swf?clip_id=5072163"></param>
<param name="allowFullScreen" value="true"></param>
<param value="always"></param>
</object>

Pour en savoir plus :

• Lien vers l’article original en anglais
• Editor’s Draft 17 June 2009
• Accessibility of HTML 5 video and audio elements
• Setting up a HTML 5 on-line video site
• Watch Video…without Flash
• YouTube HTML 5 demo
• Using the HTML 5 video tag with a Flash fallback
• Lessons From Building a Basic Video Player in HTML 5
• Autoplay is bad for all users

Liens en français :

À venir

Nous sommes habitués de voir ceci

<div id="header">

ou encore en français

<div id="entete">

à l’intérieur du code source de plusieurs sites sur lesquels nous naviguons. Avec le HTML5, cette syntaxe n’est plus nécessaire. Nous pouvons en même temps ajouter un peu de valeur sémantique à la structure du document en utilisant la balise <header>

Mais qu’est-ce que cette balise représente ?

Selon la spécification HTML5, l’élément header représente :

Un groupe d’aide de navigation ou d’introduction. Un élément header contient de façon générale les headings (les éléments h1 à h6 ou l’élément hgroup). Il peut aussi contenir d’autres éléments, comme une table des matières, un formulaire de recherche, ou des logos.

(Note : le paragraphe précédent est une traduction libre de la spécification, référez-vous à la spécification elle-même pour le texte original).

Il est important de noter que l’élément header ne spécifie pas le début d’une nouvelle section du document, mais qu’il est l’en-tête d’une section. Cette balise ne doit pas être confondue avec la balise head.

À quel endroit doit-on utiliser la balise <header> ?

L’endroit le plus évident est au début d’une page. Nous pouvons commencer par y inclure le titre le plus important sur votre page.

<header>
<h1>Le titre le plus important de la page</h1>
</header>

Il est important de noter que vous pouvez avoir plus d’une balise header par page. Vous pouvez utiliser une balise header par section de le page. Par exemple :

<header>
<h1>Le titre le plus important de la page</h1>
</header>

<article>
<header>
    <h1>Titre de cet article</h1>
</header>
    <p>...Lorem Ipsum dolor set amet...</p>
</article>

Notez la présence de deux <h1> à l’intérieur de ce bout de code HTML. Ceci est parfaitement valide en HTML5 (et d’ailleurs aussi en HTML 4), mais causera des problèmes en accessibilité. Vous devez être conscient de cette problématique, particulièrement si vous avez plusieurs articles sur une page. Nous couvrirons cette problématique plus en détail lors d’un prochain billet.

Ce qui est requis dans la balise header.

Nous savons maintenant que nous pouvons avoir plusieurs fois la balise header dans un document. Toutefois, est-ce qu’il existe d’autres requis pour que l’utilisation de cette balise soit valide ?

En fait, une balise <header> contient en général au moins (mais il n’y a pas de restrictions) une balise de titre (heading) (<h1> à <h6>). Vous pouvez aussi y inclure la balise <hgroup>. Nous allons discuter de cette balise dans un autre billet. (En lire plus sur la balise <hgroup> dans la spécification HTML 5 [en]). L’élément peut aussi contenir d’autres éléments à l’intérieur du flux du document comme une table des matières, des logos ou un formulaire de recherche. Nous pouvons aussi y inclure de la navigation avec l’élément <nav>.

Ajouter du style à <header>

Un dernier point important : pour que la plupart des navigateurs effectuent le rendu de cet élément comme étant un élément de type niveau block (block level element), vous devez le spécifier à l’intérieur d’une règle CSS.

header { display:block;}

En fait, vous aurez à faire ceci pour la plupart des nouveaux éléments de type block en HTML. Les nouvelles versions des navigateurs devraient supporter nativement ces éléments bientôt. En attendant, suivez ce qui a été implémenté dans les moteurs de rendu sur ce wiki[en].

En conclusion

La balise header nous donne la possibilité de structurer nos documents avec une meilleure sémantique pour les en-têtes de sections ou de pages.

Pour approfondir :

• Lien vers l’article original en anglais
• La spécification HTML 5 – l’élément header (en anglais)
• Les nouveaux éléments dans HTML 5 (en français chez alsacréations)

Note de la traduction : J’utilise de façon interchangeable les mots balise et élément dans le texte. Dans le contexte du billet, ils vont signifier la même chose. Si je voulais être plus puriste, je dirais que l’élément est la représentation mémoire dans le DOM, et que la balise est la représentation textuelle dans le html (avec les < >).