Le buzz autour d’HTML 5 est de plus en plus fort de jour en jour. La plupart des principaux navigateurs ont déjà commencé à le soutenir, et de nombreuses entreprises l’ont déjà intégré dans leurs sites Web. Il est temps que vous aussi commenciez à explorer ses capacités.
Dans cet article, en trois parties, je vais vous présenter les principales caractéristiques et ses capacités par l’intermédiaire d’astuces et de techniques.
Petit rappel
HTML5 est un concept lancé par WHATWG (Web hypertext Application technology working group). Ce groupe a été créé en Juin 2004 après un désaccord au sein du groupe W3C en raison de l’écart dans les idées de certains membres de l’HTML au XHTML.
De plus beaucoup de gens haut placés de Mozilla, Google et Apple n’ont pas voulu quitter HTML comme norme, et partant de ça, ils ont formé le WHATWG.
HTML5 a commencé son développement en 2004 mais n’est pas encore sorti. Quelques navigateurs ont déjà commencé à le soutenir afin que vous puissiez jouer avec ses nouvelles fonctionnalités. HTML5 est sans doute un des mots les plus parlé et à la mode sur Internet aujourd’hui. Il prétend de changer la façon dont les applications Web sont développées en les rendant plus fortes.
L’industrie du développement évolue rapidement, très rapidement et si vous ne faites pas attention, le train sera parti sans que vous ne soyez monté dedans. C’est pourquoi, si vous vous sentez un peu dépassés par les futurs changements d’HTML5, voici les éléments que vous devez savoir pour débuter.
Tout le but de cet article et des deux suivants, est de vous aider à démarrer avec quelques directives de base et facile à suivre grâce aux modèles de code. Si vous êtes familiarisé avec les bases et que vous souhaitez prendre les choses au niveau suivant, vous trouverez également plusieurs ressources utiles fournissant plus de conseils, astuces et techniques.
Caractéristiques d’HTML 5
Le document officiel de spécification est le meilleur endroit pour rechercher des éléments d’HTML5. Mais vous pouvez aussi commencer de manière simple et facile à suivre HTML5 Tag Reference de W3Schools. Nous allons aborder les principales caractéristiques suivantes dans les trois parties de:
- Sémantique des éléments
- Améliorations des formulaires
- Audio / Video
- Canvas
- Drag and Drop
Vérifier le support de votre navigateur
Avant de commencer à expérimenter HTML5, vous avez besoin de connaître le niveau de compatibilité disponible pour les principaux navigateurs Internet. Ces ressources utiles vous aideront à garder une trace :
- When Can I Use
- Web Designers’ Browser Support Checklist
- HTML5 Test
- Démonstration par l’exemple de HTML5 et du support des navigateurs
Vous pouvez aussi garder un œil sur la constante évolution des parts du marché des navigateurs.
Nouveau Doctype
Arrivez-vous à mémoriser le doctype XHTML dans la création de vos sites ? ou bien utilisez-vous le « copier-coller » depuis un autre site ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
[/sourcecode]
Si non, pourquoi ne pas basculer vers le doctype d’HTML5 ? Cela vous éviterez de faire du « copier-coller » tout le temps…
<!DOCTYPE html>
[/sourcecode]
En fait, saviez-vous que ce n’est pas franchement nécessaire pour l’HTML5 ? Toutefois, il est utilisé pour les navigateurs les plus anciens qui nécessitent de préciser le doctype. Les navigateurs ne comprenant pas ce doctype vont tout simplement rendre le balisage du contenu en mode standard. Alors, sans soucis, n’hésitez pas a utiliser le doctype d’HTML5.
Suppression de l’attribut type pour les liens et les scripts
Vous devez ajouter l’attribut type pour déclarer votre lien (CSS, …) et l’élément script.
<link type="text/css" rel="stylesheet" href="style.css" />
<script type="text/javascript" src="script.js"></script>
[/sourcecode]
Avec HTML5, ce n’est plus nécessaire. Il est implicite que ces deux éléments font références respectivement à des feuilles de styles et de scripts. En tant que tel, on peut supprimer l’attribut type.
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
[/sourcecode]
En-tête et pied de page
Fini le temps de :
<div id="header">
…
</div>
<div id="footer">
…
</div>
[/sourcecode]
Les divs ci-dessus, par nature, n’ont pas de structure sémantique – même après qu’id est appliqué. Maintenant, avec HTML5, nous avons accès aux éléments header et footer. Ainsi le code ci-dessus peut être remplacé par :
la vue de touscopier dans le presse papierd’impression?
<header>
…
</header>
<footer>
…
</footer>
[/sourcecode]
Il est parfaitement approprié d’avoir de multiples en-tête et de pied de pages dans vos projets.
Il ne faut pas confondre ces éléments avec l’en-tête et pied de pages de votre site web. Les éléments header et footer vont se référer à leur conteneur.
Guillemets ? Fermeture des éléments ?
… Telle est la question… Rappelez-vous, qu’HTML5 n’est pas XHTML. Si vous ne souhaitez pas entourer vos attributs entre guillemets, où fermer vos éléments, libre à vous de le faire, la norme le permet. Cela dit, il n’y a rien de mal à le faire, pour avoir un code plus lisible. Personnellement je trouve que cela est vrai pour moi.
<p class=myClass id=myId> Voici un élément non structuré
[/sourcecode]
Faites vous votre propre idée sur celui-ci. Si vous préférez un document plus structuré, alors utilisez les guillemets et la fermeture des éléments.
Internet Explorer et HTML5
Malheureusement, Internet Explorer requiert un peu de bidouilles afin d’intégrer les éléments d’HTML5.
Afin de s’assurer que les éléments d’HTML5 soit de type bloc, il est nécessaire d’ajouter le style :
header, footer, article, section, nav, menu, hgroup {
display: block;
}
[/sourcecode]
Malheureusement, Internet Explorer ignore toujours ces styles, car il n’a aucune idée de ce que, à titre d’exemple, l’élément header est. Heureusement, il y a une solution facile :
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu");
[/sourcecode]
Curieusement, ce code semble marcher sous Internet Explorer. Pour simplifier tout ce processus pour chaque nouvelle application, Remy Sharp a créé un script, communément appelé : HTML5 shiv. Ce script corrige aussi quelques problèmes d’impression.
Pour l’inclure dans vos pages voici ce que vous devez ajouter :
<!–[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>
[/sourcecode]
Ce qui n’est pas HTML5
Il est important de comprendre exactement ce qui n’est pas HTML5 :
- SVG: Pas de support SVG dans HTML5 dans au moins cinq ans
- CSS3: Non HTML5. C’est … CSS.
- Stockage Client: Non HTML5. Il a été à un moment donné, mais a été retiré de la spécification, en raison du fait que de nombreuses personnes étaient inquiètes car cela devenait trop compliqué. Il a maintenant son propre cahier des charges.
- Sockets Web: Non HTML5. Encore une fois, a été exporté à ses propres spécifications.
La prochaine partie concernant HTML 5 permettra de définir les améliorations des formulaires et l’ajout des nouveaux éléments.
