Ein Blogbeitrag mit jedem HTML-Element

 (patrickweaver.net)
5 Punkte von GN⁺ 2023-08-14 | 1 Kommentare | Auf WhatsApp teilen
  • Während er Web Accessibility lernte, experimentierte Patrick Weaver auf seiner persönlichen, auf Eleventy basierenden Website mit semantischem HTML, indem er über 100 HTML-Tags auf einer echten Seite einsetzte
  • Das ursprüngliche Ziel war, sich beim künftigen Schreiben nicht von CSS für ungewohnte Elemente ausbremsen zu lassen, doch die Fertigstellung dieses einen Beitrags dauerte anderthalb Jahre
  • Ausgehend von der Liste der HTML-Elemente in den MDN Web Docs überprüfte er strukturelle Elemente wie , , , , , erneut
  • Weniger vertraute Elemente wie , , , , , zeigen konkrete Einsatzfälle wie Schreibrichtung, Ausspracheangaben, Programmausgabe, Zeilenumbrüche, Interaktivität und Web Components
  • Zwischen Browser-Support, Static-Site-Generierung, Safari-Videowiedergabe und dem Verhalten deprecateder Tags bleiben Spuren von Kompatibilität zwischen der Bedeutung von HTML und seiner tatsächlichen Implementierung sichtbar

Ausgangspunkt und Ziel des Experiments

  • Nachdem er mehr über Web Accessibility gelernt hatte, begann er, sich HTML-Elemente anzusehen, die man nicht oft verwendet, und sie auf seiner persönlichen Website einzusetzen
  • Die Website wurde mit Eleventy erstellt, der Inhalt von Blogbeiträgen wird mit umschlossen, und im Layout-Template wurde ergänzt
  • Für Bildunterschriften hatte er und bereits gestylt, und auch an einer Umsetzung von Recurse-bezogenen footnotes oder sidenotes hatte er Interesse
  • Anhand der Liste der HTML-Elemente in den MDN Web Docs beschloss er, alle Elemente in einem einzigen Beitrag zu verwenden
    • Das Ziel war, dass beim späteren Schreiben keine CSS-Updates mehr verzögert werden, nur weil ein bisher ungenutztes Element auftaucht
    • Tatsächlich dauerte es anderthalb Jahre, allein für diesen einen Beitrag Styles und Templates anzupassen
  • Auch Elemente wie `` lassen sich nicht leicht direkt in den Fließtext einbauen, aber auf patrickweaver.net ist die Seite so aufgebaut, dass irgendwo jedes Element verwendet wird

Dokumentstruktur und Metadaten-Elemente

  • Bei `` waren keine besonderen Änderungen nötig, aber er stellte fest, dass er sich nicht immer an lang-Attribute wie lang="en" erinnert
  • Mit `` war er vor dem Schreiben dieses Beitrags nicht vertraut und ergänzte es danach zusammen mit relativen Links im Layout-Template
    • Bei lokaler Entwicklung und relativen Links traten einige Probleme auf, die sich aber leicht lösen ließen
    • , , , , `` waren ihm bereits vertraut und auf der Site schon vorhanden
  • Beim Lesen der Dokumentation zu `` stieß er auf Attribute wie onbeforeprint und onblur
    • onbeforeprint betrifft eine Funktion, die er früher auf umständlichere Weise gelöst hatte
    • onblur wirkte auf ihn so, als sei der Hauptanwendungsfall etwas wie lästige Pop-ups

