HTML5 / CSS 2.x/3 / PHP / MySQL ...

Notre première page en HTML5

Nous développerons surtout la partie qui concerne spécifiquement HTML5.

Le template HTML5 minimal

Voici le template minimal pour définir une page web en HTML5:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Titre de ma page</title>
</head>
<body>
    <p>Bonjour tout le monde</p>
</body>
</html>

La première ligne de notre template est <!DOCTYPE html>. Cette ligne de code est à définir systématiquement en préambule de toute page web, excepté les flux de texte ou de données qui ne sont pas destinés à être affichés dans un navigateur web.

La seconde ligne de code qui nous intéresse est <meta charset="UTF-8">. Cette ligne indique au navigateur l'encodage du jeu de caractères utilisé. Nous préconisons l'encodage UTF-8 de préférence aux autres encodages, car c'est celui qui accepte l'affichage de quasiment tous les caractères existant sans recourir à leur recodification sous forme d'entité. Exemple, le caractère ne peut être utilisé en encodage <meta charset="ISO-8859-1"> que sous cette forme &euro;

ATTENTION: l'encodage du code source de vos pages web en UTF-8 exige d'utiliser un éditeur de texte ou éditeur HTML qui soit capable de traiter ce code source en encodage UTF-8. L'encodage UTF-8 est standard sous Linux, mais nécessite l'emploi d'éditeurs adaptés sous Windows (Netbeans, PSPad, etc..).

Adaptations pour les navigateurs non compatibles HTLML5

A ce stade, notre template minimal tel qu'écrit ci-avant peut être traité par tous les navigateurs web connus.

Mais HTML5 intègre de nouveaux éléments tels article, section, etc... qui ne pourront être pris en compte par les versions antérieures à IE9 sans un minimum de manipulations. Ces nouveaux éléments propres à HTML5 seront gérés si on intègre le script ie.patch.js

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Titre de ma page</title>
<!--[if lte IE 8]><script src="js/ie.patch.js"></script><![endif]-->
</head>
<body>
    <article>
        <p>Bonjour tout le monde</p>
    </article>
</body>
</html>

Le code <!--[if lte IE 8]> est un commentaire conditionnel, mécanisme propre à Internet Explorer sous Windows depuis sa version 5.0. Les commentaires conditionnels ne sont donc transposables à aucun autre navigateur (Opera, Safari, Firefox...) et n'ont pas d'effet sur Internet Explorer 5 Mac.

Le commentaire conditionnel tel qu'il est défini dans le code source ci-avant est opérationnel pour toutes les versions de IE antérieures à la version 8. Si la page web est chargée par un navigateur web IE (Internet Explorer) dont la version est antérieure à IE9, on charge le code contenu dans le fichier ie.patch.js dont le contenu est le suivant:

var e = ("abbr,article,aside,audio,canvas,datalist,details," +
        "figure,footer,header,hgroup,mark,menu,meter,nav,output," +
        "progress,section,time,video").split(',');
for (var i = 0; < e.length; i++) {
    document.createElement(e[i]);
}

Quelques explications sur ce fragment de code Javascript. Un navigateur web ne traite et reconnaît qu'une collection limitée d'éléments HTML. Si on souhaite étendre le jeu des éléments gérés par le navigateur, il faut passer au XHTML ou à XML, avec la contrainte d'associer le modèle qui décrit ces éléments et la manière de les afficher (feuille de transformation XSLT pour les données XML...).

Ici, au travers du script contenu dans ie.patch.js, on va demander au navigateur IE qui ne connaît pas les nouveaux éléments HTML5, article par exemple, de le reconnaître comme nouvel élément HTML. Ensuite, pour traiter de manière adéquate ce nouvel élément, on lui associera la feuille de style adaptée.

Justement l'élément article nous amène au sujet suivant: un web plus sémantique avec HTML5.

Tous les articles sur ce thème