Balises HTML Aperçu Des Principaux Tags HTML - IONOS

Firefox https://www.ionos.fr/digitalguide/sites-internet/developpement-web/bali...
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.
B alise De sc r i pti o n
HTML
<!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 a�ché dans la barre de titre du
navigateur.
<body> <body> est la partie principale et comprend le contenu qui

sera a�ché 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>.
1 sur 9 01/04/2023, 00:07

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.
HTML
<h1> à <h6> Les titres sont créés à l’aide des di�érents tags h. Plus le
chi�re 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 di�érents.
Balises HTML pour la structure d’un document
Un exemple d’utilisation des balises HTML permettant de structurer un texte :
2 sur 9 01/04/2023, 00:07

<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.
HTML
<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>
 Note
3 sur 9 01/04/2023, 00:07

Pour modifier la couleur de la police, il est préférable d’utiliser CSS. Vous trouverez un tutoriel CSS
(https://www.ionos.fr/digitalguide/sites-internet/web-design/apprendre-le-css-avec-simplicite/)
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 :
B alise HTML De sc r i pti o n
<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 :
4 sur 9 01/04/2023, 00:07

HTML
<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> a�che 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 :
5 sur 9 01/04/2023, 00:07

<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 :
HTML
<img> Le tag HTML <img> (https://www.ionos.fr/digitalguide

/sites-internet/developpement-web/balise-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 :
6 sur 9 01/04/2023, 00:07

HTML
<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 :
HTML
7 sur 9 01/04/2023, 00:07

<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
(https://www.ionos.fr/digitalguide/sites-internet/developpement-web/editeurs-html/) et qui vous facilitent
le travail. En voici une petite sélection :
HTML
<style> Le tag HTML <style> (https://www.ionos.fr/digitalguide

/sites-internet/developpement-web/balise-html-style/)
permet d’insérer des codes CSS qui définissent l’apparence
de votre site Web.
<div> Le tag HTML <div> (https://www.ionos.fr/digitalguide/sites-

internet/developpement-web/html-div/) permet de diviser
les parties d’un document.
<label> Le tag HTML <label> (https://www.ionos.fr/digitalguide

/sites-internet/developpement-web/balise-label-en-html/)
est utilisée avec <input> et définit un champ de texte la
commande de saisie.
8 sur 9 01/04/2023, 00:07

<iframe> Grâce au tag HTML <iframe> (https://www.ionos.fr

/digitalguide/sites-internet/creation-de-sites-internet
/iframe/), vous pouvez intégrer des contenus externes dans
votre site Web.
<!-- … -→ <!-- ... -→ vous permet d’insérer des commentaires dans le

code HTML.
9 sur 9 01/04/2023, 00:07

Balises HTML Aperçu Des Principaux Tags HTML - IONOS

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Balises HTML Aperçu Des Principaux Tags HTML - IONOS

Transféré par

Droits d'auteur :

Formats disponibles

Firefox https://www.ionos.fr/digitalguide/sites-internet/developpement-web/bali...

Balises HTML pour la structure de base d’un document

<!DOCTYPE> Ce tag HTML détermine de quel type de document il s’agit.

<html> <htlm> permet de déﬁnir un document en tant que

<head> Dans la partie <head>, on peut trouver les métadonnées

<title> Dans cette commande HTML, on écrit le titre du document.

<body> <body> est la partie principale et comprend le contenu qui

<nav> Il s’agit de la zone de navigation d’un site Web.

<section> <section> permet de rassembler des éléments en un

<article> <article> est la partie contenu de la page d’accueil.

<header> <header> déﬁnit l’en-tête d’une page.

<footer> Le pied de page d’une page est déﬁni via <footer>.

1 sur 9 01/04/2023, 00:07

La structure de base d’un site Web avec des tags HTML

Balises HTML pour structurer un site Web

<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

Balises HTML pour la structure d’un document

Un exemple d’utilisation des balises HTML permettant de structurer un texte :

2 sur 9 01/04/2023, 00:07

Balises HTML pour la police de caractères

<b> <b> permet d’écrire un mot, une phrase ou même un

<i> <i> permet d’écrire un mot, une phrase ou même un

<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 :

<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 :

3 sur 9 01/04/2023, 00:07

Mettre en évidence et marquer des parties

B alise HTML De sc r i pti o n

<strong> Vous pouvez utiliser <strong> pour mettre en évidence

<em> <em> accentue les fragments de texte sélectionnés.

<q> <q> permet de marquer les citations à l’intérieur d’un

<blockquote> <blockquote> marque un paragraphe entier comme une

Mise en forme avec une balise HTML

Voici un exemple d’utilisation de ces balises HTML :

Créer des tableaux et des listes avec des balises HTML

4 sur 9 01/04/2023, 00:07

<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éﬁnit une cellule spéciﬁque 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.

<li> <li> est utilisé pour ajouter une entrée à la liste.

<dl> <dl> a�che une liste de déﬁnitions.

<dt> <dt> identiﬁe un terme ou une position dans une liste de

<dd> <dd> est une description de déﬁnition à l’intérieur d’une

Une liste en HTML

5 sur 9 01/04/2023, 00:07

Intégrer des médias en HTML

<img> Le tag HTML <img> (https://www.ionos.fr/digitalguide

<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

Balises HTML pour un formulaire

6 sur 9 01/04/2023, 00:07

<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

<select> Utilisez <select> pour créer une liste de sélection.