Balises HTML : aperçu des principales commandes
Les balises HTML permettent de construire un site Web de manière claire et d’y déposer les informations les plus importantes pour tous les navigateurs. En plus des tags HTML pour la structure de base, il en existe également d’autres qui vous permettront par exemple d’intégrer des médias, de créer des formulaires ou de définir la police de caractères.
- Éditeur de site intuitif avec fonctions d'IA
- Générateur d'images et de textes avec optimisation SEO
- Domaine, SSL et boîte email inclus
Les balises HTML, c’est quoi ?
Si vous souhaitez apprendre le HTML ou écrire votre propre code HTML, les tags HTML sont probablement votre outil le plus important et le plus efficace. Les balises HTML sont utilisées pour transmettre des informations aux différents navigateurs. Le site Web est ainsi structuré au mieux et peut être affiché correctement par chaque navigateur.
Les tags HTML ont en général toujours une balise de début et une balise de fin. Les balises HTML sont placées entre chevrons et entourent l’information souhaitée ; une barre oblique est ajoutée en plus à la balise de fin. L’ensemble formé par ces deux balises et le contenu s’appelle un élément HTML. Il est possible de donner à l’élément un attribut HTML qui fournit des informations supplémentaires.
Voici un exemple de la structure d’un tag HTML :
<h1>Il s’agit ici d’un titre</h1>Tous les éléments HTML ne sont pas composés d’une balise de début et d’une balise de fin. Les balises « auto-fermantes » (ou balises vides) sont des éléments HTML composés d’une seule balise, comme <br> pour un saut de ligne. Elles se ferment d’elles-mêmes et sont syntaxiquement complètes sans balise de fin séparée.
Il existe de nombreuses balises HTML différentes et vous n’aurez probablement pas besoin de toutes. De plus, certains tags HTML ne sont plus utilisés depuis l’introduction de HTML 5 et plus tard de HTML 5.1. C’est pourquoi il est utile d’avoir toujours sous la main un aperçu des principales commandes HTML.
Ci-dessous, vous trouverez les tags HTML les plus courants sous forme de tableau, classés par catégories. Toutes les balises présentées sont prises en charge dans la version actuelle, HTML 5.2, ainsi que dans HTML Living Standard. Ce dernier reflète l’état actuel des technologies Web et est mis à jour en permanence.
Balises HTML pour la structure de base d’un document
Les tags HTML suivants structurent le site Web et donnent un cadre aux autres éléments ajoutés au document.
| Balise HTML | Description |
|---|---|
<!DOCTYPE>
|
Ce tag HTML détermine de quel type de document il s’agit. |
<html>
|
Cette balise permet de définir un document en tant que document HTML. |
<head>
|
Dans la zone <head>, on peut trouver les métadonnées du document.
|
<title>
|
Dans cette commande HTML, on écrit le titre du document. Il est également affiché dans la barre de titre du navigateur. |
<body>
|
<body> est la partie principale et comprend le contenu qui sera affiché dans le navigateur.
|
<nav>
|
Il s’agit de la zone de navigation d’un site Web. |
<section>
|
<section> permet de rassembler des éléments en un groupe.
|
<article>
|
<article> est la zone de contenu d’un site Web.
|
<header>
|
<header> définit l’en-tête d’une page ou d’une section.
|
<footer>
|
<footer> définit le pied de page d’une page ou d’une section.
|
La structure de base d’un site Web peut ainsi ressembler à ceci :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Le titre de votre site Web</title>
</head>
<body>Insérez le texte et les images ici.</body>
</html>Balises HTML pour structurer un site Web
Il existe de nombreuses balises HTML qui permettent de diviser et de construire des zones individuelles ou même la page entière.
| Balise HTML | Description |
|---|---|
<h1> à <h6>
|
Les titres sont créés à l’aide des différents tags h. Plus le chiffre est petit, plus le titre est grand. |
<p>
|
Un paragraphe est marqué par <p>.
|
<br>
|
Le tag <br> permet un saut de ligne.
|
<hr>
|
<hr> crée une ligne de séparation visuelle qui apparaît entre deux contenus différents.
|
<div>
|
La balise HTML permet de regrouper des contenus apparentés par blocs. |
Un exemple d’utilisation des balises HTML permettant de structurer un texte :
<body>
<h1>Le titre se place ici.</h1>
<p>Insérez le texte ici.</p>
<h2>Un sous-titre permet de structurer le contenu.</h2>
<p>Texte supplémentaire avec <br> entre les deux pour marquer la rupture.</p>
</body>Balises HTML pour la police de caractères
Différentes balises HTML vous permettent de modifier l’aspect de la police de votre document.
| Balise HTML | Description |
|---|---|
<b>
|
Les mots, phrases ou paragraphes individuels sont écrits en gras. |
<i>
|
Les mots, phrases ou paragraphes individuels sont affichés en italique. |
<u>
|
La partie encadrée est soulignée. |
<s>
|
La police prise en compte est barrée. |
<sup>
|
Le tag HTML <sup> permet de mettre des caractères en exposant (exemple : 1er)
|
<sub>
|
La balise <sub> permet d’afficher des caractères en indice (exemple : H2O)
|
Un exemple d’adaptation de la police par des tags HTML :
<body>
<p>Exemple de texte et <i>cette partie est en italique</i>.</p>
</body>Pour modifier la couleur de la police, il est préférable d’utiliser CSS. Vous trouverez un tutoriel CSS complet dans le Digital Guide de IONOS.
Balises HTML pour mettre en évidence et marquer des parties
Pour mettre en forme ou marquer des sections, on utilise principalement les tags HTML suivants :
| Balise HTML | Description |
|---|---|
<strong>
|
Avec <strong>, vous pouvez mettre en évidence certaines sections.
|
<em>
|
<em> accentue les fragments de texte sélectionnés.
|
<q>
|
Le tag <q> permet de marquer des citations dans un texte.
|
<blockquote>
|
La balise <blockquote> marque tout un paragraphe comme citation.
|
<code>
|
La balise <code> formate une section comme code de programme.
|
Voici un exemple d’utilisation de ces balises HTML :
<body>
<p>Exemple de texte et <strong>cette partie est mise en évidence</strong>.</p>
</body>Balises HTML pour créer des tableaux et des listes
Vous pouvez également créer des tableaux et des listes dans un document HTML. Voici les tags HTML appropriés :
| Balise HTML | Description |
|---|---|
<table>
|
Le tag HTML <table> permet de définir un tableau.
|
<caption>
|
<caption> définit le titre d’un tableau.
|
<tr>
|
Les lignes d’un tableau sont indiquées à l’aide de <tr>.
|
<td>
|
<td> définit une cellule spécifique dans un tableau.
|
<th>
|
<th> permet de définir la cellule d’en-tête d’un tableau.
|
<ol>
|
La balise <ol> permet de créer une liste avec des numéros d’ordre.
|
<ul>
|
Avec <ul>, on crée une liste non ordonnée avec des puces.
|
<li>
|
<li> représente les différentes entrées d’une liste.
|
<dl>
|
<dl> affiche une liste de définitions.
|
<dt>
|
<dt> définit un terme ou une position dans une liste de définitions.
|
<dd>
|
<dd> est une description de définition au sein d’une liste.
|
Voici à quoi ressemble une liste non ordonnée dans un document HTML :
<body>
<ul>
<li>Première entrée dans la liste.</li>
<li>Deuxième entrée dans la liste.</li>
<li>Troisième entrée dans la liste.</li>
</ul>
</body>Balises HTML pour intégrer des médias
Différents tags HTML vous permettent d’intégrer des images, des vidéos et des fichiers audios dans un document et de les mettre en forme. Les médias sont généralement accessibles via une URL, vous pouvez les insérer par les balises HTML suivantes :
| Balise HTML | Description |
|---|---|
<img>
|
La balise HTML <img> permet d’insérer une image.
|
<map>
|
Une carte peut être insérée dans le document avec <map>.
|
<audio>
|
La balise <audio> vous permet d’intégrer du contenu audio.
|
<video>
|
Utilisez <video> pour ajouter du contenu vidéo.
|
Si vous souhaitez intégrer un contenu multimédia, vous devez utiliser les attributs HTML src pour la source et alt pour le texte alternatif. Cela ressemble alors à ceci :
<body>
<img src="img/exempleimage.png" alt="Description de l’image" />
</body>Balises HTML pour un formulaire
Si vous souhaitez intégrer un formulaire sur votre site Web, utilisez les balises HTML suivantes :
| Balise HTML | Description |
|---|---|
<form>
|
Avec <form>, vous créez un formulaire.
|
<input>
|
<input> est utilisé pour insérer une commande de saisie.
|
<button>
|
<button> vous permet d’ajouter un bouton.
|
<select>
|
Utilisez <select> pour créer un menu déroulant de sélection.
|
<option>
|
<option> représente un élément dans une liste de sélection.
|
Créer un formulaire
Vous pouvez créer un formulaire sur un document HTML comme suit. Notez que des attributs supplémentaires doivent être utilisés, par exemple pour spécifier la requête HTTP souhaitée (dans notre cas, POST).
<body>
<form method="post" action="mailto:mail@exemple.fr">
Nom: <input type="text" nom="nom" />
Mot de passe: <input type="password" nom="motdepasse" />
</form>
</body>Insérer un bouton
Voici comment insérer un bouton :
<body>
<h2>Le bouton est placé ici</h2>
<button type="button">Click</button>
</body>Insérer des liens en HTML
Ces tags HTML vous permettent d’insérer des liens dans votre document :
| Balise HTML | Description |
|---|---|
<a>
|
La balise <a> permet de définir l’hyperlien.
|
<link>
|
<link> établit la connexion entre le document et une source externe.
|
<nav>
|
Les liens de navigation sont créés avec <nav>.
|
L’attribut href est également utilisé dans le lien pour indiquer l’adresse cible. Voici comment créer un lien dans un document HTML :
<body>
<h2>Contact</h2>
<p>N’hésitez pas à nous écrire <a href="mailto:mail@exemple.fr">par email</a>.</p>
</body>Autres balises HTML importantes
Il existe de nombreux autres tags HTML que vous pouvez utiliser dans un éditeur HTML et qui vous facilitent le travail. En voici une petite sélection:
| Balise HTML | Description |
|---|---|
<style>
|
La balise HTML <style> vous permet d’insérer des codes CSS qui définissent l’apparence de votre site Web. |
<label>
|
<label> est utilisée avec la balise <input> et définit un champ de texte pour celle-ci.
|
<iframe>
|
La balise HTML <iframe> vous permet d’intégrer des contenus externes dans votre site Web. |
<!-- … -->
|
<!-- … --> vous permet d’insérer des commentaires dans le code HTML.
|
Avec l’outil de création de sites Web de IONOS, vous concevez votre propre site Web exactement comme vous le souhaitez. Si vous avez besoin d’aide, notre équipe d’experts se fera un plaisir de vous assister.
- Templates professionnels
- Modification du design en un clic
- Domaine, SSL et email