Formation HTML
Maîtrisez le périmètre du langage HTML et ses nouveautés, y compris les balises sémantiques et les attributs offrant une meilleure expérience utilisateur, ainsi que les bonnes pratiques de développement.
Cette formation constamment mise à jour avec les évolutions de HTML vous présente toutes les balises à connaître sur le bout des doigts pour maîtriser l'intégration web. Sémantique et structure des pages, fondement du langage et respect des bonnes pratiques pour l'accessibilité. Avec plusieurs exercices pratiques concrets, nous mettrons en oeuvre plusieurs API pour bien cerner leur fonctionnement et savoir tout ce que l'on peut faire de nos jours avec HTML.
Que va vous apprendre cette formation ?
- Un panorama complet des éléments HTML
- Une meilleure connaissance du fonctionnement du navigateur web
- La découverte de plusieurs API HTML
- Toutes les bonnes pratiques actuelles pour l'intégration
Programme de la formation
Évolution & fondamentaux
- Living Standard : cycle de mise à jour continu
- Compatibilité & amélioration progressive
- Notion de robustesse (parsing HTML, doctype)
Structure & sémantique avancée
- Bon usage des éléments main, section, article, aside, nav, header, footer, search
- Autres balises
<details>,<summary>, etc. - Landmarks implicites vs rôles ARIA explicites
Nouveaux attributs & patterns récents
- Différences :
inert,hidden,aria-hidden - Chargement différé :
loading,decoding,fetchpriority - Métadonnées :
meta name="theme-color",color-scheme,permissions-policy - Divers :
contenteditable,switch,hrdans<select>
Formulaires modernes
- Types & attributs récents :
email,url,date,datetime-local,range,color - Améliorations UX :
autocomplete(tokens modernes),inputmode,enterkeyhint,datalist - Validation & API de contraintes (
ValidityState,setCustomValidity()) - Accessibilité : associations
label,aria-describedby, messages d'erreur - Gestion des fichiers : acceptation de types, capture (caméra), multiple
Multimédia & optimisation
<picture>,<source>: images responsives, formats- Vidéo/Audio : pistes
<track>, formats - Attributs
preload,controlslist, mode plein écran - Sous‑titres & accessibilité (format WebVTT)
- Lazy loading natif des médias & iframes
Données structurées & SEO
- Microdata & JSON‑LD
- Balises sémantiques (ex :
<time>,<figure>) - Métadonnées sociales : Open Graph, cartes Twitter
Accessibilité & résilience
- Ordre de tabulation, focus management,
tabindex - Dialogues accessibles avec
<dialog> - Gestion des états ARIA minimaux (live regions, statut des erreurs)
Dialog & Popover
- Comparaison
<dialog>/ attributpopover - Gestion du focus, empilement modale, accessibilité
- Pièges courants (scroll locking, fermeture)
Interaction & Clipboard
- Clipboard API (asynchrone, permissions)
- Web Share API (partage natif mobile)
- File & Directory (sélection, multiples, glisser‑déposer)
Stockage & données locales
- localStorage & sessionStorage
- IndexedDB (aperçu) & sérialisation JSON
- StorageManager (disponibilité, estimation)
Géolocalisation & contexte
- API Geolocation : position ponctuelle & suivi
- Gestion des erreurs & confidentialité (permissions)
- Intégration cartographique (approche indépendante des fournisseurs)
- Considerations performance & batterie
Performance & chargement
- Resource Hints :
preload,prefetch,preconnect - Priority Hints (
fetchpriority) - IntersectionObserver (lazy & déclenchements différés)
- Mesure : Navigation Timing, PerformanceObserver (aperçu)
- Attribut
blocking="render"
Navigation & expérience utilisateur
- History API & gestion d’états
- Scroll behavior & restauration de position
- View Transitions API (transitions inter‑pages)
- Gestion de fragments : ancres,
id, navigation interne - Liens externes & téléchargements (
download) - Amélioration des liens :
rel(preload, prefetch, preconnect, noopener) et referrerpolicy
Offline & sécurité/confidentialité
- Manifest (icônes, couleurs, mode standalone)
- Service Worker (aperçu)
- Détection de capacités (progressive enhancement)
- Politique de permissions & sécurité (CSP, sandbox pour iframe)
Informations complémentaires
Public
Cette formation s'adresse aux développeurs, intégrateurs et webdesigners désirant perfectionner leurs connaissances de HTML pour le web et les applications web.
Objectifs
Exploiter le langage dans sa forme actuelle, connaître le fonctionnement des éléments et des attributs présentés. Être capable de faire des choix sémantiques, concevoir toute page web dans le respect des standards de conception et des bonnes pratiques.
Prérequis
Connaître les bases de HTML, savoir se servir d'un éditeur de code/texte. Avoir quelques notions de JavaScript ou d'un autre langage de programmation équivalent est un plus.
Moyens pédagogiques
Durant chaque formation, les participants et participantes auront l’opportunité de mettre en application leurs apprentissages grâce à de nombreux cas pratiques et exercices. Ces exercices seront ensuite corrigés et explicités par le formateur ou la formatrice. Dans le cas de sessions inter-entreprises, à Strasbourg ou à Paris, la formation est dispensée dans les salles pédagogiques adaptées à des apprentissages informatiques : capacité de 1 à 10 personnes, équipement informatique fourni pour chacun des stagiaires, vidéo-projecteur et paperboard.
Suivi et appréciation des résultats
L'exécution de l'action de formation est suivie à l'aide de feuilles de présence émargées par demi-journée par les participants et le formateur. Sanction : attestation de présence. Un bilan des acquis est effectué à l'issue de la formation par questionnaire individuel en ligne et par les exercices réalisés durant la session.
Modalités de positionnement et d’évaluation
Le positionnement à l'entrée est évalué par questionnaire individuel en ligne (comportant des questions relatives au profil, aux attentes, aux connaissances initiales et aux prérequis techniques) ainsi que par échange e-mail lors de la prise de contact et de la préparation du dossier. Un entretien préalable par visioconférence a lieu dans le cas des groupes en intra.
Inscription et informations pratiques
Durée de formation
Lieux disponibles
Formateur
Rodolphe Rimelé
Rodolphe est l'auteur de l'ouvrage de référence sur HTML5 publié chez Eyrolles et de nombreux développements JavaScript. Il est chef de projet technique spécialisé Vue et Nuxt chez Alsacréations.
Atouts de la formation
- Effectif réduit (jamais plus de 12 participant·e·s).
- Repas de midi offert chez Alsacréations (à Strasbourg).
- Formateur à l’écoute, chacun peut intervenir à tout moment.
- Travaux pratiques réalisés en conditions réelles.
- Supports complets fournis.
Infos complémentaires
Derniers avis
Témoignage
La formation a répondu à mes attentes, cependant 2 jours c'est un peu court pour arriver à tout assimiler. Il faudrait un peu plus d'exercices, pour mon cas j'aurais aimé approfondir la partie canvas et svg. C'est la seule critique que je pourrais faire, je suis très satisfait de ces 2 jours passés chez vous.
Témoignage
Une formation quasi parfaite de mon point de vue. On apprend beaucoup, on comprend plein de nouvelles choses. C'est intéressant, c'est pertinent et c'est interactif. Les formateurs sont pointus et ont en plus le sens de l'humour, ce qui ne gâche rien au plaisir.
Témoignage
Je n'ai que du bien à dire de ces formations, les attentes sont vites ciblés, les cours sont compréhensibles et efficaces et les formateurs sont d'un très grand professionnalisme. L'ambiance est très sympa et relax malgré tout les objectifs sont atteints sans problèmes, grâce a vous je me sens sens moins perdu dans cette immensité qu'est le web.
Date de mise à jour :
