Actu
Creative
Blog Du Webdesign
Emploi BDW
After many hesitations, I finally write this article and give you 10 good reasons to adopt HTML 5, it's more convenient than if I gave you a long and fastidious analysis.
You can find numerous resources on the Internet.
<!DOCTYPE html>
<meta charset="UTF-8">
instead of :
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
it can't be shorter !
(the browser you love to hate) you only have to add the following script in the <head> tag which allows you to correctly show your new tags on every IE versions lower then IE 9 :
<!--[if lt IE 9]>
<script>
document.createElement("header");
document.createElement("section");
</script>
<![endif]-->
Even better, using the Modernizr script allows you to declare the HTML 5 tags and also to have an alternative to CSS3 tags.
Thanks to the new structural tags, your document is semantically structured like this :
<header> : the header, that's not his position that defines it but its contents, namely an introductive group.
<nav>: links of the main way to navigate.
<section> : to gather thematically your contents.
<aside> : has different contents that the main contents.
<footer> : gathers several information about the author, the copyright...
Be careful : other tags exist.
main : defines the main contents of a document.
secondary : represents a secondary part of your document.
navigation : defines the navigation of your document.
banner : at the top of your page, it contains your firm's logo, advertisings...
contentinfo : information about your page's contents : copyrights, legal notice...
definition : the definition of an element.
note : a note in brackets or at the bottom of a page.
seealso : it indicates the element has other datas in this page.
search : a research form.
Without using a plugin (like Flash), with <audio> or <video> tags. Then your media can be shown on every smartphone. Browsers only have to agreed on a common video codec.
And more user-friendly too :
placeholder : to show the text in an input.
required : forbids the browsers to validate a form if a required field was not filled.
autocomplete : to complete automatically a form or not, it's useful if you want some sensitive fields (like bank ID) not to be complete automatically
There are still numerous useful things to discover !
They respect WC3 standards with Internet Explorer 9. Let's not forget Microsoft Corporation is a member of W3C, the world organisation which dictates recommandations to follow for the Internet but for years Microsoft didn't follow these recommandations (a shame !).
Better now than never ! Webmasters have more and more an influence on how the Internet will develop tomorrow, you can influence the use of a language, you make the web the way it is, not apps' developers !
The more you make the Internet user-friendly, the more you will influence it.
Go further (in french) :
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 ^^