Cas pratiques HTML5

Contexte : Un site e-commerce affiche plusieurs images produits sur sa page catalogue. Le Problème : Les images ne contiennent pas d'attribut alt, ce qui nuit à l'accessibilité et au référencement. Contraintes : Utiliser uniquement les bonnes pratiques HTML5. Aucun ajout CSS ou JS. Code actuel : <img src="product1.jpg"> <img src="product2.jpg"> Livrable attendu : Corriger le code en ajoutant des attributs alt pertinents et conformes aux standards d'accessibilité.

Contexte : Une page contient plusieurs liens vers des sites externes partenaires. Le Problème : Les liens ouvrent dans le même onglet et ne respectent pas les bonnes pratiques de sécurité. Contraintes : Utiliser correctement target et rel. Code actuel : <a href="https://example.com">Partenaire</a> Livrable attendu : Modifier le lien pour qu'il s'ouvre dans un nouvel onglet tout en respectant les recommandations de sécurité HTML5.

Contexte : Vous reprenez la page d'accueil d'un site vitrine développé rapidement pour un client. Le Problème : Toute la page est construite uniquement avec des balises <div>, ce qui nuit à l'accessibilité et au SEO. Contraintes : Vous devez utiliser uniquement des balises HTML5 sémantiques. Aucun CSS ni JavaScript requis. Code actuel : <div> <div>Mon Site</div> <div>Menu</div> <div> <div>Article 1</div> <div>Contenu article</div> </div> <div>Copyright 2024</div> </div> Livrable attendu : Refactoriser la structure en utilisant header, nav, main, article, section et footer de manière appropriée.

Contexte : Une équipe marketing souhaite collecter des inscriptions à une newsletter via un formulaire simple. Le Problème : Aucun mécanisme de validation n'est en place et les utilisateurs peuvent envoyer des champs vides. Contraintes : Utiliser uniquement les attributs natifs HTML5. Aucun JavaScript autorisé. Livrable attendu : Créer un formulaire contenant un champ email requis avec validation native et un bouton de soumission conforme aux bonnes pratiques HTML5.

Contexte : Une page interne doit afficher un tableau comparatif de services. Le Problème : Les données sont actuellement structurées avec des div, rendant la lecture confuse. Contraintes : Utiliser table, thead, tbody, tr, th et td correctement. Livrable attendu : Construire un tableau HTML5 structuré et accessible pour présenter les données de manière claire.

Contexte : Un site vitrine contient un menu principal non structuré pour la navigation. Le Problème : Les liens sont placés dans des div sans structure claire. Contraintes : Utiliser la balise nav et structurer les liens dans une liste. Livrable attendu : Implémenter une navigation principale accessible utilisant nav, ul et li conformément aux bonnes pratiques HTML5.

Contexte : Un article de blog est publié sans hiérarchie claire dans les titres. Le Problème : Plusieurs balises h1 sont utilisées et l'ordre des titres est incohérent, ce qui impacte le SEO. Contraintes : Respecter la hiérarchie logique des balises h1 à h6. Livrable attendu : Construire une structure de page avec un seul h1 et une hiérarchie correcte de sous-titres.

Contexte : Une page produit doit afficher une liste d'avantages associés à un service. Le Problème : Les avantages sont affichés dans des paragraphes séparés au lieu d'utiliser une structure de liste appropriée. Contraintes : Utiliser les balises ul et li correctement. Aucun style requis. Livrable attendu : Structurer les avantages sous forme de liste non ordonnée conforme aux standards HTML5.

Contexte : Une application interne doit permettre la sélection d'une date de rendez-vous. Le Problème : La date est saisie via un champ texte libre, provoquant des erreurs de format. Contraintes : Utiliser uniquement les types input natifs HTML5. Livrable attendu : Remplacer le champ texte par un input de type date respectant les standards HTML5.

Contexte : Une entreprise souhaite intégrer une vidéo de présentation sur son site institutionnel. Le Problème : La vidéo est intégrée via un ancien plugin non compatible avec tous les navigateurs. Contraintes : Utiliser uniquement la balise video HTML5. Aucun script externe. Livrable attendu : Implémenter un lecteur vidéo HTML5 natif avec contrôles activés et fallback textuel.

