HTML5 – Structure d’une page HTML

LEÇON

 

Structure de base

Les balises responsables pour configurer et structurer le document HTML sont les balises !DOCTYPE, html, head, meta, title et body. Voici un document HTML5 valide mais vide de contenu (le contenu est ce qui est visible dans la fenêtre principale du navigateur).

<!DOCTYPE html>
<html>
    <head>
        <title>Un titre</title>
    </head>
    <body>
    </body>
</html>

Remarques :

  • le titre "Un titre" n'apparaît pas dans la page mais il est utilisé pour nommer l'onglet pour cette page
  • toutes les balises présentes ci-dessus sont obligatoires pour tout document HTML5 valide
  • la balise meta n'est pas obligatoire
  • pour les pointilleux, <!DOCTYPE> n'est pas formellement une balise, mais une instruction.

 

Exemple

Un exemple plus complet et avec un peu de contenu.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <title>Bienvenue</title>
    </head>
    <body>
       <h1>Bonjour</h1>
       <p>Salutations</p>
    </body>
</html>

 

Attribut lang

Souvent oublié - mais très utile pour les moteurs de recherche, la vérification d'orthographe automatique et les convertisseurs de texte en audio (text to speech converters) entre autres - est l'attribut lang. Pour déclarer la langue au niveau du document on le fait dans la balise html. On peut ensuite déclarer des morceaux en langue différente (par exemple pour indiquer un paragraphe en anglais dans un document : <p lang="en">Hello world</p>).

 

meta charset

La balise meta sera couverte de façon générale plus tard. Pour l'instant, remarquer juste cet exemple spécifique : <meta charset="UTF-8">

Ceci indique aux navigateurs (et moteurs de recherche) l'encodage employé dans le document HTML pour qu'ils puissent comprendre et afficher correctement les caractères du document. Le standard depuis HTML5 est d'utiliser UTF-8 qui comprend une gamme de caractères très large, et qui devrait suffire pour la plupart de vos projets web.

IMPORTANT : si vos accents s'affichent bizarrement c'est parce que soit vous avez mal déclaré le charset, soit il y a une incohérence entre le charset déclaré et l'encodage du document.

 


 

EXERCICES

  1. Ouvrir un éditeur de texte (notepad++) et copier-coller le code exemple et le sauvegarder en tant que fichier HTML (extension .htm ou .html). Ouvrir le fichier avec un navigateur.
  2. Modifier et personnaliser le fichier avec votre propre contenu. Vous pouvez expérimenter avec des balises que vous connaissez. Regarder l'effet des modifications via le navigateur.
  3. Valider les deux morceaux de code ci-dessus avec le W3C HTML Validator (en mode direct input)
  4. Faire pareil avec le fichier HTML que vous avez créé (en mode file upload)
  5. Comparer la visualisation de la page sur des navigateurs différents (IE, Firefox, Chrome ou autre). Y a-t-il des différences ?