Introduction aux éléments HTML

Dans cette leçon, nous allons explorer les différentes balises HTML, leurs objectifs et comment les utiliser efficacement dans vos applications Web. Nous discuterons de certaines des balises HTML les plus couramment utilisées et de leurs attributs correspondants.

La balise de paragraphe

Le paragraphe est probablement l'élément HTML le plus couramment utilisé, défini par

. Il s'agit d'un élément de niveau bloc, ce qui signifie que chaque paragraphe commencera sur une nouvelle ligne.

  <p>This is the first paragraph.</p>
  <p>This is the second paragraph, which starts on a new line.</p>

Sans le

élément, votre navigateur ignorera automatiquement les espaces blancs supplémentaires et affichera le texte sur une seule ligne.

<!-- prettier-ignore -->

  This is the first paragraph.
  This is the second paragraph, which starts on a new line.

Visitez la démo du code ↗

Vous devrez utiliser le bouton
élément si vous souhaitez un saut de ligne à l’intérieur d’un seul élément de paragraphe. C'est l'un de ces éléments HTML qui ne nécessitent pas de balise de fermeture.

  <p>
    This is the first paragraph.<br>
    This is the second paragraph, which starts on a new line.
  </p>

Visitez la démo du code ↗

Les balises de titre

Lors de la rédaction d'un article, il est bon d'ajouter des titres entre les paragraphes pour rendre l'article plus organisé. Un document HTML fonctionne de la même manière. HTML propose six niveaux différents de titres, de

à

.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Visitez la démo du code ↗

Dans la plupart des cas,

à

devrait suffire lors de la création de pages Web et, de manière générale, nous recommandons de ne pas utiliser de titres trop petits, tels que

et

, car ils rendraient la structure de votre page Web inutilement complexe.

est le titre supérieur et il joue un rôle particulier dans la page Web. Il ne devrait y avoir qu'un seul

élément dans chaque document HTML, et il doit résumer la page entière.

Éléments de formatage

Parfois, vous souhaiterez peut-être mettre l'accent sur des mots et des paragraphes spécifiques en leur donnant différents formats, par exemple en les faisant apparaître en gras, en italique ou soulignés. HTML fournit des éléments de formatage qui peuvent aider à obtenir cet effet.

<b></b>
<strong></strong>

<i></i>
<em></em>

<mark></mark>

<small></small>

<del></del>
<ins></ins>

<sub></sub>
<sup></sup>

Visitez la démo du code ↗

• Le et les éléments ont le même effet. Ils font tous deux apparaître le texte ci-joint en gras.

<p>
  Lorem ipsum <b>dolor sit</b> amet consectetur
  <strong>adipisicing elit</strong>.
</p>

Même s'ils ont la même apparence, comme le montre la démo CodePen, ils servent à des fins différentes pour les navigateurs et les moteurs de recherche.

met uniquement le texte en gras sans ajouter de signification particulière, tandis que indique que les textes ci-joints ont une importance substantielle.

• Le et les éléments sont similaires. Ils mettent tous deux le texte en italique. n'indique aucune signification particulière, tandis que définit un texte souligné, affiché en italique.

  <p>This is the first paragraph.</p>
  <p>This is the second paragraph, which starts on a new line.</p>

• La L'élément définit les textes surlignés/marqués.

<!-- prettier-ignore -->

  This is the first paragraph.
  This is the second paragraph, which starts on a new line.

• Le L'élément définit un petit texte.

  <p>
    This is the first paragraph.<br>
    This is the second paragraph, which starts on a new line.
  </p>

• Le L'élément indique le texte supprimé, affiché en ajoutant un barré sur le texte inclus. D'autre part, le L'élément est utilisé pour indiquer le texte inséré, qui est affiché sous forme de texte souligné.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

• Le et ^{elements définit respectivement l'indice et l'exposant.}

<b></b>
<strong></strong>

<i></i>
<em></em>

<mark></mark>

<small></small>

<del></del>
<ins></ins>

<sub></sub>
<sup></sup>

Comment ajouter des styles aux éléments HTML

Parfois, les représentations par défaut de ces éléments de formatage sont inadéquates pour exprimer leur signification prévue.

Par exemple, le L'élément indique les textes supprimés avec un barré, ce qui est facile à comprendre. Cependant, le L'élément utilise le soulignement pour représenter les insertions, ce qui peut prêter à confusion.

Pour améliorer l'apparence par défaut de ces éléments, vous pouvez utiliser un attribut de style comme celui-ci :

<p>
  Lorem ipsum <b>dolor sit</b> amet consectetur
  <strong>adipisicing elit</strong>.
</p>

Par défaut, le lien sera souligné et affiché en bleu, et lorsque vous cliquerez dessus, vous serez redirigé vers la Introduction aux éléments HTML spécifiée par l'attribut href.

Pour démontrer, créez un fichier Introduction aux éléments HTML.html dans votre répertoire de travail.

<p>Lorem ipsum <i>dolor sit</i> amet consectetur <em>adipisicing elit</em>.</p>

<p>Lorem ipsum <mark>dolor sit</mark> amet consectetur adipisicing elit.</p>

Et puis, ajoutez un lien dans votre fichier index.html qui pointe vers la Introduction aux éléments HTML.

<p>Lorem ipsum <small>dolor sit</small> amet consectetur adipisicing elit.</p>

Vous serez redirigé vers le document Introduction aux éléments HTML.html lorsque vous cliquerez sur le lien.

