Après le rafraichissement graphique que j’ai réalisé il y a quelques jours, j’ai décidé de réaliser un autre changement, certes moins visible, mais tout aussi important.
Après avoir réalisé quelques tests récemment, j’ai décidé de passer ce blog en HTML 5.
HTML 5 est la nouvelle version du langage HTML (succédant, de façon fort logique, à HTML 4). Elle est encore actuellement à l’état de draft, mais il devient de plus en plus pertinent de l’utiliser, car elle est désormais supportée par la majorité des navigateurs (à l’exception, bien évidemment, d’Internet Explorer).
Pour être totalement exact, ce blog est en XHTML 5. N’ayez pas peur, vous n’avez pas loupé XHTML 2, 3 et 4. Ces versions d’XHTML n’ont jamais existé et n’existeront jamais ! XHTML 2 a été envisagé mais abandonné récemment car il partait dans une très mauvaise direction, totalement en contradiction avec tout ce que nous avons connu jusqu’ici (le fameux sens du canard). XHTML 5 est simplement HTML 5 respectant les règles syntaxiques du langage XML (minuscules pour les noms des balises/attributs, fermeture obligatoire des balises vides comme img et br, etc.)
Pour transformer son blog XHTML 1 en HTML 5, une seule chose suffit… En effet, il suffit de remplacer votre long et compliqué DOCTYPE par ceci :
<!DOCTYPE html>
Ce n’est pas plus difficile que ça ! Ceci est rendu possible par la compatibilité ascendante du langage.
Malgré cette relative simplicité, j’ai décidé d’aller plus loin et d’utiliser les nouvelles balises introduites dans cette cinquième version de HTML : section, article, aside, header, footer, nav, etc. Ces balises ont été introduites pour amener plus de sémantique au langage et éviter de devoir refaire, encore et encore, ce genre de choses : <div id="sidebar">, <ul id="nav">, <div id="footer">, etc. (maladie connue sous le nom de divite)
Outre ces nouvelles balises structurelles, HTML 5 introduit le support natif de l’audio et de la vidéo via les balises <audio> et <video>. Ces balises sont déjà implémentées par Firefox et Safari. Cela permettra, à terme, de jouer de la musique et des vidéos sans avoir besoin d’un player en Flash ! Jeroen Wijering et Dew nous ont été d’une grande aide pendant toutes ces années mais leur remarquable travail deviendra bientôt obsolète !
Bref, tout ça pour dire que je voulais tester la technologie et que je n’ai pas trouvé meilleur terrain de jeu que ce blog. J’essaierai de faire évoluer cela au fur et à mesure des nouvelles implémentations dans les navigateurs. Désolé envers ceux qui ne peuvent pas voir ce blog correctement. Je vous invite à tout de suite télécharger et installer un des navigateurs suivants :
- Chrome (pour Windows)
- Firefox (pour Mac OS et Windows)
- Opera (pour Mac OS et Windows)
- Safari (pour Mac OS et Windows)
Il y a encore beaucoup de choses à dire sur HTML 5. Je suis loin d’avoir fait le tour de la question car le sujet est très vaste et sujet à de houleuses discussions.
Pour en savoir plus, je vous invite à aller lire ces quelques articles :
- A Preview of HTML 5
- HTML5 and The Future of the Web
- Misunderstanding Markup: XHTML 2/HTML 5 Comic Strip
Bonne lecture et n’hésitez pas à suivre le mouvement…
Le blog de Vincent Battaglia 
je songe a faire de même sur mes sites 😉
LikeLike
Tu viens de me donner envie de (enfin) m’y mettre.
Sur IE7 ça va encore , je m’attendais à pire. Mais Quid du Google Bot, lit-il et comprend-t-il déjà le HTML5?
Parce que l’air de rien, les nouvelles balises de HTML5 on un gros potentiel de référencement pour qui les utilisera à bon escient.
LikeLike
oublie pas que audio et vidéo ont pour le moment été abandonné des spécification pour cause de mésentente des acteurs du marché…
enfin l’avantage de refaire du HTML (donc sans le X) est que au moins lorsque l’on annonce le site correctement (je parle des entête HTTP) au mois IE n’essayera pas de téléchargé la page plutôt que de l’afficher …
Je pense que HTML 5 réconciliera beaucoup de monde et permettra beaucoup surtout avec CSS 3 …
LikeLike
HTML5 c’est bien, c’est beau et c’est Draft…
Reste aussi le problème IE qui ne représente 5% mais qui pour Le Soir, La DH, La Libre mais aussi des site un peu plus sérieux comme CNN, Times, ou encore les banques et leur web banking, Amazon, ebay, etc… n’est pas encore une évolution viable ni même envisageable…
HTML5 sera freiné tant que IE ne le supportera pas, il ne restera qu’un truc über atlernatif ou il fait bon se démarquer (web design, alter webalistes, …)
Attention je ne remet pas en cause HTML5, je suis totalement pour mais je reste réaliste… MS “nous” tiens encore bien par les c….
LikeLike
@PaKal : tout à fait d’accord, je ne le ferais pas sur le site de mes clients ! Espérons que Microsoft suive le mouvement, ça a l’air d’être bien parti en tout cas –> http://news.softpedia.com/news/Internet-Explorer-to-Support-the-Proposed-HTML-5-Standard-118722.shtml
LikeLike
J’attend aussi ça avec impatience, car dans un milieu plus business comme le mien, le HTML5 peut aussi apporter beaucoups de choses, certes moins “eye candy” mais bien pratiques… Pour les mals voyants par exemple avec une integration audio “seemless” ou la gestion de fonts plus adaptées…
Maintenant, même si MS s’y met, il reste le coté psychologique neuneu gogol à dépasser… le clampin qui n’update pas ou qui à une machine trop naze pour suivre le mouvement et la encore dans mon milieu nous devont en tenir compte…
PS: J’aime ton layout!, moins ton captcha qui est la limit de l’illisible!!!
LikeLike
@PaKaL : Je vais changer le CAPTCHA et installer Mollom quand j’aurai un peu de temps…
LikeLike
Super! c courageux. Je serai curieux de savoir l’impact sur tes visites.
En tous cas c la 1ere fois que je visite un “vrai” site html5.
Et une petite couche de microformats? non?
ex: xfn, avec le foaf.rdf de ton compte mybloglog, des petits rel=”me” sur tes liens “sociaux” etc…
rel=”tag” dans les categories, class=”xoxo” sur le blogroll
ou sur les commentaires (hCard, hCalendar,…) façon wordpress
tant qu’à semantiser… aller un peu plus loin…
Bravo.
LikeLike
@djdmsr : Merci ! Oui tu as tout à fait raison, je vais sémantiser le tout et améliorer au fur et à mesure. Je vais me servir de ce blog comme d’un labo…
LikeLike
suis en train d’ouvrir un nouveau site perso, j’ai bien envie d’en faire autant avec un Drupal
Moi aussi j’en ai plein le … de la divite
2 liens:
une “bidoche” (Cheat Sheet) html5:
Click to access html5-cheat-sheet.pdf
et cette page de dingue!: de la lecture pour tout le mois d’août! 70 tutos css3/html5:
http://www.webappers.com/2009/08/10/70-must-have-css3-and-html5-tutorials-and-resources/
LikeLike
Bonne chose de se mettre à HTML5 dès à présent. Au passage, petit rectificatif: ton site n’est pas en XHTML5 mais bien en HTML5 😉
LikeLike
sympa, c’est tentant de regarder à ça… en plus je me disais récemment qu’il fallait vraiment que je me motive à bosser sur mon propre blogue.
LikeLike
J’invite tous ceux qui s’intéresse à HTML5 et CSS3 à consulter ce tutorial qui prend en compte les problème de compliance avec les navigateurs actuels : http://dreamgratuit.canalblog.com/archives/2009/08/19/14678976.html
LikeLike