Bases du HTML expliquées simplement : balises, structure, head et body (Partie 3)

Maintenant que votre environnement est prêt, nous allons entrer dans le cœur du HTML.

Beaucoup de débutants écrivent du HTML qui “fonctionne”, mais qui est mal structuré, difficile à lire et mauvais pour le référencement.

Dans cette partie, vous allez apprendre à écrire du HTML propre, logique et professionnel, en comprenant réellement ce que vous faites.

👉 Le HTML n’est pas compliqué, mais il demande de la rigueur.

1) Qu’est-ce qu’une balise HTML ?

Le HTML fonctionne avec des balises. Une balise sert à donner un sens au contenu.

Exemple simple :

<p>Bonjour le monde</p>

Ici :

<p> = ouverture de la balise
</p> = fermeture de la balise
Le texte est le contenu

La plupart des balises HTML fonctionnent par paire :

<h1>Titre</h1>
<div>Contenu</div>
<span>Texte</span>

Les balises auto-fermantes

Certaines balises n’ont pas de fermeture :

<img src="image.jpg" alt="Image">
<br>
<hr>

Elles servent généralement à afficher quelque chose sans contenir de texte.

2) La structure minimale d’un document HTML

Un document HTML n’est pas une suite de balises au hasard. Il suit une structure précise que tous les navigateurs attendent.

Structure de base :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Titre de la page</title>
  </head>
  <body>
    Contenu visible
  </body>
</html>

Chaque partie a un rôle très précis.

3) Le DOCTYPE : dire au navigateur quoi utiliser

La ligne :

<!DOCTYPE html>

indique au navigateur que vous utilisez HTML5. Aujourd’hui, c’est toujours cette version.

Sans le DOCTYPE, le navigateur peut se comporter de manière imprévisible.

4) La balise <html>

La balise <html> englobe toute la page.

L’attribut lang est très important :

<html lang="fr">

Il aide :

les moteurs de recherche
les lecteurs d’écran (accessibilité)
les navigateurs

5) Le <head> : informations invisibles mais essentielles

Le <head> contient des informations non visibles sur la page.

On y trouve généralement :

le titre de la page
l’encodage des caractères
les liens vers le CSS
les meta données

Exemple courant :

<head>
  <meta charset="UTF-8">
  <title>Accueil - Mon site</title>
  <meta name="description" content="Description de la page">
  <link rel="stylesheet" href="css/style.css">
</head>

Le contenu du <head> n’apparaît pas à l’écran, mais il est fondamental pour le SEO et le bon fonctionnement.

6) Le <body> : le contenu visible

Le <body> contient tout ce que l’utilisateur voit :

textes
images
liens
boutons
sections

Exemple :

<body>
  <h1>Titre principal</h1>
  <p>Paragraphe de contenu.</p>
</body>

7) La hiérarchie du contenu (très important)

Le HTML n’est pas seulement visuel. Il doit être logique.

Les titres vont de <h1> à <h6>.

Règles importantes :

Un seul <h1> par page
Les titres suivent un ordre logique
Ne pas sauter de niveaux

Exemple correct :

<h1>Titre principal</h1>
<h2>Section</h2>
<h3>Sous-section</h3>

Exemple incorrect :

<h1>Titre principal</h1>
<h4>Titre sans logique</h4>

👉 La hiérarchie est cruciale pour le SEO et l’accessibilité.

8) Balises block vs inline

Les balises HTML se divisent en deux grandes catégories :

Balises block

<div>
<p>
<h1>
<section>

Elles prennent toute la largeur et vont à la ligne.

Balises inline

<span>
<a>
<strong>

Elles restent dans la ligne.

9) Erreurs fréquentes des débutants

Utiliser des balises uniquement pour le style
Multiplier les <div> sans logique
Mal utiliser les titres
Oublier le lang ou le charset

✅ Le HTML décrit le sens, pas le design.

10) Ce que vous devez retenir

HTML structure le contenu
Chaque balise a un sens
La hiérarchie est essentielle
Le head est invisible mais crucial

Vous avez maintenant une base solide en HTML. Vous comprenez comment structurer une page correctement.

Dans la Partie 4, nous allons nous concentrer sur le contenu texte : titres, paragraphes, listes, citations et bonnes pratiques d’écriture HTML.

✅ Prenez l’habitude d’écrire du HTML propre dès maintenant. C’est un investissement à long terme.