Contexte : Une application interne affiche un tableau comparatif de performances commerciales. Le Problème : Le tableau ne contient pas de thead, scope ou captions, rendant sa lecture difficile pour les technologies d'assistance. Contraintes : Utiliser uniquement les balises HTML5 appropriées pour améliorer l'accessibilité. Code actuel : <table> <tr> <td>Produit</td> <td>Ventes</td> </tr> <tr> <td>A</td> <td>100</td> </tr> </table> Livrable attendu : Améliorer la structure du tableau en ajoutant thead, th avec scope approprié et caption descriptif.

Contexte : Une landing page marketing comporte plusieurs blocs promotionnels. Le Problème : Les titres sont désordonnés (plusieurs h1, saut direct de h2 à h4), impactant SEO et accessibilité. Contraintes : Réorganiser la hiérarchie sans modifier le contenu textuel. Livrable attendu : Structurer correctement les titres en respectant une hiérarchie logique cohérente.

Contexte : Une plateforme doit collecter des informations utilisateurs en plusieurs sections distinctes. Le Problème : Les sections ne sont pas correctement regroupées et manquent de structure logique. Contraintes : Utiliser fieldset et legend pour structurer les groupes de champs. Aucun JavaScript. Livrable attendu : Construire un formulaire multi-sections clair et accessible utilisant les balises HTML5 adaptées.

Contexte : Une entreprise souhaite intégrer une vidéo et un audio sur une page de présentation. Le Problème : Les médias ne disposent pas de texte alternatif ou de fallback pour navigateurs non compatibles. Contraintes : Utiliser balises video et audio HTML5 avec fallback textuel. Livrable attendu : Mettre en place une intégration multimédia complète incluant controls, sources multiples et message alternatif.

Contexte : Un site institutionnel comporte un menu principal avec sous-menus. Le Problème : La navigation n'est pas correctement structurée pour l'accessibilité et manque d'attributs ARIA pertinents. Contraintes : Utiliser balises nav, ul, li et attributs ARIA essentiels. Aucun JavaScript. Livrable attendu : Structurer une navigation hiérarchique accessible respectant les bonnes pratiques HTML5 et ARIA de base.

Contexte : Une page e-commerce affiche les informations d'un produit (nom, prix, description). Le Problème : Les moteurs de recherche ne comprennent pas clairement la structure des données produit. Contraintes : Utiliser les microdonnées schema.org en HTML5. Aucun JavaScript autorisé. Livrable attendu : Implémenter les attributs itemscope, itemtype et itemprop afin d'améliorer l'interprétation SEO du produit.

Contexte : Vous reprenez un formulaire d'inscription utilisé pour créer des comptes utilisateurs sur une plateforme interne. Le Problème : Le formulaire accepte des données incohérentes (emails invalides, mots de passe trop courts, champs obligatoires ignorés) car aucune validation native HTML5 n'est correctement configurée. Contraintes : Vous devez utiliser uniquement les attributs HTML5 natifs (required, pattern, minlength, type, etc.). Aucun JavaScript autorisé. Livrable attendu : Reconcevoir le formulaire en appliquant une validation HTML5 complète incluant email valide, mot de passe avec longueur minimale et champs obligatoires clairement définis.

Contexte : Un tableau de bord interne affiche navigation latérale, contenu principal et panneau secondaire. Le Problème : La page est composée uniquement de div sans repères structurels, rendant la navigation difficile pour les lecteurs d'écran. Contraintes : Utiliser les landmarks HTML5 appropriés (header, nav, main, aside, footer). Livrable attendu : Reconcevoir la structure de la page en utilisant correctement les repères sémantiques pour améliorer accessibilité et clarté.

Contexte : Une application interne permet de sélectionner un département parmi une liste prédéfinie. Le Problème : Les utilisateurs saisissent des valeurs libres provoquant des erreurs. Contraintes : Utiliser datalist et contraintes HTML5 sans JavaScript. Livrable attendu : Implémenter un champ input avec datalist permettant suggestions contrôlées tout en conservant la validation native.

Contexte : Un blog d'entreprise publie des articles longs incluant auteur, date, catégories et sections multiples. Le Problème : La structure actuelle ne respecte pas les standards sémantiques HTML5, ce qui pénalise le référencement et l'accessibilité. Contraintes : Utiliser correctement article, section, header, footer, time et address. Aucun CSS ou JavaScript requis. Livrable attendu : Construire une page article complète avec structure sémantique cohérente et hiérarchie de titres optimisée.

Contexte : Un blog souhaite améliorer son affichage dans les résultats enrichis Google. Le Problème : Les articles ne contiennent aucune donnée structurée interprétable par les moteurs de recherche. Contraintes : Utiliser microdonnées HTML5 schema.org sans JavaScript. Livrable attendu : Implémenter des microdonnées structurées pour un article (headline, author, datePublished, image) afin d'améliorer la visibilité dans les résultats enrichis.

