2. HTML5

HTML 5 - règles et sémantique

Anatomie d'une balise HTML

HTML5 et la structure d'un document

Le doctype HTML5 est la déclaration standard pour les documents web modernes :

<!DOCTYPE html>

Cette déclaration simple remplace les doctypes complexes des versions précédentes (HTML 4.01, XHTML).

Structure minimale d'un document HTML

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Titre significatif du contenu de la page</title>
    </head>
    <body>
        <!-- Contenu de la page -->
    </body>
</html>

Éléments essentiels :

  • <!DOCTYPE html> : déclaration du type de document
  • <html lang="fr"> : élément racine avec indication de la langue
  • <meta charset="UTF-8"> : encodage du texte (doit être placé dans les 1024 premiers octets)
  • <meta name="viewport"> : adaptation aux terminaux mobiles
  • <title> : titre unique pour chaque page

HTML vs XHTML : approche critique

Note importante sur XHTML

XHTML n'est plus recommandé pour les nouveaux projets web modernes. Bien qu'il ait existé historiquement comme alternative à HTML, HTML5 est maintenant le standard à utiliser.

Contexte historique :

  • XHTML (eXtensible HyperText Markup Language) était une reformulation de HTML en XML, popularisée dans les années 2000
  • Il introduisait une syntaxe stricte et une validation rigoureuse
  • Le type MIME pour XHTML est application/xhtml+xml (vs text/html pour HTML)

Tableau de comparaison HTML et MarkDown

Pourquoi XHTML n'est plus utilisé :

  • HTML5 a intégré les meilleures pratiques de XHTML tout en restant plus tolérant
  • Les navigateurs modernes privilégient HTML5
  • XHTML nécessite un serveur configuré correctement (type MIME) sinon il est traité comme HTML
  • Les erreurs XHTML bloquent complètement l'affichage (boîte d'erreur XML)

Ce qu'on retient des concepts XML/XHTML :

  • Les principes de bien-formé (well-formed) : structure correcte, balises fermées, imbrication valide
  • L'importance de la validation et de la conformité aux standards
  • La syntaxe stricte améliore la qualité du code

Ce qu'on laisse de côté :

  • Les spécificités XHTML (doctype XHTML, namespace xmlns, balises auto-fermantes obligatoires <br />)
  • Les pratiques obsolètes liées à XHTML 1.0/1.1
  • L'utilisation de XHTML pour de nouveaux projets

Les modes de rendu des navigateurs

Les navigateurs modernes utilisent trois modes de rendu différents selon la présence et le type de doctype dans le document HTML. Comprendre ces modes est essentiel pour éviter des bugs de mise en page inattendus.

1. Mode standards (a.k.a. "no-quirks mode")

C'est le mode souhaité et moderne pour tous les sites web actuels.

Caractéristiques :

  • Le modèle de boîte CSS se comporte selon les spécifications
  • Le positionnement, la taille et la mise en page sont prévisibles
  • Les fonctionnalités modernes HTML et CSS fonctionnent correctement
  • Conforme aux standards WHATWG HTML et CSS

Déclenché par :

<!DOCTYPE html>

Règle simple à retenir : Toujours commencer chaque document HTML avec <!DOCTYPE html>.

2. Mode quirks (mode de compatibilité)

Ce mode émule le comportement de très anciens navigateurs (notamment IE 5 et Netscape 4).

Caractéristiques :

  • Modèle de boîte CSS non standard (la largeur inclut le padding et la bordure)
  • Comportement incohérent des marges et de la hauteur de ligne
  • Hypothèses de mise en page obsolètes ou incorrectes
  • De nombreux "bugs" de navigateurs sont intentionnellement préservés

Déclenché par :

  • Absence totale de doctype
  • Doctypes très anciens ou mal formés

Exemple (déclenche le mode quirks) :

<html>
    <head>
        <title>Page sans doctype</title>
    </head>
    <body>
        <!-- Contenu -->
    </body>
</html>

Pourquoi ce mode existe encore : Pour éviter de casser des sites web hérités construits avant la stabilisation des standards. Vous ne devriez jamais cibler intentionnellement le mode quirks dans de nouveaux projets.

3. Mode presque standards (a.k.a. "limited quirks mode")

Un mode de compromis historique.

Caractéristiques :

  • Principalement conforme aux standards
  • Quelques quirks légacy subsistent (historiquement liés à la taille des cellules de tableau et des images)
  • Existe pour supporter d'anciens doctypes transitionnels

Déclenché par :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

En pratique : Très rare aujourd'hui. Vous ne rencontrerez presque jamais ce mode intentionnellement.

Tableau récapitulatif

Mode Objectif Devriez-vous l'utiliser ?
Mode standards Rendu moderne conforme aux spécifications Oui, toujours
Mode quirks Émule les navigateurs pré-standards Non
Mode presque standards Compatibilité arrière Non (historique uniquement)

Pourquoi c'est important pédagogiquement

Pour les étudiants, le point clé à retenir est :

