Technologie · Seconde · Internet et le Web : Architecture et Navigation · 1er Trimestre

Introduction au HTML : structurer le contenu

Les élèves apprennent les balises HTML de base pour structurer le contenu d'une page web.

• Programmes Officiels
• MEN: Lycee - Le Web
• MEN: Lycee - Langages et programmation

À propos de ce thème

Le HTML (HyperText Markup Language) est le langage de base du Web. Chaque page consultée repose sur une structure de balises qui organisent le contenu en titres, paragraphes, listes, liens et images. Les élèves de Seconde apprennent ici à distinguer la structure logique d'un document de son apparence visuelle, un concept essentiel pour comprendre comment les machines lisent et indexent l'information.

Le choix des balises sémantiques (header, nav, article, footer) n'est pas anodin : il influence l'accessibilité du site pour les personnes en situation de handicap et son référencement par les moteurs de recherche. Un document HTML bien structuré est lisible par un humain comme par un robot. Les séances où les élèves construisent une page à partir de zéro, balise par balise, leur font ressentir la logique d'emboîtement et la rigueur syntaxique nécessaires au développement web.

Questions clés

1. Comment les balises HTML sémantiques permettent-elles d'organiser le contenu d'une page de manière significative ?
2. En quoi le choix des balises HTML influence-t-il l'accessibilité et le référencement d'un site web ?
3. Quelle est la différence entre la structure logique d'un document HTML et son apparence visuelle ?

Objectifs d'apprentissage

• Identifier les balises HTML sémantiques courantes (header, nav, main, article, section, aside, footer) et leur fonction respective.
• Comparer la structure logique d'un document HTML simple avec sa représentation visuelle dans un navigateur.
• Expliquer comment l'utilisation de balises sémantiques améliore l'accessibilité pour les lecteurs d'écran et le référencement par les moteurs de recherche.
• Créer une page HTML basique en utilisant des balises pour structurer un contenu donné (titres, paragraphes, listes).
• Analyser un extrait de code HTML pour déterminer la signification et la hiérarchie des éléments présentés.

Avant de commencer

Introduction à Internet et au World Wide Web

Pourquoi : Les élèves doivent comprendre le rôle d'Internet et du Web comme support pour pouvoir appréhender la structure des pages qui y sont diffusées.

Fonctionnement de base d'un ordinateur

Pourquoi : Une compréhension élémentaire de la manière dont un ordinateur traite l'information est utile pour saisir comment un navigateur interprète le code HTML.

Vocabulaire clé

Balise HTML	Un élément de code utilisé pour marquer et structurer le contenu d'une page web. Elle est généralement composée d'une balise ouvrante et d'une balise fermante.
Structure sémantique	L'organisation du contenu d'une page web en utilisant des balises qui décrivent la signification de ce contenu (par exemple, un titre, un paragraphe, une navigation).
Accessibilité web	La conception de sites web de manière à ce que les personnes en situation de handicap puissent les utiliser, notamment grâce à une structure claire comprise par les technologies d'assistance comme les lecteurs d'écran.
Référencement (SEO)	L'optimisation d'un site web pour qu'il soit mieux classé dans les résultats des moteurs de recherche, ce qui passe en partie par une structure HTML logique et sémantique.
Navigateur web	Un logiciel (comme Chrome, Firefox, Safari) qui interprète le code HTML, CSS et JavaScript pour afficher les pages web à l'utilisateur.

Attention à ces idées reçues

Idée reçue courante

Le HTML sert à rendre les pages jolies.

Ce qu'il faut enseigner à la place

Le HTML structure le contenu, pas son apparence. C'est le CSS qui gère la présentation visuelle. Retirer la feuille de style d'un site permet de voir que le HTML organise l'information de manière logique, indépendamment de toute mise en forme.

Idée reçue courante

Toutes les balises HTML se valent, on peut utiliser des div partout.

Ce qu'il faut enseigner à la place

Les balises sémantiques (article, section, nav) portent un sens que les div n'ont pas. Elles aident les moteurs de recherche et les technologies d'assistance à comprendre le rôle de chaque partie de la page. L'exercice avec le lecteur d'écran rend cette différence immédiatement perceptible.

Idée reçue courante

Un site qui s'affiche correctement dans le navigateur est forcément bien codé.

Ce qu'il faut enseigner à la place

Un navigateur est très tolérant et corrige automatiquement de nombreuses erreurs HTML. Valider son code avec le validateur W3C révèle les erreurs invisibles qui peuvent poser problème sur d'autres navigateurs ou appareils.

