Creative
Blog Du Webdesign
Emploi BDW
Après une longue hésitation concernant le contenu de cet article consacré au HTML 5, je me suis finalement résolu à vous donner 10 bonnes raisons de l’adopter, plutôt que d’entrer dans une longue et fastidieuse analyse et explication des nouvelles balises et attributs.
Vous trouverez de nombreuses ressources sur le web.
<!DOCTYPE html>
<meta charset="UTF-8">
au lieu de :
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
franchement on peut pas faire plus court.
(le navigateur qu’on aime haïr) il suffit simplement d’ajouter le script suivant dans la balise <head> qui permet d’afficher correctement nos nouvelles balises sur toutes les versions de IE inférieur à IE 9:
<!--[if lt IE 9]>
<script>
document.createElement("header");
document.createElement("section");
</script>
<![endif]-->
Ou mieux encore, utilisez le script Modernizr qui vous permet de déclarer les balises HTML5 mais aussi avoir une alternative pour les balises CSS3 pour pouvoir avoir une parade pour les afficher correctement.
Grâce aux nouvelles balises structurelles votre document est structuré sémantiquement de la façon suivante :
<header> : en tête de page ou de section, il n’est pas définit par sa position mais par son contenu c’est à dire un groupe d’introduction ou de navigation,
<nav>: liens de navigation principales
<section> : pour regrouper du contenu de manière thématique,
<aside> : contient un contenu différent du contenu principal
<footer> : contient des informations au sujet de l’élément qui le contient : auteur, informations de copyright, liens vers des contenus apparentés
Attention il existe d’autres balises.
main : définit le contenu principal d'un document
secondary : représente une section unique et secondaire du document,
navigation : définit le menu de navigation du document,
banner : située en haut de page, elle contient habituellement le logo de la société, les éléments publicitaires,...
contentinfo : informations à propos du contenu de la page : notes, copyrights, mentions légales, ...
definition : représente la définition d'un élément
note : correspond à une note entre parenthèse ou de bas de page
seealso : indique que l'élément contient des données contextuelles au contenu principal de la page
search : un formulaire de recherche.
Sans passer par un plugin (Flash par exemple) avec les balise <audio> ou <video>. Ainsi vos médias sont parfaitement audibles et visibles sur l’ensemble des Smartphones du marché. Il ne reste plus qu’aux différents navigateurs à se mettre d’accord sur un codec vidéo standard.
Et plus conviviaux avec des attributs utiles pour l’internaute :
placeholder : pour afficher du texte de substitution dans un input ,
required : qui empêche les navigateur de valider un formulaire dont un champ requis n’a pas été rempli
autocomplete : pour laisser par défaut ou pas le remplissage automatique de formulaire, utile si on souhaite désactiver le remplissage automatique de certains champs sensibles (identifiants bancaires par exemple)
Il existe encore de nombreux attributs forts utiles.
Et commence à respecter les standards du WC3 avec la nouvelle version d’Internet Explorer 9. N’oublions pas que Microsoft Corporation est membre du W3C, l’organisme mondial qui émet les recommandations à suivre pour le web et que durant des années Microsoft ne respectait même pas ces recommandations (un comble !!!).
Plutôt que prendre le train en retard. En effet les web masters ont de plus en plus leurs mots à dire concernant le développement de l’internet de demain, c’est vous qui influencez l’adoption de tel ou tel langage, c’est vous qui façonnez le web et non les éditeurs d’applications !
Au plus vous rendez l’internet accessible et convivial aux internautes au plus vous aurez d’influences sur les pratiques de ce média.
A lire :
http://www.eyrolles.com/Informatique/Livre/html5-pour-les-web-designers-9782212128611
http://www.eyrolles.com/Informatique/Livre/css3-pour-les-web-designers-9782212129878
Rejoignez la communauté des créatifs du web !
- Partagez vos créations
- Gagnez en visibilité
- Créez votre blog facilement
> En savoir plus
Auteur : BOCQUILLON Jeff
voir son blog
Free-lance depuis 10 ans, j'ai fondé le studio Blue room et Papangue Project. Mon domaine d'expertise s'étend de la création graphique pour l'édition à la réalisation de sites Internet.
le 22/04/11| #3
Il est effectivement temps de s'y mettre.
Pour ceux que ça intéresse et pour complêter ton article, un petit tableau publié par Smashing magasine
http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/
le 22/04/11| #4
Moi, y'a un truc qui me chicote. Je code le xHTML 1.0 depuis belle lurette, mais si je veux passer à HTML5, est-ce que j'aurai à ré-apprendre complètement mes trucs? Je n'ai pas trop suivi son évolution.
Dans le fond, est ce que je pourrais coder comme du xHTML avec le DOCTYPE du HTML5?
Ça reste assez flou dans mon esprit. Je vous prierais de m'expliquer parce que ça m'intéresse de me réformer maintenant. Je veux aussi être certain que le HTML5 n'aura pas d'effets négatifs sur certains navigateurs, ou l'effet contraire...
Merci!
le 22/04/11| #5
Le problème de l'HTML5 c'est qu'on peut trouver autant de raisons de ne PAS l'adopter tout de suite.
Des dires mêmes de la W3C, ils est plus sage d'attendre une validation plus approfondie de la norme.
Alsacréation publiait justement un article cette semaine faisant le point sur l'accessibilité du HTML5 : http://www.alsacreations.com/article/lire/1203-etat-des-lieux-accessibilite-html5.html
le 22/04/11| #6
Html 5 n'est pas encore fini et il y a encore pas mal d'incompatibilité sur le navigateur.
Voici un très bon site qui récapitule tout ca : http://www.html5test.com/
En résumé je pense qu'il faut commencer à s'intéresser au html5 pour être prêt au moment venu.
le 22/04/11| #7
Merci pour cet article.
Je vous conseil aussi le très bon site pour une introduction au HTML5 et au CSS3:
le 22/04/11| #8
@Vincent Chevalier : a quoi bon coder en xHTMl lorsque celui-ci n'est pas délivré avec le MIME type approprié et donc interprété comme de l'HTML (par IE notamment) ?
le 22/04/11| #9
en effet l'html 5 va nous simplifier la vie pour beaucoup de choses. Par contre je pense que pour l'instant il faut l'utiliser avec parcimonie ou en connaissance de cause car la compatibilité avec les navigateurs est loin d'etre complete. De plus cela peut poser pas mal de problemes au niveau de l'ergonomie et de l'accessibilité pour le moment.
le 23/04/11| #11
@Quentin AUPETIT
Le HTML5 doit selon le W3C passer de la spécification à « recommandation candidate » en 2012, c’est-à-dire être fin prête dans le discours normatif.
Ensuite selon certaines informations, l’HTML5 obtiendrait le statut de " proposition de recommandation " en 2022.
Attention l'auteur de l'article sur Alsacréation ne dit pas qu'il faut attendre, mais faire attention à l'accessibilité de certaines balises !
le 23/04/11| #12
Microsoft n'a pas attendu IE9 pour "s'intéresser" aux standards, le boulot abattu sur IE8 sur point a notamment été très important. La différence avec IE9 c'est qu'il commence à presque se battre sur les mêmes sujets que la concurrence (alors que jusqu'à présent il se contentait juste de rattraper son énorme retard).
Pour le reste, oui on peut adopter dès à présent des choses de HTML5 oui (son Doctype par exemple), mais c'est vraiment fonction des projets (pour des problématiques d'accessibilité, de nécessité de support JS, etc.).
le 26/04/11| #13
@Jeff
En effet, l'état des spécifications et l'accessibilité sont deux choses distinctes et je ne faisais pas le pont entre les deux mais juste une illustration de l'état "en chantier" du HTML5 vis à vis de l'accessibilité. Mais ce n'était qu'un exemple.
le 29/04/11| #14
C'est clair que c'est encore trop tôt pour utiliser toutes les fonctionnalités de HTML5 vu que trop peu sont adoptées sur l'ensemble des navigateurs.
Pour ce qui est de l'attribut "banner", personnellement j'éviterais de l'utiliser pour ne pas voir son contenu bloqué par AdBlock.
le 29/04/11| #15
I am not so know about #6, You can add a purpose to your tags to reinforce your document's semantic , Is that I can use tags like : , ?
le 12/05/11| #17
J'ajoute ma pierre à l'édifice, bien qu'on puisse rendre IE fonctionnel avec les nouvelles balises HTML 5, j'ai remarqué que si on souhaite proposer une feuille de style pour l'impression, elle peut partir en vrille étant donné que la fonction javascript createElement n'aura pas été prise en compte au moment de l'impression et que ces balises sont complètement ignorées par IE. Pour moi, il vaut mieux ne pas compter sur les nouvelles balises pour la structure d'un document.
le 24/05/11| #18
Bonjour à tous :) En ce qui concerne le ref, ca ne devrai pas changer grand chose, on aura encore les balise strong j'espère ^^ La balise marquee sera elle aussi encore prise en compte ? C'est pas super joli mais ca peut aider pour faire apparaitre des news en défilement par exemple.
Magazine Webdesign, Tendance Web, Webdesign et Actualité Graphique. Suivez nos Articles rédigés avec soin sur les thèmes du Motion Design et de l'actualité du Web ! Suivez le Blog du Webdesign, suivez le Magazine du Webdesign !
En Savoir Plus
le 22/04/11| #1
Avec toutes ces informations, on ne peut résister à passer en HTML 5 ^^