Une page web comme celle que vous consultez pour le moment est générée à partir d’un fichier texte écrit dans un langage de programmation appelé HTML, fichier qui porte une extension htm ou html. Lorsque vous demandez au navigateur d’afficher la page, il doit interpréter le code contenu dans le fichier pour générer ce que vous voyez sur l’écran.
<!DOCTYPE html>
<html>
<title>Page web test</title>
<body>
<h1>Ceci est un titre</h1>
<p>Ceci est un paragraphe.</p>
<!--Ceci est un commentaire.-->
<p>Ceci est un autre paragraphe.</p>
<hr />
</body>
</html>
La manière la plus facile pour comprendre comment cela fonctionne est probablement d’analyser le code d’une page très simple comme dans l'encadré de droite. Ce code va générer à l'écran un résultat similaire à ce qui suit :
Ceci est un paragraphe.
Ceci est un autre paragraphe.
(Dans la suite, les exemples de code HTML seront sur fond rouge pâle et les résultats fournis par le navigateur seront affichés sur fond jaune paille.)
En HTML5, la version la plus récente du langage HTML, le document doit obligatoirement commencer par la déclaration
<!DOCTYPE html> et le reste du code doit être compris entre les balises <html> et </html>.
Les balises sont des mots-clés, entourés de deux crochets en chevron. Elles se présentent généralement en paires, formées d'une balise d’ouverture (ou balise ouvrante) :
<mot-clé> et d'une balise de fermeture (ou balise fermante) : </mot-clé>, qui indiquent au navigateur comment interpréter le texte ou le
code qu’elles encadrent. Par exemple, les balises <html></html> indiquent au navigateur qu'elles entourent le code d'une page web.
En HTML5, deux autres paires de balises sont obligatoires : les balises <body></body>, qui entourent le corps de la page web, c.-à-d. l’information
relative à ce qui va être affiché dans la fenêtre du navigateur et les balises <title></title> qui encadrent le titre du document (à ne pas confondre avec le titre
qui sera affiché dans la page web). Le titre du document fait partie de certain renseignements relatifs à la page web qu'on apppelle des métadonnées, dont on parlera plus tard.
Ces métadonnées doivent obligatoirement figurer avant la balise <body>.
Les autres paires de balises qu’on rencontre dans cette page web figurent dans le corps de la page et sont <h1></h1>, qui encadrent le titre de la page
et <p></p>, qui délimitent les paragraphes.
À noter que les paires de balises doivent être fermées dans l’ordre inverse où elles sont ouvertes. Puisqu’on a les balises d'ouverture <html> et
<body> dans cet ordre, on doit avoir les balises de fermeture dans l’ordre inverse : </body> puis </html>.
On rencontre aussi un autre type de balise dans cette page : la balise auto fermante <hr />, qui affiche une ligne horizontale.
Les balises auto fermantes sont de la forme <mot-clé /> (l'espace et la barre oblique à la fin sont facultatifs) ; elles n'ont pas de balise de fermeture.
Finalement, on notera que le fichier HTML peut contenir des commentaires, qui ne seront pas affichés par le navigateur : ils sont de la forme
<!-- texte du commentaire -->.
Vous pouvez saisir le code dans l'encadré rouge pâle, le copier et le coller dans un fichier texte que vous sauvegarderez en lui donnant l’extension html. Si vous double-cliquez sur ce fichier, votre navigateur par défaut affichera votre première page web !