Idées d'apprentissage actif

Hands-on Modeling : Construction d'une page à la main

Les élèves reçoivent un texte brut (article de journal) et doivent le structurer en HTML en choisissant les balises appropriées (h1, h2, p, ul, a). Ils comparent ensuite leurs choix pour discuter des bonnes pratiques sémantiques.

40 min·Individuel

Galerie marchande: Avant/après sémantique

Chaque groupe affiche deux versions de la même page : une utilisant des div génériques et une utilisant des balises sémantiques. La classe circule pour identifier les différences de lisibilité du code et leur impact sur l'accessibilité.

30 min·Classe entière

Enseignement par les pairs: Le défi de l'emboîtement

Un élève écrit un code HTML volontairement mal imbriqué. Son binôme doit identifier les erreurs de structure et les corriger en expliquant la logique d'ouverture et de fermeture des balises.

25 min·Binômes

Cercle de recherche: HTML et lecteur d'écran

Les groupes testent leur page HTML avec un lecteur d'écran (ou un simulateur en ligne) pour observer comment les balises sémantiques guident la navigation pour les personnes malvoyantes.

35 min·Petits groupes

Liens avec le monde réel

• Les développeurs web chez des entreprises comme Google ou Microsoft utilisent le HTML pour construire l'interface de leurs applications web et sites, en veillant à une structure sémantique pour l'accessibilité et le SEO.
• Les créateurs de contenu sur des plateformes comme WordPress ou Medium s'appuient sur des éditeurs qui génèrent du HTML sémantique pour que leurs articles soient lisibles par tous et bien référencés sur les moteurs de recherche.
• Les agences de communication digitale optimisent la structure HTML des sites clients pour améliorer leur visibilité sur internet et leur conformité aux normes d'accessibilité, par exemple pour le site de la ville de Lyon ou une marque de mode.

Idées d'évaluation

Billet de sortie

Distribuez une petite carte à chaque élève. Demandez-leur d'écrire le nom de trois balises HTML sémantiques apprises et d'expliquer brièvement la fonction de chacune. Une deuxième question pourrait être : 'Pourquoi est-il important d'utiliser des balises sémantiques ?'

Vérification rapide

Projetez un extrait de code HTML simple (par exemple, une petite page avec un titre, un paragraphe et une liste). Posez des questions ciblées : 'Quelle balise indique le titre principal ?', 'Comment est structurée cette liste ?', 'Si on remplaçait la balise <article> par une simple balise <div>, quel serait l'impact sur la sémantique ?'

Évaluation par les pairs

Demandez aux élèves de créer une page HTML très simple avec un titre, un paragraphe et un lien. Ensuite, ils échangent leur code avec un voisin. Chaque élève doit vérifier si le code de son camarade est correctement structuré avec les balises appropriées et si le lien fonctionne. Ils doivent laisser un commentaire constructif sur une balise qui pourrait être mieux choisie.

Questions fréquentes

Comment les balises HTML sémantiques améliorent-elles l'accessibilité ?

Les balises comme nav, main, article et aside indiquent aux technologies d'assistance (lecteurs d'écran) le rôle de chaque section. Un utilisateur malvoyant peut ainsi sauter directement au contenu principal ou à la navigation, sans parcourir l'intégralité de la page.

Quelle est la différence entre une balise de bloc et une balise en ligne ?

Une balise de bloc (p, div, h1) occupe toute la largeur disponible et commence sur une nouvelle ligne. Une balise en ligne (a, strong, em) s'intègre dans le flux du texte sans provoquer de retour à la ligne. Cette distinction structure la mise en page avant même l'intervention du CSS.

Pourquoi le HTML influence-t-il le référencement d'un site ?

Les moteurs de recherche analysent la structure HTML pour comprendre le contenu. Un titre en h1 est considéré comme plus important qu'un texte en p. Des balises sémantiques claires aident les robots d'indexation à classer correctement les informations et à afficher des extraits pertinents dans les résultats.

Comment l'écriture manuelle de HTML favorise-t-elle l'apprentissage actif ?

Construire une page balise par balise oblige les élèves à réfléchir à la hiérarchie de l'information avant de penser à son apparence. Chaque erreur de syntaxe produit un résultat visible dans le navigateur, créant une boucle de rétroaction immédiate qui renforce la compréhension de la logique d'emboîtement.