path: root/files/fr/conflicting/learn/html/introduction_to_html/index.html

---
title: Les balises HTML et leur rôle
slug: conflicting/Learn/HTML/Introduction_to_HTML
tags:
  - Beginner
  - CodingScripting
  - HTML
translation_of: Learn/HTML/Introduction_to_HTML
translation_of_original: Learn/HTML/HTML_tags
original_slug: Apprendre/HTML/Balises_HTML
---
<div class="summary">
<p>Cet article aborde les bases de {{Glossary("HTML")}} : les balises et comment les utiliser.</p>
</div>

<table class="learn-box nostripe standard-table">
 <tbody>
  <tr>
   <th scope="row">Prérequis :</th>
   <td>Vous devriez au préalable connaître <a href="/fr/Apprendre/page_vs_site_vs_serveur_vs_moteur_recherche">la différence entre une page web et un site web</a> et <a href="/fr/Apprendre/HTML/Comment/Créer_un_document_HTML_simple">savoir comment créer un document HTML simple</a>.</td>
  </tr>
  <tr>
   <th scope="row">Objectifs :</th>
   <td>Apprendre ce que sont les balises HTML et comment les utiliser correctement dans un document HTML.</td>
  </tr>
 </tbody>
</table>

<p>{{Glossary("HTML")}} (<em>HyperText Markup Language</em>) est un langage descriptif utilisé pour structurer le contenu d'une page (ses textes, ses images, ses liens, etc.).</p>

<p>Un document HTML est un fichier texte qui contient des {{glossary("balise","balises")}} (ou <em>tag</em> en anglais). Ces balises doivent être utilisées d'une certaine façon pour décrire correctement la structure du document. Les balises indiquent au navigateur comment afficher le document, certaines balises permettent d'intégrer différents médias comme des images, des vidéos ou des musiques parmi le texte de la page.</p>

<p>Le navigateur n'affiche pas les balises telles quelles. Lorsqu'un utilisateur visite une page web, son navigateur <em>analyse</em> (ou <em>parse</em> en anglais) le document et l'<em>interprète</em> afin d'afficher la page web correctement. Par exemple, si le document contient une balise {{HTMLElement("img")}}, le navigateur chargera l'image associée et affichera l'image <em>à la place</em> de la balise HTML.</p>

<h3 id="La_syntaxe_des_balises">La syntaxe des balises</h3>

<p>Les balises HTML respectent une syntaxe simple et stricte :</p>

<ul>
 <li><strong>Un chevron ouvrant (&lt;)</strong></li>
 <li><strong>Le nom de la balise</strong></li>
 <li><strong>Des attributs </strong>(optionnels). Un espace, suivi du nom de l'attribut, d'un signe égal (=) et d'une valeur entre doubles quotes ("").</li>
 <li><strong>Un chevron fermant (&gt;)</strong></li>
</ul>

<p>Voici quelques exemples :</p>

<ul>
 <li><code>&lt;article&gt;</code></li>
 <li><code>&lt;meta charset="utf-8"&gt;</code></li>
 <li><code>&lt;img src="monImage.png" alt=""&gt;</code></li>
</ul>

<h3 id="Les_éléments_HTML">Les éléments HTML</h3>

<p>Généralement, les balises fonctionnent par paires. La première balise est la balise ouvrante et la seconde est la balise fermante. Une balise fermante <em>doit</em> avoir le même nom que la balise ouvrante correspondante. De plus, une balise fermante doit contenir une barre oblique entre le chevron initial et le nom de la balise. Ainsi, si <code>&lt;p&gt;</code> est une balise ouvrante, <code>&lt;/p&gt;</code> sera la balise fermante correspondante.</p>

<p>Un <strong>élément HTML</strong> se compose d'une balise ouvrante, d'un contenu textuel et d'une balise fermante :</p>

<p><img alt="The basic syntax of HTML tags" src="https://mdn.mozillademos.org/files/8573/anatomy-of-an-html-element.png" style="height: 181px; width: 609px;"></p>

<p>La rigidité des conventions pour la fermeture des balises est utile afin de pouvoir imbriquer différents éléments les uns dans les autres :</p>

<pre class="brush: html">&lt;p&gt;
  Voici le début du paragraphe
    &lt;strong&gt;
      ici un texte important au sein du paragraphe
    &lt;/strong&gt;
  et là, la fin du paragraphe.
&lt;/p&gt;
</pre>

