Introduction
HTML est le langage qui donne sa structure au contenu d’une page web. Au cours de ces deux jours, vous apprendrez à créer des pages claires et bien organisées, à partir de balises HTML5 adaptées à chaque type de contenu. Vous travaillerez sur des exemples concrets, puis construirez progressivement une petite page de présentation.
La formation privilégie la pratique : vous découvrirez comment écrire du HTML, afficher le résultat dans un navigateur et repérer les erreurs courantes. L’objectif n’est pas de mémoriser une longue liste de balises, mais de savoir choisir celles qui rendent une page compréhensible pour ses visiteurs et plus simple à faire évoluer.
Module 1 — Comprendre le rôle du HTML
Structure, contenu et navigateur
Vous découvrirez la place du HTML parmi les technologies du Web et la différence entre le contenu d’une page et sa présentation. Nous verrons comment un navigateur interprète un document et pourquoi une structure cohérente est utile, même lorsque le rendu visuel est assuré par une feuille de style.
Vous apprendrez à créer un premier fichier, à l’enregistrer avec la bonne extension et à l’ouvrir dans un navigateur. Une page de présentation d’un commerce local permettra d’illustrer la différence entre un texte simplement écrit et un contenu organisé en titres et paragraphes.
Exercice pratique
Créez une première page qui présente une activité professionnelle. Ajoutez un titre, une courte description et un paragraphe de bienvenue, puis vérifiez son affichage dans le navigateur.
Module 2 — Construire un document HTML5
Les éléments essentiels
Vous étudierez la structure de base d’un document : déclaration du type de document, élément racine, informations de la page et contenu visible. Nous verrons à quoi servent le titre affiché dans l’onglet, l’encodage des caractères et la langue du document.
Un exemple concret montrera comment ces éléments influencent l’affichage et la compréhension de la page. Vous apprendrez à repérer les balises ouvrantes et fermantes, ainsi qu’à organiser l’indentation pour rendre votre code plus facile à relire.
Exercice pratique
Complétez le squelette HTML d’une page pour une petite entreprise belge. Ajoutez un titre d’onglet pertinent, définissez la langue française et vérifiez que les accents s’affichent correctement.
Module 3 — Organiser textes et informations
Titres, paragraphes et listes
Vous apprendrez à structurer un texte avec des titres de niveaux appropriés, des paragraphes et des listes à puces ou numérotées. Nous parlerons de hiérarchie : les titres servent à organiser les idées, pas à modifier simplement la taille du texte. Vous verrez aussi comment mettre en évidence une information sans perdre le sens du contenu.
À partir d’une page de services, nous transformerons un bloc de texte peu lisible en sections distinctes. Nous aborderons les erreurs fréquentes, comme choisir un niveau de titre uniquement pour son apparence ou utiliser des éléments de liste sans raison.
Exercice pratique
Organisez la présentation d’une offre de services : créez des titres hiérarchisés, rédigez des paragraphes courts et ajoutez une liste de prestations ou d’étapes.
Module 4 — Ajouter des liens et des images
Navigation et contenu visuel
Vous découvrirez comment créer un lien vers une autre page, un site externe ou une adresse de contact. Nous verrons comment rédiger un texte de lien explicite, afin que le visiteur comprenne où il mène. Vous apprendrez également à insérer une image et à fournir une description textuelle utile lorsque l’image ne peut pas être consultée.
Un exemple de page d’événement montrera comment associer une image à un texte de présentation et comment relier cette page au formulaire d’inscription. Nous évoquerons les vérifications à effectuer : chemin du fichier, nom compréhensible et pertinence de la description.
Exercice pratique
Enrichissez votre page avec une image, un lien vers une page de contact et un lien externe pertinent. Rédigez un texte de lien précis et une description adaptée à l’image choisie.
Module 5 — Structurer une page avec des éléments sémantiques
Donner un rôle clair aux zones de la page
Vous découvrirez les éléments HTML5 qui permettent de distinguer l’en-tête, la navigation, le contenu principal, les sections et le pied de page. Le choix d’éléments sémantiques aide à rendre le code plus compréhensible et facilite le travail des personnes qui devront le maintenir.
Nous analyserons une page de présentation d’association pour repérer ses zones principales. Vous apprendrez à éviter l’usage systématique de conteneurs neutres lorsque des éléments plus explicites décrivent mieux la fonction du contenu.
Exercice pratique
Reprenez votre page et répartissez son contenu entre les zones adaptées : en-tête, navigation, contenu principal et pied de page. Vérifiez que chaque partie a un rôle clair.
Module 6 — Vérifier et améliorer son HTML
Qualité, accessibilité et bonnes habitudes
Vous mettrez en place une méthode simple de vérification : relire la structure, contrôler l’imbrication des balises, tester les liens et observer la page dans un navigateur. Nous aborderons des réflexes d’accessibilité, comme garder une hiérarchie de titres logique, décrire les images utiles et choisir des textes de lien compréhensibles hors contexte.
Vous apprendrez à corriger des erreurs courantes sans vous décourager : balise oubliée, chemin d’image incorrect ou contenu placé au mauvais endroit. Le formateur vous guidera dans une relecture de votre page, avec des pistes d’amélioration concrètes.
Exercice pratique
Effectuez une revue complète de votre page. Corrigez les problèmes repérés, testez les liens et expliquez les choix de structure effectués.
À retenir
À la fin de la formation, vous saurez créer et organiser une page HTML5 simple, choisir les balises adaptées aux contenus courants et vérifier le résultat dans un navigateur. Vous disposerez d’une base solide pour poursuivre vers les feuilles de style CSS ou contribuer plus efficacement à un projet web.
Pour aller plus loin
Après ces bases, vous pourrez apprendre à présenter vos pages avec CSS, puis découvrir les formulaires HTML et les principes d’accessibilité plus avancés. Vous pourrez aussi appliquer les acquis à une page réelle de votre activité et améliorer sa structure étape par étape.
