Cet article explore le potentiel du streaming HTML pour améliorer les performances des sites web modernes. Sébastien Mischler, développeur chez Infomaniak, revisite cette technique inspirée d'un article de Chris Coyier, en s'appuyant sur un projet expérimental appelé HTMS. L'article souligne que les problèmes de performance actuels proviennent souvent du rendu retardé par l'hydration côté client et les pipelines JavaScript lourds, plutôt que de la vitesse du réseau. Le streaming HTML permet de rendre le contenu progressivement dès son arrivée, améliorant ainsi les métriques clés comme le First Contentful Paint et l'expérience utilisateur. Bien que les solutions comme le SSR (Server-Side Rendering) et le SSG (Static Site Generation) existent, elles présentent des limites, notamment avec les données dynamiques. Le streaming HTML offre une alternative prometteuse pour concilier SEO, accessibilité et performances.
L'article explore la notion de sémantique en HTML. Il explique que chaque élément HTML a une signification définie dans le HTML Living Standard, et que cette sémantique est cruciale pour les utilisateurs, notamment pour l'accessibilité. L'auteur distingue trois types de sémantique : celle pour les utilisateurs, pour les développeurs et pour les machines. Il illustre ses propos avec des exemples concrets, montrant comment choisir les bons éléments HTML améliore la compréhension du contenu et l'accessibilité. L'article souligne l'importance de la sémantique pour rendre le Web plus inclusif et fonctionnel.
Cet article explore les éléments HTML oubliés et obsolètes, en rappelant que la technologie a 32 ans et a connu des évolutions. L'auteur, Declan Chidlow, évoque des balises comme , , les framesets, et <listing>, en soulignant leur obsolescence et les problèmes qu'elles posaient, notamment en termes d'accessibilité. Il recommande de ne pas les utiliser et rappelle que certaines, bien que dépréciées, sont encore supportées pour des raisons de compatibilité. Un voyage dans le temps pour les développeurs expérimentés et une découverte pour les plus jeunes.</p></div> </div> <div class="linklist-item-infos clear"> <div class="linklist-item-tags"> <i class="fa fa-tags" aria-hidden="true"></i> <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/html">html</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/web-standards">web-standards</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/obsolescence">obsolescence</a> </span> </div> <div class="linklist-item-infos-date-url-block pure-g"> <div class="linklist-item-infos-dateblock pure-u-lg-7-12 pure-u-1"> <a href="/liens/shaare/YsUQOw" title="Permalien"> <span class="linkdate" title="Permalien"> <i class="fa fa-clock-o" aria-hidden="true"></i> December 22, 2025 at 9:03:16 PM GMT+1 · </span> permalien </a> <div class="pure-u-0 pure-u-lg-visible"> · <div class="linkqrcode"> <img data-permalink="https://htmhell.dev/adventcalendar/2025/22/" src="/liens/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> · <span> <a href="https://web.archive.org/web/https://htmhell.dev/adventcalendar/2025/22/"> <img class="linklist-plugin-icon" src="/liens/plugins/archiveorg/internetarchive.png" title="Voir sur archive.org" alt="archive.org" /> </a> </span> </div> </div><div class="linklist-item-infos-url pure-u-lg-5-12 pure-u-1"> <a href="https://htmhell.dev/adventcalendar/2025/22/" aria-label="The HTML Elements Time Forgot - HTMHell" title="The HTML Elements Time Forgot - HTMHell"> <i class="fa fa-link" aria-hidden="true"></i> https://htmhell.dev/adventcalendar/2025/22/ </a> <div class="linklist-item-buttons pure-u-0 pure-u-lg-visible"> <a href="#" aria-label="Replier" title="Replier" class="fold-button"><i class="fa fa-chevron-up" aria-hidden="true"></i></a> </div> </div> <div class="mobile-buttons pure-u-1 pure-u-lg-0"> <div class="linkqrcode"> <img data-permalink="https://htmhell.dev/adventcalendar/2025/22/" src="/liens/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> · <span> <a href="https://web.archive.org/web/https://htmhell.dev/adventcalendar/2025/22/"> <img class="linklist-plugin-icon" src="/liens/plugins/archiveorg/internetarchive.png" title="Voir sur archive.org" alt="archive.org" /> </a> </span> </div> </div> </div> </div> <div class="anchor" id="ZbQ0_g"></div> <div class="linklist-item linklist-item" data-id="26229"> <div class="linklist-item-title"> <div class="linklist-item-thumbnail hidden" style="width:125px;height:90px;" data-async-thumbnail="1" > <div class="thumbnail"> <a href="https://htmhell.dev/adventcalendar/2025/19/" aria-hidden="true" tabindex="-1"> <img data-src="/liens/" class="b-lazy" src="" alt="" width="125" height="90" /> </a> </div> </div> <div class="linklist-item-editbuttons"> </div> <h2> <a href="https://htmhell.dev/adventcalendar/2025/19/" class="linklist-real-url"> <i class="fa fa-external-link" aria-hidden="true"></i> <span class="linklist-link">Semantics beyond the tag name - HTMHell</span> </a> </h2> </div> <div class="linklist-item-description"> <div class="markdown"><p>L'article critique l'utilisation excessive de balises <code><div></code> (divitis) et l'abus de balises HTML sémantiques sans compréhension de leur véritable signification. L'auteur explique que l'HTML sémantique ne se limite pas à remplacer les <code><div></code> par d'autres balises, mais nécessite une compréhension approfondie des éléments et de leur usage correct selon les normes HTML. Il souligne l'importance d'aller au-delà des apparences et de se former continuellement pour écrire un HTML vraiment sémantique et accessible.</p></div> </div> <div class="linklist-item-infos clear"> <div class="linklist-item-tags"> <i class="fa fa-tags" aria-hidden="true"></i> <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/html">html</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/s%C3%A9mantique">sémantique</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/bonnes-pratiques">bonnes-pratiques</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/accessibilit%C3%A9">accessibilité</a> </span> </div> <div class="linklist-item-infos-date-url-block pure-g"> <div class="linklist-item-infos-dateblock pure-u-lg-7-12 pure-u-1"> <a href="/liens/shaare/ZbQ0_g" title="Permalien"> <span class="linkdate" title="Permalien"> <i class="fa fa-clock-o" aria-hidden="true"></i> December 21, 2025 at 3:44:04 PM GMT+1 · </span> permalien </a> <div class="pure-u-0 pure-u-lg-visible"> · <div class="linkqrcode"> <img data-permalink="https://htmhell.dev/adventcalendar/2025/19/" src="/liens/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> · <span> <a href="https://web.archive.org/web/https://htmhell.dev/adventcalendar/2025/19/"> <img class="linklist-plugin-icon" src="/liens/plugins/archiveorg/internetarchive.png" title="Voir sur archive.org" alt="archive.org" /> </a> </span> </div> </div><div class="linklist-item-infos-url pure-u-lg-5-12 pure-u-1"> <a href="https://htmhell.dev/adventcalendar/2025/19/" aria-label="Semantics beyond the tag name - HTMHell" title="Semantics beyond the tag name - HTMHell"> <i class="fa fa-link" aria-hidden="true"></i> https://htmhell.dev/adventcalendar/2025/19/ </a> <div class="linklist-item-buttons pure-u-0 pure-u-lg-visible"> <a href="#" aria-label="Replier" title="Replier" class="fold-button"><i class="fa fa-chevron-up" aria-hidden="true"></i></a> </div> </div> <div class="mobile-buttons pure-u-1 pure-u-lg-0"> <div class="linkqrcode"> <img data-permalink="https://htmhell.dev/adventcalendar/2025/19/" src="/liens/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> · <span> <a href="https://web.archive.org/web/https://htmhell.dev/adventcalendar/2025/19/"> <img class="linklist-plugin-icon" src="/liens/plugins/archiveorg/internetarchive.png" title="Voir sur archive.org" alt="archive.org" /> </a> </span> </div> </div> </div> </div> <div class="anchor" id="xuQDiQ"></div> <div class="linklist-item linklist-item" data-id="26192"> <div class="linklist-item-title"> <div class="linklist-item-thumbnail hidden" style="width:125px;height:90px;" data-async-thumbnail="1" > <div class="thumbnail"> <a href="https://htmhell.dev/adventcalendar/2025/16/" aria-hidden="true" tabindex="-1"> <img data-src="/liens/" class="b-lazy" src="" alt="" width="125" height="90" /> </a> </div> </div> <div class="linklist-item-editbuttons"> </div> <h2> <a href="https://htmhell.dev/adventcalendar/2025/16/" class="linklist-real-url"> <i class="fa fa-external-link" aria-hidden="true"></i> <span class="linklist-link">Giving pages a clear shape by using headings - HTMHell</span> </a> </h2> </div> <div class="linklist-item-description"> <div class="markdown"><p>Cet article explique comment utiliser les titres pour structurer clairement une page web, améliorant ainsi la compréhension pour tous les utilisateurs, y compris ceux utilisant des technologies d'assistance. L'article aborde trois problèmes courants : utiliser des titres pour du texte non structurel, ne pas utiliser de titres pour du texte structurel, et un ordre de titres incohérent. Les solutions proposées incluent l'utilisation appropriée de HTML et CSS pour garantir une sémantique et une hiérarchie correctes des titres.</p></div> </div> <div class="linklist-item-infos clear"> <div class="linklist-item-tags"> <i class="fa fa-tags" aria-hidden="true"></i> <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/hi%C3%A9rarchie">hiérarchie</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/html">html</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/s%C3%A9mantique">sémantique</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/bonnes-pratiques">bonnes-pratiques</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/accessibilit%C3%A9">accessibilité</a> </span> </div> <div class="linklist-item-infos-date-url-block pure-g"> <div class="linklist-item-infos-dateblock pure-u-lg-7-12 pure-u-1"> <a href="/liens/shaare/xuQDiQ" title="Permalien"> <span class="linkdate" title="Permalien"> <i class="fa fa-clock-o" aria-hidden="true"></i> December 17, 2025 at 9:19:58 PM GMT+1 · </span> permalien </a> <div class="pure-u-0 pure-u-lg-visible"> · <div class="linkqrcode"> <img data-permalink="https://htmhell.dev/adventcalendar/2025/16/" src="/liens/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> · <span> <a href="https://web.archive.org/web/https://htmhell.dev/adventcalendar/2025/16/"> <img class="linklist-plugin-icon" src="/liens/plugins/archiveorg/internetarchive.png" title="Voir sur archive.org" alt="archive.org" /> </a> </span> </div> </div><div class="linklist-item-infos-url pure-u-lg-5-12 pure-u-1"> <a href="https://htmhell.dev/adventcalendar/2025/16/" aria-label="Giving pages a clear shape by using headings - HTMHell" title="Giving pages a clear shape by using headings - HTMHell"> <i class="fa fa-link" aria-hidden="true"></i> https://htmhell.dev/adventcalendar/2025/16/ </a> <div class="linklist-item-buttons pure-u-0 pure-u-lg-visible"> <a href="#" aria-label="Replier" title="Replier" class="fold-button"><i class="fa fa-chevron-up" aria-hidden="true"></i></a> </div> </div> <div class="mobile-buttons pure-u-1 pure-u-lg-0"> <div class="linkqrcode"> <img data-permalink="https://htmhell.dev/adventcalendar/2025/16/" src="/liens/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> · <span> <a href="https://web.archive.org/web/https://htmhell.dev/adventcalendar/2025/16/"> <img class="linklist-plugin-icon" src="/liens/plugins/archiveorg/internetarchive.png" title="Voir sur archive.org" alt="archive.org" /> </a> </span> </div> </div> </div> </div> <div class="anchor" id="NUVkgg"></div> <div class="linklist-item linklist-item" data-id="26191"> <div class="linklist-item-title"> <div class="linklist-item-thumbnail hidden" style="width:125px;height:90px;" data-async-thumbnail="1" > <div class="thumbnail"> <a href="https://htmhell.dev/adventcalendar/2025/15/" aria-hidden="true" tabindex="-1"> <img data-src="/liens/" class="b-lazy" src="" alt="" width="125" height="90" /> </a> </div> </div> <div class="linklist-item-editbuttons"> </div> <h2> <a href="https://htmhell.dev/adventcalendar/2025/15/" class="linklist-real-url"> <i class="fa fa-external-link" aria-hidden="true"></i> <span class="linklist-link">Them’s the Breaks - HTMHell</span> </a> </h2> </div> <div class="linklist-item-description"> <div class="markdown"><p>L'article explore les différentes techniques HTML pour gérer les sauts de ligne et les ruptures de mots. Il détaille l'utilisation de la balise <code><br></code> pour les sauts de ligne, <code><wbr></code> pour les opportunités de rupture de mots, <code>&shy;</code> pour les tirets mous et <code>&nbsp;</code> pour les espaces insécables. L'auteur explique quand et comment utiliser ces éléments, tout en soulignant leurs limites et alternatives. Un guide pratique pour mieux maîtriser la mise en page du texte en HTML.</p></div> </div> <div class="linklist-item-infos clear"> <div class="linklist-item-tags"> <i class="fa fa-tags" aria-hidden="true"></i> <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/html">html</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/hyph%C3%A9nation">hyphénation</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/retour-%C3%A0-la-ligne">retour-à-la-ligne</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/wbr">wbr</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/br">br</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/%26shy%3B">­</a> </span> </div> <div class="linklist-item-infos-date-url-block pure-g"> <div class="linklist-item-infos-dateblock pure-u-lg-7-12 pure-u-1"> <a href="/liens/shaare/NUVkgg" title="Permalien"> <span class="linkdate" title="Permalien"> <i class="fa fa-clock-o" aria-hidden="true"></i> December 17, 2025 at 9:18:24 PM GMT+1 · </span> permalien </a> <div class="pure-u-0 pure-u-lg-visible"> · <div class="linkqrcode"> <img data-permalink="https://htmhell.dev/adventcalendar/2025/15/" src="/liens/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> · <span> <a href="https://web.archive.org/web/https://htmhell.dev/adventcalendar/2025/15/"> <img class="linklist-plugin-icon" src="/liens/plugins/archiveorg/internetarchive.png" title="Voir sur archive.org" alt="archive.org" /> </a> </span> </div> </div><div class="linklist-item-infos-url pure-u-lg-5-12 pure-u-1"> <a href="https://htmhell.dev/adventcalendar/2025/15/" aria-label="Them’s the Breaks - HTMHell" title="Them’s the Breaks - HTMHell"> <i class="fa fa-link" aria-hidden="true"></i> https://htmhell.dev/adventcalendar/2025/15/ </a> <div class="linklist-item-buttons pure-u-0 pure-u-lg-visible"> <a href="#" aria-label="Replier" title="Replier" class="fold-button"><i class="fa fa-chevron-up" aria-hidden="true"></i></a> </div> </div> <div class="mobile-buttons pure-u-1 pure-u-lg-0"> <div class="linkqrcode"> <img data-permalink="https://htmhell.dev/adventcalendar/2025/15/" src="/liens/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> · <span> <a href="https://web.archive.org/web/https://htmhell.dev/adventcalendar/2025/15/"> <img class="linklist-plugin-icon" src="/liens/plugins/archiveorg/internetarchive.png" title="Voir sur archive.org" alt="archive.org" /> </a> </span> </div> </div> </div> </div> <div class="anchor" id="K566AA"></div> <div class="linklist-item linklist-item" data-id="26161"> <div class="linklist-item-title"> <div class="linklist-item-thumbnail hidden" style="width:125px;height:90px;" data-async-thumbnail="1" > <div class="thumbnail"> <a href="https://htmhell.dev/adventcalendar/2025/9/" aria-hidden="true" tabindex="-1"> <img data-src="/liens/" class="b-lazy" src="" alt="" width="125" height="90" /> </a> </div> </div> <div class="linklist-item-editbuttons"> </div> <h2> <a href="https://htmhell.dev/adventcalendar/2025/9/" class="linklist-real-url"> <i class="fa fa-external-link" aria-hidden="true"></i> <span class="linklist-link">Discover Dialog - HTMHell</span> </a> </h2> </div> <div class="linklist-item-description"> <div class="markdown"><p>L'article présente l'élément <code><dialog></code> en HTML, une solution moderne pour créer des modales et des boîtes de dialogue non modales. Cet article explique comment utiliser cet élément natif du navigateur pour simplifier le code et réduire les dépendances. Il couvre l'ouverture et la fermeture des dialogues, ainsi que des fonctionnalités avancées comme la fermeture légère (light dismissal) et la gestion des événements de fermeture.</p></div> </div> <div class="linklist-item-infos clear"> <div class="linklist-item-tags"> <i class="fa fa-tags" aria-hidden="true"></i> <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/dialog">dialog</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/html">html</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/modal">modal</a> </span> </div> <div class="linklist-item-infos-date-url-block pure-g"> <div class="linklist-item-infos-dateblock pure-u-lg-7-12 pure-u-1"> <a href="/liens/shaare/K566AA" title="Permalien"> <span class="linkdate" title="Permalien"> <i class="fa fa-clock-o" aria-hidden="true"></i> December 9, 2025 at 8:49:28 PM GMT+1 · </span> permalien </a> <div class="pure-u-0 pure-u-lg-visible"> · <div class="linkqrcode"> <img data-permalink="https://htmhell.dev/adventcalendar/2025/9/" src="/liens/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> · <span> <a href="https://web.archive.org/web/https://htmhell.dev/adventcalendar/2025/9/"> <img class="linklist-plugin-icon" src="/liens/plugins/archiveorg/internetarchive.png" title="Voir sur archive.org" alt="archive.org" /> </a> </span> </div> </div><div class="linklist-item-infos-url pure-u-lg-5-12 pure-u-1"> <a href="https://htmhell.dev/adventcalendar/2025/9/" aria-label="Discover Dialog - HTMHell" title="Discover Dialog - HTMHell"> <i class="fa fa-link" aria-hidden="true"></i> https://htmhell.dev/adventcalendar/2025/9/ </a> <div class="linklist-item-buttons pure-u-0 pure-u-lg-visible"> <a href="#" aria-label="Replier" title="Replier" class="fold-button"><i class="fa fa-chevron-up" aria-hidden="true"></i></a> </div> </div> <div class="mobile-buttons pure-u-1 pure-u-lg-0"> <div class="linkqrcode"> <img data-permalink="https://htmhell.dev/adventcalendar/2025/9/" src="/liens/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> · <span> <a href="https://web.archive.org/web/https://htmhell.dev/adventcalendar/2025/9/"> <img class="linklist-plugin-icon" src="/liens/plugins/archiveorg/internetarchive.png" title="Voir sur archive.org" alt="archive.org" /> </a> </span> </div> </div> </div> </div> <div class="anchor" id="sSLVow"></div> <div class="linklist-item linklist-item" data-id="26158"> <div class="linklist-item-title"> <div class="linklist-item-thumbnail hidden" style="width:125px;height:90px;" data-async-thumbnail="1" > <div class="thumbnail"> <a href="https://htmhell.dev/adventcalendar/2025/8/" aria-hidden="true" tabindex="-1"> <img data-src="/liens/" class="b-lazy" src="" alt="" width="125" height="90" /> </a> </div> </div> <div class="linklist-item-editbuttons"> </div> <h2> <a href="https://htmhell.dev/adventcalendar/2025/8/" class="linklist-real-url"> <i class="fa fa-external-link" aria-hidden="true"></i> <span class="linklist-link">What's wrong with this HTML, and is it valid? - HTMHell</span> </a> </h2> </div> <div class="linklist-item-description"> <div class="markdown"><p>Cet article analyse un bout de code HTML « à l’ancienne » (balises dépréciées, structure obsolète, mode quirks, etc.), afin de montrer comment ce type de markup « vintage » peut toujours s’afficher — mais pourquoi cela reste une très mauvaise idée quand on vise accessibilité, sémantique et bonnes pratiques modernes.</p></div> </div> <div class="linklist-item-infos clear"> <div class="linklist-item-tags"> <i class="fa fa-tags" aria-hidden="true"></i> <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/html">html</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/deprecation">deprecation</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/quirks-mode">quirks-mode</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/marquee">marquee</a> </span> </div> <div class="linklist-item-infos-date-url-block pure-g"> <div class="linklist-item-infos-dateblock pure-u-lg-7-12 pure-u-1"> <a href="/liens/shaare/sSLVow" title="Permalien"> <span class="linkdate" title="Modifié : December 8, 2025 at 2:21:22 PM GMT+1"> <i class="fa fa-clock-o" aria-hidden="true"></i> December 8, 2025 at 2:21:22 PM GMT+1 * · </span> permalien </a> <div class="pure-u-0 pure-u-lg-visible"> · <div class="linkqrcode"> <img data-permalink="https://htmhell.dev/adventcalendar/2025/8/" src="/liens/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> · <span> <a href="https://web.archive.org/web/https://htmhell.dev/adventcalendar/2025/8/"> <img class="linklist-plugin-icon" src="/liens/plugins/archiveorg/internetarchive.png" title="Voir sur archive.org" alt="archive.org" /> </a> </span> </div> </div><div class="linklist-item-infos-url pure-u-lg-5-12 pure-u-1"> <a href="https://htmhell.dev/adventcalendar/2025/8/" aria-label="What's wrong with this HTML, and is it valid? - HTMHell" title="What's wrong with this HTML, and is it valid? - HTMHell"> <i class="fa fa-link" aria-hidden="true"></i> https://htmhell.dev/adventcalendar/2025/8/ </a> <div class="linklist-item-buttons pure-u-0 pure-u-lg-visible"> <a href="#" aria-label="Replier" title="Replier" class="fold-button"><i class="fa fa-chevron-up" aria-hidden="true"></i></a> </div> </div> <div class="mobile-buttons pure-u-1 pure-u-lg-0"> <div class="linkqrcode"> <img data-permalink="https://htmhell.dev/adventcalendar/2025/8/" src="/liens/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> · <span> <a href="https://web.archive.org/web/https://htmhell.dev/adventcalendar/2025/8/"> <img class="linklist-plugin-icon" src="/liens/plugins/archiveorg/internetarchive.png" title="Voir sur archive.org" alt="archive.org" /> </a> </span> </div> </div> </div> </div> <div class="anchor" id="KRe3eQ"></div> <div class="linklist-item linklist-item" data-id="26132"> <div class="linklist-item-title"> <div class="linklist-item-thumbnail hidden" style="width:125px;height:90px;" data-async-thumbnail="1" > <div class="thumbnail"> <a href="https://calendar.perfplanet.com/2025/exploring-large-html-documents-on-the-web/" aria-hidden="true" tabindex="-1"> <img data-src="/liens/" class="b-lazy" src="" alt="" width="125" height="90" /> </a> </div> </div> <div class="linklist-item-editbuttons"> </div> <h2> <a href="https://calendar.perfplanet.com/2025/exploring-large-html-documents-on-the-web/" class="linklist-real-url"> <i class="fa fa-external-link" aria-hidden="true"></i> <span class="linklist-link">Web Performance Calendar » Exploring Large HTML Documents On The Web</span> </a> </h2> </div> <div class="linklist-item-description"> <div class="markdown"><p>Matt Zeunert explore les raisons pour lesquelles certaines pages web contiennent des documents HTML volumineux, souvent en raison de l'intégration de ressources comme des images, des CSS ou des polices de caractères en Base64. Il analyse divers cas, tels que les images intégrées via des data URLs, les CSS inline avec des sélecteurs complexes, et les polices de caractères embarquées, qui peuvent impacter les performances. L'article met en lumière les avantages et inconvénients de ces pratiques, notamment l'absence de mise en cache indépendante et la priorisation des ressources. Un outil, le DebugBear HTML Size Analyzer, a été amélioré pour gérer ces structures complexes.</p></div> </div> <div class="linklist-item-infos clear"> <div class="linklist-item-tags"> <i class="fa fa-tags" aria-hidden="true"></i> <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/base64">base64</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/html">html</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/css">css</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/optimisation">optimisation</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/inline">inline</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/performance">performance</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/size">size</a> </span> </div> <div class="linklist-item-infos-date-url-block pure-g"> <div class="linklist-item-infos-dateblock pure-u-lg-7-12 pure-u-1"> <a href="/liens/shaare/KRe3eQ" title="Permalien"> <span class="linkdate" title="Permalien"> <i class="fa fa-clock-o" aria-hidden="true"></i> December 2, 2025 at 9:55:17 PM GMT+1 · </span> permalien </a> <div class="pure-u-0 pure-u-lg-visible"> · <div class="linkqrcode"> <img data-permalink="https://calendar.perfplanet.com/2025/exploring-large-html-documents-on-the-web/" src="/liens/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> · <span> <a href="https://web.archive.org/web/https://calendar.perfplanet.com/2025/exploring-large-html-documents-on-the-web/"> <img class="linklist-plugin-icon" src="/liens/plugins/archiveorg/internetarchive.png" title="Voir sur archive.org" alt="archive.org" /> </a> </span> </div> </div><div class="linklist-item-infos-url pure-u-lg-5-12 pure-u-1"> <a href="https://calendar.perfplanet.com/2025/exploring-large-html-documents-on-the-web/" aria-label="Web Performance Calendar » Exploring Large HTML Documents On The Web" title="Web Performance Calendar » Exploring Large HTML Documents On The Web"> <i class="fa fa-link" aria-hidden="true"></i> https://calendar.perfplanet.com/2025/exploring-large-html-documents-on-the-web/ </a> <div class="linklist-item-buttons pure-u-0 pure-u-lg-visible"> <a href="#" aria-label="Replier" title="Replier" class="fold-button"><i class="fa fa-chevron-up" aria-hidden="true"></i></a> </div> </div> <div class="mobile-buttons pure-u-1 pure-u-lg-0"> <div class="linkqrcode"> <img data-permalink="https://calendar.perfplanet.com/2025/exploring-large-html-documents-on-the-web/" src="/liens/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> · <span> <a href="https://web.archive.org/web/https://calendar.perfplanet.com/2025/exploring-large-html-documents-on-the-web/"> <img class="linklist-plugin-icon" src="/liens/plugins/archiveorg/internetarchive.png" title="Voir sur archive.org" alt="archive.org" /> </a> </span> </div> </div> </div> </div> <div class="anchor" id="VuvKVg"></div> <div class="linklist-item linklist-item" data-id="26043"> <div class="linklist-item-title"> <div class="linklist-item-thumbnail hidden" style="width:125px;height:90px;" data-async-thumbnail="1" > <div class="thumbnail"> <a href="https://www.sitepoint.com/headings-in-html-structure/" aria-hidden="true" tabindex="-1"> <img data-src="/liens/" class="b-lazy" src="" alt="" width="125" height="90" /> </a> </div> </div> <div class="linklist-item-editbuttons"> </div> <h2> <a href="https://www.sitepoint.com/headings-in-html-structure/" class="linklist-real-url"> <i class="fa fa-external-link" aria-hidden="true"></i> <span class="linklist-link">Why Headings Are Important in HTML: Structure, Accessibility, and SEO</span> </a> </h2> </div> <div class="linklist-item-description"> <div class="markdown"><p>Cet article de SitePoint explique l'importance des titres (headings) en HTML au-delà de leur simple aspect visuel. Les titres sont sémantiques et structurent le contenu d'une page, facilitant la navigation pour tous, y compris les utilisateurs d'aides technologiques. Ils aident également au référencement (SEO) et aux moteurs de recherche. L'article souligne l'importance d'utiliser les niveaux de titres correctement (de h1 à h6) pour créer une hiérarchie logique, et non pour le style, qui doit être géré par CSS. Une mauvaise utilisation des titres peut nuire à l'accessibilité et à la compréhension de la structure de la page.</p></div> </div> <div class="linklist-item-infos clear"> <div class="linklist-item-tags"> <i class="fa fa-tags" aria-hidden="true"></i> <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/accessibilit%C3%A9">accessibilité</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/hi%C3%A9rarchie">hiérarchie</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/html">html</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/seo">seo</a> </span> </div> <div class="linklist-item-infos-date-url-block pure-g"> <div class="linklist-item-infos-dateblock pure-u-lg-7-12 pure-u-1"> <a href="/liens/shaare/VuvKVg" title="Permalien"> <span class="linkdate" title="Modifié : November 11, 2025 at 5:39:53 PM GMT+1"> <i class="fa fa-clock-o" aria-hidden="true"></i> November 11, 2025 at 5:38:31 PM GMT+1 * · </span> permalien </a> <div class="pure-u-0 pure-u-lg-visible"> · <div class="linkqrcode"> <img data-permalink="https://www.sitepoint.com/headings-in-html-structure/" src="/liens/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> · <span> <a href="https://web.archive.org/web/https://www.sitepoint.com/headings-in-html-structure/"> <img class="linklist-plugin-icon" src="/liens/plugins/archiveorg/internetarchive.png" title="Voir sur archive.org" alt="archive.org" /> </a> </span> </div> </div><div class="linklist-item-infos-url pure-u-lg-5-12 pure-u-1"> <a href="https://www.sitepoint.com/headings-in-html-structure/" aria-label="Why Headings Are Important in HTML: Structure, Accessibility, and SEO" title="Why Headings Are Important in HTML: Structure, Accessibility, and SEO"> <i class="fa fa-link" aria-hidden="true"></i> https://www.sitepoint.com/headings-in-html-structure/ </a> <div class="linklist-item-buttons pure-u-0 pure-u-lg-visible"> <a href="#" aria-label="Replier" title="Replier" class="fold-button"><i class="fa fa-chevron-up" aria-hidden="true"></i></a> </div> </div> <div class="mobile-buttons pure-u-1 pure-u-lg-0"> <div class="linkqrcode"> <img data-permalink="https://www.sitepoint.com/headings-in-html-structure/" src="/liens/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> · <span> <a href="https://web.archive.org/web/https://www.sitepoint.com/headings-in-html-structure/"> <img class="linklist-plugin-icon" src="/liens/plugins/archiveorg/internetarchive.png" title="Voir sur archive.org" alt="archive.org" /> </a> </span> </div> </div> </div> </div> <div class="anchor" id="FMLbyQ"></div> <div class="linklist-item linklist-item" data-id="26025"> <div class="linklist-item-title"> <div class="linklist-item-thumbnail hidden" style="width:125px;height:90px;" data-async-thumbnail="1" > <div class="thumbnail"> <a href="https://htmhell.dev/35-a-perfectly-structured-button/" aria-hidden="true" tabindex="-1"> <img data-src="/liens/" class="b-lazy" src="" alt="" width="125" height="90" /> </a> </div> </div> <div class="linklist-item-editbuttons"> </div> <h2> <a href="https://htmhell.dev/35-a-perfectly-structured-button/" class="linklist-real-url"> <i class="fa fa-external-link" aria-hidden="true"></i> <span class="linklist-link">#35 a perfectly structured button - HTMHell</span> </a> </h2> </div> <div class="linklist-item-description"> <div class="markdown"><p>Cet article donne un exemple de bouton HTML invalide, et explique comment fixer ses problèmes.</p></div> </div> <div class="linklist-item-infos clear"> <div class="linklist-item-tags"> <i class="fa fa-tags" aria-hidden="true"></i> <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/html">html</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/button">button</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/bonnes-pratiques">bonnes-pratiques</a> </span> </div> <div class="linklist-item-infos-date-url-block pure-g"> <div class="linklist-item-infos-dateblock pure-u-lg-7-12 pure-u-1"> <a href="/liens/shaare/FMLbyQ" title="Permalien"> <span class="linkdate" title="Modifié : November 9, 2025 at 11:20:20 AM GMT+1"> <i class="fa fa-clock-o" aria-hidden="true"></i> November 9, 2025 at 11:20:20 AM GMT+1 * · </span> permalien </a> <div class="pure-u-0 pure-u-lg-visible"> · <div class="linkqrcode"> <img data-permalink="https://htmhell.dev/35-a-perfectly-structured-button/" src="/liens/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> · <span> <a href="https://web.archive.org/web/https://htmhell.dev/35-a-perfectly-structured-button/"> <img class="linklist-plugin-icon" src="/liens/plugins/archiveorg/internetarchive.png" title="Voir sur archive.org" alt="archive.org" /> </a> </span> </div> </div><div class="linklist-item-infos-url pure-u-lg-5-12 pure-u-1"> <a href="https://htmhell.dev/35-a-perfectly-structured-button/" aria-label="#35 a perfectly structured button - HTMHell" title="#35 a perfectly structured button - HTMHell"> <i class="fa fa-link" aria-hidden="true"></i> https://htmhell.dev/35-a-perfectly-structured-button/ </a> <div class="linklist-item-buttons pure-u-0 pure-u-lg-visible"> <a href="#" aria-label="Replier" title="Replier" class="fold-button"><i class="fa fa-chevron-up" aria-hidden="true"></i></a> </div> </div> <div class="mobile-buttons pure-u-1 pure-u-lg-0"> <div class="linkqrcode"> <img data-permalink="https://htmhell.dev/35-a-perfectly-structured-button/" src="/liens/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> · <span> <a href="https://web.archive.org/web/https://htmhell.dev/35-a-perfectly-structured-button/"> <img class="linklist-plugin-icon" src="/liens/plugins/archiveorg/internetarchive.png" title="Voir sur archive.org" alt="archive.org" /> </a> </span> </div> </div> </div> </div> <div class="anchor" id="isrUwA"></div> <div class="linklist-item linklist-item" data-id="25973"> <div class="linklist-item-title"> <div class="linklist-item-thumbnail hidden" style="width:125px;height:90px;" data-async-thumbnail="1" > <div class="thumbnail"> <a href="https://blog.jim-nielsen.com/2025/dont-forget-these-html-tags/" aria-hidden="true" tabindex="-1"> <img data-src="/liens/" class="b-lazy" src="" alt="" width="125" height="90" /> </a> </div> </div> <div class="linklist-item-editbuttons"> </div> <h2> <a href="https://blog.jim-nielsen.com/2025/dont-forget-these-html-tags/" class="linklist-real-url"> <i class="fa fa-external-link" aria-hidden="true"></i> <span class="linklist-link">Don’t Forget These Tags to Make HTML Work Like You Expect - Jim Nielsen’s Blog</span> </a> </h2> </div> <div class="linklist-item-description"> <div class="markdown"><p>Jim Nielsen rappelle dans ce billet les balises HTML essentielles à ne pas oublier pour que vos pages s’affichent correctement dans les navigateurs. Il met en avant quatre éléments clés :</p> <ul> <li><strong><code><!doctype html></code></strong> : évite le mode "quirks" et garantit un rendu cohérent.</li> <li><strong><code><html lang="en"></code></strong> : améliore l’accessibilité, le référencement et les outils locaux (comme la correction orthographique).</li> <li><strong><code><meta charset="utf-8"></code></strong> : assure un affichage correct des caractères spéciaux, emojis et symboles.</li> <li><strong><code><meta name="viewport" content="width=device-width,initial-scale=1.0"></code></strong> : rend le site responsive et évite un affichage miniature sur mobile.</li> </ul> <p>Un rappel utile pour éviter les pièges courants lors de la création de fichiers HTML basiques ! (via sebsauvage.net)</p></div> </div> <div class="linklist-item-infos clear"> <div class="linklist-item-tags"> <i class="fa fa-tags" aria-hidden="true"></i> <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/html">html</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/bonnes-pratiques">bonnes-pratiques</a> </span> </div> <div class="linklist-item-infos-date-url-block pure-g"> <div class="linklist-item-infos-dateblock pure-u-lg-7-12 pure-u-1"> <a href="/liens/shaare/isrUwA" title="Permalien"> <span class="linkdate" title="Modifié : October 27, 2025 at 8:48:12 PM GMT+1"> <i class="fa fa-clock-o" aria-hidden="true"></i> October 27, 2025 at 8:48:12 PM GMT+1 * · </span> permalien </a> <div class="pure-u-0 pure-u-lg-visible"> · <div class="linkqrcode"> <img data-permalink="https://blog.jim-nielsen.com/2025/dont-forget-these-html-tags/" src="/liens/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> · <span> <a href="https://web.archive.org/web/https://blog.jim-nielsen.com/2025/dont-forget-these-html-tags/"> <img class="linklist-plugin-icon" src="/liens/plugins/archiveorg/internetarchive.png" title="Voir sur archive.org" alt="archive.org" /> </a> </span> </div> </div><div class="linklist-item-infos-url pure-u-lg-5-12 pure-u-1"> <a href="https://blog.jim-nielsen.com/2025/dont-forget-these-html-tags/" aria-label="Don’t Forget These Tags to Make HTML Work Like You Expect - Jim Nielsen’s Blog" title="Don’t Forget These Tags to Make HTML Work Like You Expect - Jim Nielsen’s Blog"> <i class="fa fa-link" aria-hidden="true"></i> https://blog.jim-nielsen.com/2025/dont-forget-these-html-tags/ </a> <div class="linklist-item-buttons pure-u-0 pure-u-lg-visible"> <a href="#" aria-label="Replier" title="Replier" class="fold-button"><i class="fa fa-chevron-up" aria-hidden="true"></i></a> </div> </div> <div class="mobile-buttons pure-u-1 pure-u-lg-0"> <div class="linkqrcode"> <img data-permalink="https://blog.jim-nielsen.com/2025/dont-forget-these-html-tags/" src="/liens/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> · <span> <a href="https://web.archive.org/web/https://blog.jim-nielsen.com/2025/dont-forget-these-html-tags/"> <img class="linklist-plugin-icon" src="/liens/plugins/archiveorg/internetarchive.png" title="Voir sur archive.org" alt="archive.org" /> </a> </span> </div> </div> </div> </div> <div class="anchor" id="GyyjEA"></div> <div class="linklist-item linklist-item" data-id="25703"> <div class="linklist-item-title"> <div class="linklist-item-thumbnail hidden" style="width:125px;height:90px;" data-async-thumbnail="1" > <div class="thumbnail"> <a href="https://www.alsacreations.com/article/lire/552-strong-b-em-i-quelle-balise-utiliser-et-pourquoi.html" aria-hidden="true" tabindex="-1"> <img data-src="/liens/" class="b-lazy" src="" alt="" width="125" height="90" /> </a> </div> </div> <div class="linklist-item-editbuttons"> </div> <h2> <a href="https://www.alsacreations.com/article/lire/552-strong-b-em-i-quelle-balise-utiliser-et-pourquoi.html" class="linklist-real-url"> <i class="fa fa-external-link" aria-hidden="true"></i> <span class="linklist-link">STRONG, B, I, EM : gras ou italique, quelle balise utiliser et pourquoi ? - Alsacreations</span> </a> </h2> </div> <div class="linklist-item-description"> <div class="markdown"><p><strong>Balises <code><strong></code>, <code><b></code>, <code><em></code>, <code><i></code> : quand et pourquoi les utiliser ?</strong><br /> En HTML, le choix entre ces balises dépend avant tout de la <strong>sémantique</strong> : <code><strong></code> et <code><em></code> apportent du sens (importance ou emphase, utiles pour les lecteurs d’écran), tandis que <code><b></code> et <code><i></code> servent à une distinction visuelle ou typographique sans valeur sémantique. <code><strong></code> souligne un contenu crucial (avertissements, instructions), <code><em></code> modifie le sens d’une phrase par l’emphase. <code><b></code> attire l’attention sans importance particulière, et <code><i></code> s’emploie pour des termes techniques, noms d’œuvres ou mots étrangers. Pour un style purement décoratif, privilégiez le CSS avec <code><span></code>. L’objectif : séparer structure (HTML) et présentation (CSS) pour un code propre et accessible.</p></div> </div> <div class="linklist-item-infos clear"> <div class="linklist-item-tags"> <i class="fa fa-tags" aria-hidden="true"></i> <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/html">html</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/s%C3%A9mantique">sémantique</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/%3Cstrong%3E"><strong></a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/%3Cb%3E"><b></a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/%3Cem%3E"><em></a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/%3Ci%3E"><i></a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/guide">guide</a> </span> </div> <div class="linklist-item-infos-date-url-block pure-g"> <div class="linklist-item-infos-dateblock pure-u-lg-7-12 pure-u-1"> <a href="/liens/shaare/GyyjEA" title="Permalien"> <span class="linkdate" title="Modifié : August 21, 2025 at 8:00:09 AM GMT+2"> <i class="fa fa-clock-o" aria-hidden="true"></i> August 21, 2025 at 8:00:09 AM GMT+2 * · </span> permalien </a> <div class="pure-u-0 pure-u-lg-visible"> · <div class="linkqrcode"> <img data-permalink="https://www.alsacreations.com/article/lire/552-strong-b-em-i-quelle-balise-utiliser-et-pourquoi.html" src="/liens/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> · <span> <a href="https://web.archive.org/web/https://www.alsacreations.com/article/lire/552-strong-b-em-i-quelle-balise-utiliser-et-pourquoi.html"> <img class="linklist-plugin-icon" src="/liens/plugins/archiveorg/internetarchive.png" title="Voir sur archive.org" alt="archive.org" /> </a> </span> </div> </div><div class="linklist-item-infos-url pure-u-lg-5-12 pure-u-1"> <a href="https://www.alsacreations.com/article/lire/552-strong-b-em-i-quelle-balise-utiliser-et-pourquoi.html" aria-label="STRONG, B, I, EM : gras ou italique, quelle balise utiliser et pourquoi ? - Alsacreations" title="STRONG, B, I, EM : gras ou italique, quelle balise utiliser et pourquoi ? - Alsacreations"> <i class="fa fa-link" aria-hidden="true"></i> https://www.alsacreations.com/article/lire/552-strong-b-em-i-quelle-balise-utiliser-et-pourquoi.html </a> <div class="linklist-item-buttons pure-u-0 pure-u-lg-visible"> <a href="#" aria-label="Replier" title="Replier" class="fold-button"><i class="fa fa-chevron-up" aria-hidden="true"></i></a> </div> </div> <div class="mobile-buttons pure-u-1 pure-u-lg-0"> <div class="linkqrcode"> <img data-permalink="https://www.alsacreations.com/article/lire/552-strong-b-em-i-quelle-balise-utiliser-et-pourquoi.html" src="/liens/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> · <span> <a href="https://web.archive.org/web/https://www.alsacreations.com/article/lire/552-strong-b-em-i-quelle-balise-utiliser-et-pourquoi.html"> <img class="linklist-plugin-icon" src="/liens/plugins/archiveorg/internetarchive.png" title="Voir sur archive.org" alt="archive.org" /> </a> </span> </div> </div> </div> </div> <div class="anchor" id="3DFolA"></div> <div class="linklist-item linklist-item" data-id="25671"> <div class="linklist-item-title"> <div class="linklist-item-thumbnail hidden" style="width:125px;height:90px;" data-async-thumbnail="1" > <div class="thumbnail"> <a href="https://css-tricks.com/covering-hiddenuntil-found/" aria-hidden="true" tabindex="-1"> <img data-src="/liens/" class="b-lazy" src="" alt="" width="125" height="90" /> </a> </div> </div> <div class="linklist-item-editbuttons"> </div> <h2> <a href="https://css-tricks.com/covering-hiddenuntil-found/" class="linklist-real-url"> <i class="fa fa-external-link" aria-hidden="true"></i> <span class="linklist-link">Covering hidden=until-found | CSS-Tricks</span> </a> </h2> </div> <div class="linklist-item-description"> <div class="markdown"><p>L’attribut HTML <strong><code>hidden="until-found"</code></strong> permet de masquer du contenu tout en le rendant accessible via la recherche dans la page (<code>Ctrl+F</code>). Contrairement à <code>display: none</code> ou <code>visibility: hidden</code>, il utilise <code>content-visibility: hidden</code> en interne, ce qui cache visuellement le contenu sans l’exclure des résultats de recherche. Utile pour des cas comme des accordéons ou des sections cachées, il est déjà supporté par Chrome, Firefox et bientôt Safari. Une alternative à <code><details></code> pour des contenus masqués mais "trouvables", avec des polyfills possibles via le Shadow DOM en attendant une adoption universelle. Une future pseudo-classe <code>::search-text</code> pourrait même permettre de styliser les correspondances de recherche.</p></div> </div> <div class="linklist-item-infos clear"> <div class="linklist-item-tags"> <i class="fa fa-tags" aria-hidden="true"></i> <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/html">html</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/attribut">attribut</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/hidden">hidden</a> </span> </div> <div class="linklist-item-infos-date-url-block pure-g"> <div class="linklist-item-infos-dateblock pure-u-lg-7-12 pure-u-1"> <a href="/liens/shaare/3DFolA" title="Permalien"> <span class="linkdate" title="Modifié : August 16, 2025 at 7:15:12 AM GMT+2"> <i class="fa fa-clock-o" aria-hidden="true"></i> August 16, 2025 at 7:15:12 AM GMT+2 * · </span> permalien </a> <div class="pure-u-0 pure-u-lg-visible"> · <div class="linkqrcode"> <img data-permalink="https://css-tricks.com/covering-hiddenuntil-found/" src="/liens/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> · <span> <a href="https://web.archive.org/web/https://css-tricks.com/covering-hiddenuntil-found/"> <img class="linklist-plugin-icon" src="/liens/plugins/archiveorg/internetarchive.png" title="Voir sur archive.org" alt="archive.org" /> </a> </span> </div> </div><div class="linklist-item-infos-url pure-u-lg-5-12 pure-u-1"> <a href="https://css-tricks.com/covering-hiddenuntil-found/" aria-label="Covering hidden=until-found | CSS-Tricks" title="Covering hidden=until-found | CSS-Tricks"> <i class="fa fa-link" aria-hidden="true"></i> https://css-tricks.com/covering-hiddenuntil-found/ </a> <div class="linklist-item-buttons pure-u-0 pure-u-lg-visible"> <a href="#" aria-label="Replier" title="Replier" class="fold-button"><i class="fa fa-chevron-up" aria-hidden="true"></i></a> </div> </div> <div class="mobile-buttons pure-u-1 pure-u-lg-0"> <div class="linkqrcode"> <img data-permalink="https://css-tricks.com/covering-hiddenuntil-found/" src="/liens/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> · <span> <a href="https://web.archive.org/web/https://css-tricks.com/covering-hiddenuntil-found/"> <img class="linklist-plugin-icon" src="/liens/plugins/archiveorg/internetarchive.png" title="Voir sur archive.org" alt="archive.org" /> </a> </span> </div> </div> </div> </div> <div class="anchor" id="PoGmVg"></div> <div class="linklist-item linklist-item" data-id="25512"> <div class="linklist-item-title"> <div class="linklist-item-thumbnail hidden" style="width:125px;height:90px;" data-async-thumbnail="1" > <div class="thumbnail"> <a href="https://www.otsukare.info/2025/06/13/quick-html-test-case" aria-hidden="true" tabindex="-1"> <img data-src="/liens/" class="b-lazy" src="" alt="" width="125" height="90" /> </a> </div> </div> <div class="linklist-item-editbuttons"> </div> <h2> <a href="https://www.otsukare.info/2025/06/13/quick-html-test-case" class="linklist-real-url"> <i class="fa fa-external-link" aria-hidden="true"></i> <span class="linklist-link">Quick HTML test case - otsukare</span> </a> </h2> </div> <div class="linklist-item-description"> <div class="markdown"><p>L'article explique comment créer un cas de test HTML simple pour signaler un bug ou un comportement inattendu. Il recommande d'utiliser des outils en ligne comme jsfiddle ou codepen, mais préfère souvent les URLs de type data: pour partager du code rapidement. L'auteur illustre cela avec un exemple de code HTML et JavaScript qui extrait une valeur de style, montrant les différences de résultats entre les navigateurs. Il démontre comment condenser ce code en une seule ligne et l'utiliser directement dans la barre d'URL d'un navigateur. Enfin, il mentionne avoir ouvert un rapport de bug pour le problème discuté.</p></div> </div> <div class="linklist-item-infos clear"> <div class="linklist-item-tags"> <i class="fa fa-tags" aria-hidden="true"></i> <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/test">test</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/html">html</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/tip">tip</a> </span> </div> <div class="linklist-item-infos-date-url-block pure-g"> <div class="linklist-item-infos-dateblock pure-u-lg-7-12 pure-u-1"> <a href="/liens/shaare/PoGmVg" title="Permalien"> <span class="linkdate" title="Modifié : June 20, 2025 at 6:18:23 AM GMT+2"> <i class="fa fa-clock-o" aria-hidden="true"></i> June 20, 2025 at 6:18:23 AM GMT+2 * · </span> permalien </a> <div class="pure-u-0 pure-u-lg-visible"> · <div class="linkqrcode"> <img data-permalink="https://www.otsukare.info/2025/06/13/quick-html-test-case" src="/liens/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> · <span> <a href="https://web.archive.org/web/https://www.otsukare.info/2025/06/13/quick-html-test-case"> <img class="linklist-plugin-icon" src="/liens/plugins/archiveorg/internetarchive.png" title="Voir sur archive.org" alt="archive.org" /> </a> </span> </div> </div><div class="linklist-item-infos-url pure-u-lg-5-12 pure-u-1"> <a href="https://www.otsukare.info/2025/06/13/quick-html-test-case" aria-label="Quick HTML test case - otsukare" title="Quick HTML test case - otsukare"> <i class="fa fa-link" aria-hidden="true"></i> https://www.otsukare.info/2025/06/13/quick-html-test-case </a> <div class="linklist-item-buttons pure-u-0 pure-u-lg-visible"> <a href="#" aria-label="Replier" title="Replier" class="fold-button"><i class="fa fa-chevron-up" aria-hidden="true"></i></a> </div> </div> <div class="mobile-buttons pure-u-1 pure-u-lg-0"> <div class="linkqrcode"> <img data-permalink="https://www.otsukare.info/2025/06/13/quick-html-test-case" src="/liens/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> · <span> <a href="https://web.archive.org/web/https://www.otsukare.info/2025/06/13/quick-html-test-case"> <img class="linklist-plugin-icon" src="/liens/plugins/archiveorg/internetarchive.png" title="Voir sur archive.org" alt="archive.org" /> </a> </span> </div> </div> </div> </div> <div class="anchor" id="5Ti2Qg"></div> <div class="linklist-item linklist-item" data-id="25332"> <div class="linklist-item-title"> <div class="linklist-item-thumbnail hidden" style="width:125px;height:90px;" data-async-thumbnail="1" > <div class="thumbnail"> <a href="https://blog.eleven-labs.com/fr/concevoir-barre-recherche-accessible-react-html/" aria-hidden="true" tabindex="-1"> <img data-src="/liens/" class="b-lazy" src="" alt="" width="125" height="90" /> </a> </div> </div> <div class="linklist-item-editbuttons"> </div> <h2> <a href="https://blog.eleven-labs.com/fr/concevoir-barre-recherche-accessible-react-html/" class="linklist-real-url"> <i class="fa fa-external-link" aria-hidden="true"></i> <span class="linklist-link">Blog Eleven Labs - Concevoir une barre de recherche accessible en React et HTML</span> </a> </h2> </div> <div class="linklist-item-description"> <div class="markdown"><p>L'article propose un guide complet pour créer une barre de recherche conforme aux normes d'accessibilité RGAA. Il inclut des bonnes pratiques, des erreurs à éviter, et des exemples de code en HTML et React/MUI pour aider les développeurs à concevoir des interfaces utilisateur inclusives et fonctionnelles<br /> .</p></div> </div> <div class="linklist-item-infos clear"> <div class="linklist-item-tags"> <i class="fa fa-tags" aria-hidden="true"></i> <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/barre-de-recherche">barre-de-recherche</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/accessibilit%C3%A9">accessibilité</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/RGAA">RGAA</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/bonnes-pratiques">bonnes-pratiques</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/React">React</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/html">html</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/aria2">aria2</a> </span> </div> <div class="linklist-item-infos-date-url-block pure-g"> <div class="linklist-item-infos-dateblock pure-u-lg-7-12 pure-u-1"> <a href="/liens/shaare/5Ti2Qg" title="Permalien"> <span class="linkdate" title="Modifié : April 21, 2025 at 7:24:12 AM GMT+2"> <i class="fa fa-clock-o" aria-hidden="true"></i> April 21, 2025 at 7:24:12 AM GMT+2 * · </span> permalien </a> <div class="pure-u-0 pure-u-lg-visible"> · <div class="linkqrcode"> <img data-permalink="https://blog.eleven-labs.com/fr/concevoir-barre-recherche-accessible-react-html/" src="/liens/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> · <span> <a href="https://web.archive.org/web/https://blog.eleven-labs.com/fr/concevoir-barre-recherche-accessible-react-html/"> <img class="linklist-plugin-icon" src="/liens/plugins/archiveorg/internetarchive.png" title="Voir sur archive.org" alt="archive.org" /> </a> </span> </div> </div><div class="linklist-item-infos-url pure-u-lg-5-12 pure-u-1"> <a href="https://blog.eleven-labs.com/fr/concevoir-barre-recherche-accessible-react-html/" aria-label="Blog Eleven Labs - Concevoir une barre de recherche accessible en React et HTML" title="Blog Eleven Labs - Concevoir une barre de recherche accessible en React et HTML"> <i class="fa fa-link" aria-hidden="true"></i> https://blog.eleven-labs.com/fr/concevoir-barre-recherche-accessible-react-html/ </a> <div class="linklist-item-buttons pure-u-0 pure-u-lg-visible"> <a href="#" aria-label="Replier" title="Replier" class="fold-button"><i class="fa fa-chevron-up" aria-hidden="true"></i></a> </div> </div> <div class="mobile-buttons pure-u-1 pure-u-lg-0"> <div class="linkqrcode"> <img data-permalink="https://blog.eleven-labs.com/fr/concevoir-barre-recherche-accessible-react-html/" src="/liens/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> · <span> <a href="https://web.archive.org/web/https://blog.eleven-labs.com/fr/concevoir-barre-recherche-accessible-react-html/"> <img class="linklist-plugin-icon" src="/liens/plugins/archiveorg/internetarchive.png" title="Voir sur archive.org" alt="archive.org" /> </a> </span> </div> </div> </div> </div> <div class="anchor" id="YH6Nqg"></div> <div class="linklist-item linklist-item" data-id="24945"> <div class="linklist-item-title"> <div class="linklist-item-thumbnail hidden" style="width:125px;height:90px;" data-async-thumbnail="1" > <div class="thumbnail"> <a href="https://htmhell.dev/adventcalendar/2023/4/" aria-hidden="true" tabindex="-1"> <img data-src="/liens/" class="b-lazy" src="" alt="" width="125" height="90" /> </a> </div> </div> <div class="linklist-item-editbuttons"> </div> <h2> <a href="https://htmhell.dev/adventcalendar/2023/4/" class="linklist-real-url"> <i class="fa fa-external-link" aria-hidden="true"></i> <span class="linklist-link">Back to Basics: 5 HTML attributes for improved accessibility and user experience - HTMHell</span> </a> </h2> </div> <div class="linklist-item-description"> <div class="markdown"><p>5 attributs HTML pour améliorer l'accessibilité :</p> <ol> <li>hreflang -> indique la langue de la page pointée par un lien</li> <li>translate -> si on met "no" on indique que le terme ne doit pas être traduit (pratique pour les noms de ville, etc.)</li> <li>reversed -> utile pour les éléments ordonnées <ol></li> <li>controls -> affiche les contrôles pour les vidéos ou la musique</li> <li>autocomplete -> indique au navigateur d'afficher l'autocomplétion, on peut même préciser où chercher (nom du champ)</li> </ol></div> </div> <div class="linklist-item-infos clear"> <div class="linklist-item-tags"> <i class="fa fa-tags" aria-hidden="true"></i> <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/attribut">attribut</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/html">html</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/accessibilit%C3%A9">accessibilité</a> </span> </div> <div class="linklist-item-infos-date-url-block pure-g"> <div class="linklist-item-infos-dateblock pure-u-lg-7-12 pure-u-1"> <a href="/liens/shaare/YH6Nqg" title="Permalien"> <span class="linkdate" title="Modifié : January 12, 2025 at 8:30:40 AM GMT+1"> <i class="fa fa-clock-o" aria-hidden="true"></i> January 12, 2025 at 8:30:40 AM GMT+1 * · </span> permalien </a> <div class="pure-u-0 pure-u-lg-visible"> · <div class="linkqrcode"> <img data-permalink="https://htmhell.dev/adventcalendar/2023/4/" src="/liens/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> · <span> <a href="https://web.archive.org/web/https://htmhell.dev/adventcalendar/2023/4/"> <img class="linklist-plugin-icon" src="/liens/plugins/archiveorg/internetarchive.png" title="Voir sur archive.org" alt="archive.org" /> </a> </span> </div> </div><div class="linklist-item-infos-url pure-u-lg-5-12 pure-u-1"> <a href="https://htmhell.dev/adventcalendar/2023/4/" aria-label="Back to Basics: 5 HTML attributes for improved accessibility and user experience - HTMHell" title="Back to Basics: 5 HTML attributes for improved accessibility and user experience - HTMHell"> <i class="fa fa-link" aria-hidden="true"></i> https://htmhell.dev/adventcalendar/2023/4/ </a> <div class="linklist-item-buttons pure-u-0 pure-u-lg-visible"> <a href="#" aria-label="Replier" title="Replier" class="fold-button"><i class="fa fa-chevron-up" aria-hidden="true"></i></a> </div> </div> <div class="mobile-buttons pure-u-1 pure-u-lg-0"> <div class="linkqrcode"> <img data-permalink="https://htmhell.dev/adventcalendar/2023/4/" src="/liens/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> · <span> <a href="https://web.archive.org/web/https://htmhell.dev/adventcalendar/2023/4/"> <img class="linklist-plugin-icon" src="/liens/plugins/archiveorg/internetarchive.png" title="Voir sur archive.org" alt="archive.org" /> </a> </span> </div> </div> </div> </div> <div class="anchor" id="TVQWhQ"></div> <div class="linklist-item linklist-item" data-id="24943"> <div class="linklist-item-title"> <div class="linklist-item-thumbnail hidden" style="width:125px;height:90px;" data-async-thumbnail="1" > <div class="thumbnail"> <a href="https://htmhell.dev/adventcalendar/2023/2/" aria-hidden="true" tabindex="-1"> <img data-src="/liens/" class="b-lazy" src="" alt="" width="125" height="90" /> </a> </div> </div> <div class="linklist-item-editbuttons"> </div> <h2> <a href="https://htmhell.dev/adventcalendar/2023/2/" class="linklist-real-url"> <i class="fa fa-external-link" aria-hidden="true"></i> <span class="linklist-link">You don't need JavaScript for that - HTMHell</span> </a> </h2> </div> <div class="linklist-item-description"> <div class="markdown"><p>L'auteur rappelle le principe de moindre pouvoir : choisir le langage le moins puissant pour un but donné — on permet ainsi de laisser le navigateur la manière d'accomplir ce que l'on souhaite.</p> <p>Il présente ensuite quelques éléments / fonctionnalités pour lesquelles JavaScript peut être remplacé avantageusement par du HTML / CSS :</p> <ul> <li>Custom Switches</li> <li>Datalist, un composant avec autocomplétion native</li> <li>Un Color picker</li> <li>Accordions</li> <li>Dialog modals</li> </ul> <p>Il rappelle à chaque fois les meilleures pratiques d'accessibilité.</p></div> </div> <div class="linklist-item-infos clear"> <div class="linklist-item-tags"> <i class="fa fa-tags" aria-hidden="true"></i> <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/JavaScript">JavaScript</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/css3">css3</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/html">html</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/custom-switch">custom-switch</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/datalist">datalist</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/color-picker">color-picker</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/accordion">accordion</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/modal">modal</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/roundup">roundup</a> </span> </div> <div class="linklist-item-infos-date-url-block pure-g"> <div class="linklist-item-infos-dateblock pure-u-lg-7-12 pure-u-1"> <a href="/liens/shaare/TVQWhQ" title="Permalien"> <span class="linkdate" title="Modifié : January 12, 2025 at 8:19:46 AM GMT+1"> <i class="fa fa-clock-o" aria-hidden="true"></i> January 12, 2025 at 8:19:46 AM GMT+1 * · </span> permalien </a> <div class="pure-u-0 pure-u-lg-visible"> · <div class="linkqrcode"> <img data-permalink="https://htmhell.dev/adventcalendar/2023/2/" src="/liens/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> · <span> <a href="https://web.archive.org/web/https://htmhell.dev/adventcalendar/2023/2/"> <img class="linklist-plugin-icon" src="/liens/plugins/archiveorg/internetarchive.png" title="Voir sur archive.org" alt="archive.org" /> </a> </span> </div> </div><div class="linklist-item-infos-url pure-u-lg-5-12 pure-u-1"> <a href="https://htmhell.dev/adventcalendar/2023/2/" aria-label="You don't need JavaScript for that - HTMHell" title="You don't need JavaScript for that - HTMHell"> <i class="fa fa-link" aria-hidden="true"></i> https://htmhell.dev/adventcalendar/2023/2/ </a> <div class="linklist-item-buttons pure-u-0 pure-u-lg-visible"> <a href="#" aria-label="Replier" title="Replier" class="fold-button"><i class="fa fa-chevron-up" aria-hidden="true"></i></a> </div> </div> <div class="mobile-buttons pure-u-1 pure-u-lg-0"> <div class="linkqrcode"> <img data-permalink="https://htmhell.dev/adventcalendar/2023/2/" src="/liens/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> · <span> <a href="https://web.archive.org/web/https://htmhell.dev/adventcalendar/2023/2/"> <img class="linklist-plugin-icon" src="/liens/plugins/archiveorg/internetarchive.png" title="Voir sur archive.org" alt="archive.org" /> </a> </span> </div> </div> </div> </div> <div class="anchor" id="wWWzzg"></div> <div class="linklist-item linklist-item" data-id="24940"> <div class="linklist-item-title"> <div class="linklist-item-thumbnail hidden" style="width:125px;height:90px;" data-async-thumbnail="1" > <div class="thumbnail"> <a href="https://htmhell.dev/adventcalendar/2022/21/" aria-hidden="true" tabindex="-1"> <img data-src="/liens/" class="b-lazy" src="" alt="" width="125" height="90" /> </a> </div> </div> <div class="linklist-item-editbuttons"> </div> <h2> <a href="https://htmhell.dev/adventcalendar/2022/21/" class="linklist-real-url"> <i class="fa fa-external-link" aria-hidden="true"></i> <span class="linklist-link">A Theory of Web Relativity - HTMHell</span> </a> </h2> </div> <div class="linklist-item-description"> <div class="markdown"><p>Utilisation de l'attribut "rel" et des différentes valeurs permises</p></div> </div> <div class="linklist-item-infos clear"> <div class="linklist-item-tags"> <i class="fa fa-tags" aria-hidden="true"></i> <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/rel">rel</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/link">link</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/html">html</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/relation">relation</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/performance">performance</a> </span> </div> <div class="linklist-item-infos-date-url-block pure-g"> <div class="linklist-item-infos-dateblock pure-u-lg-7-12 pure-u-1"> <a href="/liens/shaare/wWWzzg" title="Permalien"> <span class="linkdate" title="Modifié : January 11, 2025 at 8:04:42 AM GMT+1"> <i class="fa fa-clock-o" aria-hidden="true"></i> January 11, 2025 at 8:04:42 AM GMT+1 * · </span> permalien </a> <div class="pure-u-0 pure-u-lg-visible"> · <div class="linkqrcode"> <img data-permalink="https://htmhell.dev/adventcalendar/2022/21/" src="/liens/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> · <span> <a href="https://web.archive.org/web/https://htmhell.dev/adventcalendar/2022/21/"> <img class="linklist-plugin-icon" src="/liens/plugins/archiveorg/internetarchive.png" title="Voir sur archive.org" alt="archive.org" /> </a> </span> </div> </div><div class="linklist-item-infos-url pure-u-lg-5-12 pure-u-1"> <a href="https://htmhell.dev/adventcalendar/2022/21/" aria-label="A Theory of Web Relativity - HTMHell" title="A Theory of Web Relativity - HTMHell"> <i class="fa fa-link" aria-hidden="true"></i> https://htmhell.dev/adventcalendar/2022/21/ </a> <div class="linklist-item-buttons pure-u-0 pure-u-lg-visible"> <a href="#" aria-label="Replier" title="Replier" class="fold-button"><i class="fa fa-chevron-up" aria-hidden="true"></i></a> </div> </div> <div class="mobile-buttons pure-u-1 pure-u-lg-0"> <div class="linkqrcode"> <img data-permalink="https://htmhell.dev/adventcalendar/2022/21/" src="/liens/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> · <span> <a href="https://web.archive.org/web/https://htmhell.dev/adventcalendar/2022/21/"> <img class="linklist-plugin-icon" src="/liens/plugins/archiveorg/internetarchive.png" title="Voir sur archive.org" alt="archive.org" /> </a> </span> </div> </div> </div> </div> <div class="anchor" id="rCc4kA"></div> <div class="linklist-item linklist-item" data-id="24920"> <div class="linklist-item-title"> <div class="linklist-item-thumbnail hidden" style="width:125px;height:90px;" data-async-thumbnail="1" > <div class="thumbnail"> <a href="https://www.smashingmagazine.com/2025/01/lesser-known-uses-better-known-attributes/" aria-hidden="true" tabindex="-1"> <img data-src="/liens/" class="b-lazy" src="" alt="" width="125" height="90" /> </a> </div> </div> <div class="linklist-item-editbuttons"> </div> <h2> <a href="https://www.smashingmagazine.com/2025/01/lesser-known-uses-better-known-attributes/" class="linklist-real-url"> <i class="fa fa-external-link" aria-hidden="true"></i> <span class="linklist-link">Lesser Known Uses Of Better Known Attributes — Smashing Magazine</span> </a> </h2> </div> <div class="linklist-item-description"> <div class="markdown"><p>Tout est dans le titre</p></div> </div> <div class="linklist-item-infos clear"> <div class="linklist-item-tags"> <i class="fa fa-tags" aria-hidden="true"></i> <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/html">html</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/attribute">attribute</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/roundup">roundup</a> </span> · <span class="label label-tag" title="Ajouter un tag"> <a href="/liens/add-tag/guide">guide</a> </span> </div> <div class="linklist-item-infos-date-url-block pure-g"> <div class="linklist-item-infos-dateblock pure-u-lg-7-12 pure-u-1"> <a href="/liens/shaare/rCc4kA" title="Permalien"> <span class="linkdate" title="Modifié : January 9, 2025 at 5:58:34 AM GMT+1"> <i class="fa fa-clock-o" aria-hidden="true"></i> January 9, 2025 at 5:58:34 AM GMT+1 * · </span> permalien </a> <div class="pure-u-0 pure-u-lg-visible"> · <div class="linkqrcode"> <img data-permalink="https://www.smashingmagazine.com/2025/01/lesser-known-uses-better-known-attributes/" src="/liens/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> · <span> <a href="https://web.archive.org/web/https://www.smashingmagazine.com/2025/01/lesser-known-uses-better-known-attributes/"> <img class="linklist-plugin-icon" src="/liens/plugins/archiveorg/internetarchive.png" title="Voir sur archive.org" alt="archive.org" /> </a> </span> </div> </div><div class="linklist-item-infos-url pure-u-lg-5-12 pure-u-1"> <a href="https://www.smashingmagazine.com/2025/01/lesser-known-uses-better-known-attributes/" aria-label="Lesser Known Uses Of Better Known Attributes — Smashing Magazine" title="Lesser Known Uses Of Better Known Attributes — Smashing Magazine"> <i class="fa fa-link" aria-hidden="true"></i> https://www.smashingmagazine.com/2025/01/lesser-known-uses-better-known-attributes/ </a> <div class="linklist-item-buttons pure-u-0 pure-u-lg-visible"> <a href="#" aria-label="Replier" title="Replier" class="fold-button"><i class="fa fa-chevron-up" aria-hidden="true"></i></a> </div> </div> <div class="mobile-buttons pure-u-1 pure-u-lg-0"> <div class="linkqrcode"> <img data-permalink="https://www.smashingmagazine.com/2025/01/lesser-known-uses-better-known-attributes/" src="/liens/plugins/qrcode/qrcode.png" class="linklist-plugin-icon qrcode" title="QR-Code" alt="QRCode"> </div> · <span> <a href="https://web.archive.org/web/https://www.smashingmagazine.com/2025/01/lesser-known-uses-better-known-attributes/"> <img class="linklist-plugin-icon" src="/liens/plugins/archiveorg/internetarchive.png" title="Voir sur archive.org" alt="archive.org" /> </a> </span> </div> </div> </div> </div> </div> </div> </div> <div id="plugin_zone_end_linklist" class="plugin_zone"> </div> <div id="linklist-paging-bottom-block" class="pure-g link-count-block"> <div class="pure-u-lg-2-24 pure-u-1-24"></div> <div id="linklist-paging-bottom-content" class="pure-u-lg-20-24 pure-u-22-24"> <div class="linklist-paging"> <div class="paging pure-g"> <div class="linklist-filters pure-u-1-3"> <span class="linklist-filters-text pure-u-0 pure-u-lg-visible"> Filtres </span> <a href="/liens/untagged-only" aria-label="Filtrer par liens sans tag" title="Filtrer par liens sans tag" class="filter-off" ><i class="fa fa-tag" aria-hidden="true"></i></a> <a href="#" class="filter-off fold-all pure-u-lg-0" aria-label="Replier tout" title="Replier tout"> <i class="fa fa-chevron-up" aria-hidden="true"></i> </a> </div> <div class="linklist-pages pure-u-1-3"> <span class="strong">1 / 7</span> <a href="?page=2&searchtags=html" class="paging_older"> <i class="fa fa-arrow-circle-right"></i> </a> </div> <div class="linksperpage pure-u-1-3"> <div class="pure-u-0 pure-u-lg-visible">Liens par page</div> <a href="/liens/links-per-page?nb=20" class="selected">20</a> <a href="/liens/links-per-page?nb=50" >50</a> <a href="/liens/links-per-page?nb=100" >100</a> <form method="GET" class="pure-u-0 pure-u-lg-visible" action="/liens/links-per-page"> <input type="text" name="nb" placeholder="133" > </form> <a href="#" class="filter-off fold-all pure-u-0 pure-u-lg-visible" aria-label="Replier tout" title="Replier tout"> <i class="fa fa-chevron-up" aria-hidden="true"></i> </a> </div> </div> </div> </div> </div> </main> <div class="pure-g"> <div class="pure-u-2-24"></div> <footer id="footer" class="pure-u-20-24 footer-container" role="contentinfo"> <i class="fa fa-shaarli" aria-hidden="true"></i> <strong><a href="https://github.com/shaarli/Shaarli">Shaarli</a></strong> · Le gestionnaire de marque-pages personnel, minimaliste, et sans base de données par la communauté Shaarli · <a href="/liens/doc/html/index.html" rel="nofollow">Documentation</a> </footer> <div class="pure-u-2-24"></div> </div> <script src="/liens/plugins/qrcode/shaarli-qrcode.js"></script> <script src="/liens/plugins/playvideos/youtube_playlist.js"></script> <div id="js-translations" class="hidden" aria-hidden="true"> <span id="translation-fold">Replier</span> <span id="translation-fold-all">Replier tout</span> <span id="translation-expand">Déplier</span> <span id="translation-expand-all">Déplier tout</span> <span id="translation-delete-link">Êtes-vous sûr de vouloir supprimer ce lien ?</span> <span id="translation-delete-tag">Êtes-vous sûr de vouloir supprimer ce tag ?</span> <span id="translation-shaarli-desc"> Le gestionnaire de marque-pages personnel, minimaliste, et sans base de données par la communauté Shaarli </span> </div> <input type="hidden" name="js_base_path" value="/liens" /> <input type="hidden" name="token" value="ba762d7c59337dde8e78e35fa8763b53e3c16662" id="token" /> <input type="hidden" name="tags_separator" value=" " id="tags_separator" /> <script src="/liens/tpl/default/js/shaarli.min.js?v=8ba283f85e9a4dc050ce550fb96a14315538546b28852cf4bd5372ee6fdd7f20"></script> <script src="/liens/tpl/default/js/thumbnails.min.js?v=8ba283f85e9a4dc050ce550fb96a14315538546b28852cf4bd5372ee6fdd7f20"></script> </body> </html>
