retour
01/04
section 01

Les bases du HTML

Connectez-vous pour sauvegarder votre progression et acceder aux quiz
Se connecter

HTML (HyperText Markup Language) est le langage de balisage utilise pour structurer le contenu des pages web. Ce n'est pas un langage de programmation : il ne contient ni boucles, ni conditions. Il definit la structure et le sens du contenu.

Structure minimale d'une page HTML

html<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ma Premiere Page</title>
</head>
<body>
  <h1>Bienvenue sur mon site</h1>
  <p>Ceci est un paragraphe.</p>
</body>
</html>

Chaque element a un role precis :

ElementRole
<!DOCTYPE html>Declare le document comme HTML5
<html lang="fr">Element racine, langue du document
<head>Metadonnees (non affichees directement)
<meta charset="UTF-8">Encodage des caracteres (accents, emojis...)
<meta name="viewport">Adaptation mobile (responsive)
<title>Titre de l'onglet du navigateur
<body>Contenu visible de la page

Les balises HTML

Une balise HTML s'ecrit avec des chevrons. La plupart ont une balise ouvrante et fermante :

html<!-- Balise avec contenu (ouvrante + fermante) -->
<p>Ceci est un paragraphe</p>
<strong>Texte en gras</strong>
<a href="https://example.com">Un lien</a>

<!-- Balise auto-fermante (pas de contenu) -->
<br>
<hr>
<img src="photo.jpg" alt="Description">
<input type="text" placeholder="Votre nom">

Les attributs

Les attributs ajoutent des informations supplementaires aux balises :

html<a href="https://example.com" target="_blank" rel="noopener">
  Lien externe
</a>

<img src="images/logo.png" alt="Logo de l'entreprise" width="200" height="100">

<input type="email" id="email" name="email" required placeholder="[email protected]">

Attributs globaux (utilisables sur toutes les balises) :

■id — identifiant unique dans la page
■class — classe(s) CSS pour le style
■style — styles CSS inline (a eviter)
■title — infobulle au survol
■data-* — attributs personnalises
■hidden — masque l'element
■lang — langue du contenu

Les titres (headings)

HTML propose 6 niveaux de titres, de <h1> (le plus important) a <h6> (le moins important) :

html<h1>Titre principal (1 seul par page)</h1>
<h2>Sous-titre de section</h2>
<h3>Sous-sous-titre</h3>
<h4>Titre de niveau 4</h4>
<h5>Titre de niveau 5</h5>
<h6>Titre de niveau 6</h6>
Regle SEO : Un seul <h1> par page, et les niveaux doivent etre hierarchiques (pas de <h3> sans <h2> avant). Les moteurs de recherche utilisent la hierarchie des titres pour comprendre la structure du contenu.