 Skip to main content

 Skip to search
 Skip to select language

OPEN MAIN MENU

1. Apprendre le développement web

2. Notions de base en HTML

Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez

également contribuer en rejoignant la communauté francophone sur MDN Web

Docs.

Filter sidebar

In this article
 Qu'est-ce que HTML ?
 Images
 Baliser du texte
 Liens
 Conclusion

1. Vous débutez ? Commencez ici !

2. Démarrer avec le Web
1. Commencer avec le Web
2. Installation des outils de base
3. Quel sera l'aspect de votre site web ?
4. Gérer les fichiers
5. Notions de base en HTML
6. Les bases des CSS
7. Les bases de JavaScript
8. Publier votre site web
9. Le fonctionnement du Web
3. HTML — Structurer le Web
4. Introduction à HTML
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
5. Multimédia et contenu embarqué
1.
2.
3.
4.
5.
6.
7.
6. Tableaux HTML
1.
2.
3.
4.
7. CSS — Mettre en forme le Web
8. Premiers pas en CSS
1.
2.
3.
4.
5.
6.
9. Blocs de construction CSS
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
10. Mise en forme du texte
1.
2.
3.
 4.
5.
6.
11. Disposition en CSS
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
12. JavaScript — Scripts et dynamisme côté client
13. Premiers pas en JavaScript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
14. Blocs de construction JavaScript
1.
2.
3.
4.
5.
6.
7.
8.
15. Introduction aux objets JavaScript
1.
2.
3.
4.
5.
6.
7.
8.
16. JavaScript asynchrone
1.
2.
3.
4.
5.
6.
17. Les API web côté client
1.
2.
3.
4.
5.
6.
7.
8.
18. Formulaires web — Travailler avec les données des utilisateur·rice·s
19. Parcours sur les fondamentaux des formulaires web
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
20. Fonctionnalités avancées des formulaires
1.
2.
3.
4.
21. Accessibilité — Rendre le Web utilisable par toutes et tous
22. Guides sur l'accessibilité
1.
2.
3.
4.
5.
6.
7.
8.
23. Performance — Making websites fast and responsive
24. Performance guides
1.
 2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
25. MathML — Écrire des formules mathématiques sur le Web
26. Premiers pas en MathML
1.
2.
3.
27. Outils et tests
28. Outils pour le développement web côté client
1.
2.
3.
4.
5.
6.
29. Introduction aux frameworks côté client
1.
2.
30. React
1.
2.
3.
4.
5.
6.
7.
31. Ember
1.
2.
3.
4.
5.
6.
32. Vue
1.
2.
3.
4.
5.
 6.
7.
8.
9.
33. Svelte
1.
2.
3.
4.
5.
6.
7.
8.
34. Angular
1.
2.
3.
4.
5.
6.
35. Git et GitHub
1.
36. Tests entre les différents navigateurs
1.
2.
3.
4.
5.
6.
7.
8.
9.
37. Programmation web côté serveur
38. Premiers pas
1.
2.
3.
4.
5.
39. Django (Python)
1.
2.
3.
4.
5.
6.
7.
 8.
9.
10.
11.
12.
13.
14.
15.
16.
40. Express (Node.js/JavaScript)
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
41. Ressources complémentaires
42. Questions fréquentes
1.
2.
3.
4.
5.
6.
7.

Notions de base en HTML

 Précédent
 Aperçu : Getting started with the web
 Suivant

HTML (pour HyperText Markup Language, qu'on peut traduire en « langage de

balisage hypertexte ») est le langage utilisé pour structurer une page web et son
contenu. On peut par exemple organiser le contenu en un ensemble de paragraphes,
une liste d'éléments, utiliser des images ou des tableaux de données. Dans cet article,
nous verrons les notions de base pour comprendre HTML et ses fonctionnalités.

Qu'est-ce que HTML ?

HTML est un langage de balisage qui définit la structure du contenu. Un document

HTML est une suite d'éléments utilisés pour encadrer différentes parties du contenu
afin de les faire apparaître ou se comporter d'une certaine façon. Les balises autour
du contenu permettent de transformer une image ou un texte pour obtenir un lien
vers une autre page, de créer des titres, etc. Prenons comme exemple le contenu qui
suit :

Mon chat est très grincheux.

Si on veut que la ligne ait son propre paragraphe, on peut utiliser les balises
correspondantes (<p>) pour encadrer le contenu :

HTMLCopy to Clipboard
<p>Mon chat est très grincheux.</p>
Anatomie d'un élément HTML

Voyons cet élément de paragraphe plus en détails.

Les parties principales de notre élément sont :

1. La balise ouvrante : celle-ci se compose du nom de l'élément (ici p), entre

