🚀 HTML5 Ultimate – Sémantique, APIs & Performance

Pourquoi Google aime la sémantique ?

Les robots d'indexation ne "voient" pas votre site, ils lisent le code.

• Pondération : Les mots-clés dans un <main> ou un <h1> ont plus de poids que dans un <div> ou un footer.
• Structure : Google comprend mieux la hiérarchie de l'information (Titre > Intro > Chapitre).
• Rich Snippets : Une structure claire aide à générer des "Sitelinks" ou des extraits enrichis dans les résultats de recherche.

Accessibilité (A11y) & Landmarks

Pour les utilisateurs aveugles utilisant des lecteurs d'écran (NVDA, VoiceOver) :

• Navigation rapide : L'utilisateur peut appuyer sur une touche pour sauter directement au <main> (raccourci "D" ou "M"), ignorant ainsi le menu répétitif.
• Div Soup = Enfer : Si tout est une <div>, l'utilisateur doit écouter tout le code séquentiellement sans pouvoir "scanner" la page.

Open Graph (Facebook, LinkedIn, Discord)

<!-- Type de contenu -->
                            <meta property="og:type" content="website">

                            <!-- URL Canonique du partage -->
                            <meta property="og:url" content="https://monsite.com/">

                            <!-- Titre (Peut être différent du <title>) -->
                            <meta property="og:title" content="Guide Ultime HTML5">

                            <!-- Description -->
                            <meta property="og:description" content="Découvrez...">

                            <!-- IMAGE : Le plus important (1200x630 px recommandé) -->
                            <meta property="og:image" content="https://monsite.com/og.jpg">
                            <meta property="og:image:width" content="1200">
                            <meta property="og:image:height" content="630">

Twitter Cards (X)

<!-- Grande image (impact visuel max) -->
                            <meta name="twitter:card" content="summary_large_image">

                            <!-- Compte du site -->
                            <meta name="twitter:site" content="@ideo_lab">

                            <!-- Compte de l'auteur -->
                            <meta name="twitter:creator" content="@dev_name">

                            <!-- Titre (Fallback sur OG si absent) -->
                            <meta name="twitter:title" content="Guide HTML5">

Testez vos cartes :
Usez du Twitter Card Validator ou du LinkedIn Post Inspector.

Nommer les éléments (Labels)

Indispensable pour les boutons icônes (sans texte) ou les inputs sans label visible.

<!-- Label invisible (Lu par le Screen Reader) -->
                            <button aria-label="Fermer le menu">
                            <i class="fa fa-times"></i>
                            </button>

                            <!-- Référence un autre élément (Très puissant) -->
                            <h2 id="modal-title">Supprimer ?</h2>
                            <div role="dialog" aria-labelledby="modal-title">
                            ...
                            </div>

États Dynamiques (Pour le JS)

HTML5 ne suffit pas pour les widgets JS (Accordéons, Modales, Menus).

• aria-expanded="true/false" : Pour les menus déroulants ou accordéons. Indique si la zone est ouverte.
• aria-hidden="true" : Cache un élément aux lecteurs d'écran (ex: icône décorative) tout en le laissant visible.
• aria-live="polite" : Pour les notifications (Toasts). Le lecteur d'écran lira le message dès qu'il apparaît, sans couper l'utilisateur.

Date & Heure (Natif)

Plus besoin de lourdes bibliothèques JS (Datepicker). L'interface dépend du navigateur/OS.

<!-- Date seule (JJ/MM/AAAA) -->
                            <input type="date" min="2025-01-01" max="2025-12-31">

                            <!-- Date et Heure -->
                            <input type="datetime-local">

                            <!-- Mois seulement -->
                            <input type="month">

                            <!-- Heure -->
                            <input type="time">

Couleurs

<label>Couleur du produit</label>
                            <input type="color" value="#ff0000">

Fichiers & Caméra (Mobile)

Astuce pour ouvrir la caméra directement sur mobile.

<!-- Classique (Multiples) -->
                            <input type="file" multiple accept=".pdf,.docx">

                            <!-- Images uniquement -->
                            <input type="file" accept="image/*">

                            <!-- Ouvrir Caméra (Selfie) -->
                            <input type="file" accept="image/*" capture="user">

                            <!-- Ouvrir Caméra (Arrière / Environnement) -->
                            <input type="file" accept="image/*" capture="environment">

Sliders (Range)

<input type="range" min="0" max="10" step="0.5" 
                            oninput="this.nextElementSibling.value = this.value">
                            <output>5</output>

Autocomplete (Vital pour l'UX)

Aide le navigateur (Chrome/Safari) à pré-remplir les champs correctement.

<!-- Login -->
                            <input type="text" autocomplete="username">
                            <input type="password" autocomplete="current-password">

                            <!-- Inscription / Change Password -->
                            <input type="password" autocomplete="new-password">

                            <!-- Carte Bancaire -->
                            <input type="text" autocomplete="cc-number">
                            <input type="text" autocomplete="cc-exp">
                            <input type="text" autocomplete="cc-csc">

Datalist (L'auto-complétion native)

Un hybride entre un <select> et un <input>. Permet de choisir une valeur prédéfinie OU d'en écrire une nouvelle.

<label>Votre navigateur préféré ?</label>
                            <input list="browsers" name="browser">

                            <datalist id="browsers">
                            <option value="Chrome">
                            <option value="Firefox">
                            <option value="Safari">
                            <option value="Opera">
                            <option value="Edge">
                            </datalist>

Hidden (Sécurité)

<!-- Souvent utilisé pour les tokens CSRF ou ID -->
                            <input type="hidden" name="user_id" value="42">

Solution Moderne : :user-invalid

Ne cible l'erreur que si l'utilisateur a déjà interagi avec le champ.

/* 1. État par défaut (Pas d'erreur visible) */
                            input { border: 1px solid #ccc; }

                            /* 2. Succès (Optionnel) */
                            input:valid { border-color: green; }

                            /* 3. Erreur (Seulement après interaction) */
                            /* Support: Firefox, Chrome/Edge 119+ */
                            input:user-invalid {
                            border-color: red;
                            background-color: #fff0f0;
                            animation: shake 0.3s;
                            }

Solution Compatibilité (Le "Hack" Placeholder)

Si vous devez supporter de vieux navigateurs.

/* Cible les inputs invalides qui ne montrent PAS 
                            leur placeholder (donc l'user a tapé qqchose) */
                            input:not(:placeholder-shown):invalid {
                            border-color: red;
                            }

                            /* Requis : il faut mettre un placeholder, 
                            même vide (espace) */
                            <input required placeholder=" " ...>