La structure d'une page web
Cet article présente les quatre éléments essentiels d'une page web.
Exemple de page Web
Voici un exemple de page Web simple, mais complète et conforme à la dernière version d'HTML. Dans le volet de gauche sur fond noir ci-dessous, tu vois le code HTML utilisé pour générer cette page avec les quatre parties essentielles de toute page web :
- <!DOCTYPE> (toujours précédé d'un point d'exclamation)
- <html>
- <head>
- <body>
Dans le volet de droite, sur fond blanc, tu vois la page telle que présentée par un navigateur sur un ordinateur ou un téléphone.
Place-toi pour un instant dans la peau de ton navigateur préféré, qui recevrait ce fichier texte après avoir demandé une page Web nommée page.html :
<!DOCTYPE html>
La première ligne <!DOCTYPE html> indique au navigateur « Hey, le fichier ci-dessous est une page écrite en HTML5 ». Contrairement à la plupart des éléments HTML, le DOCTYPE n'a pas de balise fermante. On ne fait qu'avertir le navigateur du type de contenu qui s'en vient. Toutes nos pages HTML débuteront par cette balise, sans exception, et comme pour les trois autres, c'est WordPress qui s'en occupera. Facile!
<html>
L'élément <html> est considéré comme la racine de la page HTML, soit la page au complet. Tous les éléments doivent être insérés à l'intérieur de cet élément, sans exception. Il s'ouvre avec la balise <html> et se ferme au bas complètement de la page avec </html>. Il ne devrait jamais y avoir quoi que ce soit après la balise fermante </html>.
<head>
Ensuite vient l'entête du document, compris entre les balises <head> et </head>. Un peu comme l'entête d'une lettre ou la page de présentation d'un travail, l'entête contient des informations à propos de la page HTML qui s'en vient. Ces informations n'apparaitront jamais à l'écran, mais elles sont quand même très importantes, notamment pour le navigateur et pour les moteurs de recherche. C'est donc une partie essentielle à connaitre en marketing électronique.
<meta charset="utf-8">
L'élément <meta charset="utf-8"> indique au navigateur que le fichier est encodé au format UTF-8 pour permettre la représentation des caractères accentués. Cet élément doit être le premier dans l'entête de toutes vos pages HTML. En scrutant le code de pages de concurrents tu verras peut-être d'autres types d'encodage comme ISO-8859-1 ou autres. Sache seulement que nos pages doivent être en Unicode, donc charset="utf-8" fait le travail. 😉
<meta name="description" content="Description du contenu de la page.">
L'élément <meta name="description" content="Description du contenu de la page"> indique aux moteurs de recherche quel texte devrait s'afficher pour décrire la page dans les pages de résultats. Il est utile pour l'optimisation des pages et articles pour les moteurs de recherche. Certains outils, comme Yoast SEO ou Semrush offrent des rappels et conseils pour bien le renseigner.
Observer les balises « meta description » des pages de concurrents et de leaders dans les résultats de recherche est une bonne façon d'apprendre comment ils les utilisent. Attention cependant, ça ne veut pas dire qu'ils font toujours la bonne chose. Les sites comme arefs, HubSpot, Moz (ne pas confondre avec Mozilla), Neil Patel, Semrush et Yoast offrent des recommandations utiles à ce sujet.
<title>
Le second élément de l'entête est l'élément <title> (la balise fermante </title> est requise) indique le titre de la page. Le navigateur place ce titre dans l'onglet de la page Web, et les moteurs de recherche comme Google et Bing s'en servent pour identifier les résultats de recherche. Il est donc très important d'inscrire un titre de page très représentatif du contenu de la page ou de l'article, contenant les mots clés du contenu.
<body>
Après l'entête vient le corps ou le contenu de la page, entre les balises <body> et </body>. Le contenu publié à cet endroit apparaitra à l'écran ou sera lu par un lecteur d'écran pour les personnes ayant des difficultés de lecture (aveugles, malvoyants, troubles de lecture, etc.). Il existe plusieurs éléments HTML pouvant être inclus dans le corps d'une page Web, dont les titres <h1> à <h6>, les paragraphes <p>, les images <img>, les liens hypertextes <a> (pour ancre), les listes numérotées <ol> (ordered lists), les listes à puces <ul> (unordered lists), les formulaires <form> et plusieurs marqueurs sémantiques servant à structurer le contenu d'une page, tels que <em>, <strong>, <figure>, <figcaption>, <dfn>, <abbr>, <q>, <blockquote>, <cite>, etc.
Exercice 1 – Visite la page d'un concurrent et observe son code source (Ctrl+U dans ton navigateur)
Visite la page d'un concurrent pour ton site web ou d'une entreprise qui t'inspire et une fois sur sa page d'accueil, fais le raccourcis Ctrl+U pour voir le code source de la page. Ne te laisse pas intimider par tout le code que tu verras! Repère les éléments suivants dans la page à l'aide du raccourci Ctrl+F :
- DOCTYPE, au haut de la page. Est-ce un <!DOCTYPE html> standard ou est-il différent? Plus long?
- html en cherchant <html mais sans le caractère > car il pourrait y avoir autre chose d'écrit. Est-ce le cas?
- body en cherchant <body mais sans le caractère > car il pourrait y avoir autre chose d'écrit. Est-ce le cas?
- <head> (l'élément <head> contiendra peut-être beaucoup d'information et d'autres élément « meta ».
- meta en cherchant <meta et en cliquant sur suivant pour trouver celui qui contient name="description". Quel est le contenu de l'élément meta description? Semble-t-il pertinent et représentatif du contenu de la page?
- title en cherchant <title> ou <title si le premier ne retourne pas de résultat. Compare le contenu de l'élément title avec le contenu de l'onglet de la page web dans ton navigateur, en laissant ta souris au-dessus de celui-ci quelques instants.
Exercice 2 – Crée ta première page Web complète
Lance l'application Visual Studio Code ou Bloc-notes et tape le code ci-dessus au complet. Évite de le copier-coller. Ce serait pratique et rapide, mais tu apprendras mieux si tu le tapes ligne par ligne. Courage, ce n'est pas très long!
Enregistre-le ensuite en cliquant sur Fichier> Enregistrer sous. Navigue à ton dossier d'exercices et nomme-le index.html dans la case Nom du fichier. Clique sur Enregistrer.
Dans ton navigateur Firefox, ouvre ensuite un nouvel onglet avec le raccourci clavier Ctrl+T, puis ouvre le fichier index.html avec le raccourci clavier Ctrl+O et en naviguant vers ton dossier d'exercices. Tu vois maintenant ta première page Web complète dans ton navigateur! Ajoute du contenu de ton choix, expérimente avec quelques balises, sauvegarde et rafraichis chaque fois ta page avec Ctrl+R ou la touche F5.
Outils requis
- Un navigateur moderne
- Un éditeur de texte
- Un logiciel de création d'images (nous y reviendrons plus tard)
- Un serveur Web pour publier le site (nous y reviendrons plus tard)
Draillard, F. (2022). Premiers pas en CSS 3 et HTML 5 (9e éd.). Eyrolles. (Voir : Structure d'une page HTML, p. 20)
