HTML (HyperText Markup Language) est un langage de balisage utilisé pour structurer et présenter le
contenu sur le web. Les balises HTML sont les éléments de base utilisés pour créer des pages web.
Voici une liste des principales balises HTML et leurs rôles :
### Balises de structure de base
1. **`<!DOCTYPE html>`** : Déclare le type de document et la version d'HTML utilisée (HTML5 dans
ce cas).
2. **`<html>`** : Conteneur principal qui englobe tout le contenu de la page.
3. **`<head>`** : Contient les métadonnées de la page, comme le titre, les liens vers les feuilles de
style, et les scripts.
4. **`<title>`** : Définit le titre de la page, qui apparaît dans l'onglet du navigateur.
5. **`<body>`** : Contient tout le contenu visible de la page, comme le texte, les images, les liens,
etc.
### Balises de texte
6. **`<h1>` à `<h6>`** : Définissent les titres et sous-titres, avec `<h1>` étant le plus important et
`<h6>` le moins important.
7. **`<p>`** : Définit un paragraphe de texte.
8. **`<br>`** : Insère un saut de ligne.
9. **`<hr>`** : Insère une ligne horizontale, souvent utilisée pour séparer des sections de contenu.
10. **`<strong>`** : Met le texte en gras pour indiquer une importance forte.
11. **`<em>`** : Met le texte en italique pour indiquer une emphase.
12. **`<mark>`** : Met en surbrillance le texte.
13. **`<small>`** : Réduit la taille du texte.
14. **`<sub>`** : Affiche le texte en indice.
15. **`<sup>`** : Affiche le texte en exposant.
16. **`<blockquote>`** : Utilisé pour citer un texte long, souvent avec une indentation.
17. **`<q>`** : Utilisé pour citer un texte court, généralement entre guillemets.
18. **`<cite>`** : Utilisé pour citer le titre d'une œuvre, comme un livre ou un film.
19. **`<code>`** : Affiche du code informatique dans une police à largeur fixe.
20. **`<pre>`** : Affiche du texte préformaté, en conservant les espaces et les sauts de ligne.
### Balises de liens et images
21. **`<a>`** : Définit un hyperlien vers une autre page ou une section de la même page.
22. **`<img>`** : Insère une image dans la page.
23. **`<map>`** : Définit une image cliquable avec des zones cliquables.
24. **`<area>`** : Définit une zone cliquable dans une image map.
### Balises de listes
25. **`<ul>`** : Définit une liste non ordonnée (à puces).
26. **`<ol>`** : Définit une liste ordonnée (numérotée).
27. **`<li>`** : Définit un élément de liste, utilisé à l'intérieur de `<ul>` ou `<ol>`.
28. **`<dl>`** : Définit une liste de définitions.
29. **`<dt>`** : Définit un terme dans une liste de définitions.
30. **`<dd>`** : Définit la description d'un terme dans une liste de définitions.
### Balises de tableaux
31. **`<table>`** : Définit un tableau.
32. **`<thead>`** : Définit l'en-tête d'un tableau.
33. **`<tbody>`** : Définit le corps d'un tableau.
34. **`<tfoot>`** : Définit le pied de tableau.
35. **`<tr>`** : Définit une ligne de tableau.
36. **`<th>`** : Définit une cellule d'en-tête de tableau.
37. **`<td>`** : Définit une cellule de données de tableau.
38. **`<caption>`** : Définit une légende pour un tableau.
### Balises de formulaires
39. **`<form>`** : Définit un formulaire pour collecter des données utilisateur.
40. **`<input>`** : Définit un champ de saisie, comme un champ texte, une case à cocher, un bouton
radio, etc.
41. **`<textarea>`** : Définit une zone de texte multiligne.
42. **`<button>`** : Définit un bouton cliquable.
43. **`<select>`** : Définit une liste déroulante.
44. **`<option>`** : Définit une option dans une liste déroulante.
45. **`<label>`** : Associe une étiquette à un élément de formulaire.
46. **`<fieldset>`** : Regroupe des éléments de formulaire dans une boîte.
47. **`<legend>`** : Définit une légende pour un `<fieldset>`.
### Balises multimédias
48. **`<audio>`** : Insère un fichier audio.
49. **`<video>`** : Insère un fichier vidéo.
50. **`<source>`** : Définit les sources multimédias pour `<audio>` et `<video>`.
51. **`<track>`** : Ajoute des sous-titres ou des pistes de texte pour les éléments multimédias.
52. **`<embed>`** : Insère un contenu externe, comme une application ou un plugin.
53. **`<iframe>`** : Insère une autre page web dans la page actuelle.
### Balises de mise en page
54. **`<div>`** : Définit une section ou un conteneur générique dans un document.
55. **`<span>`** : Définit une section en ligne dans un document.
56. **`<header>`** : Définit l'en-tête d'une section ou d'une page.
57. **`<footer>`** : Définit le pied de page d'une section ou d'une page.
58. **`<main>`** : Définit le contenu principal d'un document.
59. **`<section>`** : Définit une section thématique dans un document.
60. **`<article>`** : Définit un contenu autonome, comme un article de blog ou un commentaire.
61. **`<aside>`** : Définit un contenu tangentiel ou secondaire, comme une barre latérale.
62. **`<nav>`** : Définit une section de navigation, contenant des liens vers d'autres pages.
63. **`<figure>`** : Définit un contenu autonome, comme une image ou un diagramme.
64. **`<figcaption>`** : Définit une légende pour un `<figure>`.
### Balises de métadonnées
65. **`<meta>`** : Fournit des métadonnées sur le document, comme le jeu de caractères, la
description, les mots-clés, etc.
66. **`<link>`** : Définit une relation entre le document et une ressource externe, comme une
feuille de style.
67. **`<style>`** : Définit des styles CSS directement dans le document.
68. **`<script>`** : Définit un script JavaScript, soit en ligne, soit en lien vers un fichier externe.
69. **`<noscript>`** : Définit un contenu alternatif pour les utilisateurs qui ont désactivé JavaScript.
### Balises de mise en forme
70. **`<b>`** : Met le texte en gras (sans importance sémantique).
71. **`<i>`** : Met le texte en italique (sans importance sémantique).
72. **`<u>`** : Souligne le texte.
73. **`<s>`** : Barre le texte (indique qu'il est obsolète ou incorrect).
74. **`<del>`** : Indique du texte supprimé.
75. **`<ins>`** : Indique du texte inséré.
76. **`<abbr>`** : Définit une abréviation ou un acronyme.
77. **`<address>`** : Définit les informations de contact de l'auteur ou du propriétaire du document.
78. **`<time>`** : Définit une date ou une heure.
### Balises interactives
79. **`<details>`** : Définit un élément interactif que l'utilisateur peut ouvrir ou fermer.
80. **`<summary>`** : Définit un résumé ou une légende pour un élément `<details>`.
81. **`<dialog>`** : Définit une boîte de dialogue ou une fenêtre modale.
### Balises de script et programmation
82. **`<canvas>`** : Utilisé pour dessiner des graphiques, des animations, etc., via JavaScript.
83. **`<svg>`** : Définit un contenu graphique vectoriel.
### Balises obsolètes ou dépréciées
Certaines balises ont été dépréciées en HTML5 et ne devraient plus être utilisées. Par exemple :
- **`<center>`** : Centrer le texte (utilisez CSS à la place).
- **`<font>`** : Définir la police, la taille et la couleur du texte (utilisez CSS à la place).
- **`<strike>`** : Barrer le texte (utilisez `<del>` ou `<s>` à la place).
### Conclusion
Cette liste couvre la plupart des balises HTML couramment utilisées. Chaque balise a un rôle
spécifique dans la structuration et la présentation du contenu web. En combinant ces balises avec
des styles CSS et des scripts JavaScript, vous pouvez créer des pages web riches et interactives.
