HTML5 : Où en est-on ?

Si vous vous intéressez au développement web ou que vous suivez un peu les normes dans ce domaine, vous avez sûrement entendu parler de HTML5. Ce langage, développé en parallèle par W3C et WHATWG, est la prochaine mouture du langage le plus utilise sur le net.

Structure HTML5

Ce nouveau langage apportera beaucoup de nouvelles balises qui permettrons, par exemple, d’avoir des pages plus structurés :

<!-- HTML4 -->
<div id="header"></div>
<div class="article"></div>
<!-- HTML5 -->
<header></header>
<article></article>

Apparaitrons aussi pas mal d’attributs comme l’autofocus (qui permet de placer le curseur dans un champ à l’affichage d’une page) ou reversed (booléen qui permet d’afficher les numéro d’une liste ordonnée dans l’ordre décroissant):

<!--- xHTML1.0 -->
<input type="text" name="mail" id="mail"/>
<ol>
  <li>Premier</li>
  <li>Deuxième</li>
  <li>Troisième</li>
</ol>
<!-- xHTML5 -->
<input type="email" name="mail" autofocus="true"/>
<ol reversed="true">
  <li>Troisième</li>
  <li>Deuxième</li>
  <li>Premier</li>
</ol>


Pour quand ?

Tout d’abord il est important de préciser que le début de l’utilisation du HTML5 ne dépend que de vous. C’est vous, les développeurs web, qui décidez si vous utilisez HTML5 ou non.

Ensuite, les navigateurs doivent être capable de réagir à vos balises. Ils commencent à s’y mettre mais il leur faut du temps pour tout implémenter. La fin des spécifications du langage est prévu pour 2010 et certains pensent déjà qu’il ne tiendra pas les délais.


Web Form 2.0

Le Web Form 2.0 est, à mon goût, la plus grande amélioration qu’apporte le HTML5. Il s’agit d’une nouvelle façon de voir les formulaires. Oubliez les lignes de Javascript que vous codiez pour valider une adresse électronique, une URL ou une date de naissance en testant tous les formats possibles.

Laissez Web Form 2.0 valider vos champs grâce aux nouvelles valeurs de l’attribut type des balises input:

<?xml version="1.0" encoding="UTF-8"?>
<form action="send.php" method="post">
  Nom <input type="text" name="nom"/><br/>
  @mail <input type="email" name="email"/><br/>
  Age <input type="number" name="age"/><br/>
  Téléphone <input type="tel" name="telephone"/><br/>
  <input type="submit" value="valider"/>
</form>

Vous avez ci-dessus quelques exemples d’input du xHTML5, il existe en réalité bien plus de possibilités.


Doctypes

Il existe 2 DOCTYPEs différents : HTML5 et xHTML5. Ils sont tous les deux très simples car ce n’est pas le DOCTYPE qui défini comment lire une page. Les navigateurs exécutes les balises sans faire attention au type du document, et ainsi, des balises abandonnées depuis longtemps seront toujours exécuté sur des pages web récentes.

HTML5

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html

xHTML5

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  </head>
  <body>
  </body>
</html>


Quelques exemples

Balise code

La balise code représente un fragment de code source : voyez donc.

Balise dfn

Cette balise indique la définition d’un mot ou d’un acronyme. Elle n’apparait qu’un fois par page pour un terme donné : voyez donc.

Balise dialog

Cette balise correspond à un vrai dialogue, une conversation : lisez la conversation.

Balise kbd

La balise kbd, qui correspond à une entrée clavier (KeyBoarD), présente une valeur entrée ou une combinaison de touches : voyez donc.

Balises q et cite

Les balise q (comme quote) et cite définissent un citation d’une autre source : voyez le résultat.

Balise section

Cette balise découpe une page web en plusieurs sections. Elle peut être utilisée pour présenter des chapitres d’un livre.

On peut retrouver une structure du genre h1h2hx dans chacune des balise section d’une même page.

Essayez les sections.

Attribut start de la balise ol

L’attribut start de la balise ol indique quelle sera la première valeur de la liste. Elle peut être positive ou négative. Regardez.

Un todo

Un petit todo pour terminer, il utilise les balises ins et del. Essayez.

Tagués avec : , , , , ,
Publié dans Général
3 commentaires pour “HTML5 : Où en est-on ?
  1. Daoud dit :

    Le problème c’est que beaucoup d’utilisateurs utilisent de vieux browser qui ne prennent pas en compte le HTML5. Mais cà on y peut rien… je trouve que c’est le seul frein à l’utilisation d’HTML5

  2. Bonjour,

    L’article est intéressant mais au niveau du référencement, coder en html 5 fait-il monter plus vite ou pas du tout ?

    Cordialement

  3. Olivier PEREZ dit :

    Bonjour,
    Pour répondre à ta question simplement, c’est non. Le HTML5 n’est qu’un format, pas une méthode de référencement.

    Cependant, je trouve que la réponse peut être approfondie. Le HTML5 apporte une nouvelle façon de formater les pages via les balises nav, section, etc.
    C’est du coup un format qui nous propose d’être plus structuré dans la conception d’une page, ce qui impactera positivement (bien si c’est fait proprement) le référencement.

    Toute fois, si tu en es à te poser cette question c’est sûrement que tu as déjà bien réfléchit sur le nom du site, sur le nom de domaine, sur le contenu, sur l’architecture du site, etc.
    Bref, ce n’est pas en jouant uniquement sur ce genre de petits détails que tu vas monter dans les classements.

Laisser un commentaire

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

*