Technologie · Seconde

Idées d’apprentissage actif

Introduction au HTML : structurer le contenu

L'introduction au HTML repose sur une approche concrète, car manipuler le code soi-même rend visible l'abstraction de la structure. Les élèves voient immédiatement comment une balise mal placée change la hiérarchie du document, ce qui renforce leur compréhension bien plus qu'une explication théorique seule.

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

• 25–40 min
• Binômes → Classe entière
• 4 activités

Activité 01

• Apprentissage par projet
• 40 min · Individuel

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.

Comment les balises HTML sémantiques permettent-elles d'organiser le contenu d'une page de manière significative ?

Conseil de facilitation

Pendant l'activité Hands-on Modeling, circulez entre les élèves pour vérifier que leurs balises sont correctement fermées et emboîtées avant qu'ils n'ajoutent du contenu visuel.

À observer

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

• Appliquer
• Analyser
• Évaluer
• Créer
• Autogestion
• Compétences relationnelles
• Prise de décision

Activité 02

• Galerie marchande
• 30 min · Classe entière

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

En quoi le choix des balises HTML influence-t-il l'accessibilité et le référencement d'un site web ?

Conseil de facilitation

Lors de la Gallery Walk, demandez aux élèves d'annoter les changements sémantiques sur leurs feuilles de route pour ancrer leur réflexion.

À observer

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

• Comprendre
• Appliquer
• Analyser
• Créer
• Compétences relationnelles
• Conscience sociale

Activité 03

• Enseignement par les pairs
• 25 min · Binômes

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.

Quelle est la différence entre la structure logique d'un document HTML et son apparence visuelle ?

Conseil de facilitation

Pour le Peer Teaching, fournissez une liste de balises interdites à utiliser (comme div) pour forcer les élèves à chercher des alternatives sémantiques.

À observer

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.

• Comprendre
• Appliquer
• Analyser
• Créer
• Autogestion
• Compétences relationnelles

Activité 04

• Cercle de recherche
• 35 min · Petits groupes

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.

Comment les balises HTML sémantiques permettent-elles d'organiser le contenu d'une page de manière significative ?

À observer

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

• Analyser
• Évaluer
• Créer
• Autogestion
• Conscience de soi

Quelques notes pour enseigner cette unité

Commencez par une démonstration rapide d'un code HTML mal structuré et observez les réactions des élèves. Montrez ensuite comment un simple changement de balise améliore la lisibilité par un lecteur d'écran. Évitez de parler de CSS pour ne pas mélanger les concepts. Privilégiez les exemples concrets où la structure change radicalement le sens du document, comme un article de blog versus une liste de courses.

Les élèves devraient être capables de distinguer les balises sémantiques des balises neutres, d'expliquer leur utilité pour les machines et les utilisateurs, et de corriger des erreurs de structure dans un code existant. Ils doivent aussi justifier leurs choix de balises en fonction du contenu à structurer.

---

Attention à ces idées reçues

• Pendant Hands-on Modeling, les élèves pourraient penser que le HTML sert à rendre les pages jolies.

  Lors de la construction manuelle de leur page, retirez temporairement toute référence à CSS ou à des styles. Demandez aux élèves d'observer que même sans mise en forme, la structure (titres, paragraphes, listes) reste claire et logique.

• Pendant Peer Teaching, les élèves pourraient croire que toutes les balises HTML se valent.

  Utilisez l'exercice d'emboîtement pour montrer que remplacer une balise sémantique par une div modifie la hiérarchie du document. Par exemple, remplacez <article> par <div> et observez comment le lecteur d'écran perd le contexte du contenu.

• Après la construction d'une page qui s'affiche correctement, les élèves pourraient croire que le code est forcément bien écrit.

  Lors de l'activité Collaborative Investigation, utilisez le validateur W3C sur les pages des élèves. Montrez-leur les erreurs invisibles détectées et expliquez comment ces erreurs pourraient causer des problèmes sur d'autres navigateurs ou appareils.

---

Méthodes utilisées dans ce dossier

• Apprentissage par projet
• Galerie marchande
• Enseignement par les pairs
• Cercle de recherche