› Tutoriels › Html › Structure d'une page html

Structure d'une page html

Comme nous avons pu le voir dans les langages de développement, un fichier HTML doit respecter une certaine structure.
Cette structure est une imbrication de balises essentielles à la mise en page de votre fichier HTML .
A chaque fois que vous créerez une nouvelle page HTML , celle-ci devra avoir la même structure qui est la suivante :

<html>
 
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Titre de ma page</title>
        <meta name="description" lang="fr" content="Description de ma page" />
    </head>
 
    <body>
        <p>
        Ici j'insère mon texte qui sera visible dans ma page.
        <br />
        Je peux même insérer un lien vers <a href="/contact.php">
        ma page de contact</a>
        </p>
    <body>
 
</html>

» Voir le résultat.

Description des balises :

Les balises <html> ... </html> englobent tout le document, elles servent à indiquer qu'il s'agit d'un fichier HTML .
Retenez bien que rien ne doit être écrit en dehors de la balise <html> ... </html> !

Les balises <head> ... </head> définissent l'entête du document, elles comprendront les balises meta, les link, le titre de la page, ...
Tout ce qui se trouve dans les balises <head> ... </head> ne sera pas visible par le visiteur !

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
http-equiv="Content-Type" est ici pour dire au navigateur et au serveur qu'on va définir le jeu de caractère utilisé.
text/html définie que le fichier qui est en cours de visualisation (votre page) est une page HTML .
utf-8 définit ici le jeu de caractère utilisé dans le fichier.

Les balises <title> ... </titre> contiennent le titre de la page qui sera affiché dans la barre titre de votre navigateur et dans les moteurs de recherche (Cf: image)
Balise title

La méta description doit être remplie par la description de la page en cours de visualisation.
Son contenu servira de texte descriptif pour votre site dans Google par exemple (Cf. image).
Meta description

Les balises <body> ... </body> définissent le contenu de votre site visible par les visiteurs.
On y trouvera donc votre texte (menu, articles, ..), vos images, ...
Tout ce que vous voyez sur ce site, comme sur tous les autres, est contenu dans les balises <body> ... </body>.

Voila ce qu'il vous faut retenir sur la structure d'une page HTML , bien savoir que les balises <html> ... </html> englobent les balises <head ... </head> et <body> ... </body>, et ce que doivent contenir celles-ci (soit les éléments d'entête pour la première et le contenu visible pour la seconde).

Débuter en html

Mettre en place un favicon