Référence des Balises HTML

Bonjour, futurs développeurs web ! Je suis ravi de vous guider sur ce voyage passionnant à travers le monde des balises HTML. En tant que quelqu'un qui enseigne l'informatique depuis de nombreuses années, je peux vous dire que comprendre les balises HTML, c'est comme apprendre l'alphabet du développement web. Alors, plongeons dedans !

HTML - Tags Reference

Quelles sont les Balises HTML ?

Les balises HTML sont les briques de construction des pages web. Elles sont comme le code secret qui indique aux navigateurs web comment afficher le contenu. Imaginez que vous construisez une maison - les balises HTML sont les briques, les fenêtres et les portes qui donne structure à votre page web.

Par exemple, regardons une simple balise HTML :

<p>Ceci est un paragraphe.</p>

Ici, <p> est la balise ouvrante, et </p> est la balise fermante. Tout ce qui se trouve entre elles sera affiché comme un paragraphe sur votre page web.

Pourquoi sont-elles importantes ?

Les balises HTML sont importantes car elles donnent un sens et une structure à votre contenu. Sans elles, votre page web ne serait qu'un amas de texte ! Elles aident les navigateurs à comprendre ce que chaque piece de contenu est censée être, qu'il s'agisse d'un titre, d'un paragraphe, d'une image ou d'un lien.

Liste des Balises HTML avec Exemples

Explorons quelques-unes des balises HTML les plus courantes. Je vais fournir des exemples et des explications pour chaque catégorie.

Balises HTML de Base

Ce sont les fondations de tout document HTML.

Balise	Description	Exemple
`<!DOCTYPE>`	Définit le type de document	`<!DOCTYPE html>`
`<html>`	L'élément racine d'une page HTML	`<html>...</html>`
`<head>`	Contient les informations méta sur le document	`<head>...</head>`
`<title>`	Spécifie un titre pour le document	`<title>Ma Première Page Web</title>`
`<body>`	Définit le corps du document	`<body>...</body>`

Voici une structure HTML de base :

<!DOCTYPE html>
<html>
<head>
<title>Ma Première Page Web</title>
</head>
<body>
<h1>Bienvenue sur mon site web !</h1>
<p>C'est ici que va tout mon contenu.</p>
</body>
</html>

Cette structure est comme le squelette de votre page web. Tout ce que nous allons apprendre s'intégrera dans ce cadre de base.

Balises de Formatage HTML

Ces balises vous aident à formater le texte sur votre page web.

Balise	Description	Exemple
`<h1>` à `<h6>`	Titres	`<h1>Titre Principal</h1>`
`<p>`	Paragraphe	`<p>Ceci est un paragraphe.</p>`
`<br>`	Saut de ligne	`Ligne 1<br>Ligne 2`
`<strong>`	Texte en gras	`<strong>Important !</strong>`
`<em>`	Texte mis en valeur	`<em>Texte en italique</em>`

Voyons ces balises en action :

<h1>Bienvenue dans Mon Livre de Recettes</h1>
<h2>Recette : Cookies au Chocolat</h2>
<p>Ces cookies sont <strong>délicieux</strong> et <em>faciles à faire</em> !</p>
<p>Ingrédients :<br>
Farine<br>
Sucre<br>
Chips de chocolat</p>

Cet exemple montre comment utiliser les balises de formatage pour structurer une page de recettes. Les balises <h1> et <h2> créent des titres hiérarchiques, tandis que <strong> et <em> mettent en avant des mots importants.

Balises de Formulaires et d'Entrée HTML

Les formulaires permettent aux utilisateurs de saisir des données qui peuvent être envoyées à un serveur pour traitement.

Balise	Description	Exemple
`<form>`	Définit un formulaire HTML	`<form>...</form>`
`<input>`	Contrôle d'entrée	`<input type="text" name="username">`
`<textarea>`	Contrôle d'entrée multiligne	`<textarea>Entrez du texte ici...</textarea>`
`<button>`	Bouton cliquable	`<button type="submit">Envoyer</button>`

