Les fondamentaux HTML
Comprendre la structure d’un document HTML et utiliser les balises sémantiques pour organiser le contenu de manière logique et accessible.
HTML (HyperText Markup Language) est le langage de balisage qui structure le contenu de toutes les pages web. Contrairement à Python qui est un langage de programmation, HTML ne contient pas de logique : il décrit la structure et le sens du contenu. Chaque page HTML commence par <!DOCTYPE html> qui indique au navigateur qu’il s’agit d’un document HTML5. Ensuite, la balise <html> englobe tout le contenu, divisé en deux parties : <head> (métadonnées invisibles comme le titre et l’encodage) et <body> (contenu visible de la page). Les balises fonctionnent généralement par paires : une balise ouvrante <p> et une balise fermante </p>.
Le HTML5 sémantique signifie que chaque balise a un sens précis qui décrit le rôle du contenu. Au lieu d’utiliser des <div> partout, on utilise <header> pour l’en-tête, <nav> pour la navigation, <main> pour le contenu principal, <section> pour les sections thématiques, <article> pour un contenu autonome, et <footer> pour le pied de page. Cette approche améliore l’accessibilité (les lecteurs d’écran comprennent la structure), le référencement (Google analyse mieux le contenu), et la maintenabilité (un développeur comprend immédiatement le rôle de chaque section).
Les éléments de texte forment l’ossature du contenu : les titres <h1> à <h6> créent une hiérarchie (un seul <h1> par page), <p> définit un paragraphe, <a href="..."> crée un lien hypertexte, <strong> met en gras (avec importance sémantique), <em> met en italique (emphase). Les listes s’écrivent avec <ul> (non ordonnée) ou <ol> (ordonnée) contenant des <li>. Les images s’insèrent avec <img src="..." alt="..."> où l’attribut alt est obligatoire pour l’accessibilité. Maîtriser ces éléments vous permettra de structurer n’importe quel contenu textuel.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Marie Dupont - Développeuse Web</title>
</head>
<body>
<header>
<h1>Marie Dupont</h1>
<p>Développeuse web passionnée</p>
</header>
<nav>
<ul>
<li><a href="#about">À propos</a></li>
<li><a href="#projects">Projets</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<main>
<section id="about">
<h2>À propos de moi</h2>
<p>Passionnée par le <strong>développement web</strong>,
je crée des sites <em>accessibles</em> et modernes.</p>
</section>
<section id="projects">
<h2>Mes projets</h2>
<article>
<h3>Portfolio en ligne</h3>
<p>Un site responsive présentant mes réalisations.</p>
<img src="portfolio.jpg" alt="Capture d'écran du portfolio">
</article>
</section>
</main>
<footer>
<p>© 2024 Marie Dupont. Tous droits réservés.</p>
</footer>
</body>
</html>Exercice pratique
Page d’article de blog
Créez une page HTML complète représentant un article de blog sur le thème de votre choix. La page doit utiliser les balises sémantiques et contenir un en-tête, une navigation, l’article avec titre, sous-titres, paragraphes, une image et une liste, et un pied de page.
- Créez la structure de base du document HTML5 (doctype, html, head avec charset et title, body).
- Ajoutez un header avec le nom du blog et un nav avec 3 liens de navigation.
- Dans main, créez un article avec un h2 pour le titre, deux sections avec des h3, des paragraphes, une image avec alt, et une liste à puces.
- Ajoutez un footer avec le copyright et un lien de contact.
✓Ouvrez le fichier dans un navigateur : la page doit afficher un en-tête, une navigation, un article structuré avec image et liste, et un pied de page. Validez votre HTML sur validator.w3.org pour vérifier l’absence d’erreurs.