HTML5 – Doctype et validation du markup

LEÇON

 

Doctype simplifié en HTML5

Si on regarde le code source des pages web existantes, on tombe sur les déclarations de doctype très variées.

Pour ne pas être surpris, en voici deux exemples :

<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

La première ligne appartient à un document HTML5. La 2ème est une déclaration du type "HTML 4.01 strict".

 

Utilité du doctype

Tout simplement, le navigateur utilise la déclaration doctype pour savoir à quelle version de HTML s'attendre.

Si on déclare du HTML 4.0 strict mais on utilise des balises nouvelles de HTML5, il peut y avoir des problèmes à l'affichage.

Ceci est important à savoir quand on pratique du copier-coller du code source sur internet. Il faut faire attention au doctype qu'on colle.

 

Doctype et validation

Le W3C HTML Validator exploite également la déclaration doctype.

La validation d'un document dont la version de HTML utilisée et la version déclarée ne sont pas cohérentes échoue .

 


 

EXERCICES

  1. Créer un document HTML, faire une déclaration doctype type HTML5, et inclure dans le body du document une balise qui est nouvelle en HTML5 comme caption (exemple ci-dessous). Regardez le résultat dans un navigateur (choisir un navigateur qui est compatible HTML5 !). Utilisez le validator W3C et noter le résultat.
  2. Changer la déclaration doctype en HTML 4.01 Strict (voir la chaîne à utiliser dans le texte ci-dessus). Regarder à nouveau dans le navigateur. Essayer plusieurs types de navigateur et voir s'il y a des différences. Est-ce que les navigateurs se plaignent ? Pourquoi ce résultat ? Vérifier ensuite le nouveau document dans le validator W3C. Qu'est-ce qu'on remarque ?

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Validation HTML</title>
    </head>
    <body>
        <table border="1">
          <caption>Chiffres</caption>
          <tr>
            <th>Mois</th>
            <th>Montant</th>
          </tr>
          <tr>
            <td>janvier</td>
            <td>100</td>
          </tr>
          <tr>
            <td>février</td>
            <td>200</td>
          </tr>
        </table>
    </body>
</html>