Le doctype n'est plus seulement une question de validation ; c'est un choix du comportement du moteur de rendu du navigateur.

Règle simple à enseigner et à faire respecter :

Toujours commencer chaque document HTML avec :

<!DOCTYPE html>

Cette seule ligne élimine toute une catégorie de bugs de mise en page.

Exemples pratiques

Pour voir les différences visuelles entre ces modes, téléchargez et testez les fichiers d'exemple :

📦 Télécharger les exemples (ZIP)

Le fichier ZIP contient :

  • mode-standards.html : Document avec doctype HTML5 (mode standards)
  • mode-quirks.html : Document sans doctype (mode quirks)
  • mode-presque-standards.html : Document avec doctype HTML 4.01 Transitional (mode presque standards)
  • README.md : Instructions d'utilisation

Ces exemples démontrent les différences visuelles, notamment au niveau du modèle de boîte CSS, des marges et du positionnement. Ouvrez chaque fichier dans votre navigateur pour comparer les résultats.

Détecter le mode de rendu dans les outils de développement

Dans les outils de développement du navigateur (F12), vous pouvez vérifier le mode de rendu actuel :

  1. Ouvrir la console
  2. Exécuter : document.compatMode
  3. Résultats possibles :
    • "CSS1Compat" : Mode standards
    • "BackCompat" : Mode quirks

HTML et XML : principes de base

Règles d'écriture pour la conformité

Les règles d'écriture suivantes sont obligatoires dans les documents XML mais les analyseurs syntaxiques sont plus tolérants pour les documents HTML. Cependant, les respecter améliore la qualité et la maintenabilité du code :

  1. Une seule balise racine : <html> est l'unique élément racine, lequel ne contient que 2 enfants : le <head> et le <body>
  2. Toutes les balises avec du contenu sont refermées
  3. Les balises vides comme br, hr, meta, link ou script peuvent être auto-fermées (<br />) mais en HTML5, la syntaxe <br> est préférée
  4. Les balises et les attributs sont écrits en minuscules
  5. Les balises sont refermées dans l'ordre inverse de leur ouverture

Exemple de code mal formé :

<p>une ligne <br /> une autre ligne avec un mot en <i>italique </p></i>

Problèmes identifiés :

  • Balise <i> fermée après la balise <p> (mauvaise imbrication)
  • Balise auto-fermante <br /> (acceptable mais <br> est préféré en HTML5)

Code corrigé :

<p>
    une ligne <br />
    une autre ligne avec un mot en <i>italique</i>
</p>

Exemple d'imbrication incorrecte :

<!-- MAUVAIS -->
<p>Un mot avec <strong> renforcement (gras) </p> </strong>

<!-- BON -->
<p>Un mot avec <strong> renforcement (gras) </strong></p>

Visionner les explications

Vidéo : c02c_regles-d-ecriture_html (3'39")

Vidéo : c02d_regles-d-ecriture_Xhtml (4'13")

Règles d'écriture pour la validité

La validité se définit par rapport à une "grammaire" du HTML qui est définie dans le Doctype (ou type de document). Cette grammaire agit comme LA référence des validateurs.

Il s'agit d'un genre de dictionnaire des éléments et des attributs HTML et de l'ensemble des règles qui précisent pour chacun de ces éléments :

  • Quels sont les attributs autorisés
  • Les éléments enfants autorisés
  • Leur ordre d'apparition
  • etc.

Exemples de Doctype (historiques) :

  • http://www.w3.org/TR/html4/loose.dtd (HTML 4.01)
  • http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd (XHTML 1.0)

Doctype HTML5 (moderne) :

<!DOCTYPE html>

Nomenclature et conventions

  • Encodage : UTF-8 pour tous les fichiers
  • Noms de fichiers : minuscules, tirets pour séparer les mots (ex: ma-page.html)
  • Noms d'éléments et attributs : minuscules
  • Guillemets : doubles pour les attributs HTML (class="fruit"), simples pour le JavaScript (alert('message');)

Sémantique structurelle HTML5

Utiliser les éléments HTML5 sémantiques plutôt que des <div> génériques :

  • <header role="banner"> : en-tête global
  • <main role="main"> : contenu principal
  • <footer role="contentinfo"> : pied de page
  • <nav role="navigation"> : navigation principale
  • <article> : article autonome
  • <section> : section thématique
  • <aside role="complementary"> : contenu complémentaire

Hiérarchie des titres

  • h1 est unique et décrit le thème principal de la page
  • Les titres (h1 à h6) doivent être utilisés dans l'ordre et de manière pertinente
  • Ne pas sauter de niveaux (ex: h1 suivi de h3 sans h2)

Sémantique des éléments

Utiliser les éléments HTML pour leur fonction, pas pour leur apparence :

<!-- Citation -->
<q>Car il y a toujours de la lumière...</q>

<!-- Date -->
<time datetime="2021-01-20">Jour de l'investiture</time>

<!-- Abréviation -->
<abbr title="HyperText Mark-Up Language">HTML (HyperText Mark-Up Language)</abbr>