HTML — Votre première page web
Balises HTML, structure obligatoire et balises de texte
Concepts Théoriques
HTML (HyperText Markup Language) est un langage de balisage, pas un langage de programmation. Il ne fait pas de calculs ni de logique — il structure le contenu. Chaque élément visible d'une page web (texte, image, lien, bouton) est défini par une balise HTML.
Qu'est-ce qu'une balise HTML ?
Une balise HTML suit toujours ce schéma :
<nom-de-balise attribut="valeur">Contenu visible</nom-de-balise>
Les 4 parties d'une balise :
- La balise ouvrante : <p> — elle démarre l'élément
- Les attributs : class="intro", id="hero", href="url" — des informations supplémentaires sur l'élément
- Le contenu : le texte visible, ou d'autres balises imbriquées à l'intérieur
- La balise fermante : </p> — elle termine l'élément (notez le / avant le nom)
Certaines balises sont auto-fermantes — elles n'ont pas de contenu intérieur et donc pas de balise fermante :
- <img src="photo.jpg" alt="Description"> — affiche une image
- <br> — crée un retour à la ligne
- <hr> — trace une ligne de séparation horizontale
- <input type="text"> — crée un champ de formulaire
La structure obligatoire d'une page HTML
Toute page HTML valide DOIT contenir cette structure de base :
- <!DOCTYPE html> — Déclare que c'est un document HTML5 (toujours en première ligne)
- <html lang="fr"> — L'élément racine qui englobe tout. L'attribut lang indique la langue.
- <head> — Contient les métadonnées invisibles (titre de l'onglet, encodage, liens CSS)
- <body> — Contient tout le contenu visible de la page
Le <head> contient des informations pour le navigateur, pas pour l'utilisateur :
- <meta charset="UTF-8"> — L'encodage des caractères. Sans ça, les accents (é, à, ç) et les émojis s'affichent mal.
- <meta name="viewport" content="width=device-width, initial-scale=1.0"> — Indispensable pour que le site s'affiche correctement sur mobile. Sans cette ligne, le mobile affiche la version desktop en miniature.
- <title>Texte</title> — Le texte qui apparaît dans l'onglet du navigateur et dans les résultats Google.
Les balises de texte
Ce sont les briques de base du contenu visible :
Les titres : <h1> à <h6>
Les titres vont du plus important (<h1>) au moins important (<h6>). Ils créent une hiérarchie dans votre page, comme un plan de document :
- <h1> — Titre principal de la page. Un seul par page (c'est important pour le référencement Google).
- <h2> — Titres des grandes sections
- <h3> — Sous-sections à l'intérieur d'un <h2>
- <h4> à <h6> — Niveaux encore plus profonds (rarement utilisés)
Règle importante : ne sautez pas de niveaux. Si vous avez un <h1> suivi d'un <h4>, la hiérarchie est incohérente. La bonne séquence est <h1> → <h2> → <h3>.
N'utilisez JAMAIS un <h3> à la place d'un <h1> juste parce que le <h3> est visuellement plus petit. Les titres définissent la structure sémantique, pas la taille du texte. La taille se contrôle en CSS.
Le paragraphe : <p>
C'est le bloc de texte standard. Chaque <p> crée un nouveau bloc avec un espacement automatique avant et après. Utilisez un <p> pour chaque paragraphe de texte courant.
La mise en forme sémantique :
- <strong> — Texte important (visuellement en gras). Utilisez-le quand le mot est réellement important pour le sens, pas juste pour le visuel.
- <em> — Emphase (visuellement en italique). Utilisez-le quand vous insistez sur un mot.
- <mark> — Texte surligné (fond jaune par défaut)
- <small> — Texte secondaire (mentions légales, notes de bas de page)
- <code> — Code informatique en ligne (police monospace)
- <blockquote> — Citation longue (bloc indenté)
Les séparateurs :
- <br> — Retour à la ligne (à utiliser rarement — préférez séparer en deux <p>)
- <hr> — Ligne de séparation horizontale (pour marquer un changement de thème)
Le conteneur en ligne : <span>
<span> est un conteneur invisible qui ne prend que la largeur de son contenu. Il sert à cibler un mot ou un groupe de mots pour leur appliquer un style CSS spécifique. Exemple : <p>Mon nom est <span class="highlight">Moussa</span></p>.
Bloc vs En ligne — une distinction fondamentale
Les éléments HTML se comportent de deux façons :
- Éléments bloc : prennent toute la largeur disponible et créent un retour à la ligne avant et après. Exemples : <h1>, <p>, <div>, <section>.
- Éléments en ligne : prennent seulement la largeur de leur contenu et ne créent pas de retour à la ligne. Exemples : <strong>, <em>, <span>, <a>, <img>.
Comprendre cette distinction est essentiel pour le CSS (chapitre 5) — elle détermine comment les éléments se positionnent sur la page.
> Résumé : HTML structure le contenu avec des balises. Chaque balise a un rôle précis. Respectez la hiérarchie des titres (<h1> → <h2> → <h3>). Utilisez les balises sémantiques pour leur sens, pas pour leur apparence visuelle — le visuel se contrôle en CSS.