Éléments HTML
Découvrez les éléments HTML : appariés vs vides, de niveau bloc vs inline, et comment les imbriquer, avec des exemples interactifs.
Les éléments sont les fondements du HyperText Markup Language (HTML). Chaque document HTML est composé d'éléments définis à 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 inclut à 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.
Les attributs d'un élément sont également écrits à l'intérieur de sa balise ouvrante — consultez Attributs HTML pour voir comment ils ajoutent des informations supplémentaires.
Types d'éléments HTML
Les éléments HTML se présentent sous deux formes : les éléments appariés et les éléments vides (void).
Un élément apparié possède une balise ouvrante (<tag>) et une balise fermante correspondante (</tag>), et le contenu de l'élément se trouve entre elles. Par exemple, <p>Bonjour</p> est composé de la balise ouvrante <p>, du texte Bonjour et de la balise fermante </p>.
N'oubliez pas la balise fermante ! Bien que certains éléments HTML s'affichent correctement sans balise fermante, ne comptez pas là-dessus. Cela peut entraîner des résultats inattendus ou des erreurs.
Exemple d'éléments HTML appariés :
<!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>Dans l'exemple ci-dessus, nous avons utilisé 4 éléments appariés :
- l'élément
<html>, qui contient 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.
Nous avons également utilisé la balise vide <br> pour insérer un saut de ligne.
Éléments HTML vides
Les éléments vides (également appelés éléments void) n'ont pas de contenu et donc pas de balise fermante. L'élément <br>, qui insère un saut de ligne, en est un bon exemple. En XHTML, les éléments vides sont « auto-fermants » dans la balise ouvrante, comme ceci : <br/>.
Les éléments vides en HTML sont : <area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <param>, <source>, <track> et <wbr>.
L'ancien élément <keygen> était également un élément vide, mais il a été retiré de la norme HTML et ne doit plus être utilisé.
Être « vide » ne concerne que l'absence de contenu — cela ne dit rien sur la mise en page. Certains éléments vides sont de niveau bloc (par exemple, <hr> trace une règle horizontale sur toute la largeur), tandis que d'autres sont inline (par exemple, <br> et <img>).
Exemple de la balise HTML <br> :
<!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>Éléments HTML de niveau bloc et inline
Pour la mise en forme et la mise en page, la plupart des éléments HTML appartiennent à l'une de deux catégories selon leur valeur display par défaut : les éléments de niveau bloc et les éléments inline. Ce comportement par défaut est important car il contrôle trois choses avant même que vous écriviez du CSS :
- Flux : les éléments de niveau bloc commencent sur une nouvelle ligne et s'empilent verticalement ; les éléments inline se placent côte à côte dans une ligne de texte.
- Largeur et modèle de boîte : un élément de niveau bloc occupe toute la largeur disponible et respecte
width,heightet lesmargin/paddingverticaux. Un élément inline n'occupe que la largeur de son contenu et ignorewidth/heightainsi que les marges verticales. - Imbrication : un élément de niveau bloc peut contenir d'autres éléments de niveau bloc et inline, mais un élément inline ne doit généralement contenir que d'autres éléments inline (et du texte), pas des éléments de niveau bloc.
Vous pouvez modifier la catégorie par défaut d'un élément avec la propriété CSS display, mais connaître le comportement par défaut vous aide à anticiper la mise en page. Pour aller plus loin, consultez Éléments HTML bloc et inline.
Les éléments de niveau bloc structurent la partie principale de votre page web en divisant votre contenu en blocs cohérents. Ils commencent toujours sur une nouvelle ligne, occupent toute la largeur disponible et sont précédés et suivis d'un saut de 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 possèdent des balises ouvrantes et fermantes.
Exemple d'éléments HTML de niveau bloc :
<!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>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 inline sont utilisés pour distinguer une partie d'un texte, lui donner une fonction ou une signification particulière. Les éléments inline 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 de la page, seulement l'espace délimité par leur contenu. Les éléments inline sont généralement utilisés à l'intérieur d'autres éléments HTML.
Les éléments inline sont : <a>, <abbr>, <b>, <bdo>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time> et <var>.
Les éléments <acronym>, <big> et <tt> étaient autrefois des éléments inline, mais ils sont désormais obsolètes. Utilisez <abbr> à la place de <acronym>, et utilisez CSS à la place de <big> et <tt>.
É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 souhaitez 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 d'éléments HTML imbriqués :
<!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>Les balises HTML doivent être imbriquées dans le bon ordre, ce qui signifie que la balise ouverte le plus récemment est toujours la prochaine à être fermée.
Dans notre exemple, nous avons fermé la balise <strong> en premier, puis la balise <p>.