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.

• Seconde
• SNT : Culture et Citoyenneté Numérique
• 4 activités
• 25 min–40 min

Objectifs d’apprentissage

1. Identifier les balises HTML sémantiques courantes (header, nav, main, article, section, aside, footer) et leur fonction respective.
2. Comparer la structure logique d'un document HTML simple avec sa représentation visuelle dans un navigateur.
3. 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.
4. Créer une page HTML basique en utilisant des balises pour structurer un contenu donné (titres, paragraphes, listes).
5. Analyser un extrait de code HTML pour déterminer la signification et la hiérarchie des éléments présentés.

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.

Préparation et détails

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.

Setup: Espace de travail flexible avec accès aux ressources matérielles et numériques

Materials: Fiche de lancement avec question motrice, Cahier des charges et calendrier prévisionnel, Grille d'évaluation critériée avec jalons, Supports de présentation

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

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

Préparation et détails

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.

Setup: Espace mural dégagé ou tables disposées en périphérie de la salle

Materials: Papier grand format ou panneaux d'affichage, Feutres et marqueurs, Post-it pour les retours critiques

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

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.

Préparation et détails

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.

Setup: Espace de présentation face à la classe ou plusieurs îlots d'enseignement

Materials: Fiches d'attribution des sujets, Canevas de préparation de séance, Grille d'évaluation par les pairs, Matériel pour supports visuels

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

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.

Préparation et détails

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

Setup: Groupes en îlots avec accès aux ressources documentaires

Materials: Corpus de documents sources, Fiche de suivi du cycle de recherche, Protocole de formulation de questions, Canevas de présentation des résultats

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

Enseigner ce sujet

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.

À quoi s’attendre

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

Idée reçue courante

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

Ce qu'il faut enseigner à la place

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.

Idée reçue courante

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

Ce qu'il faut enseigner à la place

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.

Idée reçue courante

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

Ce qu'il faut enseigner à la place

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.

Idées d'évaluation

Billet de sortie

Après Hands-on Modeling, 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. Ajoutez une question : 'Pourquoi est-il important d'utiliser des balises sémantiques ?'

Vérification rapide

Pendant Gallery Walk, projetez un extrait de code HTML simple. 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

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

Extensions et étayage

• Challenge : Proposez aux élèves de recréer la structure HTML d'une page Wikipedia simple (accueil, article, pied de page) en utilisant uniquement des balises sémantiques.
• Scaffolding : Pour les élèves en difficulté, fournissez un modèle de code incomplet avec des espaces réservés à remplir par les balises appropriées.
• Deeper exploration : Demandez aux élèves de rechercher comment une balise comme <address> est interprétée différemment d'une balise <div> par un lecteur d'écran.

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.