Un billet de blog contenant tous les éléments HTML

 (patrickweaver.net)
5 points par GN⁺ 2023-08-14 | 1 commentaires | Partager sur WhatsApp
  • En étudiant l’accessibilité web, Patrick Weaver a expérimenté le HTML sémantique en appliquant plus de 100 balises HTML sur une vraie page de son site personnel basé sur Eleventy
  • L’objectif initial était d’éviter d’être freiné plus tard, lors de l’écriture d’articles, par le CSS d’éléments peu familiers, mais terminer ce seul billet lui a pris un an et demi
  • En se basant sur la liste des éléments HTML de MDN Web Docs, il a réexaminé des éléments structurels comme , , , , ,
  • Des éléments moins familiers comme , , , , , révèlent des cas d’usage concrets autour de la direction du texte, de la notation de prononciation, de la sortie de programme, des retours à la ligne, de l’interaction et des web components
  • Entre le support navigateur, la génération de sites statiques, la lecture vidéo dans Safari ou le comportement des balises dépréciées, il subsiste des traces de compatibilité entre le sens du HTML et son implémentation réelle

Point de départ et objectif de l’expérience

  • Après avoir approfondi l’accessibilité web, il a commencé à examiner des éléments HTML peu utilisés et à les intégrer à son site personnel
  • Le site a été construit avec Eleventy, le contenu des billets de blog est enveloppé dans , et a été ajouté au template de mise en page
  • Il avait déjà peaufiné les styles de et pour les légendes d’images, et s’intéressait aussi à une implémentation de footnotes ou sidenotes liée à Recurse
  • En prenant comme référence la liste des éléments HTML de MDN Web Docs, il a décidé d’utiliser tous les éléments dans un seul billet
    • Le but était d’éviter que de futures mises à jour CSS soient retardées à cause d’éléments jamais utilisés auparavant lors de la rédaction d’un article
    • En pratique, corriger les styles et les templates pour ce seul billet lui a pris un an et demi
  • Il existe des éléments difficiles à insérer directement dans le corps d’un article, comme ``, mais l’ensemble du site patrickweaver.net est organisé de sorte que tous les éléments apparaissent quelque part dans la page

Structure du document et éléments de métadonnées

  • `` n’a nécessité aucun changement particulier, mais l’expérience lui a rappelé qu’il n’est pas toujours facile de penser systématiquement à des attributs lang comme lang="en"
  • Il connaissait peu `` avant d’écrire cet article, puis l’a ajouté au template de mise en page avec des liens relatifs
    • Quelques problèmes sont apparus en développement local et avec les liens relatifs, mais ils ont été résolus facilement
    • , , , , `` étaient déjà des éléments familiers présents sur le site
  • En lisant la documentation de ``, il a découvert des attributs comme onbeforeprint et onblur
    • onbeforeprint est lié à une fonctionnalité qu’il gérait auparavant de façon plus détournée
    • onblur lui a surtout fait penser à des pop-ups agaçantes

Sections de contenu et hiérarchie des titres

  • Il pensait que `` était réservé aux adresses postales, mais a appris qu’il peut aussi servir pour une adresse e-mail et des liens
  • Le template des billets de blog utilisait déjà ``, et après lecture de la documentation, il s’est demandé si cela pouvait convenir à toutes les pages du site
  • Il utilise `` pour la zone de footnotes
    • `` représente un contenu indirectement lié au contenu principal du document
    • Cela laisse la possibilité d’un style futur proche des sidenotes
  • Le design du site n’incluait pas initialement ``, mais il l’a ajouté à cet article
  • Il n’utilisait `` qu’en haut de page, puis a vérifié qu’on pouvait en avoir plusieurs et l’a aussi appliqué à la zone d’en-tête de chaque billet
  • Il a également revu la hiérarchie des titres
    • Auparavant, le nom du site était en , le nom de section en , et le titre de l’article en ``
    • Après avoir lu la documentation et les conseils du W3C, il a modifié cela pour que la cible de `` varie selon la page, tandis que le style est géré par des classes
    • Il a jugé cette approche plus conforme à la séparation des responsabilités entre HTML et CSS
  • Après avoir commencé l’expérience début 2022 et avant sa publication à l’été 2023, et ont été ajoutés à la documentation MDN
    • sert à regrouper un titre de section et son sous-titre
    • `` est un élément sémantique qui représente une saisie de recherche, et non des résultats de recherche
    • Comme le site est généré statiquement, il n’y a pas de génération côté serveur de résultats de recherche, donc l’exemple nécessite du JavaScript
    • En 2023, il n’avait pas vu `` ni dans la recherche du header de MDN ni sur google.com
  • faisait partie de ses curiosités initiales quand il a commencé cette exploration, et après avoir lu la liste MDN, il a ajouté au menu supérieur
  • Il a aussi intégré `` dans l’article, mais en mélangeant Markdown et HTML, il est visuellement difficile de garder une imbrication claire, donc il n’est pas certain de l’utiliser souvent ailleurs

