HTML - Éléments

Lucas D. - July 19, 2024

Types d'éléments HTML

Les éléments HTML peuvent être regroupés en deux types principaux : les éléments de niveau bloc et les éléments en ligne. Comprendre les différences entre ces deux types est important pour créer des pages web bien structurées et correctement formatées.

Éléments de niveau bloc

Les éléments de niveau bloc sont des éléments HTML qui commencent sur une nouvelle ligne et occupent par défaut toute la largeur disponible. Ils créent une boîte de niveau bloc, ce qui signifie qu'ils ont un saut de ligne avant et après l'élément. Quelques exemples courants d'éléments de niveau bloc incluent <div>, <p>, et <h1> à <h6>.

Conseil: Exemple d'un élément `<div>`

<div>Ceci est un élément de niveau bloc.</div>

L'élément <div> est un conteneur générique souvent utilisé pour regrouper d'autres éléments et leur appliquer des styles ou des mises en page. L'élément <p> représente un paragraphe de texte, tandis que les éléments <h1> à <h6> représentent différents niveaux de titres, <h1> étant le niveau le plus élevé et <h6> le plus bas.

Les éléments de niveau bloc sont utilisés pour créer la structure principale d'une page web, comme les titres, les paragraphes, les sections, et plus encore. Ils peuvent contenir d'autres éléments de niveau bloc ainsi que des éléments en ligne.

Éléments en ligne

Les éléments en ligne sont des éléments HTML qui ne commencent pas sur une nouvelle ligne et n'occupent que la largeur nécessaire. Ils créent une boîte de niveau en ligne, ce qui signifie qu'ils n'ont pas de saut de ligne avant ou après l'élément. Quelques exemples courants d'éléments en ligne incluent <span>, <a>, et <img>.

Conseil: Exemple d'un élément `<span>`

<span>Ceci est un élément en ligne.</span>

L'élément <span> est un conteneur générique pour le contenu en ligne et est souvent utilisé pour appliquer des styles ou cibler des parties spécifiques du texte. L'élément <a> représente un lien hypertexte, qui permet aux utilisateurs de naviguer d'une page web à une autre. L'élément <img> est utilisé pour intégrer des images dans une page web.

Conseil: Exemple d'un élément `<a>`

<a href="https://example.com">Cliquez ici</a>

Les éléments en ligne sont utilisés pour formater ou styliser des parties spécifiques de texte ou de contenu à l'intérieur d'un élément de niveau bloc. Ils ne devraient pas contenir d'éléments de niveau bloc, mais ils peuvent être contenus dans ceux-ci.

Éléments HTML courants

HTML possède de nombreux éléments qui créent et structurent le contenu des pages web. Ces éléments sont divisés en catégories selon leur but et leur fonction. Voici quelques-uns des éléments HTML les plus courants.

Éléments de texte

Les éléments de texte structurent et formatent le contenu textuel d'une page web. Les éléments de texte les plus basiques sont les titres et les paragraphes. Les titres, représentés par les balises <h1> à <h6>, définissent la hiérarchie et l'importance du contenu, <h1> étant le niveau le plus élevé et <h6> le plus bas. Les paragraphes, représentés par la balise <p>, regroupent des phrases connexes.

D'autres éléments de texte incluent des éléments de formatage tels que <strong> pour le texte en gras, <em> pour le texte en italique, <sup> pour l'exposant et <sub> pour l'indice. Ces éléments ajoutent de l'emphase ou une signification spéciale à des parties spécifiques du texte.

Éléments structurels

Les éléments structurels définissent la structure globale et la mise en page d'une page web. L'élément <div> est un conteneur générique qui regroupe d'autres éléments et leur applique des styles ou des mises en page. L'élément <span> est similaire à <div>, mais c'est un élément en ligne utilisé pour appliquer des styles ou cibler des parties spécifiques du texte.

D'autres éléments structurels incluent <header>, <footer>, <nav>, <section>, et <article>. L'élément <header> représente le contenu introductif ou un groupe de liens de navigation, tandis que l'élément <footer> contient des informations sur l'auteur, le copyright ou des liens vers des pages connexes. L'élément <nav> définit un ensemble de liens de navigation. L'élément <section> représente une section autonome de contenu, et l'élément <article> représente une composition autonome, comme un article de blog ou un article d'actualité.

Éléments multimédia

Les éléments multimédia intègrent du contenu multimédia dans une page web. L'élément <img> affiche des images, tandis que les éléments <video> et <audio> intègrent respectivement du contenu vidéo et audio.

