Structure HTML : Les Balises Essentielles pour vos Pages Web

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.

Niveau : Débutant

Durée : 35 minutes

Public cible : Développeurs débutants, Futurs intégrateurs web

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

Anatomie d'un Document HTML

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>  </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

? Bonne pratique : Toujours spécifier l’attribut lang pour l’accessibilité et le SEO.

Les Métadonnées dans head

La section <head> contient les informations sur le document.

Métadonnées essentielles

<head>  <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">

 <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’écran
initial-scale=1.0 : Zoom initial à 100%

Important : Sans le meta viewport, votre site ne sera pas responsive sur mobile !

Balises de Texte de Base

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>


<p>

 Texte avec <strong>importance forte</strong>

 et <em>emphase</em>.

</p>
<p>

 Du <b>gras visuel</b> et de l'<i>italique visuel</i>.

</p>

<p> Texte <mark>surligné</mark>, <del>supprimé</del> et <ins>inséré</ins>. </p>

Différence sémantique

Visuel	Sémantique	Usage
`<b>`	`<strong>`	Importance
`<i>`	`<em>`	Emphase

? SEO : Utilisez les balises sémantiques (strong, em) plutôt que les balises visuelles.

Listes HTML

Liste non ordonnée (ul)

<ul> <li>Premier élément</li> <li>Deuxième élément</li> <li>Troisième élément</li> </ul>

Liste ordonnée (ol)

<ol> <li>Étape 1</li> <li>Étape 2</li> <li>Étape 3</li> </ol>

 <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

<ul> <li>Frontend <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </li> <li>Backend <ul> <li>PHP</li> <li>Python</li> </ul> </li> </ul>

Liens et Navigation

Balise anchor (a)

 <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>

 <a href="tel:+33123456789">Appeler</a>

Ancres internes

 <h2 id="section-contact">Contact</h2>


<!-- Lien vers l'ancre -->

<a href="#section-contact">Aller au contact</a>

 <a href="#">Retour en haut</a>

⚠️ Sécurité : Toujours ajouter rel="noopener" avec target="_blank" pour éviter les failles de sécurité.

Images et Médias

Balise image

<img src="images/photo.jpg" alt="Description de l'image" width="800" height="600" >

Figure avec légende

<figure> <img src="chart.png" alt="Graphique des ventes 2024"> <figcaption> 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>

Accessibilité : L’attribut alt est obligatoire pour décrire l’image aux lecteurs d’écran.

Structure Sémantique HTML5

HTML5 introduit des balises sémantiques pour mieux structurer le contenu.

Layout typique

<body> <header> <nav> <ul> <li><a href="/">Accueil</a></li> <li><a href="/about">À propos</a></li> </ul> </nav> </header>


 <main>

  <article>

   <h1>Titre de l'article</h1>

   <section>

    <h2>Introduction</h2>

    <p>Contenu...</p>

   </section>

  </article>
  <aside>

   <h3>Articles connexes</h3>

  </aside>

 </main>

Signification des balises

Balise	Usage
`<header>`	En-tête de page ou section
`<nav>`	Navigation principale
`<main>`	Contenu principal (unique)
`<article>`	Contenu autonome
`<section>`	Section thématique
`<aside>`	Contenu secondaire
`<footer>`	Pied de page ou section

✅ Avantages : SEO amélioré, accessibilité, maintenabilité du code.