Observations tirées des éléments de contenu textuel

  • Il avait déjà utilisé `` dans des embeds de tweets, mais pour cet article il a ajouté un style de citation autonome
    • Avant de lire la documentation en détail, il ne connaissait ni l’attribut cite de ni l’élément
  • , , sont des éléments qu’il a découverts tardivement, et comparé à et , il trouve étrange que soit relativement moins connu
    • et ont une marge par défaut, mais a une marge sur
  • `` a mauvaise réputation sur le web moderne à cause de son abus, mais sur ce site il était peu utilisé au départ
    • Leur nombre est monté à une vingtaine environ à mesure qu’il fallait styliser d’autres éléments avec eux
    • Cela montre que sur un site qui n’a pas beaucoup de “sections” au sens courant, de nombreux `` peuvent être inutiles
  • et font partie des premiers éléments ajoutés lorsqu’il a migré des articles depuis Medium pour exprimer sémantiquement les légendes d’images
    • D’après la documentation, `` peut servir non seulement pour des images, mais aussi pour des illustrations, diagrammes ou extraits de code
    • Il estime qu’il y a actuellement beaucoup de blocs de code qui pourraient aussi être marqués avec ``
  • Il a revu le style de `` après avoir lu dans la documentation qu’il est défini comme une séparation sémantique et non une simple ligne horizontale visuelle
    • Il a ajouté un emoji via hr:after, mais doit encore vérifier comment cela se comporte avec les lecteurs d’écran
  • était pour lui un élément inconnu, et il a été surpris qu’il soit resté jusqu’à HTML5 alors que les navigateurs le traitent en pratique comme
  • La documentation de `` contenait moins de recommandations qu’il ne l’attendait et lui a laissé la question de savoir si un texte long, ou non, est “vraiment un paragraphe”
  • Il voyait `` seulement comme un élément de bloc de code, mais a confirmé qu’il peut aussi servir à représenter des espaces significatifs

