5 Astuces HTML5 bien pratiques

1

HTML5 (HyperText Markup Language 5) est la dernière édition en date du langage HTML. Cette version a été finalisée le 28 octobre 2014. Outre l’optimisation purement globale et les quelques modifications esthétiques, elle apporte quelques petites nouvelles fonctionnalités qui vont nous faciliter le travail.

 

1. Nouveau Doctype

Les habitués savent à quel point sont rares celles et ceux capables de mémoriser par coeur :

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

Désormais, avec HTML5 il vous suffira de composer le morceau de code ci-dessous pour qu’il soit instantanément décrypté.

<!DOCTYPE html>

Et encore, sur cette nouvelle version d’HTML il n’est absolument pas nécessaire de spécifier le Doctype, on le fait pour de soucis de compatibilité avec d’éventuels anciens navigateurs.

2. Terminé les types dans les éléments <link> et <script>

Avant nous rédigions de cette manière

<link rel="stylesheet" href="css/feuilledestyle.css" type="text/css" />
<script type="text/javascript" src="js/script.js"></script>

Ici aussi, par soucis de simplification d’écriture, spécifier le type d’un élément c’est fini !

<link rel="stylesheet" href="css/feuilledestyle.css" />
<script src="js/script.js"></script>

 

3. Plus de guillemets obligatoires dans les attributs

Libre à vous dorénavant de ne pas encadrer vos attributs par des guillemets

<link rel=stylesheet href=style.css />

 

4. Champs obligatoires avec l’attribut required

Avant il fallait vérifier et valider la bonne saisie d’un champ déterminé obligatoire via du javascript. Aujourd’hui on peut le faire directement via HTML5 en ajoutant à la balise <input> l’attribut required

<input type="text" name="nomChamp" required>

 

5. Placeholder dans les champs <input>

Nous ne sommes pas forcément fans des étiquettes de champs, aujourd’hui ce qui se voit beaucoup c’est les placeholder, des champs contenant les étiquettes directement. Quand l’utilisateur entre ses informations, celles-ci s’effacent, une pratique qui encore une fois se faisait avant via du javascript.

<input name="email" type="email" placeholder="votreadresse@email.fr" />