Éléments HTML
Les éléments sont les fondements du langage de balisage hypertexte (HTML). Chaque document HTML est composé d’éléments spécifiés à l’aide de balises.
Les éléments HTML et les balises HTML sont souvent confondus. Les balises servent à ouvrir et fermer l’objet, tandis que l’élément comprend à la fois les balises et son contenu. Prenons un exemple avec la balise <h1> : <h1> Titre du document </h1> - est un élément, et <h1>, </h1> - sont des balises.
Types d’éléments HTML
Les éléments HTML peuvent être par paires ou vides. Les éléments par paires ont des balises ouvrante () et fermante (</>), et le contenu de l’élément est placé entre elles.
TIP
N’oubliez pas la balise fermante ! Même si certains éléments HTML s’affichent correctement sans la balise fermante, ne vous y fiez pas. Cela peut entraîner des résultats inattendus ou des erreurs.
Les éléments vides n’ont pas de balise fermante. En XHTML, les éléments vides sont « fermés » dans la balise ouvrante, comme ceci : <br/> .
Les éléments vides en HTML sont : <area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <keygen>, <link>, <meta>, <param>, <source>, <track> et <wbr>.
Exemple des éléments HTML vides :
Exemple avec des éléments HTML par paires|Éléments HTML|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Title of the document</h1>
<p>The first paragraph</p>
<p>The second paragraph, <br /> where line break is inserted </p>
</body>
</html>Résultat
Dans l’exemple ci-dessus, nous avons utilisé 4 éléments par paires :
- l’élément
<html>, qui inclut tous les autres éléments HTML de la page web, - l’élément
<body>, qui contient le corps de la page web, - l’élément
<p>, qui définit un paragraphe, - l’élément
<h1>, qui contient le titre de la page web.
Dans l’exemple donné, nous avons également utilisé une balise vide <br> pour insérer un saut de ligne.
Éléments HTML de niveau bloc et en ligne
Dans un but de mise en forme, tous les éléments HTML sont divisés en deux catégories : les éléments de niveau bloc et les éléments en ligne.
Les éléments de niveau bloc sont ceux qui structurent la partie principale de votre page web, en divisant votre contenu en blocs cohérents. Ils commencent toujours sur une nouvelle ligne et occupent toute la largeur d’une page, de gauche à droite ; ils peuvent aussi occuper une ou plusieurs lignes et comporter un saut de ligne avant et après l’élément. Les éléments de niveau bloc peuvent inclure à la fois des éléments de niveau bloc et des éléments en ligne.
Les éléments de niveau bloc sont <address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> et <video>.
Tous les éléments de niveau bloc ont des balises ouvrante et fermante.
Exemple des éléments HTML de niveau bloc :
Message à l’auteur|Exemple d’éléments de niveau bloc|Éléments HTML|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<footer>
<p>Author: W3docs team</p>
<p><a href="[email protected]">Send message to the author</a>.</p>
</footer>
</body>
</html>Résultat
Dans l’exemple, nous avons utilisé l’élément de niveau bloc <footer> pour définir le pied de page de la page web et son contenu.
Les éléments en ligne servent à distinguer une partie d’un texte, pour lui donner une fonction ou une signification particulière. Les éléments en ligne comprennent généralement un seul mot ou quelques mots. Ils ne provoquent pas de saut de ligne et n’occupent pas toute la largeur d’une page, seulement l’espace délimité par leur balise ouvrante et fermante. Les éléments en ligne sont généralement utilisés à l’intérieur d’autres éléments HTML.
Les éléments en ligne sont : <a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt> et <var>.
Éléments HTML imbriqués
Les éléments HTML peuvent contenir d’autres éléments, c’est-à-dire être imbriqués. Par exemple, si vous voulez donner à un texte une forte emphase et indiquer au navigateur de l’afficher en gras, vous pouvez utiliser la balise <strong> imbriquée dans la balise <p>.
Exemple des éléments HTML imbriqués :
Éléments HTML
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Title of the document</h1>
<p>The first paragraph</p>
<p><strong>This part of the sentence</strong> has a strong emphasis and is displayed as bold.</p>
</body>
</html>TIP
Les balises HTML doivent être « imbriquées » dans le bon ordre, ce qui signifie que la balise ouverte la plus récemment est toujours la prochaine à être fermée.
Dans notre exemple, nous avons d’abord fermé la balise <strong>, puis la balise <p>.
La balise de fermeture
À la fin, vous devez mettre la balise de fermeture. Cependant, même si vous l’oubliez, certains éléments HTML s’afficheront quand même correctement. La balise de fermeture est considérée comme facultative, donc l’exemple ci-dessous fonctionnera dans tous les navigateurs. Mais ne vous y fiez pas. Si vous voulez éviter des erreurs inattendues, essayez de ne pas oublier la balise de fermeture.
Exemple où la balise de fermeture HTML est absente :
Exemple où la balise de fermeture HTML est absente
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>HTML end tag </h1>
<p>We forgot to put the end tag.
</body>
</html>Éléments HTML vides
Les éléments HTML qui n’ont aucun contenu sont appelés éléments vides. Le <br>, qui définit un saut de ligne, est un élément vide qui n’a pas de balise fermante.
Exemple de la balise <br> HTML :
Exemple de la balise <br> HTML :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>HTML <br> tag</h1>
<p>This tag <br /> defines a line break.</p>
</body>
</html>Practice
What are some characteristics of HTML elements as described on the given webpage?