<div class="note">
<p><strong>Bonne pratique :</strong> Si vous omettez les balises fermantes, le navigateur aura les coudées franches pour déterminer comment clôturer un élément. Ces règles sont bien définies mais souvent contre-intuitives (donc difficiles à deviner). Afin de vous épargner des pertes de temps à venir, préférez fermer les éléments.</p>
</div>

<h3 id="Les_balises_HTML">Les balises HTML</h3>

<p>HTML contient environ <a href="/fr/docs/Web/HTML/Element">140 balises</a> qui fournissent au navigateur des indications sur le sens d'un élément, son interprétation ou son affichage. Entre autres choses, les balises permettent de fournir des méta-données pour le document HTML, de mettre en avant certaines phrases, d'ajouter des fichiers multimédias ou de gérer des formulaires en ligne.</p>

<p>Voici quelques-unes des balises les plus fréquemment utilisées :</p>

<dl>
 <dt>{{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}</dt>
 <dd>Ces balises permetttent de définir des titres de différents niveaux : <code>h1</code> pour les grands titres et <code>h6</code> pour les titres des sections très spécifiques.</dd>
 <dt>{{HTMLElement("p")}}</dt>
 <dd>La balise utilisée pour créer des paragraphes. Ces paragraphes sont généralement (automatiquement) séparés par des sauts de ligne.</dd>
 <dt>{{HTMLElement("a")}}</dt>
 <dd>Cette balise est utilisée afin de créer des liens vers des ressources externes : une autre page web, un e-mail, une image, une autre section du document, etc. Les balises {{HTMLElement("a")}} contiennent le texte qui sera utilisé pour le lien, l'attribut {{htmlattrxref("href","a")}} de cet élément est utilisé pour définir l'{{glossary("URL")}} cible : <code>&lt;a href="url_cible"&gt;du texte qui sera lu par l'utilisateur&lt;/a&gt;</code>.</dd>
 <dt>{{HTMLElement("img")}}</dt>
 <dd>Cette balise permet d'intégrer une image dans un document HTML. Voici un exemple d'utilisation : <code>&lt;img src="url/vers/mon/image.png" alt="Une description"&gt;</code></dd>
</dl>

<dl>
 <dt>{{HTMLElement("div")}} et {{HTMLElement("span")}}</dt>
 <dd>Ces balises n'ont pas de signification particulière, elles permettent simplement de séparer des sections d'un document. La plupart du temps, ces balises sont utilisées pour la mise en forme et le script (dont nous discuterons plus tard).</dd>
 <dt>{{HTMLElement("ul")}}, {{HTMLElement("ol")}} et {{HTMLElement("li")}}</dt>
 <dd>Ces balises sont utilisées pour créer des listes. <code>&lt;ul&gt;</code> permet de définir une liste non-ordonnée et <code>&lt;ol&gt;</code> de définir une liste ordonnée. Pour chacune de ces listes, ce sera la balise  <code>&lt;li&gt;</code> qui permettra de définir un élément de la liste. Voici un exemple avec <code>&lt;ul&gt;</code> :</dd>
</dl>

<pre class="brush: html"> &lt;ul&gt;
  &lt;li&gt;Café&lt;/li&gt;
  &lt;li&gt;Thé&lt;/li&gt;
  &lt;li&gt;Lait&lt;/li&gt;
&lt;/ul&gt;</pre>

<p>N'hésitez pas à expérimenter avec ces balises. Dans les articles suivants, nous verrons comment intégrer des fichiers multimédias, des formulaires, des tableaux, etc. Dans tous les cas, vous pouvez faire vos propres tests avec <a href="/fr/docs/Web/HTML/Element">n'importe quelle balise HTML</a>. Assurez-vous de bien choisir la bonne balise pour ce que vous souhaitez faire : la sémantique des éléments HTML est très importante, notamment pour les moteurs de recherches qui analysent et classent votre site.</p>

<h2 id="Pédagogie_active">Pédagogie active</h2>

<p><em>Cet article ne contient pas encore de matériau interactif. <a href="/fr/docs/MDN/Débuter_sur_MDN">N'hésitez pas à contribuer</a>.</em></p>

<h2 id="Aller_plus_loin">Aller plus loin</h2>

<p>Pour l'instant, nous avons vu quelques règles simples concernant les éléments et les balises HTML. Mais c'est bien connu, chaque règle a ses exceptions.</p>

<h3 id="Les_balises_«_auto-fermantes_»_(ou_balises_vides)">Les balises « auto-fermantes » (ou balises vides)</h3>

<p>Nous avons vu précédemment qu'un élément HTML était composé de texte entre deux balises. Cependant, certaines balises ne contiennent pas de texte. L'exemple le plus simple est {{HTMLElement("img")}}. Le navigateur remplace la balise <code>&lt;img&gt;</code> avec l'image indiquée, ignorant le texte de l'élément. Pour cette raison, <code>&lt;img&gt;</code> n'a pas de balise fermante.</p>

<pre class="brush: html">Here some text before an image element
  &lt;img src="myImage.png" alt=""&gt;
Here some text after an image element
</pre>

<div class="note">
<p><strong>Note :</strong> Attention à ne pas mélanger les éléments et les balises. Parfois, une balise seule permet de définir un élément mais la plupart du temps, les balises fonctionnent par paires.</p>
</div>

<h3 id="Les_éléments_spéciaux">Les éléments spéciaux</h3>

<p>En HTML, il existe deux éléments spéciaux qui n'ont pas de balise. Ces éléments sont essentiels pour tout document HTML.</p>

<h4 id="Le_doctype">Le <em>doctype</em></h4>

<p>Le <em>doctype</em> (pour « type de document ») est une déclaration formelle, placée au tout début d'un document HTML. Elle indique que le document est écrit avec du HTML standard. Le doctype se présente de cette façon :</p>

<pre class="brush: html">&lt;!DOCTYPE html&gt;</pre>

<p>Si vous ne commencez pas votre document par <code>&lt;!DOCTYPE html&gt;</code>, les navigateurs afficheront votre document en <a href="https://developer.mozilla.org/fr/docs/Mode_quirks_de_Mozilla"><em>mode quirks</em></a>. Le mode <em>quirks</em> est le mode utilisé par le navigateur pour afficher les documents anciens ou malformés, écrits dans les années 1990 lorsque HTML était peu (voire pas du tout) standardisé et que chaque navigateur gérait HTML à sa façon.</p>

<h4 id="Les_commentaires">Les commentaires</h4>

<p>Les commentaires sont des éléments très particuliers. Ce sont des notes que vous pouvez utiliser pour annoter votre code HTML . Le navigateur n'affichera pas ces commentaires dans la page web (cependant, le code source peut être lu par n'importe qui et les commentaires seront donc publics comme le reste de la page).</p>

