Voici la liste organisée par rôle :
1. La Structure de Base (Le Squelette)
Ces balises sont obligatoires pour que le navigateur comprenne qu’il lit une page web.
<html>: La racine qui enveloppe tout le contenu.<head>: Contient les métadonnées (titre, encodage, liens vers CSS).<title>: Le nom qui s’affiche dans l’onglet du navigateur.<body>: Contient tout le contenu visible (texte, images).<meta>: Définit des infos comme l’auteur ou le charset (ex:UTF-8).
2. L’Organisation du Contenu (Sémantique)
Ces balises indiquent au navigateur (et à Google) à quoi servent les différentes parties de la page.
<header>: L’en-tête de la page ou d’une section.<nav>: Contient les liens de navigation (le menu).<main>: Le contenu principal et unique de la page.<section>: Regroupe des thématiques logiques.<article>: Un contenu autonome (ex: un post de blog).<aside>: Contenu indirect (barre latérale, publicités).<footer>: Le pied de page (mentions légales, contact).
3. Le Texte et la Hiérarchie
Indispensable pour la lisibilité et le référencement (SEO).
<h1>à<h6>: Titres de niveaux 1 (le plus important) à 6.<p>: Un paragraphe de texte.<ul>: Liste à puces (non ordonnée).<ol>: Liste numérotée (ordonnée).<li>: Un élément d’une liste.<strong>: Texte important (s’affiche en gras).<em>: Texte mis en emphase (s’affiche en italique).<br>: Un simple retour à la ligne (balise orpheline, pas de fermeture).<hr>: Une ligne horizontale de séparation.
4. Les Liens et le Multimédia
Ce qui rend le Web “interactif”.
<a>: Créer un lien hypertexte (nécessite l’attributhref).<img>: Insérer une image (nécessitesrcetalt).<video>: Intégrer une vidéo.<audio>: Intégrer un lecteur audio.<iframe>: Intégrer une autre page web dans la page actuelle (ex: une carte Google Maps).
5. Formulaires et Tableaux (Gestion de données)
C’est ici que l’IT et la Cybersécurité se rejoignent (saisie utilisateur).
<table>: Créer un tableau de données.<tr>: Une ligne du tableau.<th>: Une cellule d’en-tête (titre de colonne).<td>: Une cellule de donnée standard.
<form>: Définit un formulaire de saisie.<input>: Un champ de saisie (texte, mot de passe, checkbox).<button>: Un bouton cliquable.<textarea>: Une zone de texte multi-lignes.<label>: L’étiquette liée à un champinput(important pour l’accessibilité).
6. Balises Techniques (Scripts et Styles)
<link>: Relier un fichier CSS externe.<style>: Écrire du CSS directement dans le HTML.<script>: Intégrer du JavaScript (React par exemple).<div>: Un bloc générique sans sens particulier (utilisé massivement pour le design).<span>: Un conteneur générique en ligne (pour styliser un mot précis).
Le conseil de l’expert Cyber
En cybersécurité, on surveille particulièrement les balises <script>, <iframe> et les attributs des formulaires comme action. Un pirate tentera souvent d’injecter une balise <script> malveillante (attaque XSS) pour voler les données de tes utilisateurs.