Conseil: Intégration d'une image avec `<img>`

<img src="image.jpg" alt="Une description de l'image">

L'attribut src spécifie l'URL du fichier multimédia, et l'attribut alt fournit un texte alternatif pour les lecteurs d'écran et les moteurs de recherche.

Éléments de liste

Les éléments de liste créent des listes ordonnées et non ordonnées. Une liste non ordonnée, représentée par la balise <ul>, est utilisée lorsque l'ordre des éléments n'est pas important. Une liste ordonnée, représentée par la balise <ol>, est utilisée lorsque l'ordre des éléments compte. Les éléments de liste, représentés par la balise <li>, sont les éléments individuels d'une liste.

Conseil: Création d'une liste non ordonnée avec `<ul>`

<ul>
  <li>Élément 1</li>
  <li>Élément 2</li>
  <li>Élément 3</li>
</ul>

Éléments de tableau

Les éléments de tableau créent des tableaux pour afficher des données en lignes et en colonnes. L'élément <table> définit le tableau, tandis que <tr> représente une ligne de tableau, <th> représente une cellule d'en-tête de tableau, et <td> représente une cellule de données de tableau.

Conseil: Construction d'un tableau de base avec `<table>`

<table>
  <tr>
    <th>En-tête 1</th>
    <th>En-tête 2</th>
  </tr>
  <tr>
    <td>Ligne 1, Cellule 1</td>
    <td>Ligne 1, Cellule 2</td>
  </tr>
  <tr>
    <td>Ligne 2, Cellule 1</td>
    <td>Ligne 2, Cellule 2</td>
  </tr>
</table>

Éléments de formulaire

Les éléments de formulaire créent des formulaires interactifs pour la saisie de l'utilisateur. L'élément <form> définit le formulaire, tandis que divers autres éléments créent différents types d'entrées. L'élément <input> crée des champs de texte, des boutons radio, des cases à cocher et plus encore, selon la valeur de son attribut type. L'élément <label> fournit une étiquette textuelle pour un champ de saisie, le rendant plus accessible et convivial.

D'autres éléments de formulaire incluent <button> pour créer des boutons cliquables, <select> pour créer des menus déroulants, et <textarea> pour créer des champs de saisie de texte multiligne.

Conseil: Création d'un formulaire simple avec `<form>`

<form>
  <label for="name">Nom :</label>
  <input type="text" id="name" name="name">

  <label for="email">Email :</label>
  <input type="email" id="email" name="email">

  <button type="submit">Envoyer</button>
</form>

Imbrication et hiérarchie

L'imbrication et la hiérarchie sont des concepts en HTML qui déterminent comment les éléments sont structurés et liés entre eux dans un document. Une imbrication correcte et la compréhension des relations parent-enfant et des éléments frères sont importantes pour créer un HTML bien formé et valide.

Une imbrication correcte des éléments signifie qu'un élément ouvert à l'intérieur d'un autre élément doit également être fermé à l'intérieur de ce même élément. L'élément interne doit être complètement contenu dans l'élément externe. Une imbrication incorrecte peut entraîner des résultats inattendus ou un HTML invalide.

Conseil: HTML correctement imbriqué

<div>
  <p>Ceci est un paragraphe correctement imbriqué dans une div.</p>
</div>

Conseil: HTML incorrectement imbriqué

<div>
  <p>Ceci est un paragraphe incorrectement imbriqué.
</div>
</p>

Les relations parent-enfant font référence à la structure hiérarchique des éléments HTML. Lorsqu'un élément est imbriqué à l'intérieur d'un autre élément, l'élément extérieur est appelé le parent, et l'élément intérieur est appelé l'enfant. Un élément parent peut avoir plusieurs éléments enfants, mais un élément enfant ne peut avoir qu'un seul parent direct.

Conseil: Relation parent-enfant en HTML

<ul>
  <li>Élément 1</li>
  <li>Élément 2</li>
  <li>Élément 3</li>
</ul>

Les éléments frères sont des éléments qui partagent le même parent. Ils sont au même niveau dans la hiérarchie et sont adjacents dans le flux du document.

Conseil: Éléments frères en HTML

<div>
  <h2>Titre</h2>
  <p>Paragraphe 1</p>
  <p>Paragraphe 2</p>
</div>

Une imbrication correcte, des relations parent-enfant et des éléments frères aident à garder votre HTML organisé, maintenable et accessible. Cela facilite également l'application de styles et la modification d'éléments à l'aide de CSS et JavaScript.