1. Apprendre le développement web
  2. Modules pour bien démarrer
  3. Votre premier site web
  4. Créer le contenu

Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

HTML : Créer le contenu

HTML (pour HyperText Markup Language en anglais, 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.

Prérequis : Connaissance de base de votre système d'exploitation, des logiciels essentiels pour créer un site web, et du système de fichiers.
Objectifs d'apprentissage :
  • Le but et la fonction de HTML.
  • Les parties de base de la syntaxe HTML : balises ouvrantes et fermantes, éléments, attributs, head, body.
  • Les éléments HTML courants, y compris les paragraphes, titres, images, listes et liens.

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 (ou envelopper) le contenu textuel afin de définir sa structure et de lui faire adopter un certain comportement.

Prenons un exemple — le contenu suivant sera affiché sur la même ligne lorsqu'il sera affiché sur une page web, car il n'est pas structuré de quelque manière que ce soit :

Instructions de la vie :
Manger
Dormir
Répéter

Si nous enveloppons ce contenu avec les éléments HTML suivants, nous pouvons transformer cette seule ligne en un paragraphe (<p>) et trois puces (<li>) :

html
<p>Instructions de la vie&nbsp;:</p>

<ul>
  <li>Manger</li>
  <li>Dormir</li>
  <li>Recommencer</li>
</ul>

Ce code HTML s'affichera ainsi dans un navigateur web :

En plus de structurer du texte, HTML a de nombreux autres usages : faire en sorte que du texte ou des images mènent à d'autres pages web, intégrer des images ou des vidéos, créer des tableaux de données, etc.

Créer votre premier document HTML

Voyons comment les éléments individuels sont combinés pour former une page HTML. Dans cette section, vous allez créer un fichier HTML de base et examiner sa composition.

  1. Dans votre dossier projets-web, créez un nouveau dossier nommé mon-premier-site.

  2. À l'intérieur de mon-premier-site, créez un nouveau fichier appelé index.html, et insérez-y le code suivant exactement comme indiqué :

    html
    <!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="" alt="Mon image de test" />
  </body>
</html>

Voici ce que nous avons :

  • <!doctype html> : Le doctype est un préambule obligatoire. Aux débuts de HTML (vers 1991/92), les doctypes servaient de liens vers des ensembles de règles qu'une page HTML devait suivre pour être considérée comme correcte, ce qui pouvait permettre une vérification automatique des erreurs et d'autres fonctionnalités utiles. Aujourd'hui, ils ne servent plus à grand-chose et sont simplement nécessaires pour que votre document se comporte correctement. C'est tout ce que vous devez savoir pour l'instant.
  • <html></html> : L'élément <html> englobe tout le contenu de la page et est parfois appelé élément racine. Il inclut aussi l'attribut lang, qui définit la langue principale du document.
  • <head></head> : L'élément <head> sert de conteneur pour tout ce que vous souhaitez inclure dans la page HTML qui n'est pas du contenu affiché aux visiteur·euse·s. Cela inclut par exemple des mots-clés et une description de la page pour les résultats de recherche, du CSS pour la mise en forme, des déclarations d'encodage de caractères, etc.
  • <meta charset="utf-8"> : Cet élément définit l'encodage de caractères que votre document doit utiliser, à savoir UTF-8, qui inclut la plupart des caractères de la grande majorité des langues écrites. Il peut donc gérer tout contenu textuel que vous pourriez y placer. Il n'y a aucune raison de ne pas le définir, cela permet d'éviter certains problèmes plus tard.
  • <meta name="viewport" content="width=device-width"> : Cet élément viewport garantit que la page s'affiche à la largeur de la zone d'affichage du navigateur, empêchant les navigateurs mobiles d'afficher des pages plus larges que la zone d'affichage puis de les réduire.
  • <title></title> : L'élément <title> définit le titre de votre page, qui apparaît dans l'onglet du navigateur où la page est chargée. Il sert aussi à décrire la page lorsqu'on l'ajoute aux favoris.
  • <body></body> : L'élément <body> contient tout le contenu que vous souhaitez afficher aux utilisateur·ice·s web lorsqu'ils visitent votre page, qu'il s'agisse de texte, d'images, de vidéos, de jeux, de pistes audio, etc. Pour l'instant, il ne contient qu'un seul élément <img>, mais nous ajouterons plus de contenu par la suite.

Note : La plupart des éléments HTML se composent d'une balise ouvrante (par exemple, <body>), suivie du contenu de l'élément, puis d'une balise fermante (par exemple, </body>). Certains éléments HTML possèdent aussi des attributs, qui contiennent des réglages ou des informations supplémentaires sur l'élément — voyez par exemple charset, name et src dans notre exemple de code.

Images

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

html
<img src="" alt="Mon image de test" />

Cela permet d'intégrer une image dans notre page à l'endroit où elle apparaît. Cela se fait via l'attribut src (source), qui contient le chemin vers le fichier image à intégrer.

Nous avons également inclus un attribut alt (alternatif). Dans l'attribut alt, vous indiquez un texte descriptif pour les personnes qui ne peuvent pas voir l'image, pour les raisons suivantes :

  1. Elles sont en situation de handicap visuel. Les utilisateur·ice·s avec un handicap visuel important utilisent souvent des outils appelés lecteurs d'écran qui lisent le texte alternatif à voix haute.
  2. Un problème empêche l'affichage de l'image. Si l'attribut src ne contient pas un chemin valide vers une image, le texte alternatif sera affiché à la place :

Les mots : mon image de test

Le texte alternatif que vous écrivez doit fournir suffisamment d'informations à la lectrice ou au lecteur pour qu'il·elle comprenne ce que l'image représente. Dans cet exemple, notre texte actuel « Mon image de test » n'est pas idéal car il n'apporte aucune information descriptive sur l'image. Une bien meilleure alternative pour notre logo Firefox serait « Le logo de Firefox : un renard enflammé entourant la Terre ».

Note : Les éléments comme <img> n'ont pas de contenu ni de balise fermante, on les appelle donc des éléments vides (ou void element). Ils sont parfois écrits avec une barre oblique finale à la fin de leur unique balise (<img />), mais cela reste optionnel.

Affichons maintenant votre image.

  1. Dans le dossier mon-premier-site, créez un nouveau dossier appelé images et placez-y l'image que vous avez choisie à l'étape précédente.
  2. Dans la valeur de l'attribut src de la balise <img>, indiquez le chemin vers votre image. Elle se trouve dans un dossier appelé images, qui est dans le même répertoire que votre fichier index.html, donc le chemin sera images/ suivi du nom de votre image. Par exemple, si votre image s'appelle firefox-icon.png, votre attribut src ressemblera à ceci : src="images/firefox-icon.png".
  3. Remplacez la valeur de l'attribut alt — « Mon image de test » — par un texte qui décrit mieux votre image.
  4. Ouvrez votre fichier index.html dans un navigateur web. Vous devriez voir votre image s'afficher. Si ce n'est pas le cas, vérifiez votre élément <img> avec notre code : assurez-vous qu'il ne manque aucune partie de la syntaxe, comme les guillemets. Vérifiez aussi que le nom du fichier image est correct.

Si l'image est très grande et ne rentre pas à l'écran, ne vous inquiétez pas. Nous corrigerons ce problème dans l'article suivant.

Note : Pour en savoir plus sur l'utilisation de l'attribut alt pour les images dans différentes situations, consultez notre tutoriel sur l'accessibilité des contenus multimédias et l'arbre de décision pour l'attribut alt (angl.).

Baliser du texte

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

Note : Le parcours Scrimba Les bases du langage HTML sémantique (angl.) de Scrimba partenaire d'apprentissage MDN est une leçon interactive qui fournit une description utile de HTML, en insistant particulièrement sur l'importance de l'aspect sémantique.

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 :

html
<!-- 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>. Sauvegardez le fichier et observez le dans un navigateur pour voir l'effet.

Paragraphes

Les éléments <p> servent à contenir des paragraphes de texte ; vous les utiliserez fréquemment pour baliser le contenu textuel ordinaire :

html
<p>Voici un paragraphe simple</p>

Ajoutez votre texte d'exemple du précédent chapitre dans un ou plusieurs paragraphes, placés juste en dessous de votre élément <img>. Enregistrez et affichez votre page dans un navigateur.

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 :

  1. 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. Celles-ci sont enveloppées dans un élément <ul>.
  2. Listes ordonnées : utilisées pour les listes où l'ordre des éléments a de l'importance, comme une liste d'instructions de cuisine dans une recette. Celles-ci sont enveloppées dans 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 :

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

On pourra écrire :

html
<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.

Créer des 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 :

    html
    <a>Manifeste Mozilla</a>

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

    html
    <a href="">Manifeste Mozilla</a>

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

    html
    <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 (angl)) :

Une capture d'écran d'une page web avec le logo de Firefox, un titre qui dit "Mozilla est cool" en anglais et deux paragraphes de texte de remplissage.

Si vous coincez, vous pouvez toujours comparer votre travail avec le code de notre exemple finalisé sur GitHub (angl).

Nous n'avons fait qu'effleurer la surface de HTML. Vous en apprendrez beaucoup plus dans notre module principal Structurer le contenu avec HTML plus loin dans le cours.

Voir aussi

Apprendre HTML et CSS (angl.) sur Scrimba Partenaire d'apprentissage MDN

Le cours Apprendre HTML et CSS (angl.) de Scrimba vous enseigne HTML et CSS à travers la création et la mise en ligne de cinq projets concrets, avec des leçons interactives et des défis ludiques animés par des formateur·ice·s expérimenté·e·s.

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content