deux chevrons (le premier ouvrant < et le second fermant >). Cela indique le début de
l'élément, ici cela indique où le paragraphe commence.
2. La balise fermante : à la différence de la balise ouvrante, une barre oblique (slash) est
ajoutée avant le nom de l'élément. Cela indique la fin de l'élément. Dans notre
exemple, c'est l'endroit où le paragraphe s'arrête. Oublier cette balise fermante est
 une erreur qu'on fait souvent au début et qui peut déclencher des effets étranges et
indésirables.
3. Le contenu : le contenu de l'élément. Pour cet exemple, il s'agit uniquement de texte.
4. L'élément : l'ensemble formé par la balise ouvrante, la balise fermante et le contenu
constitue l'élément.

Les éléments peuvent aussi avoir des attributs comme ceci :

Les attributs contiennent des informations supplémentaires à propos de l'élément et

qui ne sont pas affichées avec le contenu. Ici, class correspond au nom de l'attribut
et editor-note correspond à la valeur de l'attribut. L'attribut class permet de donner un
identifiant non unique qui peut être utilisé pour cibler l'élément (et tous les autres
éléments qui partagent la même valeur d'attribut pour class), notamment pour la mise
en forme ou la manipulation avec des scripts.

Certains attributs n'ont pas de valeur, comme required.

Les attributs qui ont une valeur observent ces règles :

1. Il y a un espace entre le nom de l'attribut et le nom de l'élément (ou le précédent

attribut si l'élément a déjà un ou plusieurs attributs).
2. Le nom de l'attribut est suivi par un signe égal ( =).
3. La valeur de l'attribut est délimitée par des doubles ( ") ou simples (') quotes.
Note : Les valeurs d'attribut qui ne contiennent pas de blancs ASCII (ou l'un des
caractères parmi " ' ` = < >) peuvent ne pas être encadrées de quotes. Malgré tout, il
est recommandé d'utiliser des quotes pour toutes les valeurs d'attribut afin que le
code soit cohérent et compréhensible.
Imbrication d'éléments

On peut également placer des éléments à l'intérieur d'autres éléments : c'est ce qu'on
appelle l'imbrication. Si on souhaitait indiquer que le chat était très grincheux, on
pourrait placer le mot « très » dans un élément <strong>, indiquant l'accentuation sur
ce mot :

HTMLCopy to Clipboard
<p>Mon chat est <strong>très</strong> grincheux.</p>

Il faut en revanche s'assurer que les éléments sont correctement imbriqués. Dans
l'exemple précédent, on commence par ouvrir l'élément <p>, puis l'élément <strong>. Il
faut donc commencer par fermer l'élément <strong>, puis l'élément <p>. Ce qui suit est
incorrect :

HTMLCopy to Clipboard
<p>Mon chat est <strong>très grincheux.</p></strong>

Les éléments doivent être ouverts et fermés correctement pour contenir ou être
contenu. S'ils se chevauchent l'un sur l'autre, votre navigateur web essaiera au mieux
de deviner l'intention, mais cela pourra entraîner des résultats inattendus : mieux vaut
éviter !

Éléments vides

Certains éléments n'ont pas de contenu, on les qualifie d'éléments vides. Prenons
l'exemple de l'élément <img> que nous avons sur notre page HTML :

HTMLCopy to Clipboard
<img src="images/firefox-icon.png" alt="Mon image de test" />

Cet élément contient deux attributs ( src et alt) mais n'a pas de contenu et il n'y a pas
de balise fermante. En effet, un élément d'image n'encadre pas du contenu pour avoir
un effet sur celui-ci. Son but est d'intégrer une image dans un document HTML à
l'endroit où il est placé.

Anatomie d'un document HTML

Voilà ce qu'on peut dire individuellement sur les éléments HTML. En revanche, un
élément HTML seul n'a pas vraiment d'intérêt. Nous allons donc voir comment sont
assemblés les éléments pour former une page HTML complète. Reprenons le code
que nous avions mis dans le fichier d'exemple index.html (voir l'article Manipuler les
fichiers) :

HTMLCopy to Clipboard
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Ma page de test</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="Mon image de test" />
</body>
</html>

Voici ce qu'on y trouve :

<!DOCTYPE html>

Le « doctype ». Il s'agit d'un préambule obligatoire. Aux débuts de HTML (en

1991/1992), les doctypes servaient de liens vers des ensembles de règles
qu'une page HTML devait suivre pour être considérée valides (avec des
fonctionnalités de vérifications d'erreur et autres). Aujourd'hui, ils ne sont plus
utilisés ainsi et ce marqueur sert uniquement au bon comportement du
document. C'est tout ce qu'il y a à savoir là-dessus pour le moment.

<html></html>

