Fiche de révision : Introduction au HTML et structuration des pages web

1. 📌 L'essentiel

  • HTML (HyperText Markup Language) est le langage standard pour structurer le contenu des pages web.
  • La déclaration est <!DOCTYPE html> pour HTML5.
  • La balise racine est <html> avec l’attribut lang="fr" pour la langue.
  • La structure de base comprend <head> (métadonnées) et <body> (contenu visible).
  • Balises essentielles : <title>, <meta>, <h1>-<h6>, <p>, <ul>, <ol>, <li>, <img>, <a>, <form>.
  • HTML évolue de HTML 1.0 (1993) à HTML5 (2014), intégrant sémantique, multimédia, interactivité.
  • Utilisation d’éditeurs (VS Code, Notepad++) et navigateurs pour développement.
  • Balises sémantiques : <header>, <footer>, <section>, <article>, <nav>.
  • Encodage : UTF-8, caractères spéciaux encodés (&lt;, &gt;, &amp;).

2. 🧩 Structures & Composants clés

  • Déclaration initiale — <!DOCTYPE html> : indique le type de document.
  • Balise <html> — enveloppe tout le contenu, avec attribut lang.
  • <head> — contient métadonnées, titre, liens CSS, scripts.
  • <body> — contenu visible : textes, images, liens, formulaires.
  • Balises de structuration — <header>, <footer>, <section>, <article>, <nav>, <main>.
  • Balises de contenu — <h1>-<h6>, <p>, <ul>, <ol>, <li>, <div>.
  • Balises sémantiques — <cite>, <blockquote>, <q>, <address>.
  • Balises de liens et images — <a>, <img>.
  • Formulaires — <form>, <label>, <input>, <button>, <select>.

3. 🔬 Fonctions, Mécanismes & Relations

  • La déclaration <!DOCTYPE html> active le mode standard du navigateur.
  • <html> définit la racine du document, avec langue pour accessibilité.
  • <head> contient métadonnées essentielles : charset, viewport, titre.
  • <body> organise le contenu visible via balises sémantiques.
  • Les balises <header>, <footer>, <section> structurent logiquement la page.
  • <h1>-<h6> hiérarchisent les titres, <p> pour paragraphes.
  • <ul> et <ol> pour listes, <li> pour éléments.
  • <a href=""> crée des liens internes ou externes.
  • <img src="" alt=""> insère images avec description pour accessibilité.
  • Les formulaires collectent des données utilisateur.
  • Encodage UTF-8 garantit la compatibilité des caractères spéciaux.
  • La validation W3C assure la conformité syntaxique.

4. Tableau comparatif : Balises structurantes

ÉlémentCaractéristiques clésNotes / Différences
<header>En-tête de page ou sectionContient logo, menu, titre
<footer>Pied de pageInformations légales, contact
<section>Section thématiqueOrganise le contenu en blocs
<article>Contenu autonome (article, billet)Peut être indépendant
<nav>NavigationLiens internes, menu
<main>Contenu principalUn seul par page

5. 🗂️ Diagramme Hiérarchique

HTML
 ├─ <head>
 │    ├─ <title>
 │    ├─ <meta>
 │    └─ autres métadonnées
 └─ <body>
     ├─ <header>
     ├─ <main>
     │    ├─ <section>
     │    │    ├─ <h1>-<h6>
     │    │    ├─ <p>
     │    │    ├─ <ul>/<ol>
     │    │    └─ <img>
     │    └─ <article>
     └─ <footer>

6. ⚠️ Pièges & Confusions fréquentes

  • Oublier la fermeture des balises (</tag>).
  • Confondre <div> (conteneur générique) et <section> (section sémantique).
  • Ne pas utiliser l’attribut alt dans <img> pour accessibilité.
  • Utiliser des balises de présentation (<b>, <i>) à la place des balises sémantiques (<strong>, <em>).
  • Oublier la déclaration <!DOCTYPE html>.
  • Mal définir l’attribut lang dans <html>.
  • Confondre liens relatifs et absolus.
  • Ne pas respecter l’encodage UTF-8.
  • Oublier de valider la syntaxe via W3C.

7. ✅ Checklist Examen Final

  • Déclaration du document : <!DOCTYPE html>.
  • Balise <html> avec lang="fr".
  • Métadonnées essentielles : <meta charset="UTF-8">, <meta name="viewport" content="width=device-width, initial-scale=1.0">.
  • Structure de base : <head> + <body>.
  • Balises sémantiques : <header>, <footer>, <section>, <article>, <nav>, <main>.
  • Titres : <h1> à <h6>.
  • Paragraphes : <p>.
  • Listes : <ul>, <ol>, <li>.
  • Insertion d’images : <img src="" alt="">.
  • Création de liens : <a href="">.
  • Encodage caractères spéciaux : &lt;, &gt;, &amp;, &quot;.
  • Utilisation correcte des balises de formulaire.
  • Respect de la syntaxe : balises ouvertes et fermées.
  • Validation W3C pour conformité.
  • Utilisation de balises sémantiques pour une meilleure organisation.
  • Respect des bonnes pratiques pour l’accessibilité et le SEO.

Testez vos connaissances

Testez vos connaissances sur Introduction au HTML et structuration des pages web avec 10 questions à choix multiples avec corrections détaillées.

1. Parmi les propositions suivantes, laquelle est une balise sémantique utilisée pour organiser la structure d'une page web ?

2. Quelle déclaration est utilisée pour indiquer la version HTML d'un document ?

Faire le QCM →

Révisez avec les flashcards

Mémorisez les concepts clés de Introduction au HTML et structuration des pages web avec 10 flashcards interactives.

HTML — rôle ?

Langage de structuration des pages web

HTML — définition?

Langage standard de structuration web

Déclaration <!DOCTYPE html> — importance ?

Indique la version HTML utilisée

Voir les flashcards →

Cours similaires

Introduction aux documents et sécurité en construction

Bases de données

Introduction à l'Informatique et IA

Introduction aux marchés publics et réglementations du bâtiment

Bases de données

Gestion des imprimantes Windows et PDF

Introduction aux bases de données relationnelles

Bases de données

Maîtrise des Boucles en Programmation

Programmation

Crée tes propres fiches de révision

Importe ton cours et l'IA génère fiches, QCM et flashcards en 30 secondes.

Générateur de fiches