Éléments sémantiques de texte en ligne

  • Il utilisait [link](#) comme placeholder, mais cela pointait en réalité vers le haut de la page
  • `` lui a semblé être la balise la moins susceptible d’être utilisée, MDN la décrivant comme “pour la commodité de l’auteur”
  • La différence entre et ne correspondait pas à sa compréhension précédente selon laquelle aurait remplacé en HTML5
    • Comme règle pratique, il retient d’utiliser en général au niveau du mot et au niveau de la phrase ou du groupe de mots
    • Il s’agit d’une règle empirique qui simplifie la distinction réelle
  • `` sert à gérer du texte dont la direction peut différer de celle du texte environnant
    • L’exemple donné est un nom, mais il estime que cela s’applique aussi à du texte Unicode saisi librement par un utilisateur
    • À l’avenir, il compte envelopper dans `` les balises pouvant contenir une saisie arbitraire
  • Comme il traite rarement des langues RTL, il pense moins utiliser ``, mais juge utile de savoir gérer de petites quantités de texte RTL
  • a connu par le passé des usages détournés comme ``, mais il pense que cela est moins probable maintenant que le CSS est plus puissant
    • Le fait que l’exemple de la documentation soit un poème l’amène à se demander comment a été pensée la frontière entre paragraphe et ligne indépendante
    • Dans certains cas, `` pourrait être plus approprié
  • et réexpriment en HTML sémantique des significations déjà souvent visibles via la ponctuation dans de nombreuses langues
    • Le style par défaut de est l’italique et ajoute des guillemets absents du texte lui-même
  • a été beaucoup utilisé dans l’article, et il s’est demandé si le support Markdown de Google Docs utilisait, mais en inspectant le HTML il a vu que Google Docs rend actuellement cela avec ``
  • `` lui a semblé difficile à rattacher à un cas d’usage concret, l’exemple MDN associant un ID produit à un nom de produit via value
    • Si l’ID doit être visible, autant l’afficher ; s’il ne doit pas l’être, on ne sait pas bien pour qui cette donnée existe
    • Il a vérifié que `` n’apparaît pas dans la spécification HTML5 du W3C
  • `` n’enveloppe pas la définition elle-même mais un terme à l’intérieur de la définition, ce qui lui fait trouver son nom étrange
    • Il conclut qu’il ne semble figurer que dans une proposition HTML 2.0 jamais adoptée officiellement
  • et l’ont aussi amené à réfléchir à leurs critères d’usage, comme pour et
    • Comme règle pratique, il retient globalement pour les mots et pour les phrases ou groupes de mots
    • Les exemples de la documentation utilisent souvent `` pour attirer l’attention sur des formulations potentiellement ambiguës
  • `` est destiné à désigner des touches de clavier, mais il s’interroge sur la limite avec des actions comme “Right click”
  • `` lui a donné l’impression d’être une trace d’un web d’écriture bidirectionnelle, comme si l’utilisateur pouvait surligner un livre
  • , , `` servent en typographie est-asiatique à fournir des informations de prononciation, de traduction ou de translittération
    • `` sert à masquer les parenthèses présentes dans le source
  • `` est un élément de texte barré représentant un texte auparavant correct mais désormais inexact ou non pertinent
    • Il a été déprécié en HTML 4.01 puis sa sémantique a été redéfinie en HTML5
    • Certains lecteurs d’écran n’annoncent pas le barré, ce qui peut créer de la confusion, et il a ajouté sur son site le CSS recommandé par MDN
  • sert à représenter une sortie de programme, et il a mis à jour un article sur Raspberry Pi qui utilisait auparavant vers ``
  • `` sert au rendu de petit texte, mais il pense continuer à s’appuyer surtout sur le CSS dans la plupart des cas
  • En lisant la documentation de , il s’est demandé pour la première fois pourquoi on autorise des styles contradictoires comme ou ``
  • et ont peut-être déjà été implémentés chez lui en CSS, mais il les a appliqués à des footnotes et à des exemples de formules
  • `` lui a paru utile pour un HTML sémantique et il l’a appliqué aux dates des billets de blog
    • Il a observé que même les résultats de recherche Google ne semblent pas utiliser ``
  • `` est présenté par MDN comme un élément qu’on ne veut “réellement pas utiliser dans la plupart des cas”, son principal usage recommandé semblant être l’indication des fautes d’orthographe
  • représente sémantiquement une chaîne de variables mathématiques ou de programmation, et il l’a utilisé avec dans un exemple du théorème de Pythagore
  • `` résout le problème des mots longs, surtout les URL, en permettant de forcer un retour à la ligne à des endroits précis
    • Ajouter des points de rupture dans une longue URL la rend plus lisible selon la largeur de l’écran
    • Même l’ajout de caractères tiret dans une URL crée des points de rupture clairs dans les navigateurs modernes
    • Les URL sans possibilité de retour à la ligne sont enveloppées dans un `` distinct et défilable pour éviter de casser la mise en page

Images, multimédia et intégration

  • et sont des éléments qu’il connaissait peu, malgré d’anciens sites reposant sur des sortes d’images maps
    • Signe qu’ils sont peu utilisés aujourd’hui, l’outil de débogage des contours de `` était difficile à exploiter
    • Lors du focus clavier, une seule frontière de `` était visible à la fois, et le style n’était pas appliqué
    • Il voit comme un doté d’une forme
  • `` est déjà une balise multimédia emblématique de HTML5 qu’il avait utilisée, mais il a été surpris de ne pas la voir aussi souvent que prévu dans les années 2020
    • Le lecteur Bandcamp est une combinaison d’UI custom , , mais utilise un caché
  • Avec ``, il a examiné de plus près l’attribut srcset
    • Il a créé une démo fournissant trois images différentes selon la largeur d’écran
    • Comme le cache navigateur et le scaled display influencent le comportement, il peut falloir une private window et un écran non mis à l’échelle ou non retina pour bien voir l’effet
  • et sont moins répandus que ``, et il estime que la vidéo en ligne s’est surtout centralisée autour de YouTube
    • L’audio reste plus distribué, sous forme de fichiers individuels comme pour les podcasts
  • `` comportait plusieurs contraintes
    • En self-closing tag, il ne s’affichait pas
    • Au moment de l’écriture, Safari pouvait ne pas prendre en charge la vidéo sur le serveur de développement parce que celui-ci ne gérait pas l’en-tête de requête “Range”
    • Il se demandait si la version hébergée sur GitHub Pages se lirait dans Safari
    • Le problème de `` venait d’une mauvaise configuration des fichiers .vtt dans le build Eleventy
  • et l’ont surpris par le fait qu’ils ne soient pas dépréciés, alors qu’une grande partie de leurs usages a été remplacée par des balises spécifiques comme et
  • a conservé ce nom très années 1990 d’“inline frame”, alors que a été déprécié en HTML5
    • Il a aussi vérifié qu’il est rendu avec display: inline
  • et sont conçus pour changer de version d’image selon des contextes différents
    • Il a créé un exemple montrant une icône d’ordinateur avec souris/trackpad, une icône de téléphone sur écran tactile, et une image de fallback si aucun des deux cas ne s’applique
  • `` lui a semblé être un élément expérimental lié aux aperçus de liens façon iPad et à des avantages de performance pour les SPA
    • En 2023, il n’était activé par défaut dans aucun navigateur
    • Il semble avoir existé un ancien flag expérimental de Chrome, mais il n’était plus disponible dans chrome://flags en 2023
    • Il ne semble pas faire partie de la spécification HTML 5, et sa présence dans la documentation MDN lui paraît incertaine

SVG, MathML et scripting

  • Il a trouvé intéressant que la documentation MDN regroupe et
    • `` est largement utilisé car il est facile à prototyper et à exporter via des outils comme Figma ou Sketch
    • `` lui paraît bien plus rare
  • Il a utilisé `` dans un exemple où il dessine directement un cercle
  • Il considère `` davantage comme un wrapper autour d’éléments non HTML de l’espace de noms MathML et n’y a placé qu’une formule simple
  • En 2020, au Recurse Center, il avait déjà exploré en profondeur la question du rendu net des lignes avec ``
    • Grâce à la documentation MDN, il a découvert que les navigateurs ont une taille maximale pour ``
    • Dans les navigateurs modernes, chaque dimension est de l’ordre de 32 000 pixels
    • Il a recréé un faux avec, ,
  • `` ne lui paraissait pas être un élément qui ferait daté, mais écrire ce billet lui a fait réaliser qu’il l’emploie rarement directement
    • La plupart du JavaScript est injectée par les outils de build dans une seule balise ``
    • Du coup, `` lui donne davantage l’impression d’un boilerplate que d’une vraie balise de markup
  • Il estime ne pas avoir assez utilisé `` sur les sites interactifs
    • En particulier, dans des SPA minifiées/compilées, l’absence de `` peut laisser l’utilisateur face à une page vide
    • Dans cet article, il a ajouté avec chaque balise

Marques d’édition, tableaux, formulaires et interaction

  • et sont des éléments qu’il a découverts pour la première fois dans la documentation MDN, et ils lui ont évoqué des éléments de traitement de texte
    • Cela lui a rappelé le rendu de Google Docs, mais il a vérifié qu’au final celui-ci utilise plutôt ``
  • `` a été surutilisé pour la mise en page dans le web des débuts, mais il trouve ironique qu’il soit aujourd’hui plus rare alors même que le web moderne manipule davantage de données
    • Il évoque comme raisons leur apparence par défaut peu séduisante et le fait que des données stockées en tables de base de données soient montrées dans l’interface web sous d’autres angles
    • Comme l’article lui-même est orienté document, il n’avait pas de vraies données tabulaires ; il a donc inclus un tableau d’exemple basé sur des données d’emoji correspondant peut-être à l’Apple emoji set de 2023
    • Il ne connaissait pas auparavant et, et ne sait pas s’il les utilisera plus souvent que des designs custom sans ``
  • `` et les éléments associés étaient généralement pour lui liés à une soumission qui mène à une nouvelle page, mais ils restent valables aussi pour des interactions utilisateur au sein de la page
    • Il estime que les éléments de formulaire sont peut-être les plus importants en matière d’accessibilité et compte davantage s’appuyer sur la documentation à l’avenir lors de leur implémentation
  • et sont souvent cités comme des exemples de “on peut le faire sans JavaScript”
    • Ce genre d’UI dépliable/repliable était une fonctionnalité qu’il avait d’abord construite en JavaScript ou jQuery, et il trouve intéressant qu’elle soit devenue simple avec quelques balises HTML
    • Il suppose que si cette idée avait été proposée aujourd’hui dans la spec HTML, elle aurait peut-être été retirée au profit d’un effet équivalent en CSS
  • `` est un élément dont il ignorait l’existence native en HTML
    • Pour qu’il soit utile au-delà d’un simple effet visuel, du JavaScript est nécessaire
    • Cela permet de créer des interactions plus personnalisées que alert(), tout en gardant une approche simple et stylable en CSS

Web components et éléments dépréciés

  • Les web components faisaient depuis longtemps partie des sujets qu’il voulait approfondir, et il a été heureux d’être amené à lire la section correspondante de MDN
  • Le fait que leur rendu nécessite du JavaScript et la syntaxe Class l’a surpris
    • Après avoir lu davantage sur le Shadow DOM, cela lui a semblé logique, puisque le HTML n’intègre pas de mécanisme natif d’encapsulation des styles
    • Sur le plan conceptuel, cela lui a paru avoir un certain air de famille avec ``
  • Il a utilisé des web components avec et pour créer la table des matières de l’article
    • Il n’a pas trouvé rapidement comment passer des propriétés, sous forme d’attributs sur des éléments template enfants, comme dans un composant de framework frontend
    • Il a donc passé à chaque enfant l’élément `` complet afin de définir le bon href à l’intérieur de `
  • `
  • Il a aussi inclus des éléments HTML dépréciés à la fin de l’article
    • , , , , `` sont des exemples de fonctionnalités de mise en page déplacées vers le CSS
    • et faisaient partie de la spec des web components, mais comme leur implémentation est restée incomplète, il n’a pas pu vraiment les mettre en œuvre
    • ressemble à un façon serveur web pour lister un répertoire, et il l’a utilisé pour un exemple de listing de répertoire sur un site statique Eleventy
  • et ont été conçus pour être utilisés à la place de , ce qui les rend difficiles à insérer directement dans le corps courant ; il ne les a utilisés qu’à l’intérieur de
  • `` lui paraissait devoir être inopérant d’après l’explication de MDN indiquant qu’il ne faisait pas partie de la spécification officielle, mais il semblait pourtant fonctionner dans certains navigateurs en 2023
    • Il pense que cela peut venir d’un fallback pour éviter une confusion avec ``
  • `` est annoncé comme partiellement pris en charge dans Firefox 8 à 84, mais il n’a pas réussi à faire fonctionner l’exemple, même sur une ancienne version installée localement
  • se rapproche d’un fallback comme, alors qu’il est déprécié, tandis que `` reste dans la spec, ce qu’il trouve surprenant
  • lui semble d’une existence distincte peu claire alors qu’un attribut existe déjà
    • Quand il a commencé l’article, il se trouvait encore dans la section “Embedding Content” de MDN, puis il a été déprécié avant qu’il termine
  • `` fait partie des éléments dépréciés qui fonctionnent réellement, ce qu’il juge notable
    • Utilisé tel quel, tout le reste de la page est rendu comme code source, donc il l’a enveloppé dans ``
  • et avaient des balises fermantes, ce qui permettait de les employer dans le corps du texte pour afficher du code source ou du monospace façon teletype
  • et servaient à indiquer la prononciation de caractères est-asiatiques, mais il conclut que la spec a depuis été simplifiée
  • Il a aussi ajouté `` en consultant d’autres listes de balises HTML, bien qu’il n’apparaisse pas dans la liste MDN
  • Une ancienne liste MDN de 2013 contenait des éléments comme , , ,
    • `` est aujourd’hui ignoré par la plupart des navigateurs pour des raisons d’accessibilité
    • `` ne fonctionne pas dans les navigateurs modernes et correspond à une fonctionnalité qui devrait relever du CSS
    • `` laisse entrevoir une vision plus multimédia du document web
    • `` semble venir d’un monde sans JavaScript
  • Il mentionne aussi `` sans l’essayer
  • Il a découvert tardivement qu’il n’existe pas d’implémentation HTML native pour les footnotes

À lire aussi

1 commentaires

 
GN⁺ 2023-08-14
Avis sur Hacker News

  • L’auteur semble trop jeune pour se souvenir des frames :) Je voulais seulement mettre un lien vers l’article Wikipédia (https://en.wikipedia.org/wiki/Frame_(World_Wide_Web)), mais l’explication n’est pas terrible. Quand le Web des débuts s’est démocratisé, les frames étaient couramment utilisées pour les menus, les barres latérales, les en-têtes toujours visibles, etc. On voyait souvent une mise en page avec un en-tête fixe en haut, une barre latérale à gauche et une frame de contenu au centre. Chaque frame se comportait de manière assez indépendante, avec son propre historique précédent/suivant, si bien que les liens ne modifiaient souvent par défaut que la frame concernée. Résultat : retour arrière, avance et rafraîchissement n’étaient pas intuitifs, et si le mauvais contenu se chargeait dans une frame, il était difficile de s’en remettre autrement qu’en revenant depuis le début. Heureusement que CSS a remplacé la plupart des principaux usages des frames ; du point de vue utilisateur, les frames étaient vraiment pénibles à gérer.

    • Un des usages des frames dont je me souviens était celui des sites d’indexation d’autres sites. Il y avait plusieurs liens dans une barre latérale à gauche, et le site correspondant s’ouvrait dans la frame de droite. À l’époque où les onglets de navigateur n’existaient pas, c’était un usage plutôt correct : parcourir une liste de liens dans une frame au sein d’une seule fenêtre était mieux que de naviguer dans l’historique ou de gérer plusieurs fenêtres.
    • Eric Meyer, le roi de CSS, conserve lui aussi son ancienne documentation de référence CSS sous forme de page à frames : https://meyerweb.com/eric/css/references/css1ref.html
    • Le premier site Web que j’ai créé sur GeoCities dans les années 90 utilisait aussi frameset, avec exactement la mise en page décrite plus haut.
    • https://tintara.tripod.com/FramesSuck.html
    • et ne sont plus simplement déconseillés : ce sont depuis longtemps des éléments obsolètes : https://html.spec.whatwg.org/dev/obsolete.html#obsolete

  • Le sujet est brièvement abordé, mais je trouve absurde qu’il n’existe toujours pas de déclaration CSS standard simple pour masquer quelque chose à l’écran tout en le laissant aux lecteurs d’écran. Jusqu’ici, je n’ai vu que des astuces qui utilisent encore clip, déplacent le contenu hors de la page, ou des choses similaires. Je ne comprends pas pourquoi ce n’est pas une valeur alternative de display, ou une propriété supplémentaire. La propriété speak, qui pourrait régler ça, traînait bien dans un des modules CSS théoriques, mais à ma connaissance son adoption par les implémentations est quasi nulle.

  • À propos de l’élément qui a dérouté l’auteur : **HTML 5.2** a été abandonné par le W3C en 2021 et remplacé par le HTML Living Standard du WhatWG. Contrairement à HTML 5.2, le standard WhatWG n’a pas abandonné et l’a redéfini comme « une barre d’outils sous forme de liste non ordonnée d’éléments li représentant des commandes que l’utilisateur peut exécuter ou activer ». La liste des éléments de Wikipédia et les informations sur les versions de HTML semblent datées sur ce point, et est encore vivant. Cela dit, vu son historique de multiples déconseils et le fait que même des navigateurs récents ont eu du mal à lui attribuer une sémantique exacte, il vaut presque toujours mieux utiliser avec le rôle ARIA approprié (toolbar, menu, menubar).

  • Si la plupart de ces éléments ne sont pas largement utilisés, c’est parce qu’ils étaient soit d’anciennes tentatives de résoudre des problèmes qui n’existent plus, soit, comme l’auteur le reconnaît, des choses que CSS résout mieux, soit des éléments très dépendants de l’implémentation des navigateurs. Par exemple, j’avais beaucoup d’espoir lorsque et sont arrivés dans tous les navigateurs à mise à jour continue, mais il fallait JavaScript pour les ouvrir en glissant de façon guidée plutôt que de déployer brutalement le contenu. La meilleure implémentation que j’aie vue utilisait WAAPI, et Safari a même ajouté ses propres pseudo-éléments.

    • Même sans JavaScript, une animation de glissement est possible, mais elle n’est pas très jolie à la fermeture ; à l’ouverture, elle fonctionne bien : https://codepen.io/dada1smo/pen/LYydWBg Ce n’est pas mon code, je l’ai trouvé dans les commentaires d’un lien css-tricks.
    • était autrefois une balise de mise en forme, mais avec HTML5, c’est devenu une balise pour les **mentions en petits caractères** (*fine print*).[1] Les balises de pure mise en forme comme ont été déconseillées puis supprimées depuis longtemps. [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small

  • Les balises / peuvent être imbriquées. Une fois, je m’en suis servi pour créer un jeu d’aventure à choix multiples et le mettre sur l’intranet de l’entreprise. J’avais un script de génération qui assemblait les fragments, et le texte réel ne faisait que quelques pages, mais le HTML atteignait 5 Mo. Ce jour-là, j’ai cassé beaucoup de navigateurs, et j’ai finalement dû le supprimer.

    • C’est intéressant, mais je ne comprends pas bien. J’aimerais en savoir plus sur la façon dont l’imbrication de details/summary a abouti à 5 Mo de HTML, et comment cela a cassé de nombreux navigateurs.

  • Ça me rappelle l’époque où j’ai appris HTML pour la première fois, vers 1995. Quelqu’un se souvient du Barebones Guide to HTML de Kevin Werbach ? C’était un site qui listait pratiquement toutes les balises HTML et leur rôle. Avec cette ressource, un éditeur de texte et une première version de Netscape Navigator, on pouvait apprendre et expérimenter tout de suite.

  • Il y a quelques jours, en essayant de créer un agent IA de navigation Web, j’ai été choqué de voir que les commentaires de Hacker News étaient implémentés comme une table dans une table dans une table.

    • En l’apprenant, j’en ai au contraire été ravi. J’ai créé un userContent.css pour rendre HN plus lisible : j’ai limité la largeur du corps, mis line-height à 1.5em et ajouté une marge supérieure supplémentaire à tous les paragraphes. Désormais, je n’ai plus à lire péniblement HN avec 250 caractères par ligne dans un navigateur large. Chaque paragraphe est devenu plus facile à lire, et la séparation entre paragraphes se voit plus nettement que le simple interligne.

  • Le HTML sémantique a un énorme potentiel. Personnellement, j’aime le style qui place les notes de bas de page du corps de texte dans la marge droite, dans une police plus petite ou semi-transparente, avec si besoin des éléments dépliables /. Mais pour réellement implémenter ce genre de style, il semble qu’il faille à chaque fois connaître CSS assez en détail pour que ça fonctionne correctement.

  • Tout d’abord, c’est vraiment une excellente façon d’apprendre et un bon exercice. C’est aussi amusant de voir l’auteur tomber sur de vieux éléments aujourd’hui inutilisés, qui nous avaient enthousiasmés à l’époque quand on a soudain pu les utiliser, et essayer d’en deviner l’usage. Cela dit, du point de vue de quelqu’un qui écrit du HTML à la main depuis toutes les versions postérieures à Mosaic, je n’aime pas que MDN renomme rétroactivement des choses, comme avec description list. Je préfère le definition list de la spécification d’origine. Pour moi, il est plus naturel de voir dl, dt et dd comme « liste de définitions », « terme défini » et « définition ». description est certes un terme plus large que definition, mais si l’on pense à definition list, il est plus facile de se rappeler qu’un dl contient des termes (dt) et des définitions (dd). Le W3C l’appelle aussi definition list : https://www.w3.org/TR/html4/struct/lists.html#edef-DL

  • Avez-vous déjà vu, dans le monde réel, un cas qui va jusqu’à `` ?

    • Oui. Mon premier poste tech était dans une agence de marketing hyperlocale, et je passais le plus clair de mon temps à mettre à jour les menus de restaurants et les informations de vente de petits commerces locaux. Les menus de restaurant pouvaient avoir une hiérarchie absurdement profonde, parce que beaucoup de restaurants avaient beaucoup trop de plats. Pour présenter correctement les sticks de mozzarella et les arancini, il fallait parfois une hiérarchie du genre Restaurant -> Menu -> Antipasti -> For Groups -> Fried -> Cheesy.
    • Oui. On en voit dans les spécifications ou d’autres documents techniques. Par exemple, la spécification HTML[1] elle-même en est un cas. [1]: https://html.spec.whatwg.org/#link-type-next
    • C’est l’un de ces trucs agaçants. Je ne comprends pas pourquoi c’est limité à 1–6, au lieu d’autoriser un attribut permettant de spécifier une taille arbitraire.
    • J’ai réalisé une version web d’un énorme livre écrit par mon ancien professeur et patron ; il utilisait clairement six niveaux de titres, et il en aurait peut-être même fallu davantage.