Voici un exemple de formulaire simple :

<form action="/submit-recipe" method="post">
<label for="recipe-name">Nom de la Recette :</label>
<input type="text" id="recipe-name" name="recipe-name"><br><br>

<label for="ingredients">Ingrédients :</label>
<textarea id="ingredients" name="ingredients"></textarea><br><br>

<button type="submit">Soumettre la Recette</button>
</form>

Ce formulaire permet aux utilisateurs de soumettre un nom de recette et des ingrédients. L'attribut action spécifie où les données du formulaire doivent être envoyées, et l'attribut method définit comment elles doivent être envoyées.

Balises d'Image HTML

Les images rendent vos pages web plus attractives et informatives.

Balise	Description	Exemple
`<img>`	Intègre une image	`<img src="cookie.jpg" alt="Cookie au chocolat">`

Ajoutons une image à notre page de recettes :

<h2>_cookies au Chocolat</h2>
<img src="cookie.jpg" alt="Un délicieux cookie au chocolat" width="300" height="200">
<p>N'est-ce pas appétissant ?</p>

L'attribut src spécifie le fichier image, tandis que alt fournit un texte alternatif pour les lecteurs d'écran ou si l'image ne parvient pas à charger.

Balises Audio et Vidéo HTML

Ces balises vous permettent d'intégrer du contenu multimédia dans vos pages web.

Balise	Description	Exemple
`<audio>`	Intègre un contenu audio	`<audio src="recipe.mp3" controls></audio>`
`<video>`	Intègre un contenu vidéo	`<video src="baking.mp4" controls></video>`

Voici comment vous pourriez ajouter une vidéo de tutoriel de cuisson à votre page de recettes :

<h3>Regardez le Processus de Cuisson</h3>
<video src="cookie-baking.mp4" controls width="400" height="300">
Votre navigateur ne supporte pas la balise video.
</video>

L'attribut controls ajoute des contrôles de lecture, de pause et de volume au lecteur vidéo.

Balises de Lien HTML

Les liens sont les fils qui tissent le web ensemble, permettant aux utilisateurs de naviguer entre les pages.

Balise	Description	Exemple
`<a>`	Définit un hiperlien	`<a href="https://www.example.com">Visitez Example.com</a>`

Ajoutons quelques liens à notre page de recettes :

<p>Vérifiez nos <a href="recipes.html">autres recettes</a> ou <a href="https://www.cookingchannel.com" target="_blank">visitez Cooking Channel</a> pour plus d'inspiration.</p>

L'attribut href spécifie l'URL de la page vers laquelle le lien pointe. L'attribut target="_blank" ouvre le lien dans un nouvel onglet.

Balises de Liste HTML

Les listes aident à organiser l'information de manière claire et lisible.

Balise	Description	Exemple
`<ul>`	Liste non ordonnée	`<ul>...</ul>`
`<ol>`	Liste ordonnée	`<ol>...</ol>`
`<li>`	Élément de liste	`<li>Élément</li>`

Utilisons des listes pour nos ingrédients et étapes de recette :

<h3>Ingrédients :</h3>
<ul>
<li>2 tasses de farine à usage multiple</li>
<li>1 tasse de chips de chocolat</li>
<li>1/2 tasse de sucre</li>
</ul>

<h3>Étapes :</h3>
<ol>
<li>Mélanger les ingrédients secs</li>
<li>Ajouter les ingrédients humides</li>
<li>Mélanger les chips de chocolat</li>
<li>Cuire à 350°F pendant 10-12 minutes</li>
</ol>

Cet exemple montre comment créer des listes non ordonnées (à puces) et ordonnées (numérotées).

Balises de Tableau HTML

Les tableaux sont parfaits pour afficher des données sous forme de lignes et de colonnes.

Balise	Description	Exemple
`<table>`	Définit un tableau	`<table>...</table>`
`<tr>`	Ligne de tableau	`<tr>...</tr>`
`<th>`	En-tête de tableau	`<th>En-tête</th>`
`<td>`	Donnée/cellule de tableau	`<td>Donnée</td>`

