Chapitre 3 — HTML5

Travaux Pratiques
HTML5 Moderne

Structure sémantique, formulaires avancés et site multi-pages. Trois TPs progressifs pour maîtriser HTML5.

Explorer les TPs Documentation MDN

Travaux Pratiques

Trois projets pour tout maîtriser

Du CV personnel au site vitrine complet, chaque TP renforce vos compétences HTML5.

Débutant

TP 1 — Page de Présentation Personnelle

Créez une page HTML5 de CV/Portfolio avec une structure sémantique complète : header, navigation, compétences, expériences et liens sociaux.

  • Structure sémantique (header, main, footer)
  • Navigation avec ancres internes
  • Tableau des formations/expériences
  • Validation W3C sans erreurs
Voir le TP →
Intermédiaire

TP 2 — Formulaire d'Inscription

Construisez un formulaire d'inscription complet avec validation HTML5 native : patterns, types, messages d'erreur et accessibilité.

  • 10+ types de champs différents
  • Validation pattern (email, tél, password)
  • Fieldsets et autocomplete
  • Messages d'erreur personnalisés
Voir le TP →
Avancé

TP 3 — Site Vitrine Multi-Pages

Développez un site web complet de 5 pages pour NullDraft AI, une agence d'intelligence artificielle : accueil, équipe, services, galerie et contact.

  • 5 pages interconnectées
  • Images responsives (srcset, picture)
  • Tableau de tarifs, vidéo, iframe
  • Métadonnées SEO / Open Graph
Voir le TP →

Résumé du chapitre

Points clés couverts

Les compétences essentielles de HTML5 abordées dans ces travaux pratiques.

Structure Sémantique

header, nav, main, section, article, aside, footer

Formulaires HTML5

input, validation, pattern, required, fieldset

Multimédia Natif

audio, video, source, track, iframe

Accessibilité

ARIA, alt, labels, skip links, navigation clavier

Responsive Design

srcset, picture, media queries, viewport

Ressources

Liens utiles

MDN Web Docs

Documentation HTML complète et à jour par Mozilla.

W3C Validator

Validez votre HTML pour garantir la conformité aux standards.

WAVE

Outil de test d'accessibilité web.

Can I Use

Tables de compatibilité des navigateurs.