Module 01 · HTML · Débutant à intermédiaire
Apprendre HTML : construire une page web solide
HTML donne du sens et une structure à votre contenu. Avant de penser au design, apprenez à organiser une page claire pour les personnes, les moteurs de recherche et les technologies d'assistance.
Avant de commencer : comment fonctionne le web ?
Le web relie trois éléments : un navigateur (Chrome, Firefox ou Edge), un serveur qui stocke les fichiers, et une adresse URL qui permet de les trouver. Quand vous ouvrez une page, le navigateur demande les fichiers au serveur puis interprète le HTML, le CSS et JavaScript.
HTML signifie HyperText Markup Language, soit « langage de balisage hypertexte ». Il ne s'agit pas d'un langage de programmation : il ne calcule pas, il décrit le contenu et ses relations.
D'où vient HTML ?
Le premier système de pages web a été créé par Tim Berners-Lee au CERN à la fin des années 1980. Son objectif était de partager facilement des documents reliés par des hyperliens. HTML est aujourd'hui maintenu comme un standard vivant par le WHATWG, un groupe qui réunit les principaux acteurs du web.
Cette histoire explique un principe fondamental : HTML doit fonctionner partout, sur un téléphone, un ordinateur, un lecteur d'écran ou une connexion lente.
Qu'est-ce qu'une balise ?
Une balise est un mot entouré de chevrons qui donne un rôle au contenu. La plupart des éléments utilisent une balise ouvrante et une balise fermante. L'ensemble forme un élément HTML.
<p>Ceci est un paragraphe.</p>
<a href="contact.php">Nous contacter</a>Dans le second exemple, href est un attribut : il apporte une précision à la balise a. Certaines balises n'ont pas de fermeture, comme img, car elles ne contiennent pas de texte.
Imbriquer sans se tromper
Les éléments peuvent contenir d'autres éléments. Il faut toujours fermer la balise la plus récente avant de fermer son parent. Cette règle évite une structure ambiguë.
<article>
<h2>Un titre d'article</h2>
<p>Un texte avec <strong>un mot important</strong>.</p>
</article>1. Le squelette d'un document
Chaque page HTML commence par <!DOCTYPE html>. L'élément html contient deux zones : head pour les métadonnées et body pour ce qui est affiché.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon premier site</title>
</head>
<body>
<h1>Bonjour le web</h1>
</body>
</html>2. Hiérarchiser le contenu
Les titres vont de h1 à h6. Utilisez un seul h1 pour le sujet principal, puis des h2 pour les grandes parties. Le texte courant se place dans p, et une liste dans ul ou ol.
Ne choisissez jamais une balise uniquement pour sa taille visuelle : le CSS servira à la mise en forme.
3. Découper la page avec les balises sémantiques
Les éléments header, nav, main, section, article, aside et footer expliquent le rôle de chaque zone. Cette structure rend un site plus facile à maintenir et à parcourir.
<header>...</header>
<main>
<section>
<h2>Nos actualités</h2>
<article>Une actualité complète</article>
</section>
</main>
<footer>...</footer>4. Créer des liens et des images utiles
Un lien utilise a et un attribut href. Son texte doit décrire la destination : préférez « Découvrir nos services » à « Cliquez ici ». Une image utilise img, avec un alt qui décrit l'information utile de l'image.
<a href="services.html">Découvrir nos services</a>
<img src="equipe.jpg" alt="Les trois membres de l'équipe Kreatix">5. Recueillir une information avec un formulaire
Un formulaire rassemble des champs. Associez toujours un label à son champ grâce aux attributs for et id. Utilisez le bon type de champ : email, tel, date ou password.
<label for="email">Votre e-mail</label>
<input id="email" name="email" type="email" required>
<button type="submit">Envoyer</button>6. Comprendre les chemins et les adresses
Un lien peut utiliser un chemin relatif ou une adresse absolue. contact.php pointe vers un fichier voisin du site ; assets/image.jpg pointe vers un sous-dossier ; une URL commençant par https:// mène vers un autre site.
Pour un lien externe, ajoutez target="_blank" seulement si vous voulez ouvrir un nouvel onglet, puis ajoutez rel="noopener" pour des raisons de sécurité.
7. Donner de bonnes informations au navigateur
Le head contient aussi la description de la page, la langue et la zone d'affichage mobile. La balise meta name="viewport" évite qu'un site soit affiché comme une miniature sur téléphone.
<meta name="description" content="Une présentation claire de mon activité.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">À retenir
Un bon HTML est logique avant d'être esthétique : utilisez des balises adaptées, des titres dans le bon ordre et des descriptions utiles. Vous faciliterez ensuite le travail du CSS et de JavaScript.