Créons un tableau d'information nutritionnelle pour nos cookies :

<h3>Information Nutritionnelle (par cookie)</h3>
<table border="1">
<tr>
<th>Nutriments</th>
<th>Quantité</th>
</tr>
<tr>
<td>Calories</td>
<td>150</td>
</tr>
<tr>
<td>Matières grasses</td>
<td>7g</td>
</tr>
<tr>
<td>Glucides</td>
<td>20g</td>
</tr>
</table>

Cela crée un tableau simple avec des en-têtes et des cellules de données. L'attribut border ajoute des bordures visibles au tableau.

Balises de Styles et de Sémantique HTML

Ces balises aident à améliorer la structure et l'apparence de votre page web.

Balise	Description	Exemple
`<div>`	Définit une section dans un document	`<div>...</div>`
`<span>`	Conteneur inline pour du texte	`<span style="color:red;">Texte rouge</span>`
`<header>`	Définit un en-tête pour un document ou une section	`<header>...</header>`
`<footer>`	Définit un pied de page pour un document ou une section	`<footer>...</footer>`

Utilisons quelques-unes de ces balises pour améliorer la structure de notre page de recettes :

<header>
<h1>Mon Livre de Recettes</h1>
<nav>
<a href="index.html">Accueil</a> |
<a href="recipes.html">Recettes</a> |
<a href="about.html">À propos</a>
</nav>
</header>

<main>
<article>
<h2>_cookies au Chocolat</h2>
<!-- Contenu de la recette ici -->
</article>
</main>

<footer>
<p>&copy; 2023 Mon Livre de Recettes. Tous droits réservés.</p>
</footer>

Ces balises sémantiques donnent plus de sens à la structure de votre page, ce qui est utile pour les navigateurs et les moteurs de recherche.

Balises Méta HTML

Les balises méta fournissent des métadonnées sur le document HTML. Elles vont à l'intérieur de la section <head>.

Balise	Description	Exemple
`<meta>`	Spécifie les métadonnées sur un document HTML	`<meta charset="UTF-8">`

Voici comment vous pourriez utiliser les balises méta :

<head>
<meta charset="UTF-8">
<meta name="description" content="Recette délicieuse de cookies au chocolat">
<meta name="keywords" content="cookies, cuisson, dessert">
<meta name="author" content="Jane Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recette de Cookie au Chocolat</title>
</head>

Ces balises méta fournissent des informations sur l'encodage des caractères, la description de la page, les mots-clés, l'auteur et les paramètres de viewport pour le design responsive.

Balises de Programmation HTML

Ces balises sont utilisées pour intégrer ou référencer du contenu externe ou des scripts.

Balise	Description	Exemple
`<script>`	Définit un script client-side	`<script src="script.js"></script>`
`<noscript>`	Définit un contenu alternatif pour les utilisateurs qui ont désactivé les scripts	`<noscript>Votre navigateur ne supporte pas JavaScript !</noscript>`

Voici comment vous pourriez utiliser ces balises :

<head>
<script src="recipe-calculator.js"></script>
</head>
<body>
<!-- Autre contenu -->
<noscript>
<p>Veuillez activer JavaScript pour utiliser le calculateur d'ingrédients.</p>
</noscript>
</body>

La balise <script> lie un fichier JavaScript externe, tandis que la balise <noscript> fournit un message pour les utilisateurs qui ont JavaScript désactivé.

Et voilà ! Nous avons couvert unelarge gamme de balises HTML, de la structure de base aux éléments avancés. Souvenez-vous, la meilleure façon d'apprendre, c'est de faire. Essayez de créer vos propres pages web en utilisant ces balises. Expérimentez, faites des erreurs et apprenez de них. C'est ainsi que tous les grands développeurs web commencent !

Bonne programmation, et que vos pages web soient toujours magnifiques !

Credits: Image by storyset

Tutoriel précédent:

HTML - Feuille de triche

Tutoriel suivant:

HTML - Référence des attributs