03/02/2012, 11:56:06
Salut les filles,
juste pour faire un ultra-rapide tuto sur comment rendre un gabarit classique valide HTML5, surtout parce que je test moi même la transformation sur un site.
Je n'ai pas encore finit mais à ce stade, les navigateurs comprennent qu'ils ont affaire à une page en HTML5, à moi ensuite d'aller redéfinir toutes les nouvelles balises (exemple : <vidéo><footer>...)
Si vous avez également des suggestions sur les étapes à ne pas oublier je suis preneur !
[h]1 - changer le doctype + entête de votre gabarit[/h]
avant :
après :
[h]2 - changer l'appel des Javascripts[/h]
avant :
après
A ce niveau mon gabarit était déjà valide. Il me faut maintenant modifier certaines balises
[h]3 - Renommer certaines balises[/h]
De nouvelles balises font leur apparition. les utiliser est donc très intéressant.
<header> <footer> <nav> pour encadrer votre menu et <article> pour les articles de blog (par exemple)
ça tombe bien j'ai juste eu à remplacer l'habituel code :
par le nouveau :
et ne pas oublier de remplacer les occurrences dans le css :
devient tout simplement
juste pour faire un ultra-rapide tuto sur comment rendre un gabarit classique valide HTML5, surtout parce que je test moi même la transformation sur un site.
Je n'ai pas encore finit mais à ce stade, les navigateurs comprennent qu'ils ont affaire à une page en HTML5, à moi ensuite d'aller redéfinir toutes les nouvelles balises (exemple : <vidéo><footer>...)
Si vous avez également des suggestions sur les étapes à ne pas oublier je suis preneur !
[h]1 - changer le doctype + entête de votre gabarit[/h]
avant :
Code :
{process_pagedata}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
<head>après :
Code :
{process_pagedata}<!DOCTYPE html>
<html lang="fr">
<head>[h]2 - changer l'appel des Javascripts[/h]
avant :
Code :
<script language="Javascript" type="text/javascript">après
Code :
<script type="text/javascript">A ce niveau mon gabarit était déjà valide. Il me faut maintenant modifier certaines balises
[h]3 - Renommer certaines balises[/h]
De nouvelles balises font leur apparition. les utiliser est donc très intéressant.
<header> <footer> <nav> pour encadrer votre menu et <article> pour les articles de blog (par exemple)
ça tombe bien j'ai juste eu à remplacer l'habituel code :
Citation :<div id='header'></div>
<div id='footer'></div>
<div id='menu'></div>
<div class='entry'></div>
par le nouveau :
Citation :<header></header>
<footer></footer>
<nav></nav>
<article></article>
et ne pas oublier de remplacer les occurrences dans le css :
Citation :#header p{
}
devient tout simplement
Citation :header p{
}