HTML5 : Le guide complet pour bien débuter le développement web
Apprenez HTML5 de zéro : structure, balises essentielles et créez votre première page web pas à pas.
HTML5, c'est quoi exactement ?
HTML5, c'est le langage de base du web. Littéralement, HTML signifie HyperText Markup Language (langage de balisage hypertexte). C'est avec HTML que tu crées la structure et le contenu de toutes les pages web que tu visites chaque jour.
Pense à HTML comme au squelette d'une maison : il définit où vont les murs, les portes, les fenêtres. CSS viendra ensuite décorer (on verra ça dans le prochain article !), et JavaScript rendra le tout interactif.
Pourquoi apprendre HTML5 ?
- 🎯 La base absolue du web : Impossible de faire du web sans HTML
- 📱 Universel : Fonctionne sur tous les navigateurs et appareils
- ⚡ Facile à apprendre : Quelques heures suffisent pour les bases
- 🚀 Tremplin vers le reste : Avant React, Angular ou Vue, il y a HTML
- 💼 Indispensable : Tous les développeurs web utilisent HTML quotidiennement
Les balises : le cœur du HTML
En HTML, tout fonctionne avec des balises. Une balise, c'est un mot-clé entre chevrons qui dit au navigateur "ici, c'est un titre" ou "ici, c'est un paragraphe".
La plupart des balises vont par paire : une balise ouvrante et une balise fermante :
<p>Ceci est un paragraphe</p>
<h1>Ceci est un titre</h1>Structure de base d'une page HTML5
Chaque page HTML suit toujours la même structure de base :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ma première page web</title>
</head>
<body>
<!-- Ton contenu ici -->
</body>
</html>Explications :
<!DOCTYPE html>: Dit au navigateur "c'est du HTML5"<html>: La racine de ta page<head>: Métadonnées invisibles (titre, encodage, liens CSS...)<body>: Tout le contenu visible de ta page
Les balises HTML essentielles à connaître
Les titres
Il existe 6 niveaux de titres, de <h1> (le plus important) à <h6> (le moins important) :
<h1>Titre principal</h1>
<h2>Sous-titre</h2>
<h3>Sous-sous-titre</h3>⚠️ Règle d'or : Un seul <h1> par page (important pour le SEO !)
Les paragraphes et le texte
<p>Un paragraphe de texte</p>
<strong>Texte important (gras)</strong>
<em>Texte emphase (italique)</em>
<br> <!-- Saut de ligne -->Les liens
<a href="https://google.com">Cliquez ici</a>
<a href="page2.html">Lien interne</a>
<a href="mailto:contact@email.com">Envoyez un email</a>Les images
<img src="photo.jpg" alt="Description de l'image">L'attribut alt est crucial : il décrit l'image pour l'accessibilité et le SEO.
Les listes
Liste non ordonnée (avec puces) :
<ul>
<li>Premier élément</li>
<li>Deuxième élément</li>
</ul>Liste ordonnée (numérotée) :
<ol>
<li>Étape 1</li>
<li>Étape 2</li>
</ol>Les balises sémantiques HTML5
HTML5 a introduit des balises sémantiques qui donnent du sens à ton contenu :
<header>En-tête de la page</header>
<nav>Menu de navigation</nav>
<main>Contenu principal</main>
<article>Un article complet</article>
<section>Une section</section>
<aside>Contenu annexe (sidebar)</aside>
<footer>Pied de page</footer>Ces balises améliorent le SEO et l'accessibilité de ton site !
Mini-tutoriel : Créer ta première page web
Let's go ! On va créer ensemble une vraie page web de A à Z.
Étape 1 : Créer le fichier
Ouvre ton éditeur de texte préféré (VS Code, Sublime Text, Notepad++...) et crée un fichier index.html
Étape 2 : La structure de base
Commence par la structure HTML5 complète :
<!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 Web</title>
</head>
<body>
</body>
</html>Étape 3 : Ajouter un en-tête
Dans le <body>, ajoute :
<header>
<h1>Bienvenue sur mon site</h1>
<nav>
<ul>
<li><a href="#accueil">Accueil</a></li>
<li><a href="#apropos">À propos</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>Étape 4 : Ajouter le contenu principal
<main>
<section id="accueil">
<h2>Bienvenue !</h2>
<p>Ceci est ma première page web créée avec HTML5.</p>
<img src="https://via.placeholder.com/400" alt="Image de démo">
</section>
<section id="apropos">
<h2>À propos de moi</h2>
<p>Je suis en train d'apprendre le développement web !</p>
<h3>Mes compétences :</h3>
<ul>
<li>HTML5</li>
<li>CSS3 (bientôt)</li>
<li>JavaScript (à venir)</li>
</ul>
</section>
</main>Étape 5 : Ajouter un pied de page
<footer>
<p>© 2024 - Mon Premier Site. Tous droits réservés.</p>
</footer>Étape 6 : Ouvrir dans le navigateur
Sauvegarde ton fichier et double-clique dessus. Il s'ouvrira dans ton navigateur par défaut. Bravo, tu as créé ta première page web ! 🎉
Les formulaires HTML
Les formulaires permettent à l'utilisateur d'envoyer des données. Voici un exemple simple :
<form action="/submit" method="post">
<label for="name">Nom :</label>
<input type="text" id="name" name="name" required>
<label for="email">Email :</label>
<input type="email" id="email" name="email" required>
<label for="message">Message :</label>
<textarea id="message" name="message"></textarea>
<button type="submit">Envoyer</button>
</form>Les bonnes pratiques HTML
- ✅ Indente correctement ton code : Plus lisible et maintenable
- ✅ Utilise des balises sémantiques : Meilleur pour le SEO
- ✅ Toujours un attribut alt sur les images : Accessibilité
- ✅ Valide ton HTML : Utilise le validateur W3C
- ✅ Un seul h1 par page : Structure claire
- ❌ N'utilise pas de balises obsolètes : <center>, <font>, <marquee>
Les outils indispensables
- 💻 VS Code : L'éditeur le plus populaire, gratuit et puissant
- 🔍 Chrome DevTools : Inspecter et débugger ton HTML (F12)
- ✓ W3C Validator : Vérifier que ton HTML est valide
- 📚 MDN Web Docs : La référence pour toutes les balises HTML
- 🎨 Emmet : Extension pour écrire du HTML ultra rapidement
Les ressources pour progresser
- 📖 MDN Learn HTML : Le guide officiel, très complet
- 🎓 freeCodeCamp : Cours interactifs gratuits
- 💡 CodePen : Tester et partager ton code HTML
- 🎬 YouTube : Grafikart, Traversy Media, The Net Ninja
- 📘 HTML5 Doctor : Blog spécialisé sur HTML5
Les erreurs à éviter quand on débute
- ❌ Oublier de fermer les balises : <p>texte (manque </p>)
- ❌ Imbriquer incorrectement : <p><strong>texte</p></strong> (mauvais ordre)
- ❌ Utiliser des IDs en double : Chaque ID doit être unique
- ❌ Négliger l'accessibilité : Pense aux personnes handicapées
- ❌ Ne pas tester sur plusieurs navigateurs : Vérifie Chrome, Firefox, Safari
Mon conseil pour progresser
La meilleure façon d'apprendre HTML, c'est de pratiquer tous les jours. Ne te contente pas de lire des tutoriels : ouvre ton éditeur et code !
Commence par recréer des pages simples que tu vois sur le web. Inspire-toi de sites existants, regarde leur code source (clic droit > "Afficher le code source"), et essaie de comprendre comment c'est fait.
Conclusion
HTML5 est la première pierre de l'édifice du développement web. C'est simple, logique et ultra puissant. En quelques heures, tu peux déjà créer des pages web fonctionnelles.
L'étape suivante ? CSS3 pour styliser tout ça et rendre tes pages magnifiques ! Mais tu as déjà franchi la première étape : tu maîtrises maintenant les bases du HTML5.
Continue à pratiquer, expérimente, casse des trucs, et surtout : amuse-toi ! Le web, c'est ton terrain de jeu. 🚀