<p>En HTML, les commentaires sont écrits avec du texte contenu entre <code>&lt;!--</code> et <code>--&gt;</code></p>

<pre class="brush: html">&lt;!-- Ceci est un commentaire. Il ne sera pas affiché dans le navigateur.--&gt;

Ce texte s'affichera dans le navigateur.
</pre>

<h3 id="Structure_d'un_document_HTML">Structure d'un document HTML</h3>

<p>La structure de base d'un document HTML est définie avec un ensemble de balises spéciales. Les éléments définis dans ces balises ne doivent pas apparaître plus d'une fois dans le document (excepté pour l'élément {{HTMLElement("title")}} ). Le navigateur gèrera les cas où ces éléments ne sont pas fournis (ce qui n'est pas conseillé).</p>

<dl>
 <dt>{{HTMLElement("html")}}</dt>
 <dd>Cet élément définit la <em>racine</em> du document. Chaque document HTML ne contient qu'une <em>racine</em>. Tous les autres éléments doivent être placés dans cet élément.</dd>
 <dt>{{HTMLElement("head")}}</dt>
 <dd>Cet élément définit la <em>tête</em> du document. Le navigateur n'affichera pas cet élément qui ne contient que des méta-données, dont le titre et des informations descriptives. Les navigateurs pourront utiliser ces méta-données pour améliorer l'ergonomie de la page (nous le verrons par la suite).</dd>
 <dt>{{HTMLElement("body")}}</dt>
 <dd>Cet élément définit le <em>corps</em> du document. Il n'y a qu'un seul élément <code>body</code> dans un document HTML et celui-ci est toujours placé après la tête. L'utilisateur verra tout ce qui est placé dans cet élément.</dd>
 <dt>{{HTMLElement("title")}}</dt>
 <dd>Cet élément définit le <em>titre</em> d'un document. Le <em>titre</em> est le seul élément HTML obligatoire et il est placé dans la tête. En effet, le titre est une des méta-données utilisée par le navigateur (il est utilisé pour le titre de la fenêtre, le titre de l'onglet et aussi dans les résultats d'un moteur de recherche).</dd>
</dl>

<h4 id="Formel_ou_valide">Formel ou valide ?</h4>

<p>Voici le document HTML formel le plus simple qu'on puisse écrire :</p>

<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Un document HTML formel&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;!-- Du contenu pour l'utilisateur ici --&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>

