Créer une page HTML

Le HTML (pour “Hyper Text Markup Language”, ou “Langage de balisage hypertexte”) est un langage permettant de créer des pages web grâce à des codes spécifiques. Ces codes, dénommés « balises », permettent aux navigateurs d’interpréter et d’afficher du contenu de manière structurée et lisible.

Le langage HTML n’est pas un langage de programmation : il s’agit d’un langage de balisage qui décrit la structure et le sémantique du contenu web.

Aujourd’hui, HTML est la base de tous les sites web modernes. Comprendre ce langage est essentiel pour quiconque souhaite développer des applications web, créer des sites internet ou simplement comprendre comment fonctionne le web.

Structure d’une page HTML#

Une page HTML moderne contient des éléments structurels essentiels pour être conforme aux standards du W3C (World Wide Web Consortium). Chaque élément est délimité par des balises d’ouverture <balise> et de fermeture </balise>.

Les éléments fondamentaux#

Pour qu’une page web soit valide et fonctionnelle, vous devez inclure ces éléments essentiels :

<!DOCTYPE html> : Déclaration du type de document (indique aux navigateurs que la page utilise HTML5)
<html> </html> : Élément racine qui contient toute la page HTML
<head> </head> : Section d’en-tête contenant les métadonnées (titre, charset, feuilles de style, scripts…)
<body> </body> : Corps du document contenant le contenu visible par l’utilisateur

Doctype moderne#

Contrairement aux anciennes versions qui nécessitaient des déclarations complexes, HTML5 simplifie le doctype :

<!DOCTYPE html>

Cette simple ligne suffit pour indiquer aux navigateurs et aux robots de recherche que votre page utilise les standards HTML5 modernes.

Création de votre première page HTML#

Maintenant que nous connaissons les bases de la structure HTML, il est temps de créer notre première page web.

Outils nécessaires#

Pour écrire du code HTML, plusieurs options s’offrent à vous :

Éditeurs de code modernes : VS Code, Sublime Text, Atom (avec coloration syntaxique et auto-complétion)
Éditeurs simples : Notepad++ (Windows), TextEdit (macOS), Gedit (Linux)
Éditeurs en ligne : CodePen, JSFiddle, Replit

Pour ce tutoriel, nous utiliserons un éditeur de texte simple. L’important est de travailler en mode texte brut (plain text).

Structure de base#

Commençons par créer la structure HTML de base que nous avons vue précédemment :

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

Amélioration de la lisibilité#

Pour rendre le code plus lisible et maintenable, il est recommandé d’ajouter des sauts de ligne et une indentation cohérente :

<!DOCTYPE html>

<html>
  <head> </head>

  <body></body>
</html>

Ajout des métadonnées essentielles#

Dans la section <head>, ajoutons les éléments de base nécessaires :

<!DOCTYPE html>

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ma première page HTML</title>
  </head>

  <body></body>
</html>

Explication des métadonnées :

charset="UTF-8" : Définit l’encodage des caractères pour supporter tous les langages
viewport : Assure une bonne affichage sur les appareils mobiles (responsive design)
title : Définit le titre qui apparaîtra dans l’onglet du navigateur

N’oubliez pas d’enregistrer le document que vous avez créé en le nommant (par exemple) « test.html » → Vous devez mettre l’extension ».HTML » pour que tous les navigateurs web puissent reconnaître le document comme étant une page web.

Si vous essayez d’ouvrir cette page dans un navigateur, vous risquez d’être déçu par le résultat… ! En effet, vous n’avez saisi que les balises permettant de structurer la page HTML, il n’y a pas de contenu à l’intérieur du <body>. Ajoutez un texte quelconque entre les balises <body> et </body>, enregistrez les modifications et testez une nouvelle fois la page dans votre navigateur. Dans notre cas :

<!DOCTYPE html>

<html>
  <head> </head>

  <body>
    Ma première page HTML... Elle fonctionne ! Elle n'est pas encore très jolie,
    mais tout va arriver petit-à-petit !
  </body>
</html>

La page affichée est blanche avec le texte que nous avons saisi… C’est tout bon ! À ce point-ci, vous savez dès à présent créer une page HTML, en lui attribuant une structure simple et surtout conforme aux normes !

Maintenant, il faut ajouter le contenu d’une part, mais aussi embellir notre page pour qu’elle soit plus agréable à l’œil… !

Ajout de contenu#

Maintenant, ajoutons du contenu visible dans la section <body> pour rendre notre page intéressante :

<!DOCTYPE html>

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ma première page HTML</title>
  </head>

  <body>
    <h1>Bienvenue sur ma première page HTML !</h1>
    <p>
      Ceci est mon premier paragraphe. HTML est un langage fascinant qui permet
      de créer des pages web.
    </p>
    <p>Ma page fonctionne déjà, même si elle n'est pas encore très stylisée.</p>
  </body>
</html>

Enregistrement et test#

Enregistrez votre fichier avec l’extension .html (par exemple : ma-premiere-page.html)
Ouvrez ce fichier dans votre navigateur web

Vous verrez une page blanche avec le texte que vous avez ajouté. Félicitations, vous avez créé votre première page HTML valide !

Prochaines étapes#

À ce stade, vous maîtrisez :

La structure de base d’une page HTML
Les métadonnées essentielles
L’ajout de contenu textuel

Les prochaines étapes pour améliorer votre page seront :

Ajouter des titres et sous-titres (<h2>, <h3>, etc.)
Créer des listes (<ul>, <ol>, <li>)
Ajouter des liens (<a>)
Insérer des images (<img>)
Appliquer des styles avec CSS

Vous savez maintenant créer une page HTML avec une structure simple et conforme aux standards modernes !