Inhaltsabschnitte und Überschriftenhierarchie

  • Er dachte, `` sei nur für Postanschriften gedacht, stellte aber fest, dass es auch für E-Mail-Adressen und Links verwendet werden kann
  • Im Blogpost-Template nutzte er bereits ``, und nach der Lektüre der Dokumentation überlegte er, ob es auch auf alle Seiten der Website passt
  • Für den footnote-Bereich verwendet er ``
    • `` steht für Inhalte, die mit dem Hauptinhalt des Dokuments nur indirekt zusammenhängen
    • Das lässt die Möglichkeit offen, ihn später eher wie eine sidenote zu gestalten
  • Im Design der Website gab es ursprünglich kein ``, aber für diesen Beitrag ergänzte er es
  • `` verwendete er bisher nur am oberen Seitenrand, stellte aber fest, dass mehrere davon erlaubt sind, und nutzte es nun auch im Header jedes Blogbeitrags
  • Auch die Überschriftenhierarchie wurde bereinigt
    • Bisher nutzte er den Namen der Website als , den Abschnittsnamen als und den Beitragstitel als ``
    • Nach der Lektüre von Dokumentation und W3C-Tipps änderte er es so, dass sich das Ziel von `` je nach Seite unterscheidet und das Styling per Klassen erfolgt
    • Das hielt er für passender zur Trennung von Zuständigkeiten zwischen HTML und CSS
  • Zwischen dem Start des Experiments Anfang 2022 und der Veröffentlichung im Sommer 2023 wurden und zur MDN-Dokumentation hinzugefügt
    • dient dazu, eine Abschnittsüberschrift mit einem Untertitel zu gruppieren
    • `` ist ein semantisches Element für Such-Eingaben, nicht für Suchergebnisse
    • Da es sich um eine statisch generierte Website handelt und keine serverseitigen Suchergebnisse erzeugt werden, braucht das Beispiel JavaScript
    • 2023 sah er `` weder in der MDN-Header-Suche noch auf google.com
  • gehörte zu den frühen Neugierpunkten, die diese Erkundung auslösten, und nach der MDN-Liste ergänzte er im oberen Menü
  • Auch `` setzte er im Beitrag ein, ist aber unsicher, ob er es anderswo oft verwenden wird, weil bei gemischtem Markdown und HTML die visuelle Verschachtelung schwer sauber zu halten ist

Beobachtungen zu Textinhalt-Elementen

  • `` hatte er zuvor für eingebettete Tweets verwendet, für diesen Beitrag ergänzte er aber einen Stil für eigenständige Zitate
    • Vor genauerer Lektüre der Dokumentation kannte er weder das cite-Attribut von noch das Element
  • , , entdeckte er erst spät, und im Vergleich zu und fand er es merkwürdig, dass relativ unbekannt ist
    • und haben standardmäßig margin, bei hat dagegen margin
  • `` hat wegen seines Übergebrauchs im modernen Web einen schlechten Ruf, wurde auf dieser Site anfangs aber sparsam verwendet
    • Als weitere gemeinsam zu stylende Elemente hinzukamen, wuchs die Zahl auf etwa 20
    • Das zeigt, dass auf einer Website ohne viele typische „sections“ zahlreiche `` unnötig sein können
  • und gehörten zu den frühen Elementen, die er beim Umzug von Artikeln von Medium ergänzte, um Bildunterschriften semantisch auszudrücken
    • Laut Dokumentation lässt sich `` nicht nur für Bilder, sondern auch für Illustrationen, Diagramme und Code-Snippets nutzen
    • Er meint, auch viele seiner aktuellen Codeblöcke könnten mit `` ausgezeichnet werden
  • Für `` sah er sich die Styles erneut an, nachdem er in der Dokumentation gelesen hatte, dass es sich nicht um eine rein visuelle horizontale Linie, sondern um eine semantische Trennung handelt
    • Er fügte hr:after ein Emoji hinzu, muss aber noch prüfen, wie Screenreader damit umgehen
  • war für ihn ein neues Element, und es überraschte ihn, dass es bis HTML5 erhalten blieb, obwohl Browser es im Grunde wie behandeln
  • Die Dokumentation zu `` bot weniger Hinweise als erwartet und ließ die Frage offen, ob ein längerer Text wirklich ein Absatz ist
  • `` verstand er bisher nur als Element für Codeblöcke, stellte aber fest, dass es auch bedeutungsvolle Leerzeichen ausdrücken kann

