Transformer son gabarit pour passer en HTML5

***bess*** · 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 ! Wink

[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{
}

***bess*** · 03/02/2012, 11:56:06