HTML5, l’avenir du web

HTML5 mug
Copyright : slavik V

Dans le monde du web, une révolution se prépare avec le successeur de l’HTML 4.01 : HTML5. Ce langage est annoncé comme remède aux utilisations intempestives de Adobe Flash ou de Microsoft Silverlight. Quelles-en sont les différences ?

Simplication du doctype

Le W3C, de l’anglais World Wide Web Consortium, est un organisme à but non-lucratif dont le but est de promouvoir la compatibilité des technologies du web en émettant des recommandations sur les bonnes pratiques à respecter. Le doctype fait référence au langage et la version utilisée dans une page web.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

La ligne précédente signale au navigateur que c’est le langage XHTML qui est employé dans sa DTD (Doctype Definition) fixé par le W3C, qu’il s’agit de la version 1.0 du langage et que les balises sont indiquées en anglais (EN pour anglais). Cette phrase se place en tête de document avant le <html>.

En HTML5, le doctype est précisé en seulement 15 caractères.

<!DOCTYPE html>

De nouveaux éléments sémantiques

<section> représente la section d’un document générique ou d’une application. Une section dans ce contexte, est un regroupement thématique de contenu, généralement avec un titre. Par exemple, la page d’accueil d’un site web pourrait être divisée en sections avec une introduction, des nouvelles et des informations de contact.

<section>
  <h1>Contact W3C</h1>
  <ul>
    <li><a href="http://twitter.com/w3c">Twitter</a></li>
    <li><a href="http://identi.ca/w3c">Identi.ca</a></li>
  </ul>
</section>

<header> représente l’en-tête d’une section. L’élément header peut aussi être utilisé pour envelopper un formulaire de recherches, ou des logos pertinents.

<header>
  <h1>Mon Titre</h1>
  <p class="tagline">Mon Sous-Titre</p>
</header>

<time> représente soit une heure, soit une date précise dans le calendrier grégorien, éventuellement avec l’heure et le fuseau horaire.

<time datetime="2010-10-22">Vendredi dernier</time>

<article> représente un bout de contenu indépendant d’un document, tel qu’un article de forum, une entrée d’un blog ou un widget interactif.

<article>
  <header>
    <time datetime="2010-10-22">Vendredi dernier</time>
    <h1>Mon voyage</h1>
  </header>
  <p>Lorem ipsum dolor sit amet…</p>
</article>

<nav> représente une section du document à l’intention de la navigation.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">About</a></li>
  </ul>
</nav>

<aside> représente un bout de contenu qui n’a que très peu de rapport avec le reste de la page, et qui est séparé du contenu. Ces sections sont souvent représentées comme des encadrés dans la typographie imprimée.

<aside>
  <h1>Archives</h1>
  <ul>
    <li><a href="/archives/2010/09/">Septembre 2010</a></li>
    <li><a href="/archives/2010/10/">Octobre 2010</a></li>
  </ul>
</aside>

<footer> représente un pied de page pour une section. Il contient généralement des informations comme l’auteur, des liens vers des documents relatifs, les droits d’auteur, etc.

<footer>
  <p>§</p>
  <p><a href="#">One chapter a day</a></p>
</footer>

<mark> représente un passage de texte marqué ou mis en valeur à des fins de référence.

<blockquote lang="en-GB">
  <p>Look around and you will find, no-one's really <mark>colour</mark> blind.</p>
</blockquote>

<dialog> représente une conversation.

<dialog>
  <dt>Sam</dt>
  <dd>Knock, Knock.</dd>
  <dt>Eric</dt>
  <dd>Who's there ?</dd>
  <dt>Sam</dt>
  <dd>Justin.</dd>
  <dt>Eric</dt>
  <dd>Justin who ?</dd>
  <dt>Sam</dt>
  <dd>Justin time for dinner!</dd>
</dialog>

<audio /> et <video />

Jusqu’à récemment, inclure de l’audio ou de la vidéo dans des pages web donnait recours à l’utilisation des plugins Adobe Flash ou Microsoft Silverlight. Ceux-ci ont souvent fait l’objet de controverses quant à leur compatibilité au sein des différents navigateurs qui existent. HTML5 semble pallier à ce problème.

<audio> permet la lecture audio dans le navigateur. Cette balise est compatible avec la plupart des navigateurs – Firefox, Safari, Opera, Chrome, qui seront bientôt rejoints par Internet Explorer 9.

<audio src="elvis.ogg" controls preload="auto" autobuffer>
</audio>

<video> permet la lecture de vidéos dans le navigateur. Cette balise ne fonctionne que sur Safari 3.1 et plus, Firefox 3.5 et plus, et les dernières versions d’Opera.

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

Actuellement, les spécifications d’HTML5 définissent 5 attributs pour les balises <audio> et <video>. src fait référence à l’URL du fichier audio. autoplay est un booléen indiquant que le fichier sera lu dès que possible. loop indique si la lecture du fichier sera répétée. controls est un booléen qui définit si les contrôles du lecteur seront montrés. preload définit si le média chargera au lancement de la page ou non.

En bref

HTML5 est d’ores-et-déjà utilisable et promet d’être un langage de balisage très puissant. Il nous reste plus qu’à attendre que tous les navigateurs implémentent l’ensemble de ses capacités. Vous trouverez d’autres nouvelles balises ici.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.