<p>Si on retire les différentes balises optionnelles, on obtient alors le document HTML <em>valide</em> le plus simple qui puisse être écrit :</p>

<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;title&gt;Et voilà un tout petit document HTML&lt;/title&gt;
</pre>

<div class="note">
<p><strong>Bonne pratique :</strong> Nous vous recommandons d'utiliser la structure formelle. Si vous ne séparez pas clairement le contenu de <code>&lt;head&gt;</code> du contenu de <code>&lt;body&gt;</code>, il sera plus facile de commettre des erreurs qui entraîneront un comportement étrange du navigateur.</p>
</div>

<h3 id="Les_éléments_qui_se_chevauchent">Les éléments qui se chevauchent</h3>

<p>Pour finir notre aperçu sur les éléments HTML, précisons que les éléments peuvent être <em>imbriqués</em> mais ne peuvent pas se <em>chevaucher.</em></p>

<p>Comment faire se chevaucher des éléments ? Voici un exemple :</p>

<pre class="brush: html">&lt;p&gt;
  le début de mon paragraphe
    &lt;strong&gt;
      du texte important
&lt;/p&gt;
&lt;p&gt;
      un deuxième paragraphe
    &lt;/strong&gt;
   et l'élément strong a été bouclé
   juste avant
&lt;/p&gt;
</pre>

<p>Dans l'exemple ci-dessus, l'élément <code>strong</code> chevauche ceux des paragraphes. Ceci est une erreur (qui n'est pas autorisée par HTML). Il faut plutôt écrire :</p>

<pre class="brush: html">&lt;p&gt;
  mon paragraphe commence ici
    &lt;strong&gt;
      du texte important
    &lt;/strong&gt;
&lt;/p&gt;
&lt;p&gt;
    &lt;strong&gt;
      un deuxième paragraphe
    &lt;/strong&gt;
  dont le début était important aussi
&lt;/p&gt;
</pre>

<p>Dans des cas simples comme celui-ci, le navigateur pourra deviner ce qui était voulu mais généralement de telles erreurs pourront avoir des répercussions importantes (par exemple avec {{Glossary("CSS")}} ou {{Glossary("JavaScript")}} que nous verrons bientôt). Par exemple, si nous avions utilisé une balise {{HTMLElement("div")}} à la place des balises {{HTMLElement("p")}} et {{HTMLElement("strong")}} :</p>

<pre class="brush: html">&lt;div&gt;
  le début de mon paragraphe
    &lt;div&gt;
      du texte important
    &lt;/div&gt;
    &lt;div&gt;
      un deuxième paragraphe
    &lt;/div&gt;
  la fin du paragraphe
&lt;/div&gt;
</pre>

<p>Comment savoir si les éléments se chevauchent ou non ? C'est impossible car il n'y a plus de chevauchement mais une imbrication d'éléments <code>div</code> ! Attention donc si vous souhaitez maîtriser le comportement de vos futurs documents HTML.</p>

<h3 id="Vérifier_le_code_HTML">Vérifier le code HTML</h3>

<p>Une bonne pratique consiste à valider son code pour s'assurer qu'il est correct. Le meilleur outil pour cela est <a href="http://validator.w3.org/" rel="external">le validateur HTML du W3C</a>. C'est un outil en ligne qui analyse votre document HTML et vous indique si celui-ci respecte les spécifications HTML. Si le document est invalide, le validateur fournira des indications quant aux erreurs qu'il a trouvées.</p>

<div class="note">
<p><strong>Note :</strong> Étant donné la méthode utilisée par le validateur, il est préférable de se concentrer sur la première erreur relevée dans l'analyse. En effet, une seule erreur peut en déclencher d'autres en cascades. Si le résultat de l'analyse comporte une myriade d'erreurs, commencez par résoudre la première, cela permettra éventuellement de résoudre des erreurs suivantes.</p>
</div>

<h2 id="Prochaines_étapes">Prochaines étapes</h2>

<p>Grâce aux notions abordées dans cet article, vous devriez être en mesure d'écrire votre premier document HTML complet et d'obtenir une première version d'un site web fonctionnel.</p>

<ul>
 <li>Pour que cette page soit (plus) belle, vous pouvez lire <a href="/en-US/docs/Learn/CSS/CSS_properties">l'article sur les propriétés CSS et comment les utiliser</a>.</li>
 <li>Pour savoir comment publier votre page web, vous pouvez lire <a href="/en-US/docs/Learn/Upload_files_to_a_web_server">comment transférer ses fichiers vers un serveur web</a>.</li>
</ul>