Aller au contenu principal

Les jouets en Bois

Bandeau Jouet en Bois
Haut de la page

Nouveautés HTML5 2026

Onze évolutions récentes du HTML, expliquées et surtout testables en direct ci-dessous. Plusieurs sont déjà utilisées ailleurs sur ce site : la recherche et l'agrandissement des photos en page d'accueil, le sujet de contact personnalisable en page Contact.

🔎 L'élément <search>Support large

Nouveau landmark sémantique pour repérer une zone de recherche, au même titre que <nav> ou <article>. Déjà en place sur la page d'accueil pour filtrer les jouets.

Voir le code 
<search>
  <label for="q">Rechercher :</label>
  <input type="search" id="q">
</search>

🪟 <dialog>Support large

Une modale native : gestion du focus, fermeture au clavier (Échap) et fond assombri sans écrire une ligne de CSS pour l'accessibilité. Déjà utilisée pour agrandir les photos en page d'accueil.

Coucou depuis une boîte de dialogue 100% native !
Voir le code 
<dialog id="d">
  <p>Contenu</p>
  <button onclick="d.close()">Fermer</button>
</dialog>
<button onclick="d.showModal()">Ouvrir</button>

💬 L'attribut popoverSupport large

Menus, infobulles, notifications : un contenu qui s'affiche par-dessus tout le reste de la page, se ferme au clic extérieur et à Échap, sans une ligne de JavaScript pour l'ouverture/fermeture.

Astuce : la touche Échap ferme cette bulle, essayez !
Voir le code 
<button popovertarget="a">?</button>
<div id="a" popover>Astuce...</div>

🎨 <select> personnalisableSupport partiel

Vingt ans de frustration corrigés : chaque <option> peut désormais contenir des emojis et une mise en forme libre. Déjà utilisé pour le sujet de la demande en page Contact.

Voir le code 
<select>
  <button><selectedcontent></selectedcontent></button>
  <option value="chene">🌳 Chêne</option>
</select>

🚫 L'attribut inertSupport large

Désactive une zone entière du DOM : plus de focus clavier, plus de clic, invisible aux lecteurs d'écran. Complément naturel de <dialog> et popover pour bloquer le contenu "derrière". Nécessite du JavaScript pour être basculé au clic (le HTML seul est déclaratif). En place en vrai sur la page Portfolio : le bouton "🔒 Verrouiller la galerie" rend toute la grille photo inerte.

Zone de démonstration

Voir le code réellement utilisé (page Portfolio) 
<button onclick="basculerInertGalerie()">
  🔒 Verrouiller la galerie
</button>
<div class="grille" id="grille-portfolio">...</div>

function basculerInertGalerie() {
  galerie.toggleAttribute('inert');
}

🖼️ srcset (résolutions multiples)Support large

Sert la bonne résolution d'image selon l'écran, à partir des mêmes fichiers déjà présents dans img/min/ et img/max/. En place sur les 3 photos de jouets en page d'accueil : un écran haute densité (Retina) charge automatiquement la version 1920px, un écran classique reste sur la version légère 370px.

Voir le code réellement utilisé 
<img src="img/min/Jouet_Bois_Train.png"
     srcset="img/min/Jouet_Bois_Train.png 370w,
             img/max/Jouet_Bois_Train.png 1920w"
     sizes="400px" alt="Train en Bois">

⚡ loading et fetchprioritySupport large

Deux attributs, gros effet sur la vitesse perçue : différer le chargement des images hors écran, et prioriser l'image principale. Déjà appliqués : le bandeau de chaque page charge en priorité, les photos secondaires en différé.

Voir le code 
<img src="bandeau.jpg" fetchpriority="high" alt="...">
<img src="secondaire.jpg" loading="lazy" alt="...">

🔒 Sécurité des liens externesSupport large

Un lien target="_blank" sans rel="noopener" laisse la page ouverte accéder à window.opener : la page externe peut rediriger l'onglet d'origine. En place sur le lien "Blender" de chaque légende photo en page d'accueil, le seul lien externe du site.

Voir le code réellement utilisé 
<a href="https://www.blender.org" target="_blank"
   rel="noopener noreferrer">Blender</a>

♿ Bases d'accessibilité (ARIA)Support large

ARIA en complément du HTML sémantique, jamais à la place. En place sur les 4 pages : aria-label sur la navigation, title accessible sur la carte de la page Contact, un seul <h1> par page (corrigé sur Contact), et un lien d'évasion clavier "Aller au contenu principal" caché jusqu'au focus.

Voir le code 
<nav aria-label="Navigation principale">...</nav>
<iframe title="Carte Google Maps">...</iframe>

📣 SEO et partage socialSupport large

Les balises Open Graph contrôlent l'aperçu affiché quand une page est partagée sur Facebook, LinkedIn ou X. Ajoutées cette année sur les 4 pages du site.

Voir le code 
<meta property="og:title" content="Les jouets en bois">
<meta property="og:image" content="img/apercu.jpg">

🚀 Préchargement (Speculation Rules)Support partiel

Pré-rend une page avant même le clic sur le lien, pour une navigation quasi instantanée. La page d'accueil de ce site pré-rend déjà la page Portfolio.