Référence des balises HTML
Parcourez toutes les balises HTML5 avec descriptions et exemples d'utilisation.
93 balises
| Balise | Description | Exemple |
|---|---|---|
<!DOCTYPE> | Defines the document type | <!DOCTYPE html> |
<html> | Root element of an HTML page | <html lang="en"> |
<head> | Container for metadata | <head>...</head> |
<title> | Defines the document title shown in browser tab | <title>Page Title</title> |
<body> | Contains the visible page content | <body>...</body> |
<meta> | Defines metadata about the document | <meta charset="UTF-8"> |
<link> | Links to external resources (CSS, icons) | <link rel="stylesheet" href="style.css"> |
<script> | Embeds or references JavaScript | <script src="app.js"></script> |
<style> | Embeds CSS styles | <style>body { margin: 0; }</style> |
<base> | Base URL for all relative URLs in the page | <base href="https://example.com/"> |
<h1>–<h6> | Heading levels 1 through 6 | <h1>Page Title</h1> |
<p> | Paragraph | <p>Paragraph text.</p> |
<br> | Line break | Line one<br>Line two |
<hr> | Thematic break (horizontal rule) | <hr> |
<pre> | Preformatted text (preserves whitespace) | <pre> code here </pre> |
<blockquote> | Long block quotation from another source | <blockquote cite="url">Quote</blockquote> |
<q> | Short inline quotation | <q>Short quote</q> |
<abbr> | Abbreviation or acronym | <abbr title="World Health Organization">WHO</abbr> |
<address> | Contact information for the article or page | <address>Email: contact@example.com</address> |
<cite> | Title of a cited creative work | <cite>Hamlet</cite> |
<code> | Inline code fragment | <code>console.log()</code> |
<dfn> | Term being defined | <dfn>HTML</dfn> is a markup language. |
<kbd> | Keyboard input | Press <kbd>Ctrl+C</kbd> |
<samp> | Sample output from a program | <samp>Error 404</samp> |
<var> | Variable in math or programming | <var>x</var> = 5 |
<sub> | Subscript text | H<sub>2</sub>O |
<sup> | Superscript text | E = mc<sup>2</sup> |
<mark> | Highlighted/marked text | <mark>important</mark> |
<del> | Deleted text | <del>old text</del> |
<ins> | Inserted text | <ins>new text</ins> |
<small> | Small print or side comments | <small>Terms apply</small> |
<strong> | Strong importance (bold) | <strong>Important</strong> |
<em> | Emphasized text (italic) | <em>emphasis</em> |
<b> | Bold text (stylistic, no extra importance) | <b>bold</b> |
<i> | Italic text (stylistic, or technical terms) | <i>italic</i> |
<u> | Underlined text | <u>underline</u> |
<s> | Strikethrough text (no longer accurate) | <s>old price</s> |
<span> | Generic inline container for styling | <span class="highlight">text</span> |
<ul> | Unordered list | <ul><li>Item</li></ul> |
<ol> | Ordered (numbered) list | <ol><li>Step 1</li></ol> |
<li> | List item (in ul or ol) | <li>List item</li> |
<dl> | Description list | <dl><dt>Term</dt><dd>Definition</dd></dl> |
<dt> | Term in a description list | <dt>HTML</dt> |
<dd> | Description in a description list | <dd>HyperText Markup Language</dd> |
<a> | Hyperlink | <a href="https://example.com">Link</a> |
<nav> | Navigation links section | <nav>...</nav> |
<header> | Introductory content or navigation | <header><h1>Site Title</h1></header> |
<footer> | Footer for a section or page | <footer>© 2025</footer> |
<main> | Main content of the document | <main>...</main> |
<article> | Self-contained composition (blog post, news) | <article>...</article> |
<section> | Thematic grouping of content | <section>...</section> |
<aside> | Content tangentially related to main content | <aside>Sidebar</aside> |
<div> | Generic block-level container | <div class="card">...</div> |
<details> | Disclosure widget (expandable) | <details><summary>More</summary>...</details> |
<summary> | Summary/caption for a details element | <summary>Show more</summary> |
<dialog> | Dialog box or window | <dialog open>Content</dialog> |
<img> | Embeds an image | <img src="photo.jpg" alt="Description"> |
<audio> | Embeds audio content | <audio src="sound.mp3" controls></audio> |
<video> | Embeds video content | <video src="movie.mp4" controls></video> |
<source> | Media source for audio/video/picture | <source src="video.webm" type="video/webm"> |
<track> | Text tracks for video/audio (subtitles) | <track kind="subtitles" src="sub.vtt"> |
<picture> | Container for multiple image sources | <picture><source srcset="img.webp"><img src="img.jpg"></picture> |
<figure> | Self-contained content with optional caption | <figure><img src="img.jpg"><figcaption>Caption</figcaption></figure> |
<figcaption> | Caption for a figure element | <figcaption>Image caption</figcaption> |
<canvas> | Drawing surface for JavaScript graphics | <canvas id="myCanvas" width="200" height="100"></canvas> |
<svg> | Inline SVG vector graphics | <svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="40"/></svg> |
<iframe> | Embeds another HTML page | <iframe src="https://example.com"></iframe> |
<embed> | Embeds external content (plugin) | <embed src="file.pdf" type="application/pdf"> |
<object> | Embeds external resource (object) | <object data="file.pdf" type="application/pdf"></object> |
<table> | Table | <table><tr><td>Cell</td></tr></table> |
<thead> | Header rows of a table | <thead><tr><th>Col</th></tr></thead> |
<tbody> | Body rows of a table | <tbody>...</tbody> |
<tfoot> | Footer rows of a table | <tfoot>...</tfoot> |
<tr> | Table row | <tr><td>Cell 1</td><td>Cell 2</td></tr> |
<th> | Header cell | <th scope="col">Name</th> |
<td> | Data cell | <td>Content</td> |
<caption> | Table caption | <caption>Sales Data 2025</caption> |
<colgroup> | Group of table columns | <colgroup><col span="2"></colgroup> |
<col> | Table column properties | <col style="width: 50%"> |
<form> | HTML form for user input | <form action="/submit" method="POST">...</form> |
<input> | Input control (text, checkbox, radio, etc.) | <input type="text" name="username"> |
<textarea> | Multi-line text input | <textarea rows="4" name="message"></textarea> |
<button> | Clickable button | <button type="submit">Submit</button> |
<select> | Drop-down selection list | <select><option>Option 1</option></select> |
<option> | Option in a select element | <option value="1">Option 1</option> |
<optgroup> | Group of related options in select | <optgroup label="Group"><option>...</option></optgroup> |
<label> | Label for a form element | <label for="email">Email:</label> |
<fieldset> | Group of related form elements | <fieldset><legend>Personal</legend>...</fieldset> |
<legend> | Caption for a fieldset | <legend>Personal Info</legend> |
<datalist> | List of predefined options for an input | <datalist id="browsers"><option value="Chrome"></datalist> |
<output> | Result of a calculation | <output name="result">0</output> |
<progress> | Progress indicator | <progress value="70" max="100">70%</progress> |
<meter> | Scalar measurement within a range | <meter value="0.7" min="0" max="1">70%</meter> |
À propos de cet outil
La référence des balises HTML est un outil de consultation complet répertoriant toutes les balises HTML5 standard organisées par catégorie.
Chaque entrée comprend l'utilité de la balise, une courte description et un exemple d'utilisation pratique.
Comment utiliser
- Saisissez un nom de balise dans la zone de recherche ou sélectionnez un filtre de catégorie.
- Cliquez sur le nom de la balise pour le copier dans le presse-papiers.
- Lisez la colonne Description pour comprendre le rôle de la balise.
- Consultez la colonne Exemple pour un extrait de code rapide.
Cas d'utilisation
Utilisez cette référence quand vous ne vous souvenez plus d'une balise, pour explorer les éléments HTML5, ou comme guide de démarrage pour les débutants.
Questions fréquentes
- Toutes les balises HTML5 sont-elles incluses ? — Oui, toutes les balises principales définies dans la spécification W3C HTML5 sont couvertes.
- Comment copier un nom de balise ? — Cliquez sur le nom de la balise dans le tableau et il sera copié dans le presse-papiers instantanément.
- Comment utiliser le filtre de catégorie ? — Cliquez sur l'un des boutons de catégorie en haut pour afficher uniquement les balises de cette catégorie.