Contexte : Un site institutionnel comporte un menu principal, un menu secondaire et un fil d'Ariane. Le Problème : Les différentes navigations ne sont pas clairement distinguées pour les lecteurs d'écran. Contraintes : Utiliser nav avec aria-label distincts et structuration claire. Livrable attendu : Mettre en place une architecture HTML5 comportant plusieurs zones de navigation correctement identifiées et accessibles.

Contexte : Vous devez refondre la page produit principale d'un site e-commerce générant un trafic important. Le Problème : La structure actuelle nuit au référencement et à l'accessibilité : balises non sémantiques, absence de microdonnées, hiérarchie incohérente et images mal décrites. Contraintes : Utiliser exclusivement HTML5 natif. Intégrer microdonnées schema.org, balises sémantiques complètes et attributs d'accessibilité. Aucun JavaScript autorisé. Livrable attendu : Concevoir une page produit complète incluant header, nav, main, article, section, footer, microdonnées produit (itemscope, itemtype, itemprop), hiérarchie de titres cohérente et images accessibles.

Contexte : Une application interne affiche un tableau financier avec en-têtes multi-colonnes et sous-catégories. Le Problème : Le tableau actuel ne définit pas correctement les relations entre en-têtes et cellules, rendant l'interprétation difficile pour les lecteurs d'écran. Contraintes : Utiliser thead, tbody, th avec scope ou headers, caption et éventuellement colgroup. Livrable attendu : Construire un tableau complexe structuré correctement, assurant accessibilité et compréhension hiérarchique des données.

Contexte : Un dashboard interne affiche navigation latérale, contenu principal et widgets secondaires. Le Problème : Les régions ne sont pas clairement identifiées, rendant la navigation difficile pour les utilisateurs de lecteurs d'écran. Contraintes : Utiliser landmarks HTML5 et rôles ARIA lorsque pertinent. Livrable attendu : Reconcevoir la structure du dashboard avec header, nav, main, aside et footer clairement définis et correctement étiquetés.

Contexte : Une page institutionnelle intègre vidéo, audio et sous-titres. Le Problème : Les médias ne disposent pas de fallback ni de pistes textuelles appropriées. Contraintes : Utiliser balises video et audio avec track pour sous-titres. Aucun script externe. Livrable attendu : Concevoir une intégration multimédia complète incluant sources multiples, sous-titres, fallback textuel et conformité accessibilité.

Contexte : Une plateforme B2B collecte des informations sensibles via un formulaire long et structuré en plusieurs sections. Le Problème : Les champs ne sont pas correctement associés à leurs labels, les groupes logiques sont absents et la navigation clavier est difficile. Contraintes : Utiliser fieldset, legend, label for, aria-describedby et contraintes HTML5 natives. Aucun JavaScript. Livrable attendu : Construire un formulaire complet respectant les standards WCAG de base, structuré sémantiquement et entièrement accessible au clavier.

Contexte : Une landing page marketing vise à améliorer fortement son positionnement SEO. Le Problème : La page contient plusieurs h1, une hiérarchie incohérente et aucune structuration sémantique claire des sections. Contraintes : Utiliser uniquement HTML5 natif. Intégrer balises sémantiques, hiérarchie stricte des titres et structuration logique du contenu. Livrable attendu : Refondre la landing page avec un seul h1, sections bien structurées, utilisation appropriée de article et section, et organisation claire favorisant le référencement.

Contexte : Un portail gouvernemental contient de nombreuses sections (actualités, services, documents, contact). Le Problème : La structure actuelle repose uniquement sur des div imbriquées, rendant la navigation complexe pour les technologies d'assistance. Contraintes : Implémenter une architecture complète utilisant landmarks HTML5, aria-labels pertinents et hiérarchie de titres cohérente. Livrable attendu : Reconcevoir la structure globale du portail en utilisant header, nav, main, aside, section, article et footer tout en garantissant conformité accessibilité et lisibilité SEO.

Contexte : Un site d'actualités publie des articles détaillés avec auteur, date de publication et mises à jour successives. Le Problème : Les informations temporelles et auteur ne sont pas correctement structurées pour les moteurs de recherche. Contraintes : Utiliser article, header, footer, time avec attribut datetime et address pour l'auteur. Livrable attendu : Construire une page article complète intégrant métadonnées temporelles et structure sémantique conforme HTML5.