L'élément <html> est celui qui contient tout le reste de la page. On l'appelle
aussi l'élément racine. Il contient ici l'attribut lang qui indique la langue
principale du contenu du document.

<head></head>

L'élément <head> sert de conteneur pour tout ce qu'on veut inclure dans une
page HTML qui n'est pas du contenu à afficher à l'écran. Cela inclut les mots-
clés et une description de la page destinée aux moteurs de recherches, les
liens vers le CSS qui mettra en forme notre contenu, les déclarations pour les
jeux de caractères utilisés, etc.

<meta charset="utf-8">

Cet élément définit le jeu de caractères utilisé pour le document, ici UTF-8 (qui
inclut la plupart des caractères pour un grand nombre de langues écrites). Ce
jeu de caractères permettra de gérer n'importe quel contenu textuel placé
dans le document. Inclure cette information ne coûte rien et permet d'éviter
des problèmes d'encodage par la suite.
<meta name="viewport" content="width=device-width">

Cet élément viewport permet que la page soit affichée avec la bonne largeur par
rapport à la zone d'affichage, empêchant les navigateurs sur mobile d'afficher
la page plus largement que la zone d'affichage avant de la réduire.

<title></title>

L'élément <title> définit le titre de la page, qui apparaîtra dans l'onglet sur
lequel la page est chargée. Il sert aussi à décrire la page lorsqu'on l'ajoute aux
favoris ou qu'elle est listée dans les résultats d'un moteur de recherche.

<body></body>

L'élément <body> contient tout le contenu qu'on veut afficher aux utilisatrices et
utilisateurs web lorsqu'ils visitent la page, que ce soit du texte, des vidéos, des
jeux, des pistes audio, etc.

Images

Revenons sur l'élément <img> :

HTMLCopy to Clipboard
<img src="images/firefox-icon.png" alt="Mon image de test" />

Comment mentionné auparavant, cet élément permet d'intégrer une image dans la
page là où l'élément est placé. L'image à afficher est désignée par
l'attribut src (source) qui contient le chemin vers le fichier image.

Nous avons également inclus un attribut alt (pour texte alternatif). L'attribut alt,
permet d'indiquer un texte descriptif pour les personnes qui ne peuvent pas voir
l'image :

1. À cause d'un handicap visuel. Les personnes avec un handicap visuel utilisent
généralement des logiciels appelés lecteurs d'écran qui lisent le texte alternatif à
haute voix.
2. Un problème a empêché le chargement de l'image. Vous pouvez voir ce cas en
modifiant le chemin de l'attribut src pour le rendre incorrect. Si vous sauvegardez le
document HTML et rechargez la page, vous pourrez voir un résultat comme ceci :

Les mots-clés utilisés pour le texte alternatif forment un texte descriptif. Le texte
alternatif devrait fournir suffisamment d'informations à la lectrice ou au lecteur pour
avoir une bonne idée de ce que l'image contient. Dans cet exemple, notre texte est
« Mon image de test ». Ce texte n'est vraiment pas idéal, il ne renseigne en rien sur ce
que contient l'image. Une bien meilleure alternative décrivant le logo serait « Le logo
de Firefox : un renard enflammé entourant la Terre ».

Essayez maintenant d'utiliser un meilleur texte alternatif pour votre image.

Note : Pour en savoir plus sur l'accessibilité, n'hésitez pas à consulter notre module
d'apprentissage sur l'accessibilité.
Baliser du texte

Cette section décrira certains des éléments HTML essentiels pour baliser et structurer
le texte d'un document.

Titres

Les éléments de titre permettent d'indiquer les parties du contenu qui sont des titres
ou des sous-titres. De la même façon qu'un livre peut avoir un titre principal, des
titres de chapitre, des sous-titres, un document HTML peut en avoir également. HTML
contient 6 niveaux de titre <h1> - <h6>, même si on en utilisera généralement 3 à 4 au
plus :

HTMLCopy to Clipboard
<!-- 4 niveaux de titres : -->
<h1>Mon titre principal</h1>
<h2>Mon titre de deuxième niveau</h2>
<h3>Mon sous-titre</h3>
<h4>Mon sous-sous-titre</h4>
Note : En HTML, tout ce qui est écrit entre <!-- et --> est un commentaire HTML. Le
navigateur ignore les commentaires lorsqu'il affiche le document. Autrement dit, ce
qui est écrit en commentaire est uniquement visible dans le code et pas sur la page.
Les commentaires permettent d'ajouter des notes utiles à propos du code ou de la
logique.

Essayez maintenant d'ajouter un titre pertinent à votre page HTML avant

l'élément <img>.