Vous pouvez également ajouter un lien Retour dans le fichier Introduction aux éléments HTML.html pour vous ramener à index.html.

<p>
  Lorem ipsum <del>dolor sit</del> amet <ins>consectetur adipisicing</ins> elit.
</p>

Ces liens interconnectés forment l'Internet que nous voyons aujourd'hui.

Par défaut, la Introduction aux éléments HTML liée sera ouverte dans la même fenêtre. Vous pouvez modifier ce comportement en définissant un attribut cible. Par exemple, target="_blank" ouvre la Introduction aux éléments HTML dans un nouvel onglet.

<p>
  Lorem ipsum <sub>dolor sit</sub> amet <sup>consectetur adipisicing</sup> elit.
</p>

Visitez la démo du code ↗

Une autre chose que vous avez peut-être remarquée est que le lien est initialement affiché en bleu. Dès que vous cliquez dessus, il devient rouge. Ensuite, le lien devient violet, indiquant que le lien a déjà été visité.

Ce comportement est lié à un concept appelé pseudo-classe, qui vous permet de définir différents styles pour un élément dans différentes conditions. Nous reviendrons sur ce sujet lorsque nous parlerons davantage de CSS.

Listes

Visitez la démo du code ↗

Il existe trois types différents de listes en HTML : les listes ordonnées, non ordonnées et les listes de description.

Les listes ordonnées sont définies avec le symbole

élément, et chaque élément de liste individuel est créé avec
1. .
   

     <p>This is the first paragraph.</p>
     <p>This is the second paragraph, which starts on a new line.</p>
   
   

   Les listes non ordonnées sont définies avec l'attribut

   élément.
   

   <!-- prettier-ignore -->
   
     This is the first paragraph.
     This is the second paragraph, which starts on a new line.
   
   

   Les listes de descriptions sont un peu plus complexes, car elles consistent en une liste d'éléments et une description pour chaque élément. La liste de descriptions est définie avec le symbole

   élément, chaque élément de liste est défini avec

   et chaque instruction de description est définie avec

   .
   

     <p>
       This is the first paragraph.<br>
       This is the second paragraph, which starts on a new line.
     </p>
   
   

   Éléments de mise en page

   Jusqu'à présent, nous n'avons discuté que des éléments utilisés pour afficher du contenu, tels que des textes, des listes et des images. En fait, il existe une autre catégorie d'éléments en HTML chargée d'organiser ces éléments.

   Ils ne sont pas conçus pour afficher un type de contenu spécifique, mais agissent plutôt comme un conteneur pour d'autres éléments. Lorsqu'ils sont combinés avec CSS, ils peuvent créer différentes mises en page pour la page Web. Certains des éléments de mise en page couramment utilisés sont présentés dans la liste ci-dessous.

   •  : définit une section d'en-tête pour le document, généralement située en haut de la page Web.
   •  : définit une barre de navigation. Pour la plupart des pages Web, il est situé en haut avec l'en-tête, mais certains développeurs le placent sur le côté de la page.
   •  : définit une section pour le document.
   •  : définit une section indépendante dans la page Web.
   •  : contenu en dehors du contenu principal, tel qu'une barre latérale.
   •  : une section de pied de page située au bas de la page Web.
   •  : crée un onglet que l'utilisateur peut ouvrir et fermer.
   •  : crée un en-tête pour la section élément. Il doit être placé à l'intérieur de la zone élément.

   <h1>Heading 1</h1>
   <h2>Heading 2</h2>
   <h3>Heading 3</h3>
   <h4>Heading 4</h4>
   <h5>Heading 5</h5>
   <h6>Heading 6</h6>
   

   Visitez la démo du code ↗

   •  : et bien sûr, l'élément de mise en page le plus important,

     , qui signifie division. Il s'agit d'un élément générique qui crée un bloc dans la page Web et ne sert à rien de particulier.

     Il s'agit de l'élément de mise en page le plus couramment utilisé, car pour les pages Web réelles, la plupart des sections et des blocs ne correspondent à aucun des éléments sémantiques mentionnés ci-dessus. Par conséquent, de nombreux développeurs aiment utiliser

     pour créer des mises en page.
     

       <p>This is the first paragraph.</p>
       <p>This is the second paragraph, which starts on a new line.</p>
     
     

     

     Remarquez que le symbole

     L'élément commence toujours sur une nouvelle ligne et occupe autant d'espace horizontal que possible. D'autre part, le l'élément ne commence pas sur une nouvelle ligne et ne prend que autant d'espace que nécessaire.

     C'est en fait la différence entre les éléments block et les éléments inline.

     La plupart des éléments que nous avons mentionnés jusqu'à présent sont des éléments de bloc, tels que

     ,

     ,

     à

     ,

   • , etc. Sans styles supplémentaires définis, ils occuperont automatiquement autant d'espace horizontal que possible.

     Le element est un exemple d’élément en ligne. Il ne prend que l'espace nécessaire lorsqu'il est placé à côté d'autres éléments. Et les attributs de largeur et de hauteur n'auront aucun effet dessus.

     Il existe de nombreux autres éléments, à la fois en bloc et en ligne, disponibles en HTML. Il est impossible de tous les aborder en une seule leçon, mais voici une référence de tous les éléments HTML de W3Schools si vous êtes intéressé.

     Lectures complémentaires

     • Comment utiliser les sélecteurs CSS
     • Qu'est-ce que le code HTML sémantique ?
     • Comment centrer une division en CSS