HTML Structure: Essential Tags for Your Web Pages
Découvrez l’anatomie d’un document HTML, les balises structurantes et les bonnes pratiques pour créer des pages web sémantiques et accessibles.
Objectifs pédagogiques
- Comprendre la structure d’un document HTML
- Maîtriser les balises de base et leur rôle
- Appliquer une structure sémantique
- Valider la conformité du code
Tout document HTML suit une structure de base standardisée.
Structure minimale
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titre de la Page</title>
</head>
<body>
<!-- Contenu visible ici -->
</body>
</html>
Explications
<!DOCTYPE html>: Déclare le type de document (HTML5)<html lang="fr">: Élément racine avec la langue<head>: Métadonnées non visibles<body>: Contenu visible de la page
lang pour l’accessibilité et le SEO.
La section <head> contient les informations sur le document.
Métadonnées essentielles
<head>
<!-- Encodage des caractères -->
<meta charset="UTF-8">
<!-- Responsive design -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO -->
<meta name="description" content="Description de la page pour Google">
<meta name="keywords" content="mot-clé1, mot-clé2">
<!-- Titre de la page (onglet du navigateur) -->
<title>Mon Site - Page d'accueil</title>
<!-- Feuille de style -->
<link rel="stylesheet" href="styles.css">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png">
</head>
Meta viewport expliqué
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width: Largeur = largeur de l’écraninitial-scale=1.0: Zoom initial à 100{4a00f6d73ff9e2f537053b7c202ea3e7e3a1709f4630047a1912e510d35e71a5}
Titres (h1 Ã h6)
<h1>Titre Principal (un seul par page)</h1>
<h2>Titre de Section</h2>
<h3>Sous-section</h3>
<h4>Titre de niveau 4</h4>
<h5>Titre de niveau 5</h5>
<h6>Titre de niveau 6</h6>
Paragraphes et texte
<p>Un paragraphe de texte.</p>
Texte avec <strong>importance forte</strong>
et <em>emphase</em>.
Du <b>gras visuel</b> et de l'<i>italique visuel</i>.
Texte <mark>surligné</mark>,
<del>supprimé</del> et <ins>inséré</ins>.
Différence sémantique
| Visuel | Sémantique | Usage |
|---|---|---|
<b> |
<strong> |
Importance |
<i> |
|
Emphase |
strong, em) plutôt que les balises visuelles.
Liste non ordonnée (ul)
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
Liste ordonnée (ol)
<ol>
<li>Étape 1</li>
<li>Étape 2</li>
<li>Étape 3</li>
</ol>
<!-- Avec attributs -->
<ol start="5" reversed>
<li>Compte à rebours...</li>
</ol>
Liste de description (dl)
<dl>
<dt>HTML</dt>
<dd>Langage de balisage pour structurer le contenu</dd>
<dt>CSS</dt>
<dd>Langage de style pour la mise en forme</dd>
<dt>JavaScript</dt>
<dd>Langage de programmation pour l'interactivité</dd>
</dl>
Listes imbriquées
<li>Frontend
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</li>
<li>Backend
<li>PHP</li>
<li>Python</li>
</li>
Balise anchor (a)
<!-- Lien externe -->
<a href="https://example.com">Visiter le site</a>
<!-- Lien interne -->
<a href="/contact.html">Contactez-nous</a>
<!-- Lien relatif -->
<a href="../images/photo.jpg">Voir la photo</a>
<!-- Nouvel onglet -->
<a href="https://example.com" target="_blank" rel="noopener">
Ouvrir dans un nouvel onglet
</a>
<!-- Lien email -->
<a href="mailto:contact@example.com">Envoyer un email</a>
<!-- Lien téléphone -->
<a href="tel:+33123456789">Appeler</a>
Ancres internes
<!-- Créer une ancre -->
<h2 id="section-contact">Contact</h2>
<!-- Lien vers l'ancre -->
<a href="#section-contact">Aller au contact</a>
<!-- Retour en haut -->
<a href="#">Retour en haut</a>
rel="noopener" avec target="_blank" pour éviter les failles de sécurité.
Balise image
<img
src="images/photo.jpg"
alt="Description de l'image"
width="800"
height="600"
>
Figure avec légende
<img src="chart.png" alt="Graphique des ventes 2024">
Figure 1 : Évolution des ventes au premier trimestre
</figcaption>
</figure>
Images responsives
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w,
photo-800.jpg 800w,
photo-1200.jpg 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 900px) 800px,
1200px"
alt="Photo responsive"
>
Vidéo HTML5
<video controls width="640" height="360">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Votre navigateur ne supporte pas la vidéo HTML5.
</video>
alt est obligatoire pour décrire l’image aux lecteurs d’écran.
HTML5 introduit des balises sémantiques pour mieux structurer le contenu.
Layout typique
<body>
<h1>Titre de l'article</h1>
<h2>Introduction</h2>
<p>Contenu...</p>
</section>
</article>
