Ce n’est pas un langage de programmation (il ne fait pas de calculs), c’est un langage de balisage. Il sert à dire au navigateur : “Ceci est un titre, ceci est un paragraphe, ceci est une image”.
Architecture et Fonctionnement du HTML
Le HTML fonctionne avec des balises (tags) qui encadrent le contenu. Le navigateur lit ce fichier de haut en bas et construit ce qu’on appelle le DOM (Document Object Model), une sorte d’arbre généalogique de la page.
[Image d’une structure arborescente DOM : <html> au sommet, avec deux branches <head> et <body>]
La structure standard d’un fichier .html :
<!DOCTYPE html>: Dit au navigateur “Attention, c’est du HTML moderne (HTML5)”.<head>: La partie invisible pour l’utilisateur. Elle contient le titre de l’onglet, les liens vers le CSS, et les méta-données (crucial pour le SEO et la sécurité).<body>: Tout ce qui s’affiche à l’écran (textes, images, boutons).
Les Balises Incontournables (Le vocabulaire)
On peut classer les balises HTML en plusieurs familles :
1. La Structure de texte
<h1>à<h6>: Les titres (du plus grand au plus petit).<p>: Un paragraphe de texte.<ul>/<li>: Créer des listes à puces (comme celle que tu lis !).
2. L’Organisation (Le contenant)
<div>: Un bloc générique (une boîte). C’est la balise la plus utilisée pour la mise en page.<span>: Pour isoler un petit bout de texte à l’intérieur d’une ligne.<header>,<footer>,<nav>: Balises “sémantiques” qui aident Google et les outils d’accessibilité à comprendre la structure de la page.
3. L’Interaction et le Multimédia
<a>: Le lien hypertexte (le cœur du Web).<img>: Afficher une image.<form>/<input>: Créer des formulaires pour que l’utilisateur tape des données (login, recherche).
Lexique technique HTML
| Terme | Définition |
| Balise (Tag) | L’élément entre chevrons (ex: <p>). La plupart s’ouvrent et se ferment </p>. |
| Attribut | Information ajoutée dans la balise (ex: <img src="image.jpg">, où src est l’attribut). |
| Sémantique | Utiliser la “bonne” balise pour le bon contenu (ex: <button> au lieu d’une <div> cliquable). |
| Hyperlien | Un texte ou une image qui, une fois cliqué, dirige vers une autre page (adresse URL). |
| Responsive | Capacité du HTML (aidé par le CSS) à s’adapter à la taille de l’écran (mobile vs PC). |
Pourquoi le HTML est crucial en Cybersécurité et Système ?
Même si c’est un langage simple, il est au centre de nombreuses failles :
- Injections XSS : Un pirate peut essayer d’insérer une balise
<script>malveillante dans un formulaire HTML pour voler les cookies des utilisateurs. Un expert cyber doit savoir “échapper” les balises HTML. - Phishing (Hameçonnage) : Les pirates copient le code HTML exact de la page de connexion de ta banque pour créer un faux site. Savoir lire le code source HTML permet de repérer les liens suspects (
href). - Attributs de sécurité : Dans les balises
<script>ou<iframe>, il existe des attributs commesandboxouintegrityqui empêchent l’exécution de code non autorisé. - Accessibilité (ISO 27001) : La sécurité de l’information passe aussi par la disponibilité. Un code HTML sémantique permet aux personnes malvoyantes d’utiliser les outils internes de l’entreprise.
Le trio du Web (L’analogie finale) :
- HTML : Le squelette et les murs (La structure).
- CSS : La peinture, la déco et les meubles (Le style).
- JavaScript (React) : L’électricité, l’ascenseur et l’ouverture automatique des portes (L’interactivité).
