Introduction à HTML | Tutoriel W3Docs

HTML signifie HyperText Markup Language. C'est le langage de balisage standard utilisé pour créer des pages web et des applications pouvant être affichées dans un navigateur. Développé au début des années 1990, il combine l'hypertexte (qui définit les liens entre les pages web) et le balisage (qui décrit la structure du contenu à l'aide de balises).

HTML n'est pas un langage de programmation — il n'a ni logique ni calcul. Au lieu de cela, il décrit la structure : quelles parties d'une page sont des titres, des paragraphes, des listes, des liens ou des images. Sur une page web classique, trois technologies fonctionnent ensemble :

HTML fournit la structure et le contenu (ce chapitre).
CSS contrôle la présentation — couleurs, mise en page, polices.
JavaScript ajoute des comportements et de l'interactivité.

Les balises HTML servent à définir les éléments HTML. Un élément HTML est généralement composé d'une balise ouvrante et d'une balise fermante, avec le contenu inséré entre les deux. Les navigateurs lisent les balises pour créer des documents HTML et afficher leur contenu à l'écran. Parmi les balises HTML de base, on trouve <html>, <head>, <title>, <body>, <h1> à <h6>, <p>, <br>, <hr>, <ul>, <ol>, <li>, <a>, <img>, et bien d'autres.

Votre premier document HTML

Voici une page HTML complète et minimale. Saisissez-la dans n'importe quel éditeur HTML en texte brut, enregistrez-la dans un fichier avec l'extension .html, et ouvrez-la dans n'importe quel navigateur — vous verrez un titre et un paragraphe.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>This is my first web page.</p>
  </body>
</html>

Lorsque vous ouvrez ce fichier, le navigateur analyse le balisage (lit les balises et construit un arbre d'éléments), puis le restitue (affiche le résultat à l'écran). Le <h1> devient un grand titre et le <p> devient un paragraphe normal — vous ne voyez jamais les chevrons eux-mêmes, seulement leur effet. Ajoutez CSS et JavaScript plus tard pour styliser et animer le même contenu.

Versions de HTML

HTML a été développé pour la première fois par le physicien britannique Tim Berners-Lee en 1990. Depuis lors, de nombreuses versions de HTML ont vu le jour.

Version	Année
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2014

Quelques remarques pour mieux comprendre ce tableau. HTML 4.01 (1999) est resté la version dominante pendant environ une décennie, si bien que la majeure partie du web a été construite sur cette base pendant des années. XHTML 1.0 (2000) a reformulé HTML en appliquant des règles XML plus strictes — par exemple, chaque balise devait être fermée et en minuscules — mais cette rigueur n'a jamais vraiment été adoptée pour la rédaction courante. HTML5 a été publié en tant que recommandation stable du W3C en 2014 (un jalon antérieur de 2012 n'était qu'une ébauche) et c'est la version que vous utilisez aujourd'hui.

Depuis 2014, HTML n'est plus publié sous forme de versions numérotées distinctes. Il est désormais maintenu sous la forme du HTML Living Standard du WHATWG — une spécification unique mise à jour en continu au fur et à mesure de l'adoption de nouvelles fonctionnalités. En pratique, c'est ce que signifie « HTML » aujourd'hui : il n'y a pas de « HTML6 » en préparation, juste un standard en constante évolution. Lorsque les gens disent « HTML5 » aujourd'hui, ils désignent généralement cette version moderne et vivante du langage.

Concepts de base : éléments, balises et attributs

Les trois blocs de construction de HTML sont les éléments, les balises et les attributs. Un élément est l'unité structurelle principale d'une page web. Les balises marquent où un élément commence et se termine, et les attributs fournissent des informations supplémentaires sur un élément. Les deux sections suivantes examinent les balises et les attributs en détail.

Balises HTML

Les balises HTML servent à structurer le contenu d'un site web (texte, hyperliens, images, médias, etc.). Les balises ne sont pas affichées dans les navigateurs, elles « indiquent » seulement aux navigateurs comment afficher le contenu de la page web.

Il existe plus de 100 balises en HTML, et vous pouvez les trouver dans notre tutoriel HTML.

Les balises HTML s'écrivent entre chevrons (par ex. <html>).

La plupart des balises HTML vont par paires, comme les balises <p> </p>. La première balise d'une paire est appelée balise de début (ouvrante), et la seconde est la balise de fin (fermante). Le contenu est écrit entre les balises ouvrante et fermante.

Cependant, il existe des balises non appariées, ou balises vides, qui ne possèdent qu'une balise ouvrante (par exemple, <img>).

Prenons un exemple.

Si vous devez définir un paragraphe (qui est un élément), vous devez utiliser la balise <p>. Le contenu du paragraphe est écrit entre les balises ouvrante (<p>) et fermante (</p>).

Exemple

Le balisage ci-dessous place un seul paragraphe dans une page minimale :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Paragraph example</title>
  </head>
  <body>
    <p>This is a paragraph.</p>
  </body>
</html>

Le navigateur masque les balises <p> et </p> elles-mêmes et n'affiche que le texte entre elles — « This is a paragraph. » — sous forme de bloc de texte.

Attributs HTML

Les attributs HTML sont ajoutés à un élément pour fournir des informations supplémentaires à son sujet. Les attributs sont écrits dans la balise ouvrante et suivent la syntaxe name="value" : le nom indique ce que vous définissez, et la valeur (entre guillemets) indique ce à quoi vous le définissez.

Par exemple, la balise <img> utilise l'attribut src pour pointer vers un fichier image, width et height pour le dimensionner, et alt pour fournir un texte alternatif pour les lecteurs d'écran et dans les cas où l'image ne se charge pas :

<img src="logo.png" width="200" height="100" alt="Company logo">

Ici, quatre attributs sont définis sur un seul élément. Un seul élément peut porter autant d'attributs qu'il le nécessite, séparés par des espaces. Vous pouvez en apprendre plus dans le chapitre Attributs HTML.

Structure d'un document HTML

La déclaration <!DOCTYPE html> spécifie la version HTML utilisée dans le document. Chaque document HTML doit commencer par cette déclaration afin que les navigateurs puissent restituer la page conformément aux normes HTML.

Il existe plusieurs types de <!DOCTYPE> définis pour chaque version de HTML.

Tout le contenu de la page web est écrit entre les balises <html> </html>. L'élément <html> est utilisé pour indiquer aux navigateurs qu'il s'agit d'un document HTML.

L'élément <head> contient les métadonnées (données sur le document HTML), le jeu de caractères, le titre du document, les styles, etc. Ces données ne sont pas affichées aux visiteurs.

À l'intérieur de <head>, la balise la plus souvent copiée est la balise meta viewport. Ajouter <meta name="viewport" content="width=device-width, initial-scale=1"> indique aux navigateurs mobiles d'adapter la largeur de la page à la largeur de l'écran au lieu de réduire une mise en page prévue pour ordinateur — sans cela, votre page apparaît toute petite sur les téléphones.

L'élément <title> affiche le titre du site web dans l'onglet du navigateur lors du chargement de la page. Le titre est écrit entre les balises <title> </title>.

L'élément <body> contient le contenu de la page web (texte, images, vidéos, etc.). Le contenu est écrit entre les balises <body> et </body>.

Les éléments de titre contiennent différents niveaux de titres. Il existe six niveaux de titre — <h1>-<h6>, où <h1> est la balise la plus importante et <h6> la moins importante.

L'élément <p> contient des paragraphes de texte. Le contenu est écrit entre les balises <p> et </p>.

Exemple

Introduction à HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Title of the document</title>
  </head>
  <body>
    <h1>The most important heading.</h1>
    <p>The first paragraph.</p>
    <h2>Subheading</h2>
  </body>
</html>

Essayez vous-même »

Résultat

Pour commencer à écrire du code HTML pour votre site web, vous aurez besoin d'un éditeur. Parlons des éditeurs HTML dans notre prochain chapitre.

Pratique

Qu'est-ce que HTML et quel est son rôle principal, selon ce chapitre ?

HTML est un langage de programmation utilisé pour créer la logique d'application interactive.HTML est un langage de balisage dont le rôle principal est de structurer le contenu sur le web.HTML est principalement utilisé pour ajouter des couleurs, des polices et une mise en page à une page.HTML est un outil de gestion de projets numériques.HTML s'exécute uniquement sur le serveur et n'est jamais envoyé au navigateur.