Balises HTML : aperçu des principales commandes
L'équipe éditoriale IONOS
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.
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 toujours une balise de début et une balise de fin. Les balises HTML sont placées entre crochets obliques et entourent l’information souhaitée, une barre oblique est ajoutée en plus à la balise de fin. La combinaison de la balise de début, de l’information et de la balise de fin est appelée élément. 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>Le tag HTML <h> indique les titres.
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ées par catégories.
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> | <htlm> permet de définir un document en tant que document HTML. |
| <head> | Dans la partie <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 partie contenu de la page d’accueil. |
| <header> | <header> définit l’en-tête d’une page. |
| <footer> | Le pied de page d’une page est défini via <footer>. |
La structure de base d’un site Web avec des tags HTML
La structure de base d’un site Web peut par exemple ressembler à ceci :
<!DOCTYPE html>
<html>
<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 HTML <br> permet un saut de ligne. |
| <hr> | <hr> crée une ligne de séparation visuelle qui apparaît entre deux contenus différents. |
Balises HTML pour la structure d’un document
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> | <b> permet d’écrire un mot, une phrase ou même un paragraphe en gras. |
| <i> | <i> permet d’écrire un mot, une phrase ou même un paragraphe en italique. |
| <u> | La partie entourée de <u> est soulignée. |
| <s> | La partie entourée de <s> est barrée. |
| <sup> | Le tag HTML <sup> permet d’ajouter un exposant (exemple : 1st). |
| <sub> | Pour mettre en indice, utilisez <sub> (exemple : H2O). |
Personnalisez le texte de votre document
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.
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> | Vous pouvez utiliser <strong> pour mettre en évidence certains passages. |
| <em> | <em> accentue les fragments de texte sélectionnés. |
| <q> | <q> permet de marquer les citations à l’intérieur d’un texte. |
| <blockquote> | <blockquote> marque un paragraphe entier comme une citation. |
Mise en forme avec une balise HTML
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>Créer des tableaux et des listes avec des balises HTML
Vous pouvez également créer des tableaux et des listes dans un document HTML. Voici les balises HTML appropriées :
| Balise HTML | Description |
| <table> | Le tag HTML <table> permet de créer un tableau. |
| <caption> | <caption> permet d’insérer le titre d’un tableau |
| <tr> | Les lignes du tableau sont indiquées à l’aide de <tr>. |
| <td> | <td> définit une cellule spécifique dans un tableau. |
| <th> | La cellule d’en-tête d’un tableau est déterminée par <th>. |
| <ol> | Avec <ol>, une liste ordonnée est créée. |
| <ul> | Avec <ul>, on crée une liste non ordonnée mais avec des puces. |
| <li> | <li> est utilisé pour ajouter une entrée à la liste. |
| <dl> | <dl> affiche une liste de définitions. |
| <dt> | <dt> identifie un terme ou une position dans une liste de définitions. |
| <dd> | <dd> est une description de définition à l’intérieur d’une liste. |
Une liste en HTML
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>Intégrer des médias en HTML
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> | Le tag HTML <img> permet d’insérer une image. |
| <map> | Une carte peut être intégrée dans le document via <map>. |
| <audio> | <audio> vous permet d’intégrer du contenu audio. |
| <video> | Utilisez <video> pour ajouter du contenu vidéo. |
Insérez une image à l’aide d’une balise HTML
Si vous souhaitez intégrer un contenu multimédia, vous devez également 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> | Ajoutez un bouton via <button>, notamment pour soumettre un formulaire. |
| <select> | Utilisez <select> pour créer une liste de sélection. |
Créer un formulaire
Vous pouvez créer un formulaire sur un document HTLM de la manière suivante :
<body>
<form method="post" action="adresse:mail@exemple.fr">
Nom: <input type="texte" nom="nom" />
Mot de passe: <input type="mot de passe" nom="mot de passe" />
</form>
</body>Insérer un bouton
Voici comment insérer un bouton :
<body>
<h2>Le bouton est placé ici</h2>
<button type="bouton">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> | Le lien hypertexte est déterminé avec <a>. |
| <link> | <link> établit le lien entre le document et une source externe. |
| <nav> | Les liens de navigation sont créés avec <nav>. |
Liens par balise HTLM
Comment créer un lien dans un document HTML :
<body>
<h2>Contact</h2>
<p>N’hésitez pas à nous écrire <a href="adresse:mail@exemple.fr">par email</a>.</p>
</body>Autres balises HTML importantes
Il existe de nombreuses autres balises 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> | Le tag HTML <style> permet d’insérer des codes CSS qui définissent l’apparence de votre site Web. |
| <div> | Le tag HTML <div> permet de diviser les parties d’un document. |
| <label> | Le tag HTML <label> est utilisée avec <input> et définit un champ de texte la commande de saisie. |
| <iframe> | Grâce au tag HTML <iframe>, vous pouvez 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.
