Nous allons voir ensemble comment se familiariser avec les nouveautés HTML 5. Nous verrons quelques balises importantes de la prochaine version majeure du HTML.
Nous allons tout d’abord parler de compatibilité. Les balises HTML 5 ne sont pas reconnues sur tous les navigateurs. On peut contourner ce problème par le biais d’un code javascript pour Internet Explorer 8 et versions inférieures. On crée les éléments HTML 5 dans le DOM. Télécharger ici
Il vous suffira de faire un appel à ce script dans le head en précisant que c’est pour IE :
<!--[if IE]><script src="scripts/html5-ie.js"></script><![endif]-->
Et voici le code :
document.createElement("header");
document.createElement("footer");
document.createElement("section");
document.createElement("aside");
document.createElement("nav");
document.createElement("article");
document.createElement("figure");
→ Voici à quoi ressemble le doctype de l’HTML 4.01 :
<!DOCTYPE HTML PUBLIC "-//W3//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
→ Voici à quoi ressemble le doctype de l’XHTML 1.0 :
<!DOCTYPE html PUBLIC "-//W3//DTD XHTML 1.0 Strict //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
→ Voici le doctype ultra simplifié de l’HTML 5 :
<!DOCTYPE html>
→ Voila la balise meta d’un document en HTML 4.01 :
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
→ Voila la balise meta d’un document en HTML 5 :
<meta charset="UTF-8">
→ Pour la balise script, là ou avant le html 5 il fallait préciser type=”text/javascript”, désormais plus besoin de le préciser. On part du principe que c’est du javascript :
<script src="file.js"></script>
→ Il est aussi inutile de préciser type=”text/css” pour la balise link en HTML 5 :
<link rel="stylesheet" href="style.css">
→ La balise canvas sert à afficher des graphiques. Il faut par contre un script pour pouvoir l’animer :
<canvas id="un-canvas" width="200" height="100"></canvas>
→ La balise audio sert à insérer un fichier audio dans un document HTML :
<audio src="music.mp3"></audio>
→ L’attribut autoplay permet de lancer le fichier audio automatiquement et l’attribut loop permet de faire tourner ce dernier en boucle :
<audio src="music.mp3" autoplay></audio>
→ Vous pouvez aussi permettre à l’utilisateur de lancer ou arrêter le fichier audio quand bon lui semble par la biais de l’attribut controls :
<audio src="music.mp3" controls></audio>
→ Vous pouvez aussi demander à votre navigateur de pré-charger le fichier audio en arrière plan grâce à l’attribut preload qui prend comme valeurs, soit none (ne pas charger), soit auto (charger le fichier) soit metadata :
<audio src="music.mp3" preload="none" controls></audio>
Attention cependant à ne pas charger trop de fichiers audio au lancement de vos pages, ce qui aurait pour effet de saturer la bande passante.
Bien entendu cette balise audio serait trop belle comme ceci. Donc un peu de complications :
→ Tout d’abord le format MP3 n’est pas pris en compte par Firefox mais les fichiers Ogg Vorbis oui et inversement pour Safari.
→ Internet Explorer ne reconnait pas du tout la balise audio (sans blague?!!!), il faudra donc utiliser une solution ultime pour lire les fichiers audio sur tous les navigateurs :
<audio controls>
<source src="music.mp3" type="audio/mpeg">
<source src="music.ogg" type="audio/ogg">
<object type="application/x-shockwave-flash"
data="player.swf?soundFile=music.mp3">
<param name="movie"
value="player.swf?soundFile=music.mp3">
<a href="music.mp3">Download the song</a>
→ La balise video sert à insérer un fichier video dans un document HTML et fonctionne de la même manière que la balise audio. Elle a aussi les même attributs (loop, autoplay, controls,…) :
<video src="movie.mp4" controls autoplay width="720" height="340"></video>
→ Vous pouvez afficher une image qui représente bien la video grâce à l’attribut poster :
<video src="movie.mp4" controls width="720" height="340" poster="img.jpg"></video>
→ De même que sur l’audio, les formats ne sont pas tous reconnus par tous les navigateurs, voici la bonne solution :
<video controls width="720" height="340" poster="image.jpg">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogv" type="video/ogg">
<object type="application/x-shockwave-flash" width="720" height="340"
data="player.swf?file=movie.mp4">
<param name="movie"
value="player.swf?file=movie.mp4">
<a href="movie.mp4">Download the movie</a>
</object>
</video>
→ On avait tendance à utiliser Javascript pour remplir les champs d’un formulaire par un texte de substitution qui disparait une fois qu’on clique sur le champ, désormais nous avons l’attribut placeholder :
<label for="nom">Nom</label> <input id="nom" name="nom" type="text" placeholder="Tapez votre nom">
→ Vous pouvez aussi mettre un champ directement avec le curseur avec l’attribut autofocus, vous pourrez donc taper dedans directement :
<label for="nom">Nom</label> <input id="nom" name="nom" type="text" autofocus>
→ Vous pouvez aussi mettre un champ obligatoire avec l’attribut required :
<label for="nom">Nom</label> <input id="nom" name="nom" type="text" required>
→ Vous pouvez désactiver l’autocomplétion au champ par champ avec l’attribut autocomplete qui prend comme valeurs, soit “on” soit “off” :
<label for="nom">Nom</label> <input id="nom" name="nom" type="text" autocomplete="off">
→ Vous pouvez aussi utiliser l’élément datalist qui est un mix entre un champ normal et un élément select. Utilisez l’attribut list pour combiner la liste des choix et une zone de saisie normale :
<label for="ville">Ville</label>
<input id="ville" name="ville" type="text" list="villes">
<datalist id="lesvilles">
<option value="Lyon">
<option value="Paris">
<option value="Marseille">
<option value="Nice">
</datalist>
→ L’attribut type a beaucoup évolué et permet à présent de préciser si le champ est un champ de recherche :
<label for="ville">Ville</label> <input id="recherche" name="recherche" type="search">
→ un champ de coordonnées (le clavier de votre smartphone s’adaptera en fonction du type) :
<label for="email">adresse email</label> <input id="email" name="email" type="email"> <label for="site">Site</label> <input id="site" name="site" type="url"> <label for="tel">telephone</label> <input id="tel" name="tel" type="tel">
→ un slider avec un min et un max :
<label for="question">Combien aimez vous WebDesignWeb.fr ?</label> <input id="question" name="question" type="range" min="1" max="5">
→ des boutons avec des flèches :
<label for="question">Combien aimez vous WebDesignWeb.fr ?</label> <input id="question" name="question" type="number" min="1" max="5">
→ une date :
<label for="question">quelle date ?</label> <input id="question" name="question" type="date" >
→ une couleur :
<label for="question">quelle couleur ?</label> <input id="question" name="question" type="color" >
→ les balises header et footer qui permettent de regrouper les informations respectivement de l’en-tête et du pied de page d’un document HTML.
→ La balise i à été redéfinie et permet ainsi de définir un bout de texte différent du reste.
→ la balise track qui permet d’insérer une barre pour indiquer une portion de temps.
→ la balise wbr non fermante à utiliser à dans un mot long pour obliger un retour à la ligne.
→ la balise output pour un résultat de calcul.
→ la balise mark qui permet de marquer du texte :
Je suis actuellement sur le site <mark>webdesignweb.fr</mark>
→ la balise time permet d’afficher une date :
<time datetime="2011-07-26">26 juillet 2011</time>
→ la balise meter permet de baliser des mesures :
<meter max="50">49 articles</meter>
→ la balise progress permet de balise une valeur en chargement :
<progress min="0" max="100" value="40"></progress>
→ la balise section permet de regrouper du contenu sur le même thème :
<section>
<p>Ce blog est ouvert à tous et parle de web</p>
<p>par Stratis Bakas</p>
</section>
→ la balise aside permet de regrouper du contenu différent du contenu principal :
→ la balise nav permet d’insérer un menu.
→ la balise article est un type de section. article est réservé pour la syndication :
<article>
<header>
<h1>Article sur le HTML 5</h1>
</header>
<p>Merci de suivre cet article</p>
<footer>
<p>publié le <time datetime="2011-07-26T21:30" pubdate>
21h30 le 26 juillet 2011
</time>
par Stratis Bakas</p>
</footer>
</article>
→ l’attribut scoped permet de déclarer un style qui ne s’appliquera qu’à l’article ou section en question :
<article>
<style scoped>
h1 { font-family : Arial; }
</style>
<h1>Titre avec style différent</h1>
<p>article HTML 5 sur le blog webdesignweb.fr</p>
</article>
Voilà c’est fini pour aujourd’hui… comme d’habitude, j’espère que cet article vous plaira et vous aidera à vous lancer dans le nouveau HTML.
Pour les questions c’est en bas que ça se passe.