Inline-Textsemantik

  • [link](#) hatte er wie einen Placeholder verwendet, tatsächlich war es aber ein Link zum Seitenanfang
  • `` wirkte aufgrund der MDN-Beschreibung als „für die Bequemlichkeit der Autorin bzw. des Autors“ wie das Tag, das er am wenigsten verwenden wird
  • Der Unterschied zwischen und wich von seinem bisherigen Verständnis ab, nach dem in HTML5 ersetzt habe
    • Als praktische Faustregel hält er fest, meist für einzelne Wörter und für Sätze oder Phrasen zu verwenden
    • Ihm ist bewusst, dass das die echte Unterscheidung vereinfacht
  • `` ist ein Element für Text, dessen Schreibrichtung sich vom umgebenden Text unterscheiden kann
    • Das Beispiel in der Doku nutzt Namen, aber er hält es auch für beliebigen Unicode-Text aus Nutzereingaben geeignet
    • Künftig will er Tags, die beliebige Eingaben enthalten können, mit `` umschließen
  • `` werde er wohl seltener brauchen, weil er nicht oft mit RTL-Sprachen arbeitet, aber es sei nützlich zu wissen, wie man kleine Mengen RTL-Text behandelt
  • wurde früher ähnlich wie `` missbraucht, aber da CSS stärker geworden ist, dürfte das seltener vorkommen
    • Dass die Beispiele in der Dokumentation Gedichte sind, ließ ihn darüber nachdenken, wie die Grenze zwischen Absätzen und eigenständigen Zeilen gesehen wird
    • In manchen Fällen könnte `` passender sein
  • und bilden in HTML semantisch etwas ab, das in vielen Sprachen ohnehin schon durch sichtbare Satzzeichen dargestellt wird
    • Die Standardschreibweise von ist kursiv, fügt Anführungszeichen hinzu, die im Text selbst nicht stehen
  • kam im ganzen Beitrag häufig vor, und er fragte sich, ob die Markdown-Unterstützung von Google Docs dafür nutzt, stellte im HTML-Dokument aber fest, dass Google Docs derzeit `` rendert
  • `` war schwer praktisch einzuordnen, weil das MDN-Beispiel Produktnamen mit einer Produkt-ID im value-Attribut versieht
    • Wenn die ID für Nutzer sichtbar sein soll, sollte man sie lieber anzeigen; wenn nicht, bleibt unklar, für wen diese Daten gedacht sind
    • Er stellte fest, dass `` in der W3C HTML5 specification nicht auftaucht
  • `` umschließt nicht die Definition selbst, sondern einen Begriff innerhalb einer Definition, weshalb er den Namen seltsam fand
    • Er fasste zusammen, dass es wohl nur in einem nie offiziell übernommenen HTML-2.0-Vorschlag vorkam
  • und ließen ihn ähnlich wie und über Einsatzgrenzen nachdenken
    • Als praktische Regel will er meist für Wörter und für Sätze oder Phrasen verwenden
    • In der Dokumentation wird `` oft genutzt, um auf potenziell missverständliche Formulierungen aufmerksam zu machen
  • `` ist für Tastatureingaben gedacht, aber er fragte sich, wo die Grenze liegt, etwa bei Aktionen wie „Right click“
  • `` wirkte auf ihn wie ein Überbleibsel des bidirektionalen Webs als Veröffentlichungsmedium, ähnlich wie Markierungen mit Textmarker in einem Buch
  • , , `` werden in ostasiatischer Typografie verwendet, um Aussprache, Übersetzung oder Lautumschrift anzugeben
    • `` verbirgt dabei Klammerzeichen, die im Quelltext enthalten sind
  • `` ist ein Durchstreichungs-Element für Text, der früher korrekt war, jetzt aber nicht mehr zutrifft oder nicht mehr relevant ist
    • Es war in HTML 4.01 deprecated und wurde in HTML5 semantisch neu definiert
    • Da einige Screenreader Durchstreichungen nicht ansagen, kann es zu Verwirrung führen; deshalb ergänzte er die von MDN empfohlene CSS-Regel auf seiner Website
  • dient zur Kennzeichnung von Programmausgabe, und er aktualisierte einen älteren Raspberry-Pi-Beitrag von auf ``
  • `` rendert kleinen Text, aber er geht davon aus, meist weiterhin CSS zu verwenden
  • Beim Lesen der Dokumentation zu fragte er sich zum ersten Mal, warum HTML wie bei oder `` scheinbar widersprüchliche Styles zulässt
  • und hatte er vielleicht früher schon per CSS nachgebaut, setzte sie hier aber für footnotes und Formelbeispiele ein
  • `` erscheint ihm nützlich für semantisches HTML, deshalb nutzt er es für Datumsangaben bei Blogbeiträgen
    • Er beobachtete, dass selbst Google-Suchergebnisse `` offenbar nicht verwenden
  • `` ist laut MDN ein Element, das man „in den meisten Fällen eigentlich nicht verwenden möchte“, wobei das Markieren von Schreibfehlern als Hauptanwendungsfall erscheint
  • steht semantisch für Variablen in Mathematik oder Programmierung und wurde zusammen mit in einem Beispiel zum Satz des Pythagoras verwendet
  • `` löst das Problem, lange Wörter, besonders URLs, an bestimmten Stellen umbrechen zu lassen
    • Fügt man in lange URLs solche Umbruchstellen ein, brechen sie je nach Bildschirmbreite besser lesbar um
    • Auch Bindestriche innerhalb von URLs schaffen in modernen Browsern klare Umbruchpunkte
    • URLs ohne Umbruchstellen umschließt er zusätzlich mit einem separat scrollbar gemachten `` damit sie das Layout nicht sprengen

Bilder, Multimedia, Einbettungen

  • und waren für ihn ungewohnte Elemente, obwohl er früher Websites mit image-map-artigen Inhalten gebaut hatte
    • Dass sie heute kaum noch genutzt werden, zeigte sich auch daran, dass Debugging-Werkzeuge für ``-Grenzen schwer zu benutzen waren
    • Beim Tab-Fokus war immer nur die Grenze eines einzelnen `` sichtbar, und Styling funktionierte nicht
    • wirkt für ihn wie ein mit Form
  • `` kennt er als typisches Multimedia-Tag aus HTML5 und hatte es schon verwendet, war aber überrascht, es in den 2020ern seltener zu sehen als erwartet
    • Der Bandcamp-Player ist in seiner UI eine Kombination aus eigenen , und , nutzt aber im Hintergrund ein verstecktes
  • Bei `` sah er sich das srcset-Attribut genauer an
    • Er baute eine Demo, die je nach Bildschirmbreite drei unterschiedliche Bilder ausliefert
    • Weil Browser-Cache und scaled display das Verhalten beeinflussen, kann es sein, dass man für den Effekt ein private window und ein non-scaled oder non-retina display braucht
  • und sind weniger verbreitet als ``, und Online-Video wirkt für ihn weitgehend auf YouTube zentralisiert
    • Audio ist stärker dezentral organisiert, etwa wie bei Podcasts mit einzelnen Dateien
  • Bei `` gab es einige Einschränkungen
    • Als self-closing tag gerendert, wurde es nicht angezeigt
    • Zum Zeitpunkt des Schreibens unterstützte Safari Video womöglich nicht, weil der Entwicklungsserver den Request-Header „Range“ nicht unterstützte
    • Er fragte sich, ob die auf GitHub Pages veröffentlichte Hosting-Version in Safari abspielbar ist
    • Das Problem mit `` lag daran, dass die .vtt-Datei im Eleventy-Build nicht korrekt eingerichtet war
  • und überraschten ihn, weil sie trotz vieler durch spezifischere Tags wie und ersetzter Einsatzzwecke nicht deprecated sind
  • hat den 90er-Jahre-Namen „inline frame“ behalten, während in HTML5 deprecated wurde
    • Er stellte auch fest, dass es mit display: inline gerendert wird
  • und sind dafür gedacht, je nach Situation unterschiedliche Bildvarianten zu wechseln
    • Er baute ein Beispiel, das mit Maus/Trackpad ein Computer-Icon, auf Touchscreens ein Handy-Icon und sonst ein Fallback-Bild zeigt
  • `` wirkte wie ein experimentelles Element rund um Performance-Vorteile bei Dingen wie iPad-artigen Link-Vorschauen und SPAs
    • 2023 war es in keinem Browser standardmäßig aktiviert
    • Es schien früher einmal ein experimentelles Chrome-Flag gegeben zu haben, war aber 2023 unter chrome://flags nicht mehr verfügbar
    • In der HTML 5 Spec scheint es nicht vorzukommen, und weshalb es in der MDN-Dokumentation enthalten ist, blieb unklar

SVG, MathML, Scripting

  • Er fand interessant, dass die MDN-Dokumentation und gemeinsam gruppiert
    • `` ist dank Tools wie Figma und Sketch, die das Prototyping und den Export erleichtern, weit verbreitet
    • `` wirkt dagegen wie ein deutlich selteneres Element
  • `` nutzte er in einem Beispiel, in dem er selbst einen Kreis zeichnete
  • `` betrachtet er eher als Wrapper für Nicht-HTML-Elemente aus dem MathML-Namespace und fügte nur eine einfache Formel ein
  • `` hatte er 2020 im Recurse Center schon einmal intensiv betrachtet, als es um gestochen scharfe Linien ging
    • Durch die MDN-Dokumentation erfuhr er neu, dass es je nach Browser eine maximale Größe für `` gibt
    • In modernen Browsern liegt sie pro Dimension bei ungefähr 32.000 Pixeln
    • Mit , und baute er ein künstliches nach
  • `` hatte er nicht als veraltet wirkendes Element erwartet, merkte beim Schreiben aber, dass er es tatsächlich selten direkt nutzt
    • Die meisten JavaScript-Dateien werden von Build-Tools in ein einzelnes ``-Tag gebündelt
    • Dadurch wirkt `` weniger wie ein Markup-Tag als eher wie Boilerplate
  • `` hält er für ein Element, das er auf interaktiven Websites nicht oft genug eingesetzt hat
    • Gerade bei minified/compiled SPAs sehen Nutzer ohne `` womöglich nur eine leere Seite
    • In diesem Beitrag fügte er zu jedem -Tag auch hinzu

Bearbeitungsmarkierungen, Tabellen, Formulare, Interaktivität

  • und sah er erstmals in der MDN-Dokumentation und sie wirkten auf ihn wie etwas für Textverarbeitung
    • Er dachte auch an das Rendering von Google Docs, stellte aber erneut fest, dass dort stattdessen `` verwendet wird
  • `` wurde im frühen Web für Layoutzwecke überstrapaziert, während es im heutigen, datenreicheren Web ironischerweise eher selten wirkt
    • Als Gründe nennt er das grobe Standarddesign und dass Daten aus Datenbanktabellen in Web-UIs oft aus anderen Blickwinkeln dargestellt werden sollen
    • Da der Beitrag selbst dokumentbasiert ist, gibt es keine echten Tabellendaten; als Beispiel nutzte er aber Emoji-Daten, möglicherweise auf Basis des Apple emoji set von 2023
    • und kannte er vorher nicht, und er ist unsicher, ob er sie häufiger als ein individuelles Nicht-``-Design verwenden wird
  • `` und verwandte Elemente nutzte er meist, wenn beim Absenden eine neue Seite geladen wurde, sie sind aber auch für Interaktionen innerhalb derselben Seite gültig
    • Aus Sicht der Accessibility könnten Formularelemente die wichtigsten sein, daher will er künftig bei Implementierungen stärker in die Dokumentation schauen
  • und gelten oft als Paradebeispiel für „geht auch ohne JavaScript“
    • Solche Aufklapp-/Zuklapp-UIs hatte er früher zuerst mit JavaScript oder jQuery gebaut, und es fand es interessant, wie einfach das heute mit ein paar HTML-Tags ist
    • Er vermutet, dass ein solcher Vorschlag heute vielleicht aus dem HTML spec-Prozess zurückgezogen und durch CSS-nahe Effekte ersetzt würde
  • `` war für ihn ein Element, von dem er nicht wusste, dass es rein in HTML existiert
    • Um über bloße Styling-Effekte hinaus nützlich zu sein, braucht es JavaScript
    • Es bietet eine einfache Möglichkeit, individuellere Interaktionen als alert() zu bauen und dennoch per CSS gestylt zu werden

Web Components und deprecated Elemente

  • Web Components standen schon lange auf seiner Liste von Themen, zu denen er mehr lernen wollte, deshalb freute er sich, den entsprechenden MDN-Abschnitt zu lesen
  • Dass das Rendern von Web Components JavaScript und die Class-Syntax erfordert, überraschte ihn
    • Nach weiterer Lektüre zu Shadow DOM erschien es ihm aber logisch, weil HTML keine eingebaute Methode zur Style-Kapselung bietet
    • Konzeptuell wirkte das für ihn teilweise ähnlich wie ``
  • Mit und baute er den Web-Component-basierten Inhaltsüberblick des Beitrags
    • Er fand nicht schnell heraus, wie man wie bei Frontend-Framework-Komponenten Eigenschaften übergibt, die in Attributen von Template-Kindelementen verwendet werden
    • Deshalb übergab er jedem Kind das vollständige ``-Element, um innerhalb von `
  • das richtigehref` zu setzen
  • Auch deprecated HTML-Elemente nahm er am Ende des Beitrags auf
    • , , , , `` sind Beispiele dafür, wie layoutbezogene Funktionen nach CSS gewandert sind
    • und gehörten zwar zur Web-Components-Spezifikation, wurden aber nie vollständig umgesetzt, deshalb konnte er sie nicht praktisch implementieren
    • sieht aus wie ein webbserverartiges für Verzeichnislisten und wurde für ein Beispiel mit der Verzeichnisstruktur einer Eleventy-Website verwendet
  • und waren als Ersatz für gedacht und ließen sich daher nicht leicht direkt im normalen Fließtext einsetzen; er verwendete sie nur innerhalb von
  • Aufgrund der MDN-Erklärung, dass `` nie Teil der offiziellen specification war, erwartete er eigentlich, dass es nicht funktioniert, aber 2023 schien es in einigen Browsern zu laufen
    • Möglicherweise ist das ein Fallback wegen Verwechslungsgefahr mit ``
  • Für `` gibt MDN Teilunterstützung in Firefox 8 bis 84 an, doch selbst mit lokal installierten alten Versionen konnte er das Beispiel nicht zum Laufen bringen
  • erscheint wie ein Fallback ähnlich zu, ist aber deprecated, während `` in der specification geblieben ist, was ihn überraschte
  • Bei blieb für ihn unklar, warum es ein eigenes Element statt einfach eines-Attributs war
    • Als er mit dem Beitrag begann, stand es noch im Abschnitt „Embedding Content“ bei MDN, bis zum Abschluss war es deprecated
  • `` fiel unter den deprecateden Elementen dadurch auf, dass es tatsächlich noch funktioniert
    • Unverändert verwendet würde die restliche Seite danach als Quellcode gerendert, deshalb umschloss er es mit ``
  • und hatten schließende Tags und ließen sich deshalb im Beitrag zur Darstellung von source code oder teletype-artigem monospace Text einsetzen
  • und dienten ebenfalls zur Ausspracheanzeige ostasiatischer Zeichen, was für ihn so wirkte, als sei die specification später vereinfacht worden
  • Auch `` ergänzte er, obwohl es nicht in der MDN-Liste stand, nachdem er andere HTML-Tag-Listen geprüft hatte
  • In einer alten MDN-Liste von 2013 tauchten außerdem Elemente wie , , , auf
    • `` wird heute aus Accessibility-Gründen von den meisten Browsern ignoriert
    • `` funktioniert in modernen Browsern nicht und gehört funktional zu CSS
    • `` deutet eine Vision stärker multimedialer Web-Dokumente an
    • `` wirkt wie ein Element aus einer Welt ohne JavaScript
  • `` erwähnt er ebenfalls, probierte es aber nicht aus
  • Erst spät stellte er fest, dass es keine native HTML-Implementierung für footnotes gibt

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2023-08-14
Meinungen auf Hacker News

  • Der Autor scheint zu jung zu sein, um sich an Frames zu erinnern :) Ich wollte eigentlich nur auf den Wikipedia-Artikel (https://en.wikipedia.org/wiki/Frame_(World_Wide_Web)) verlinken, aber die Erklärung dort ist nicht besonders gut. Als das frühe Web populär wurde, wurden Frames häufig für Menüs, Sidebars, dauerhaft sichtbare Header usw. verwendet; typisch war ein fester Header oben, eine Sidebar links und ein Inhalts-Frame in der Mitte. Jeder Frame verhielt sich ziemlich eigenständig, etwa mit eigener Zurück-/Vorwärts-Historie, sodass Links standardmäßig oft nur diesen Frame änderten. Dadurch waren Zurück, Vorwärts und Neu laden nicht intuitiv, und wenn falsche Inhalte in einen Frame geladen wurden, war es schwierig, das zu beheben, ohne von vorn einzusteigen. Zum Glück hat CSS die wichtigsten Einsatzbereiche von Frames weitgehend ersetzt; aus Nutzersicht waren Frames wirklich schmerzhaft zu handhaben.

    • Ein Einsatzbereich von Frames, an den ich mich erinnere, waren Index-Sites für andere Websites. Links befand sich eine Sidebar mit mehreren Links, und im rechten Frame wurde die jeweilige Website geöffnet. In der Zeit vor Browser-Tabs war das ein ziemlich sinnvoller Anwendungsfall, und es war angenehmer, eine Linkliste in Frames innerhalb eines Fensters durchzugehen, als in der History hin- und herzuspringen oder mehrere Fenster zu verwalten.
    • Auch der CSS-König Eric Meyer hält seine alten CSS-Referenzdokumente noch als Frame-Seite vor: https://meyerweb.com/eric/css/references/css1ref.html
    • Auch meine erste Website, die ich in den 90ern auf GeoCities erstellt habe, verwendete frameset, und zwar genau mit dem oben beschriebenen Layout.
    • https://tintara.tripod.com/FramesSuck.html
    • und sind inzwischen nicht einfach nur nicht empfohlen, sondern seit Langem obsolete Elemente: https://html.spec.whatwg.org/dev/obsolete.html#obsolete

  • Es wird kurz angesprochen, aber es fühlt sich absurd an, dass es immer noch keine einfache Standard-CSS-Deklaration gibt, um etwas auf dem Bildschirm zu verstecken, es aber für Screenreader beizubehalten. Was ich bisher gesehen habe, verwendet weiterhin clip, verschiebt Inhalte aus der Seite heraus oder nutzt ähnliche Tricks. Ich verstehe nicht, warum das kein alternativer Wert für display oder eine zusätzliche Eigenschaft ist. Die Eigenschaft speak, die das lösen könnte, geisterte zwar in einem theoretischen CSS-Modul herum, aber soweit ich weiß, gibt es kaum Implementierungen.

  • Zu dem -Element, über das der Autor verwirrt war: **HTML 5.2** wurde 2021 vom W3C eingestellt und durch den WhatWG HTML Living Standard ersetzt. Anders als HTML 5.2 hat der WhatWG-Standard nicht abgeschafft, sondern es neu definiert als „eine Werkzeugleiste in Form einer ungeordneten Liste von li-Elementen, die Befehle darstellen, die der Nutzer ausführen oder aktivieren kann“. Die Elementliste und die Informationen zu HTML-Versionen auf Wikipedia scheinen hier veraltet zu sein, und lebt noch. Angesichts der Geschichte mehrfacher Nichtempfehlungen und der Tatsache, dass selbst neuere Browser Probleme hatten, ihm eine genaue Semantik zuzuweisen, ist es allerdings fast immer besser, mit einer passenden ARIA-Rolle (toolbar, menu, menubar) zu verwenden.

  • Die meisten dieser Elemente sind nicht weit verbreitet, weil sie alte Versuche waren, Probleme zu lösen, die nicht mehr existieren, weil sie sich, wie der Autor selbst einräumt, besser mit CSS lösen ließen, oder weil sie stark von Browser-Implementierungen abhingen. Als zum Beispiel und in allen laufend aktualisierten Browsern angekommen waren, hatte ich Hoffnungen, aber um Inhalte nicht plötzlich aufzuklappen, sondern sie für den Nutzer wie geführt gleitend zu öffnen, brauchte man JavaScript. Die beste Implementierung, die ich gesehen habe, verwendete WAAPI, und Safari fügte sogar eigene Pseudo-Elemente hinzu.

    • Slide-Animationen sind zwar auch ohne JavaScript möglich, aber beim Schließen sehen sie nicht besonders schön aus; beim Öffnen sind sie okay: https://codepen.io/dada1smo/pen/LYydWBg Das ist nicht mein Code; ich habe ihn in den Kommentaren zu einem css-tricks-Link gefunden.
    • war früher ein Formatierungs-Tag, wurde in HTML5 aber zu einem Tag für **Kleingedrucktes**.[1] Reine Formatierungs-Tags wie wurden schon vor langer Zeit als nicht empfohlen markiert und sind verschwunden. [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small

  • /-Tags kann man verschachteln. Ich habe damit einmal ein Choose-your-own-adventure-Spiel gebaut und ins Firmen-Intranet gestellt. Es gab ein Generierungsskript, das die Teile zusammensetzte, und der eigentliche Text umfasste nur ein paar Seiten, aber das HTML wurde 5 MB groß. An dem Tag habe ich viele Browser kaputtgemacht und musste es am Ende löschen.

    • Klingt interessant, aber ich verstehe es nicht ganz. Ich würde gern mehr darüber hören, wie die Verschachtelung von details/summary zu 5 MB HTML geführt hat und wie das viele Browser kaputtgemacht hat.

  • Das erinnert mich daran, wie ich um 1995 herum zum ersten Mal HTML gelernt habe. Erinnert sich noch jemand an Kevin Werbachs Barebones Guide to HTML? Das war im Grunde eine Website, die alle HTML-Tags und ihre Aufgaben auflistete. Mit dieser Ressource, einem Texteditor und einer frühen Version von Netscape Navigator konnte man sofort lernen und experimentieren.

  • Vor ein paar Tagen wollte ich einen KI-Agenten zum Web-Browsing bauen und war schockiert, als ich sah, dass Hacker-News-Kommentare als Tabelle in einer Tabelle in einer Tabelle implementiert sind.

    • Als ich das herausfand, war ich eher froh. Ich habe userContent.css erstellt, um HN lesbarer zu machen, die Breite des Inhalts begrenzt, line-height auf 1.5em gesetzt und allen Absätzen zusätzlichen oberen Abstand gegeben. Jetzt muss ich HN nicht mehr mühsam lesen, wenn in einem breiten Browser 250 Zeichen pro Zeile angezeigt werden. Jeder Absatz ist besser lesbar, und Absatztrennungen sind deutlicher zu erkennen als nur durch den Zeilenabstand.

  • Semantisches HTML hat viel Potenzial. Persönlich mag ich den Stil, Fußnoten im Haupttext am rechten Rand in kleinerer oder halbtransparenter Schrift zu platzieren und bei Bedarf /-Aufklappelemente hinzuzufügen. Aber um solche Stile tatsächlich umzusetzen, muss man anscheinend jedes Mal ziemlich genau CSS kennen, damit es richtig funktioniert.

  • Zunächst: Das ist wirklich eine hervorragende Lernmethode und eine gute Übung. Es ist auch interessant, wenn der Autor alte, heute nicht mehr verwendete Elemente betrachtet, über die man sich früher gefreut hat, weil man sie plötzlich nutzen konnte, und ihre Zwecke errät. Allerdings gefällt mir aus der Perspektive von jemandem, der seit Mosaic alle HTML-Versionen von Hand geschrieben hat, nicht, dass MDN Dinge rückwirkend umbenennt, etwa zu description list. Mir gefällt definition list aus der ursprünglichen Spezifikation besser. Für mich ist es natürlicher, dl, dt, dd als „Definitionsliste“, „zu definierender Begriff“ und „Definition“ zu verstehen. description ist zwar ein weiter gefasster Begriff als definition, aber wenn man es als definition list betrachtet, ist leichter zu merken, dass ein dl Begriffe (dt) und Definitionen (dd) enthält. Auch das W3 nennt es definition list: https://www.w3.org/TR/html4/struct/lists.html#edef-DL

  • Hat jemand in der echten Welt schon einmal einen Fall gesehen, der bis zu `` reicht?

    • Ja. Meine erste Stelle im technischen Bereich war bei einer hyperlokalen Marketingagentur, und ich verbrachte die meiste Zeit damit, Speisekarten und Verkaufsinformationen kleiner lokaler Geschäfte zu aktualisieren. Speisekarten wurden in ihrer Hierarchie oft absurd tief, weil viele Restaurants viel zu viele Gerichte hatten. Um Mozzarella-Sticks und Arancini korrekt darzustellen, braucht man manchmal eine Hierarchie wie Restaurant -> Menu -> Antipasti -> For Groups -> Fried -> Cheesy.
    • Ja. In Spezifikationen oder anderer technischer Dokumentation kommt das vor. Zum Beispiel in der HTML-Spezifikation[1] selbst. [1]: https://html.spec.whatwg.org/#link-type-next
    • Das ist eines der ärgerlichen Dinge. Ich weiß nicht, warum man es auf 1–6 beschränkt und kein Attribut zulässt, mit dem man eine beliebige Größe angeben kann.
    • Ich habe eine Web-Version eines riesigen Buchs erstellt, das von meinem früheren Professor und Chef geschrieben wurde, und dort wurden definitiv sechs Überschriftenebenen verwendet; vielleicht wären sogar noch mehr nötig gewesen.