Structure HTML

GRETA de Clermont-Ferrand • Lycée La Fayette • Pôle Plurimédia
Formation : Fondamentaux de la Création de Site
Mise à jour : 17 mars 2020

La structure HTML

Une déclaration DOCTYPE avant tout

La déclaration DOCTYPE doit être la toute première chose à placer dans votre document HTML, avant la balise « html ». La déclaration DOCTYPE n'est pas une balise HTML. C'est une information destinée au navigateur Web précisant la version du langage HTML dans laquelle la page est écrite.

Pour préciser que votre page est codée en HTML5, vous écrivez simplement ceci :

<!DOCTYPE html>

Deux boîtes dans un paquet

Les deux éléments principaux d'un document HTML sont les sections « head » et « body ». L'élément « head » contiendra des informations concernant votre page, dont aucune n'apparaît dans le navigateur (sauf le titre de la page, affiché sur la fenêtre ou l'onglet du navigateur). L'élément « body » contiendra tout les contenus qui seront affichés dans la fenêtre ou l'onglet du navigateur.

Ces deux éléments principaux sont enveloppés dans un grand élément de structure délimité par la balise d'ouverture <html> et la balise de fermeture </html>. Cet élément est nommé « élément racine ».

Un document écrit en HTML5 possède donc toujours une structure de base similaire à celle-ci :

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    </body>
</html>

Quelques précisions utiles

La charte de codage des caractères

Comme nous venons de le voir, votre document HTML a deux parties : une tête et un corps. Rappelez-vous que c'est dans la partie « head » que vous écrirez les informations qui concernent la page HTML, tandis que c'est dans le « body » que vous placerez les informations qui constituent visuellement la page qui sera lue par vos lecteurs.

Une des informations à placer dans la partie « head » concerne la charte de codage des caractères de la page HTML. La charte la plus utilisée est « utf-8 ». Cette information sera placé dans une balise « meta » de la manière suivante :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf8">
    </head>
    <body>
    </body>
</html>

Ce format de base suffit généralement à toutes les situations. Il existe d'autres charsets, comme le format iso-8859-1, mais ils n'apportent rien de plus dans le monde latin. Pour les pages en chinois ou japonais, un autre codage est nécessaire.

Le titre de la page HTML

Il est impératif de donner un titre à votre page HTML (qui apparaîtra dans la barre supérieure ou l'onglet de la fenêtre du navigateur), cela devra être fait dans la section « head ». L'élément utilisé pour cela est l'élément « title ». Vous écrirez donc le titre de la page HTML entre la balise d'ouverture <title> et la balise de fermeture </title>.

Le titre de la page HTML est particulièrement important car il est utilisé par les moteurs de recherche, tels que Google, pour indexer votre site Web et il apparaît dans les résultats de recherche.

Le titre de la page HTML ne doit pas être confondu avec le titre principal de niveau 1 figurant sur la page lue par les lecteurs humains. Dans le code ci-dessous, le titre de la page HTML est « Structure page HTML » et le titre de niveau 1 lu par les lecteurs de la page est « La structure d'une page HTML ».

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf8">
        <title>Structure page HTML</title>
    </head>
    <body>
        <h1>La structure d'une page HTML</h1>
    </body>
</html>

Remarque : La disposition du code source est laissée à l'initiative de chacun, du moment que la syntaxe du langage est respectée. Une présentation avec retours à la ligne et indentations facilite l'interprétation du code par ceux qui doivent en prendre connaissance. La présentation ci-dessus est plus digeste que celle-ci (qui fonctionne aussi) :

<!DOCTYPE html><html><head><meta charset="utf8"><title>Structure page HTML</title>
</head><body><h1>La structure d'une page HTML</h1></body></html>

Un modèle pour l'édition HTML

La structure de page que nous venons de définir servira de modèle à la création de toute page HTML au moyen d'un éditeur de code. Si vous utilisez Notepad sur PC ou Brackets sur Mac, PC ou Linux, copiez le code ci-dessous dans l'éditeur et personnalisez son contenu en fonction des informations que vous souhaitez publier. Enregistrez votre fichier au format .html (en respectant la nomenclature des fichiers Web) puis ouvrez-le avec un navigateur.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf8">
        <title>Titre page HTML</title>
    </head>
    <body>
        <h1>Titre de niveau 1</h1>
        <p>Texte de paragraphe d'introduction</p>
        <h2>Titre de niveau 2</h2>
        <p>Texte de paragraphe de développement</p>
    </body>
</html>

Le code ci-dessus permettra l'affichage, dans tout navigateur, des informations suivantes :