Note : Vous pourrez voir que le titre de niveau 1 possède une mise en forme
implicite, mais il ne faut pas utiliser ces éléments pour uniquement afficher du texte
en gras ou plus grand. En effet, les éléments ont un sens, utilisé
pour l'accessibilité et le référencement. Essayez de créer une structure de titres
pertinente pour vos pages, sans sauter de niveaux intermédiaires.
Paragraphes

Comme expliqué plus tôt, les éléments <p> forment des paragraphes de texte. Cet
élément est souvent utilisé pour baliser du texte normal du contenu d'une page :
HTMLCopy to Clipboard
<p>Voici un paragraphe simple</p>

Ajoutez votre texte d'échantillon (celui créé à la lecture de À quoi ressemblera votre
site web ?) dans un ou plusieurs paragraphes, juste après l'élément <img>.

Listes

Une bonne partie du contenu web prend la forme de listes. HTML possède des
éléments dédiés. Baliser une liste se fait toujours avec au moins deux éléments. Les
types de liste les plus fréquemment utilisés sont les listes ordonnées et les listes non-
ordonnées :

Les listes non-ordonnées

Utilisées pour les listes où l'ordre des éléments n'a pas d'importance, comme
une liste de courses. Pour celles-ci, on utilise un élément <ul>.

Les listes ordonnées

Utilisées pour les listes où l'ordre des éléments est important, comme une
recette de cuisine. Pour celles-ci, on utilise un élément <ol>.

Chaque élément d'une liste est placé dans un élément <li>.

Ainsi, si on veut qu'une partie de notre paragraphe devienne une liste, à la place de :

HTMLCopy to Clipboard
<p>
À Mozilla, nous formons une communauté de bidouilleuses, concepteurs,
constructrices qui travaillent ensemble…
</p>

On pourra écrire :

HTMLCopy to Clipboard
<p>À Mozilla, nous formons une communauté de</p>

<ul>
<li>Bidouilleuses</li>
<li>Concepteurs</li>
<li>Constructrices</li>
</ul>

<p>qui travaillent ensemble…</p>

Essayez d'ajouter une liste ordonnée ou non-ordonnée à votre page d'exemple.

Liens

Les liens sont importants, ce sont eux qui forment la toile qu'est le Web ! Pour ajouter
un lien, on utilisera un élément <a> (« a » correspondant à « ancre »). Pour placer un
lien dans votre paragraphe, suivez les étapes suivantes :

1. Identifiez le texte voulu (ici nous prendrons le texte « Manifeste Mozilla »).
2. Entourez-le avec les balises ouvrantes et fermantes d'un élément <a> comme suit :

HTMLCopy to Clipboard
<a>Manifeste Mozilla</a>

3. Ajoutez un attribut href à l'élément <a> :

HTMLCopy to Clipboard
<a href="">Manifeste Mozilla</a>

4. Renseignez la valeur de cet attribut avec l'adresse web vers laquelle vous voulez créer
le lien :

HTMLCopy to Clipboard
<a href="https://www.mozilla.org/fr/about/manifesto/">Manifeste Mozilla</a>

Attention, vous pourriez obtenir des résultats inattendus si vous omettez la

partie https:// ou http://, qui indique le protocole, au début de l'adresse. Après avoir créé
un lien, cliquez dessus pour vous assurer qu'il pointe à l'endroit voulu.

Note : href peut sembler un peu obscure comme nom d'attribut : il signifie hypertext
reference soit «référence hypertexte ».

Ajoutez un lien à votre page si ça n'est pas déjà fait.

Conclusion

Si vous avez suivi l'ensemble des instructions de cet article, vous devriez obtenir une
page qui ressemble à celle-ci (vous pouvez aussi la voir ici (en anglais)) :
Si vous coincez, vous pouvez toujours comparer votre travail avec le code de notre
exemple finalisé sur GitHub.
Nous n'avons fait qu'effleurer la surface de HTML. Pour approfondir, n'hésitez pas à
consulter la thématique Apprendre HTML.

 Précédent
 Aperçu : Getting started with the web
 Suivant
Found a content problem with this page?

 Edit the page on GitHub.

 Report the content issue.
 View the source on GitHub.

Want to get more involved? Learn how to contribute.

This page was last modified on 19 juil. 2023 by MDN contributors.

Your blueprint for a better internet.

 MDN on Twitter
 MDN on GitHub
 MDN Blog RSS Feed

MDN

 About
 Blog
 Careers
 Advertise with us

Support

 Product help
 Report an issue

Our communities

 MDN Community
 MDN Forum
 MDN Chat

Developers

 Web Technologies
 Learn Web Development
 MDN Plus
  Hacks Blog

 Website Privacy Notice

 Cookies
 Legal
 Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.

Portions of this content are ©1998–2023 by individual mozilla.org contributors.
Content available under a Creative Commons license.