HTML von a bis z-z V: Inline Text Semantics (Teil 1)

Wo wir sind, ist vorne, Folge 63. Weiter geht's in unserer HTML-Serie, heute mit Teil 1 der Inline-Textelemente. Herzlich willkommen bei Wo wir sind, ist vorne. Frontend-Fakten-Frotzelein. Der Late-Night-Frontend-Talkshow rund um Webdesign und Entwicklung. Es reden sich um Head und Kragen, HTML-Fundamentalist Moritz Gießmann und JavaScript-Jongleur Konstantin Groß. Ja, hallo. Hallo. Oh, ich muss hier nochmal kurz rumfüllen, dass ich ein bisschen näher dran bin.

Da sind wir mal wieder mit unserer letzten Folge, bevor du dich in die weite Welt aufmachst. Genau. Auf in die weite Welt. Ich habe gerade so mitgespielt im Kopf bei dem Intro und habe mich gefragt, ob ich das Schlagzeug dazu eigentlich spielen könnte. Und ich bin mir nicht so sicher. Es klingt nicht so schwierig, aber Big Band ist jetzt nicht unbedingt meine Musikrichtung, mit der ich mich viel beschäftigt habe.

Habe ich mal eine Weile an der Uni, aber ich sage es mal so, der Dirigent der Band, der hat sehr oft mich korrigiert und gesagt, nee, da musst du so und da musst du so und du hast nicht das richtige Gefühl und klopp doch nicht so drauf. Du hast halt einfach deine Metal-Progressive-Dings durchgezogen, während alle anderen irgendwie Frank Sinatra spielen, oder? Nein, ich habe mir alle Mühe gegeben. Ich habe ihnen auch gesagt, ja, kannst du mir die Songs irgendwie geben und Noten und alles.

Ich habe mir alle Mühe gegeben. Aber es ist einfach so, ich behaupte, man kann an dem, wie ein Schlagzeuger spielt, egal, also ich gebe jetzt dem Schlagzeuger ein bestimmtes Stück, das soll er spielen und ich kann dir sagen, wenn er aus dem Jazz kommt, das höre ich. Und ich kann auch andersrum hören, wenn ein Rock- oder Pop-Schlagzeuger versucht, Jazz-Sachen zu spielen, das hört man auch. Das ist, da merkst du so, irgendwas stimmt nicht.

Die Noten stimmen zwar vielleicht so grob oder der spielt schon das, was auf dem Blatt steht, aber es ist einfach, diese Musik ist vom Gefühl her so unterschiedlich. Also es gibt bestimmt welche, die beides gut können, aber ich habe es schon oft erlebt, dass man so gedacht hat, ähm, wieso spielt denn dieser Schlagzeuger jetzt so untight und warum so leise?

Und dann ist es der Jazz-Schlagzeuger, der halt Rockmusik spielt oder halt umgekehrt, warum hackt der da so rum und wieso klingt das so ungroovig und so unswingig? Genau, schon komplett weg hier. Schon wieder komplett abgeschweift, direkt schon zum Anfang. Ja, ich war, ich war gerade so, ich war gerade so im Swing. Ja, das ist okay, wir haben Kapitelmarken und außerdem, ihr liebt uns doch dafür, dass wir das machen, oder? Hoffen wir es mal.

So, dann lass uns noch zu den Getränken abschweifen. Ja, ja, ja, ja, diesmal bin ich hier ganz, ganz langweilig unterwegs, ich habe hier einfach nur eine Klubmate stehen, die um diese Zeit nicht mehr trinken sollte und die Flaschen. Und was du trotzdem tust. Was ich trotzdem tue, ich weiß aber nicht, ob ich die ganze Flasche trinke, aber ich habe in letzter Zeit oft Klubmate-Flaschen, wo die Flaschen sehr neu aussehen und so.

Auch diese, wo ich jetzt sagen würde, so vom Gefühl her, naja, die war schon zwei, dreimal im Umlaufen, man sieht, da ist immer so ein Rand an einer Stelle. Ja. Wo diese über die Fließbänder laufen und so. Und der ist jetzt wahrscheinlich, ja genau, da wo sie irgendwie, da ist so Außenkorrosion an der Flasche und bei der ist der Rand zwar schon sichtbar, aber ganz, ganz wenig neu. Sie ist noch relativ neu.

Ich hatte vor kurzem mal eine, wo man gar nichts gesehen hat, aber dann gibt es auch welche, die komplett ramponiert sind, ist auch egal. So, und ich habe hier noch Wasser mit Zitronensaft drin. So, Limonade ohne Zucker sozusagen. Das wird dein neues Stammgetein. Genau, das habe ich jetzt so auch immer mal wieder. Ich habe auch eine sehr neu aussehende Flasche, tatsächlich, guck mal, weil die ist auch hier unten gar nicht abgenutzt, siehst du das?

Das ist aber eine Fritzlimo, Apfelkirscholunder. Genau, ganz knallrot. Knallrot und sehr neuwertig. Ich habe in den letzten Tagen immer wieder das Gefühl gehabt, wenn ich auf meine Monitore geschaut habe, dass die Farben intensiver sind und ich frage mich jetzt, ob in meinem Kopf was anders ist oder ob mein Betriebssystem jetzt irgendwie was anderes macht. So, hast du am Pilz geleckt? Also, ja, aber das mache ich schon immer. Und so bunt war es noch nie. So bunt war es noch nie.

Also, aber vielleicht kann mir das auch jemand anderes beantworten. Vielleicht, falls jemand anderes noch den Brave-Browser benutzt, kann das sein, dass der jetzt ein anderes Standard-Theme hat? Und vor allem im Inkognito-Fenster habe ich das Gefühl, dass die Farben da jetzt mehr strahlen. Das ist noch nicht so drauf geachtet. Oder es ist einfach, ich habe halt irgendwie das Gefühl, die Farben sind bunter auf meinem Monitor, sie sind irgendwie mehr da. Ja, man weiß es nicht.

Vielleicht hat mir auch einfach jemand Pilze in die Cornflakes reingetan und ich bin die ganze Zeit dauerhaft. Das ist die ganze Welt bunt. Naja. Hat mich jemand gemikodost. Ich trinke mal meinen hier. So, Moment. Oh Gott, das wird jetzt schwieriger. Du kannst gar nicht anstoßen. Ich hau einfach mit irgendwas hier dagegen. Ja, hau einfach mit irgendwas dran. Ah. Ja. Naja. Ich habe, ich verrate nicht, ich verrate unseren Trick nicht, wie wir durchs Portal anstoßen. Nein, nein.

Auf keinen Fall. Gut. Okay, dann haben wir die Getränke auch geklärt. Und dann machen wir doch direkt weiter mit der Retro. BWSEV präsentiert die Retrospektive. Yo. So, ich habe viele, viele, viele Punkte, weil ich in letzter Zeit viel Zeug programmiert habe. Und ich fange mal an mit einer Sache, die ich jetzt gerade gestern Abend, gestern Mittag auch noch ein bisschen dran rumgebastelt habe.

Und zwar habe ich vor einiger Zeit, vor einigen Jahren schon mal angefangen, so einen Morse-Code-Generator zu bauen. Einfach nur, weil ich damals mal mit der Web-Audio-API rumspielen wollte. Und so Sinustöne in bestimmten Abständen rauszugeben, ist so quasi die Minimalimplementierung von der Web-Audio-API, wenn man jetzt nicht einfach nur einen Sinuston an- oder ausschaltet.

Und er war ganz interessant damals auch, weil ich quasi mich einmal den Morse-Standard implementiert habe, der auch ganz interessant ist. Also das ist auf jeden Fall interessant, sich mal durchzulesen, wie das funktioniert. Es ist nämlich alles ganz genau definiert, wie viel die Abstände so sind, wie lang ist ein Ton im Vergleich zum anderen und so.

Und genau, meinen Morse-Code-Generator zu finden unter moritzgießmann.de slash Morse-Code, allerdings mit K. Ich habe mich mal arzi gefühlt damals, als ich das gemacht habe und habe gedacht, ich schreibe jetzt einen Code mal mit K an der Stelle. So kreativ mit C. So kreativ mit C oder Konstantin mit K. Ja. Genau. Genau, der hat jetzt ein kleines Update bekommen.

Und zwar, es ist ein bisschen ein visueller Refresh, weil ich immer so ein bisschen unzufrieden war mit dem ursprünglichen Design. Da hatte ich mal im Kopf, dass ich so die Ästhetik von New York Subway nachbilden wollte. Das ist total hübsches Design, wie ich finde. Also so irgendwie, ich glaube, es ist nicht die Helvetica, aber es ist so eine sehr ähnliche Schrift zur Helvetica. Und es ist halt schwarzer Hintergrund mit weißer Schrift. Und dann gibt es so Icons in bestimmten Farben.

Jetzt, wo du das sagst, jetzt, ja. Ich habe vorhin auch gedacht, okay, irgendwie erinnert mich das Design an was. Und das war ursprünglich, das ursprüngliche Design war sehr stark daran angelehnt, aber ich habe es nicht wirklich hingekriegt, dass es gut aussah. Ja, aber die Icons und also das, ja, das Runde und die kräftigen Farben. Ich war unzufrieden damit und habe jetzt gesagt, ich muss es jetzt nochmal anpassen. Also das Layout, das ist das kleinere Feature davon.

Ich habe gesagt, das kann nicht so bleiben, weil das ist im Prinzip eine sehr, sehr kleine Seite. Da passiert nicht viel. Das ist im Prinzip nur ein Eingabefeld mit ein bisschen Text und einem Button, den ich drücken kann. Also viel mehr ist es nicht. Also habe ich dem Ganzen jetzt mal so einen Rahmen gegeben, damit es nicht mehr so in der Gegend rumfliegt und eine kleine Textur im Hintergrund.

Aber das eigentliche Feature oder die Features, die dazu gekommen sind, ist, man kann jetzt auch einen Parameter anhängen namens Text und dann wird er direkt schon eingetragen. Das heißt, ich kann direkt auf einen bestimmten Text verlinken auf der Seite und umgekehrt, wenn ich einen Text eingebe und dann mir den Morsecode einmal abspielen lasse, dann landet der auch als Parameter oben in der URL. Und wenn ich die dann kopiere, dann habe ich quasi den Link direkt zu dem Text kopiert.

So ein ganz simples Feature. Und ich habe jetzt auch so einen Options-Bereich jetzt noch mit eingebaut, wo man verschiedene Sachen einstellen kann. Vorher konnte man ja zum Beispiel nicht die Lautstärke einstellen. Das geht jetzt. Man kann es sich, also es ist relativ leise eingestellt, was ich immer noch als relativ laut empfinde. Aber es ist, glaube ich, irgendwie 0,3 oder 0,4 von 1. Aber das hat diese Sinuswellen, wenn die halt voll reinbrezeln. Der Gain, genau.

Also Standard ist, glaube ich, halbwegs erträglich, aber man kann es auch noch lauter oder leiser stellen, wenn man möchte. Also ich klicke jetzt mal nicht auf den Pfeil, weil als ich das vorhin gemacht habe, ist mein Browser eingefroren. Das müssen wir nachher im Nachgang mal noch testen, ob das jetzt daran lag, dass ich ja vorhin auch irgendwie Probleme hatte hier mit meinen Audio-Geräten. Aber ist das nur ein Detail-Summary, ein ganz simples, ganz ungestylt.

Ja gut, aber irgendwas muss ja passieren, dass das dann abspielt, wenn ich auf den Pfeil klicke. Achso, du meinst du den Output? Nee, auf den Abspielpfeil, ja. Oh, vielleicht hab ich ... Das können wir nachher gerne mal machen, aber nicht jetzt, während die Aufnahmen läuft. Oh Gott, vielleicht hab ich einen Bug noch eingebaut. Ja, vielleicht ist irgendwie in bestimmten Umständen endlos Parameteränderung oder so. Ja, das kann tatsächlich sein.

Also ich weiß es nicht, aber ich hatte gestern auch zwei, dreimal den Fall, dass beim ersten Mal Abspielen es komisch rumgeknackst hat. Es würde dafür sprechen, dass da was nicht ganz zu 100 Prozent jetzt passt. Genau, und bei den Options, wie gesagt, die Lautstärke kann man jetzt einstellen und, was vorher standardmäßig immer aktiviert war und ich mir dachte, das will man vielleicht nicht immer, man kann Vibrationen ausschalten, beziehungsweise einschalten.

Die ist standardmäßig jetzt ausgeschaltet, vorher war die Vibration ein. Das ist ein Feature, also die Web Vibration API, da haben wir, glaube ich, auch schon mal drüber gesprochen vor langer Zeit, was nur auf ganz bestimmten Geräten funktioniert. Also ich glaube, das funktioniert natürlich nur auf Geräten, die vibrieren können. Also das schließt ja die meisten schon mal aus. Und dann halt auch nicht auf dem iPhone, sondern halt Android.

Und da weiß ich, dass es auf jeden Fall im Chrome-Browser funktioniert. Und ich glaube, auf dem Samsung Internet, das ist der andere, den ich noch getestet habe, da geht das, glaube ich, auch. Ja, ist eigentlich ganz interessant, ist nicht zu 100 Prozent synchron, habe ich festgestellt. Ich weiß auch nicht so genau, warum. Aber es ist ein witziges Feature, dass man quasi auch ... Was heißt nicht synchron? Dass irgendwie die Längen und sowas nicht ganz stimmen?

Wenn ich den Ton, nein, nein, nicht synchron meine ich ... Achso, mit dem Ton nicht synchron. Mit dem Ton ist es nicht zu 100 Prozent synchron. Ich kann nicht so genau erklären, warum, weil das wird beides quasi gleichzeitig eigentlich gestartet, die gleichen Längen und so. Ja, aber das ist auch nicht schlimm.

Aber theoretisch ist dieser Mause-Code-Generator also auch für Gehörlose benutzbar, wenn sie Vibration, wenn sie ein Handy haben, dass das unterstützt oder irgendein Gerät, das vibrieren kann. Ja, fand ich irgendwie eine ganz witzige Geschichte. Genau, schaut es euch mal an. Vielleicht finden wir den Bug dann gleich noch. Es kann echt ... Ich will nicht ausschließen, dass ich jetzt irgendeinen Bock geschossen habe an irgendeiner Stelle.

Wir gucken uns das noch an, bevor wir es an die breite Masse verlinken. Ja, genau, so machen wir es. Okay. Ich habe tatsächlich nur was ganz Kurzes, Kleines, weil ich ja nicht so produktiv bin gerade. Aber ich wollte einfach mich mal bedanken für das fleißige Hören. Die letzte Folge vor dieser, die hat einen neuen Rekord aufgestellt. Das war die beste Folge auf die erste Woche gesehen bisher. Und das hat mich riesig gefreut. Das war so ein richtiger Sprung nach oben.

Und irgendwie scheinen die Leute gespannt auf die Fortsetzung der HTML-Serie gewartet zu haben. Oder ich weiß es nicht. Schreibt uns gerne, warum ihr die so zahlreich gehört habt. Aber es hat mich riesig gefreut. Und da wir jetzt auch eine Pause einlegen, ist erstens Zeit zum Nachhören. Falls ihr neu dazugestoßen seid. Und natürlich auch gerne zum Weiterempfehlen. Also empfehlt uns euren KollegInnen weiter. Und einmal einen Link in den Firmenchat. Oder wie auch immer.

Gerne auf LinkedIn und so weiter teilen. Das sagen wir auch am Ende jeder Folge. Aber das wäre doch schön, wenn wir irgendwie ein bisschen trotz Abwesenheit das nochmal ein bisschen geboostet bekommen. Allerdings haben wir keine Kommentare bekommen bis jetzt. Doch, der Chef hat kommentiert. Hat er? Ja. Gerade vorhin, glaube ich erst. Okay, gut. Also ich hatte das relativ frisch. Ah nee, gestern. Gestern war es. Okay, ah, dann, das habe ich nicht gesehen tatsächlich.

Dann bin ich beruhigt, weil ich befürchtet habe, dass wir die Kommentarfunktion kaputt gespielt haben bei unserer letzten Debugging Session. Wir haben sehr viel an den Kommentaren rumgedebuggt. Und ich habe schon gedacht, oh Gott, wenn wir da so viele Leute haben, die das hören, und es kommt kein Kommentar. Das spricht nicht für die Kommentarfunktion. Also eigentlich wollten wir sie gefixt haben, aber jetzt scheint es funktioniert zu haben.

Zumindest für den Chef, der schon öfter mal geschrieben hatte. Schreibt doch mal einen Kommentar, einfach nur, um zu testen, ob unsere Kommentarfunktion funktioniert. Das wäre doch was. Und schreibt uns in die Kommentare, falls es nicht geht. Nee, falls es nicht gehen sollte, dürft ihr uns gerne eine E-Mail schreiben. Dann gerne, ja, E-Mail oder sonst viel kontaktieren. Oder Mosterdon. Morsecode. Morsecode. Genau, schickt uns einen Morsecode.

Gut, genau, das war es schon von meiner Seite. Ja. Okay, so, ich habe jetzt, jetzt kommt noch ein kleiner Blog von mir. Wir haben seit heute, und heute ist jetzt der Mittwoch, der 31. Januar, haben wir einen neuen Link, beziehungsweise einen neuen Namen auf Twitch. Ist natürlich, wie soll ich sagen, mit einigem Aufwand verbunden, und ich bin mir sicher, dass wir noch nicht alle Links umgezogen haben. Ich habe bestimmt noch irgendwas vergessen.

Aber es war halt so, dass, wenn wir auf Twitch unterwegs waren, also ich habe festgestellt, dass viele Leute offenbar sich unter dem Namen WWSIV, also Leute, die uns nicht kennen, sich nicht so richtig was vorstellen können. Geschweige denn, dass sie aussprechen können. Geschweige denn, dass sie aussprechen können.

Wenn wir mal jemanden geradet haben auf Twitch, das bedeutet, nach unserem Stream schicken wir alle unsere Zuschauenden in einen anderen Stream, und die kriegen das dann halt oft mit und sagen, ah, danke für den Raid und so, WWSIV. Ich sehe schon gerade was, wo wir es vergessen haben. Vielleicht kannst du dir das gleich aufschreiben. Das Header-Bild auf unserem Twitch-Channel. Da stehen alle unsere Social Medias drin. Ach Gott, ja. Und da ist es zum Beispiel.

Okay, das haben wir auch noch woanders. Ja, so, Header-Bild, Twitch-Uhr, also ihr seht das wahrscheinlich schon gar nicht mehr. Genauso auch auf Twitter, ich weigere mich, HX zu sagen, auf Twitter haben wir das auch. Und vielleicht auch auf Mast. Okay, ist notiert. Müssen wir mal gucken. Und ich schreibe auch noch auf Debugging, Morse-Code. Ja. Das machen wir heute noch. Das machen wir noch nach der Sendung. Das gucken wir uns.

Wäre sehr schön, wenn du mit mir da drauf gucken könntest. Ja, auf jeden Fall. Genau, also. Jetzt habe ich aber gar nicht gesagt, wie der neue Link ist. Das kommt jetzt noch. Und zwar, falls ihr uns schon folgt bei Twitch, müsst ihr gar nichts machen. Ihr folgt uns auch weiter. Wir haben da jetzt nicht irgendwie was gelöscht, sondern wir haben einfach nur den Namen geändert. Und wir heißen da jetzt, wo wir sind, ist vorne, Underscore-Dev.

Ich wurde dann heute auf Mast.dorn direkt schon gefragt, oder wir wurden schon gefragt, gibt's dann demnächst auch Underscore-Cooking und Underscore-Gaming oder sowas. Ja, wer weiß, wer weiß. Wir haben uns jetzt alle Möglichkeiten. Wir müssen uns vielleicht in andere Richtungen mal ausbreiten. Wir haben jetzt alle Möglichkeiten. Wo ist das vorne? Music? Music hatten wir ja auch schon mal gedacht.

Das Schöne und das Schlechte an dem Namen zugleich ist, dass der Name für alles Mögliche stehen kann. Weil das Wortspiel nicht jeder versteht, der jetzt nicht weiß, was wir genau machen. Und dass man zumindest sich so ein bisschen erraten kann, was wir tun. Haben wir das Underscore-Dev auch noch dran gehängt. Also wo wir sind, ist vorne, dass die Leute auch mal wissen, wie wir heißen. Nicht nur WWSIV, ist ja nur die Abkürzung.

Also jemand, der jetzt uns als Discovery davon ist, schlecht von uns von der Abkürzung. Sofern man nicht eh schon weiß, was wir machen. Und dann mit Underscore-Dev haben wir uns halt gedacht, beziehungsweise danke Konstantin nochmal für den Einfall. Weil ich hatte da noch andere Ideen, aber das ist eigentlich am besten, dass man so ein bisschen auch weiß, vielleicht, oder erahnen kann, was wir denn tun. Nämlich labern. Genau. Wie jeder weiß, Dev steht für labern.

Das F in Dev steht für Fokus bei uns. Das F in Dev steht für labern. Ja, genau. Folgt uns doch mal auf Twitch. Wir würden uns sehr freuen. Falls ihr das noch nicht tut. Wir haben da noch gar nicht so viele Follower. Ich glaube, wir haben mehr Mastodon-Follower als Twitch-Follower. Trotzdem schauen immer wieder einige Leute zu, was ich sehr, sehr schön finde.

Und vielleicht verstehen dann jetzt einige auch noch ein bisschen mehr, was wir tun und stolpern dann mal über uns und bleiben dann auch bei uns, weil ich bei den Statistiken auch schon öfter gesehen habe, dass wir viele Einzelzuschauende hatten. Aber viele sind nur ganz kurz gekommen und dann wieder abgesprungen. Und das spricht für mich sehr nach, da hat uns jemand über irgendeine Entdeckenfunktion entdeckt und dachte sich, guck mal drauf, was das so ist und dann alles nix für mich.

Und ich hätte gerne lieber weniger solche Leute und dafür mehr Leute, die bleiben oder mehr Leute, die uns vielleicht finden über die Suche oder so. Und deswegen Name geändert. Name ändern ist immer so ein bisschen nervig, weil wir haben halt leider nicht überall unseren Shortlink eingetragen. Wir haben ja auch so Shortlinks mit www.sev.de slash Twitch zum Beispiel.

Wäre schön, wenn wir das da jetzt auch schon gehabt hätten, aber jetzt müssen wir es halt an verschiedenen Stellen anpassen und ändern. Und was auch blöd ist, jetzt auch gelernt heute, Twitch leitet auch nicht weiter den alten Account, sondern der ist jetzt quasi, ja, wenn man jetzt da drauf geht, dann sieht man quasi nix. Der ist jetzt für sechs Monate gesperrt und dann wird der Account wieder freigegeben.

Ich habe dann überlegt, ich werde versuchen, in sechs Monaten den wieder zu registrieren. Ich glaube nicht, dass jemand, also darf ich vielleicht nicht im Podcast so drauf sagen, weil sonst kommen irgendwelche Trolle oder Trollen und wollen den dann registrieren. Ich glaube jetzt nicht, dass www.sev.de an sich so ein attraktiver Name ist. Weiß ich jetzt nicht, ob jemand anderes das haben will.

Ich würde den dann versuchen zu registrieren mit so, ah, guck mal, das ist der alte Account von da, da, da und geh mal da hin, wenn du den Stream sehen willst. Allerdings konnte man das jetzt leider nicht direkt machen. Wir müssen jetzt sechs Monate warten, bis das soweit ist. Okay. Ach Gott, es ist schon voll spät. Lass noch mal weitermachen. Late Night, ja, ich weiß. So, dann habe ich heute noch was anderes angefangen zu basteln.

In Ermangelungen, wie es ja so oft ist, man sucht etwas, man findet nicht das Richtige und dann sagt man, dann baue ich es halt selbst. Du kennst es auch, Konstantin, ne? Ich war heute auf der Suche nach einem Leitfaden, einem Barrierefreiheitsleitfaden für RedakteurInnen, weil ich das ganz konkret gefragt wurde. Hey, gibt es da sowas? Und ich habe gesagt, hm, gute Frage. Ich gucke mal und man findet tatsächlich auch einiges im Netz.

Nur habe ich leider keine Kombination gefunden aus, ist aus meiner Sicht vollständig, ist gut formuliert, es in einfach zu verstehen für alle. Und Deutsch. Das waren meine drei Anforderungen. Und ich habe nichts gefunden, wo ich jetzt gesagt hätte, das ist jetzt das, was ich weiterschicken kann. Also habe ich mir gedacht, ich kompiliere das jetzt mal, das, wo ich der Meinung bin, dass es wichtig ist, in ein Dokument. Und stelle es auch mal der Community zur Verfügung für Feedback.

Und habe dann, wie man das heutzutage dann so macht, halt ein GitHub-Repository angelegt und da einfach nur eine Readme reingepackt, die diesen Leitfaden enthält. Und würde mich über Feedback freuen dazu. Also auch wenn diese Podcast-Folge noch rauskommt, dann ist das quasi, dann ist das schon weitergegeben an die Auftraggebenden, ziemlich sicher. Aber trotzdem, das ist ein lebendes Dokument.

Ich weiß noch nicht genau, vielleicht packe ich das irgendwann nochmal auf eine eigene Seite oder so. Aber jetzt so, um Feedback einzusammeln und das Ding besser zu machen. Also ich habe auch schon einiges an Feedback bekommen, was ich noch einarbeiten will. Ist das auf jeden Fall schon mal, es musste jetzt mal ein erster Wurf her. Den habe ich jetzt quasi in ein paar Stündchen zusammengekloppt.

Und würde mich sehr freuen, wenn ihr euch das mal anschaut, falls euch das interessiert und dann gerne auch Feedback gebt. Auf GitHub gerne mit Issues aufmachen und sagen, ey, aber da könntest du noch das machen. Auf jeden Fall, das Ziel davon ist nicht, dass es komplett ist, sondern es soll überschaubar, managbar sein in der Menge auch. Weil sonst könnte ich einfach die Web-Content-Accessibility-Guidelines verlinken. Das soll es nicht sein.

Das soll ein Dokument sein, was jemand auf den Tisch bekommt, das einmal durchliest und das ab und zu nochmal in die Hand nimmt und sagt, Ah ja, so war das so. Und nicht so, nicht ein vollkommenes, kein Buch, was jetzt jemand lesen soll. Also mehr auch so Cheat-Sheet-Charakter, allerdings nicht ganz so kurz gefasst. Genau, da würde ich mich über Feedback freuen. So, ich darf noch weitermachen, gell?

Und dann war ich noch im Browser-Plugin-Land unterwegs und ich sag's immer falsch, weil eigentlich sind's Add-ons in Firefox. Ich habe zweierlei Browser-Add-ons gebaut für Firefox. Im Stream hatte ich die auch schon vorgestellt. Und zwar eins für Menschen, die Target-Blank blöd finden, also dass sich Seiten einfach so in neuen Tabs öffnen. Das Add-on ist dafür da, Target-Blank aus Seiten einfach zu entfernen, sodass ich selbst die Kontrolle darüber habe, ob das passiert oder nicht.

Und wenn ich das blöd finde, dass ein Seitenbetreiber für mich entscheidet, dass ein Link sich im neuen Tab öffnet, dann könnt ihr das installieren und dann sollte das hoffentlich nicht mehr passieren. Das zweite Add-on heißt YouTube Redirect. Und es leitet, oder zumindest das Ziel ist, und da sage ich ganz explizit dazu, das ist noch in einer sehr frühen Phase. Und das hat mit Sicherheit noch Bugs oder Unschönheiten oder Stellen, wo es vielleicht unerwünschtes Verhalten produziert.

Aber es ist, die Idee dahinter ist, dass YouTube-Links, also von dem echten großen, bösen YouTube, das einem momentan immer sehr viel Werbung und Tracking präsentiert, weiterleitet auf die Datenschutz, ja, datenschützende Variante und auch ohne Werbung YouTube geschrieben, yewtu.be. Wer das noch nicht kannte, das ist im Prinzip nur eine Instanz von einer Open-Source-Software, die quasi ein alternatives Frontend für YouTube anbietet, was keine Werbung und kein Tracking enthält.

Und das ist alles noch ein bisschen rough, das sieht sehr, sehr minimalistisch aus, ist noch nicht so superschön zu benutzen.

Aber ich habe mir gedacht, man klickt ja öfter mal auf einen YouTube-Link und möchte aber vielleicht gar nicht auf YouTube landen, sondern wenn es eine Datenschutz-Alternative gibt ohne Werbung, dann möchte man vielleicht automatisch, man möchte gar nicht darüber nachdenken müssen oder den Link umschreiben müssen, sondern vielleicht kann das ja ein Browser-Add-on machen. Und das habe ich mir auch ganz, habe ich auch ganz simpel mal gebaut.

Ich bin mir sicher, dass man da bestimmt noch einige Links irgendwie irgendwann ausnehmen sollte davon, weil momentan leitet es einfach jeden Link, der auf YouTube zeigt, um auf diese andere Domain, wo ich mich nicht traue, sie auszusprechen, weil sie eigentlich genauso ausgesprochen wird, nur anders geschrieben. Genau, das könnt ihr euch auch gerne mal anschauen, würde ich mich auch über Feedback freuen dazu. Das ist auch auf GitHub.

Also da auch gerne mal eine Anmerkung schreiben, die Links zu dem ganzen Kram, alles, was ich jetzt hier erwähnt habe, kommen auf jeden Fall in die Shownotes. Und wenn ihr GitHub finden wollt, das ist dann auch auf, also die beiden Browser-Add-ons sind in der Add-ons-Library von Firefox, also auf der Add-ons-Seite. Da könnt ihr die finden und da sind dann auch die entsprechenden Links dazu, zu GitHub und so weiter.

Könnt ihr mir vorstellen, dass das ein Katz-und-Maus-Spiel wird mit Google und den Seiten, die das umgehen, das ganze Werbezeug und Trackingzeug, wie mit so Piracy-Geschichten halt auch. Also die werden wahrscheinlich oft dann wieder Dinge verändern, damit das dann nicht mehr geht und dann werden die wieder anpassen. Mal gucken, wer die Oberhand behält. Ja gut, ja, ich meine, das passiert ja jetzt auch schon mit den Add-Blockern. Warte mal, da gab es doch so eine schöne Seite.

U-Block, das U-Block, Bypass, Latest, YouTube. Ja genau, die Seite packen wir auch nochmal in die, oh, krass, das ist zum ersten Mal, dass ich das rot sehe. Es ist momentan schon ein Katz-und-Maus-Spiel zwischen den Machern von U-Block Origin, der eigentlich momentan finde ich besten Add-Blocker, und YouTube. Und es gibt sogar eine Statusseite, die sagt eben, ähm, das U-Block Origin Bypass, Latest, Latest, YouTube-Anti-Ad-Block-Skript. Auch sogar YouTube-Skript changed two hours ago.

Genau, äh, und das hab ich noch nie rot gesehen, ähm, aber es ist genau, das bildet genau dieses Katz-und-Maus-Spiel ab. Ähm, das bedeutet, wenn ich jetzt, offenbar, wenn ich jetzt auf YouTube gehe, kriege ich vielleicht Werbung angezeigt oder zumindest diese nervigen, diese nervigen Quatsch-Spanner mit, ähm, auf YouTube sind Ad-Blocker verboten. Wo ich mir so denke, pff, äh, okay, das kannst du jetzt mal so sagen, dass das verboten ist, aber was willst du tun? Oder, was willst du tun?

Der eine oder die andere erinnert sich vielleicht, äh, wovon das ist, und ich gehe jetzt nicht tiefer drauf ein. Ähm, ich bin ja echter Gangster, sag ich dazu noch. Okay, komische Anspielung aus der Vergangenheit. Und damit, äh, machen wir jetzt noch ein bisschen Werbung und, äh, kommen wir dann zum nächsten Teil. Hey, hey du, schön, dass du da bist. Na, öfter hier? Dir gefällt, was du hörst und du magst es am liebsten werbefrei und unabhängig?

Dann freuen wir uns sehr über ein paar Euro in unserem digitalen Strumpfband unter www.siv.de Slash Spende Auf www.siv.de Slash Unterstützen Findest du noch circa 69 weitere Wege, uns zu supporten. Wir danken dir. Ach, das macht mir gute Laune. Ja, äh, Spenden, weiterempfehlen, damit könnt ihr uns glücklich machen. Genau, Spenden weiterempfehlen, uns, äh, genau, unter www.siv.de Slash Unterstützen.

Ihr habt es schon, der nette Herr eben hat es schon alles ganz genau erklärt, wie das geht. Und damit kommen wir zum Hauptteil. Hier ist www.siv.de Mit dem Tagesthema. Ja, Property haben wir heute keines, weil wir machen ja, äh, lauter so, Kleinkruscht in, in größerem Umfang, dementsprechend. Also viel, viel Kleinkruscht in, in größerem Umfang. Also ganz viel Kleinkruscht, aber davon viel. Genau. Weil du das wüsstest.

Ja, wir haben uns durchgearbeitet, nicht ganz, das wird unser neuer Slogan. Nichts mehr mit Late-Night-Fronten-Talkshow, sondern Kleinkruscht im größeren Stil. So, äh, wir hatten jetzt, was hatten wir denn jetzt eigentlich schon alles? Ähm, wir haben uns durchgehangelt vom Root-Element über Block, über Meta-Elemente im Head und über Body und, äh, und Block-Elemente. Und jetzt sind wir bei den Inline-Elementen und, ähm, auf der, auf MDN steht es da als Inline-Text-Semantics.

Da hört man schon, es geht auch um Semantik, ähm, weil die Inline, also gerade die Inline-Elemente halt, äh, auf den Text die Semantik legen, während die Äußeren halt die Struktur der Seite vorgeben. Und wir haben ja auch eine Semantik-Folge, vielleicht haben wir da das eine oder andere schon mal angesprochen. Äh, aber jetzt gehen wir tatsächlich in die Details, fast alphabetisch, in die einzelnen Elemente rein. Moritz guckt sehr angestrengt.

Ja, ich bin gerade angestrengt, weil ich gerade, äh, meine Notizen zu dem, äh, ABBR-Element suche und gerade nicht, mich gerade etwas verwirrt bin, wo die sind, weil ich dachte, dazu habe ich eine Menge aufgeschrieben. Ähm, ja, nee, da steht nix. Da steht nix, gell? Nee, da steht nix. Wo sind die hin? Ich hoffe, es war ganz viel. Oh Gott. Okay, gut, dann müssen wir das jetzt freestylen. Dann müssen wir das jetzt aus dem Ärmel schütteln.

Also, ähm, genau, ABBR, das steht für Abbreviation. Und, äh, ja, wie der Name sagt, Abkürzung, also zum Beispiel kann ich das Wort CSS in, äh, ABBR umklammern, umstellen. Ähm, und kann dem Ganzen ein Title-Attribut geben, das aber optional ist, das wusste ich zum Beispiel auch nicht. Und kann in diesem Title-Attribut dann auflösen, was diese, diese Abkürzung bedeutet, also Cascading, Style Sheets oder HTML, Hypertext, Markup Language.

Und auch da sieht man wieder, das haben wir auch schon mehr einfach gesagt, ne, die Herkunft von HTML eben aus dem wissenschaftlichen Bereich, ja, viel, was definiert wird und, äh, ne, Zitationen und was weiß ich, haben wir schon alles, ähm, immer wieder festgestellt. Man merkt einfach den Umspruch, äh, den, den Ursprung.

Genau, aber Title ist, wie gesagt, optional, weil ich kann, so ist es hier in dem ersten Beispiel bei der MDN auch, äh, einfach die Auflösung quasi hintendran in Klammern, äh, schreiben. Allerdings ist es damit halt nicht verknüpft und da frage ich mich dann, also, was, was bringt mir das, semantisch zu wissen, okay, das ist eine Abkürzung, schön und gut, ne, aber ich, äh, wenn es nicht aufgelöst wird, schwierig.

Ja, das Title, äh, Attribut hat ja auch, ähm, noch, noch so ein paar Accessibility-Probleme, wobei ich, äh, es schon länger nicht mehr getestet habe, das ist jetzt so ein bisschen veraltetes Wissen leider. Ähm, falls da jemand was genaueres drüber weiß, äh, gerne mal bei mir melden. Also, es gab mal auf jeden Fall so eine Zeit, wo, ähm, Title von Screenreadern komplett ignoriert wurde, ähm, genau. Also, das, das muss man sich gut überlegen.

Von daher finde ich diese Variante mit in Klammern hintendran eigentlich ganz okay. Ähm, ich glaube, es ist, ja, es ist quasi, es ist dann logisch nicht verknüpft miteinander, aber wir haben das, und das Thema kommt später auch noch ein paar Mal, wo ich dann die Frage stelle, aber wer passt denn eigentlich? Wer würde es parsen, wenn es denn logisch verknüpft wäre? Na, also, ja.

Also, es gibt hier auch noch ein Beispiel, wie man, äh, das DFN-Element, das, äh, wir später auch noch, äh, besprechen, wie man das nutzen kann in Kombination, um diese Verknüpfung, irgendwie wieder herzustellen, aber das ist irgendwie auch so ein bisschen von hinten durch die Brust ins Auge, also, ja, es ist, es wirkt so ein bisschen, ja, kommt das Beispiel da auch noch mal bei DFN? Ja, das, das, ja, das kommt bei DFN auch noch mal.

Okay, okay, gut, wenn du das weißt, dann, dann brauchen wir da jetzt nicht mehr weiter drauf gehen. Ja, das, diese, diese Aufzeichnung habe ich, glaube ich, nicht verloren, zumindest sind sie noch in meinem Kopf. Ja, und es gibt auch einen eigenen Abschnitt der Accessibility-Concerns, ähm, ja, weil das, äh, mit dem Title-Element, eben halt, ja, ja, weißt du, also, hast du gerade gesagt, du weißt nicht, ob das vorgelesen wird oder nicht, ne, und, und wie das genau die Unterstützung ist.

Ich bin mir gerade nicht, äh, sicher, genau, also, mein, mein letztes Wissen war, es wird nicht vorgelesen, ähm, vielleicht ist das aber auch mittlerweile nicht mehr aktuell, da bin ich mir nicht sicher. Guck mal, hier steht sogar explizit, only include a title, if expanding the abbreviation or acronym in the text is not possible. Aber dann wäre es halt wirklich schön gewesen, wenn man eben diese Auflösung und Zuordnung, wenn man das irgendwie auch hätte semantisch schön verknüpfen können.

Ja. Also, es scheint mir noch, es scheint mir nicht so ganz durchdacht zu sein. Das könnte man ja ganz klassisch mit ID irgendwie wieder machen, ne, also, dass ich dann ein bestimmtes Element hab, das eine ID kriegt oder so, das ist… Genau, weil DFN, aber da kommen wir später noch dazu, das hat ja eine ID und das könnte man ja dann irgendwie verknüpfen, aber das, äh, ist leider nicht vorgesehen. Okay.

Genau, was, vielleicht, vielleicht da nochmal ganz kurzer Ausflug in die, äh, in die Vergangenheit und das vergesst ihr dann alle ganz schnell wieder, es gab auch früher noch ein Akronymelement, ähm, und es war immer, ich sag mal so, es war, es war, man wusste nie so zu 100 Prozent, wann nimmt man jetzt Akronymen und wann nimmt man, äh, ABBR und ich glaube, das ist auch mit einer der Gründe, weil es, äh, schwer voneinander abzugrenzen war, warum es das Akronymelement jetzt nicht mehr gibt.

Aber das, äh, könnt ihr jetzt sofort wieder vergessen, das ist, äh, Opa erzählt von alten Zeiten. Genau, okay, so, jetzt kommt, äh, jetzt kommt schon der schwierige Block, gell? Genau, weil wir jetzt nicht, äh, alphabetisch vorgehen, weil das manchmal ein bisschen blöd ist, weil Dinge zusammengehören, die aber alphabetisch halt irgendwie auseinandergerissen sind und eins davon käme sogar erst in, in der nächsten Folge dann oder noch eine weiter.

Dementsprechend haben wir jetzt gesagt, wir packen das zusammen in einen Block und zwar geht's um B, Strong, I und M. Möchtest du loslegen? Ähm, ja, also ursprünglich, also ich sag's mal so, es wäre mir sehr lieb, wenn es sehr, wenn es dafür eine sehr einfache Antwort gäbe, die, ich dachte mal früher, es gibt eine einfache Antwort auf die Frage, wann benutzt man was.

Und diese einfache Antwort, die, die einfache und falsche Antwort, äh, von der ich früher dachte, dass sie richtig ist, ähm, war Nutz für Texthervorhebung, äh, niemals B und I, einfach B und I, einfach komplett vergessen, sondern immer nur Strong und M. Genau, so hab ich das, ich glaub, das war's eine Zeit lang auch einfach so verbreitete Ansicht, weil ich hab das, auch unabhängig von dir, wurde mir das auch mal von irgendjemandem so gesagt.

Ja, definitiv, ähm, ich hab das ja auch irgendwo her und ich hab das auch nicht erfunden, also das, zumindest so hab ich's verstanden, dann liest man jetzt so diese MDN-Artikel dazu durch und denkt dann so, ah, okay, es ist also noch komplizierter, rein theoretisch.

Auch hier wieder, wieder die Aussage, wer passt es? Wer passt es? Ist es wirklich so wichtig? Also das ist jetzt, hatte ich jetzt bei, gerade bei diesen Text-Semantics sehr oft das Gefühl so, ja, ist total bis ins letzte Tausendstel ausdefiniert, was es denn semantisch zu bedeuten hat und was es tut, aber wer passt es denn überhaupt?

Also das ist ja nur dann sinnvoll, äh, das wirklich auch, sich die Spec durchzulesen, zu lernen und genauso anzuwenden, wenn auch irgendjemand oder irgendeine Software oder irgendetwas, was damit tut, was der Spec entspricht. Und da zweifle ich an sehr vielen Stellen, äh, dran, weil ich weiß zum Beispiel, dass so Text-Level-Semantics wie, äh, B, I, M und Strong von Screenreadern komplett ignoriert werden.

Ähm, ähm, das bedeutet, das ist dann eigentlich komplett egal, was du dann nimmst, es wird vorgelesen, als wär's gar nicht da. Und das hatte ich früher, als ich dachte, aber man nutzt das jetzt, wurde mir das auch so erklärt, aber das ist jetzt also auch schon bestimmt Jahrzehnt her, ähm, von wegen, ja, das ist ja wirklich die, die Sprachhervorhebung und Screenreader lesen das dann entsprechend betont vor.

Ja, das haben, das haben ganz viele Leute gesagt, aber gestimmt hat's nie. Und ich wusste das auch nicht, ich hab das auch schon weiter verbreitet, aber, äh, ich hab's nie getestet.

Und, äh, die Wahrheit ist, äh, und da hat, da gab's jetzt, glaube ich, grad auch irgendwo auf Social Media so einen Aufruf, ähm, zu, ähm, es gibt zwar ganz viele, ähm, Probleme mit Barrierefreiheit auf Webseiten, weil sie schlecht umgesetzt sind, aber es gibt auch ganz viele Probleme in der Software, ähm, die, die Webseiten barrierefreier machen soll. Also zum Beispiel Screenreader, die ganz viele Dinge, äh, entweder falsch oder gar nicht, äh, ja, irgendwie aufnehmen oder irgendwie parsen.

Ja, ja. Und, und dann kannst du dir, da kannst du dir ein Bein ausreißen und alles Mögliche perfekt machen, wenn die Software, die da dann am Ende was draus machen soll, das gar, sich gar nicht dafür interessiert oder es falsch interpretiert. Gut, man könnte jetzt sagen, naja, wenn ich's semantisch korrekt einbaue, dann wird, dann ist es zukunftssicher und sobald die das unterstützen, dann funktioniert das auch entsprechend, ne?

Ja, deswegen gibt's jetzt, glaub ich, ähm, so eine Initiative zu, ähm, unterstützt das mal mehr und mach mal dies und mach mal das. Sowas, was es ja früher irgendwann bei Browsern dann auch gegeben hat, was dazu geführt hat, letzten Endes, dass es jetzt Rolling Releases gibt, ähm, und Browser sich unfassbar schnell weiterentwickeln. Ich glaube, sowas braucht man bei Screenreadern vielleicht auch, wobei NVDA relativ oft, äh, neue Updates raushaut, muss ich sagen.

Also das, ähm, da, da kommt öfter was. Ich mein, ja, VoiceOver auf dem Mac und so ist natürlich ans Betriebssystem gekoppelt, da gibt's nicht so oft was Neues. Nun, so, wie fangen wir denn jetzt an? Fangen wir mit B an? Genau, lass uns mal erst mal B versus Strong machen, das haben wir jetzt hier als erstes, ähm, und, äh, ja, am besten das beides zusammen, dann mach mal E, M und I.

Also, äh, äh, B soll die Aufmerksamkeit auf den Textlern lenken, ohne drauf hinzuweisen, dass er wichtiger ist. Also das ist eine reine Hervorhebung, ne? Das heißt, äh, ich hab irgendwie einen Textabsatz und da sind Worte drin, äh, gefettet. Jetzt ist natürlich die Frage, warum hebe ich's hervor, wenn's nicht wichtig ist? Also im Endeffekt, das ist auch wieder so eine schwammige Definition, ne?

Also ich versteh schon, ähm, da geht's jetzt nicht drum, dass das Wort in dem Satz jetzt irgendwie eine wahnsinnig wichtige Bedeutung hat, aber paragraph-übergreifend würde ich jetzt vielleicht wirklich so die wichtigsten Keypunkte, also keine Ahnung, ich mach einen SEO-Text für eine Agentur, ja, und ich will, oder beziehungsweise nicht nur SEO, sondern halt natürlich auch einen Text für, für Menschen.

Und die sollen auf den ersten Blick so die wichtigsten Keywords, was machen wir eigentlich, sollen wir erfassen können im Auge. Na, und dann würde ich die vielleicht mit B machen, ohne dass die jetzt tatsächlich auch im Satz wichtig sind, also ohne, dass ich sie jetzt entsprechend betonen würde. Mal abgesehen davon, dass Screenreader das eben nicht tun, aber dass ich halt nicht jetzt sagen würde, wir entwickeln Webseiten und außerdem, äh, Apps.

Genau, das ist ein super, das ist ein super Punkt, ähm, das hab ich ja vorhin gesagt. Ja, ich finde, man kann sich's ganz gut vorstellen, äh, jetzt diese ganzen Elemente mit, ähm, man stellt sich vor, das spricht jemand aus. Ähm, und, äh, die, die, ähm, Strong und EM, die würden die Aussprache verändern. Genau, bei Strong fühl ich mich ein bisschen angebrüllt, äh, und bei EM ist es mehr so, äh, so eine Hervorhebung, ja. Ähm, ähm, so wie, da ist beispielsweise, glaube ich, I love Carrots.

I love Carrots. Oder halt, I love Carrots. Oder I love Carrots, ne, also je nachdem, welches Wort du betonst, ändert sich halt auch so ein bisschen der Sinn von dem Satz. Aber jetzt sind wir schon wieder, jetzt sind wir schon bei EM. Ja, genau. Aber wo sich jetzt dieser ganze Wahnsinn von B in den Schwanz beißt, äh, ist eben das, was du gerade gesagt hast, ja, das ist eine Hervorhebung, aber ohne eine semantische Hervorhebung zu haben.

Also, nee, sag mal, ohne eine, das ist jetzt viel wichtiger als das Drumherum-Hervorhebung zu haben, nur eine visuelle sozusagen. Ähm, aber, da steht dann auch noch, aber es ist nicht, nimm's nicht einfach nur, wenn du Text bold haben willst, weil das machst du mit CSS. Ja. Und dann, was bleibt dann übrig? Auch wenn der Browser-Standard zwar fett gedruckt ist, aber ... Genau, was bleibt dann eigentlich wirklich ernsthaft übrig davon?

Es ist nicht eine Hervorhebung im semantischen Sinne, das ist jetzt besonders wichtig. Ähm, es ist nicht das Visuelle. Okay, das würde ich mir gerne erklären lassen, vielleicht weiß es ja jemand von euch, aber da bleibt dann nicht mehr so viel übrig, würde ich sagen. Ähm, ich habe hier noch gesehen, hier so ein Beispiel, B-Class-Lied, also so für, so ein Anfangsabsatz, der fetter ist, das würde ich vielleicht sogar noch gelten lassen.

Genau, also man soll Klassennamen verwenden, um das dann semantisch, um noch eine zusätzliche semantische Bedeutung dann mitzugeben. Ja, aber das ist ja keine, Klass ist ja keine Semantik. Ja. Also so steht es in dem MWN-Artikel. Das finde ich, das finde ich tatsächlich, das finde ich berechtigt, allerdings geht es da auch eigentlich mehr so darum, dass ich es fett dargestellt haben will. Aber wobei, es passt ja eh niemand. Ja. Von daher ist es auch vollkommen wurscht.

Ähm, aber ich kann, also was man ja gerne visuell gerne so hat, ist, dass man den ersten Absatz zum Beispiel fett hat von einem Text. Das sieht einfach hübscher aus, oder dass man ein bisschen größer macht, aber dass man auch fett macht. Das wäre vielleicht dann klassisch ein B, tatsächlich. Genau, dem will ich aber vielleicht nicht, aber sehr interessanterweise ist ja Inline-Semantics, also könnte man eigentlich das auch mit Styles wieder machen, auf das erste P, bitte fett.

Also P, first child, ja, also, ja, es ist nicht ... Es bleibt nicht so viel übrig, ähm, am Ende, aber es ist, äh, ich würde sagen, kann man durchaus mal verlassen. Ähm, so, genau, dann würden wir jetzt zu Strong gehen, falls du zu B nichts mehr hast. Nee, genau, also Strong ist ... Genau, und Strong wäre jetzt eigentlich, muss man noch dazu sagen, gar nicht Teil dieser Folge, weil wir eigentlich versucht haben, alphabetisch vorzugehen, aber diese Blöcke, die gehören nicht mehr.

Und so stark zusammen, dass wir das jetzt noch mit reinnehmen müssen eigentlich. Genau. So, Strong ist jetzt das, was einen anbrüllt. Also, äh, wie ich schon vorhin gesagt hab, ähm, wenn man sich vorstellt, äh, dass jetzt, äh, ja, das ist im Prinzip die Aussage, oder das ist, äh, ist wie wenn jemand sprechen würde, man versucht sich vorzustellen, man kriegt den Text vorgelesen. Ähm, Strong wäre jetzt, äh, die Beispiel aus der MDN, äh, bla, bla, bla, bla, bla, never feed him after me.

Midnight, so, ist, ist der, äh, ist der, äh, Text, der dann in Strong ist. Äh, äh, da geht's, glaub ich, um Gremlins, äh, wenn ich's richtig, äh, verstanden hab, so ein Gremlins-Text. Vielleicht, äh, wisst ihr, kennt ihr das bei Gremlins, die darf man nicht nach Mitternacht füttern, weil sonst passieren schlimme Dinge mit denen.

Ähm, äh, werden sie zu kleinen Monstern, äh, werden sie zu kleinen Monstern, also wichtig, äh, sehr stark hervorgehoben, nur in diesem Fall visuell betrachtet, eigentlich auch nur Fett. Äh, kann man natürlich auch anders machen rein theoretisch, weil es soll ja nichts damit zu tun haben, aber es ereignet sich, glaub ich, schon. Und auch da, dass die Standarddarstellung in ganz alten Browsern, äh, unterstrichen war und nicht, nicht fett sogar.

Aber ich glaub, das kann man echt vernachlässigen, weil heutzutage ist es überall einfach gefettet. Ähm, vielleicht noch, äh, ein interessantes, äh, Detail, was mir aufgefallen ist, oder was uns beiden aufgefallen ist, weiß ich, weil wir schon drüber gesprochen haben, ähm, beim Lesen, äh, der Speck, nämlich, ähm, dass Strong auch dazu verwendet werden kann, um das Label eines Paragraphs, eines P-Elements, ähm, auszuzeichnen.

Und wir sind da so ein bisschen drüber gestolpert mit, was ist denn das Label eines P-Elements? Genau, das ist so, da kann man gar nichts mit anfangen, mit dieser, mit diesem Geschwurbel. Ähm, und erst später bei einem anderen Beispiel, ne, von dem, von dem hervorgehobenen, also Labeling Warnings steht nämlich auch wieder.

Und da hat man dann gemerkt, ah, okay, das meinen die mit Label. Also ich hab ein Paragraph und dann hab ich einen Strong als allererstes und da steht dann drin Important Doppelpunkt und dann folgt der Text von dieser Meldung. Also ist auch so, ist das jetzt wirklich, macht das das zu einem Label, dieses Paragraphs? Also da ist schon sehr viel ... Sehr akademisch klingt das. Ja, ja.

Und, und es ist halt sehr ins, ins tausendste Detail noch gegangen, wobei, ist es wirklich so wichtig, äh, dass das, aber ich finde es sogar auch noch missverständlich formuliert, weil man kennt ja ein Label als was völlig anderes in HTML. Oh, das wird auch noch ein interessanter Blog, die Formularelemente, ah, ja, ja, da haben wir, da werden wir auch noch was, haben wir noch einiges zu tun. Ja, da haben wir noch ein paar Folgen zu füllen, auf jeden Fall.

Weil wir wussten nicht, worauf wir uns da einlassen mit der HTML-Serie. Nee, dass das so ausartet, hätte ich nicht gedacht. Ähm, genau, was gibt's zu Strong noch zu sagen? Ja, stellt euch einfach vor, wenn das jetzt ein Text wäre, ähm, der wirklich so wichtig ist, dass es einen quasi anbrüllt, ähm, ganz, ganz wichtig, äh, dä, dä, dä, dann, äh, dann nehmt ihr dafür Strong. Viel mehr, ähm, glaub ich, ähm, gibt's dazu nicht, oder?

Und jetzt haben wir das nächste Paar, wo sich, äh, diese ähnliche Frage stellt, nur geht's hier nicht um Fettung, sondern um Kursiv, beziehungsweise eben halt auch wieder nicht, weil da soll man sich ja nicht drauf verlassen, aber es ist eigentlich das gleiche Spiel, äh, nur, nur ein bisschen anders. Ähm, und I ist also, war das ursprüngliche Element so in HTML4, um eben Dinge kursiv zu drucken, was dann später halt abgelöst wurde durch, ich kann das per CSS machen.

Also I für Italics, vielleicht noch ganz kurz erwähnt. Und B für Bold, ne, logisch. Ähm. Und B für Bold. Und da war, da hieß es halt dann auch, genauso wie bei B, ja, das nutzt man jetzt nicht mehr, man nutzt jetzt EM und dann, dann ist es eine Emphasis, die dann auch irgendwie vom Screenreader vorgelesen wird, was eben aber halt auch nicht stimmt. Und was ist jetzt aber genau der Unterschied?

Also ich fand, da, und das fand ich jetzt sogar relativ, da fand ich es ein bisschen schlussiger, ähm, als bei dem, äh, B, ähm, und zwar war da zum Beispiel, also für das I-Element, äh, also okay, EM ist wieder eine, wirklich eine semantische Hervorhebung, die, quasi wie, wenn man es jetzt sprechen würde, die so sagt, I love carrots, ja, so. I love carrots, not pass. Genau.

Ähm, also das kann man sich ganz gut vorstellen, äh, damit und, äh, im, im, im Gegensatz dazu, ähm, das I-Element und dann kann man auch wieder die Frage stellen, wenn es jetzt doch nicht nur für Styling ist, wofür ist es denn dann eigentlich, aber hier die, die Erklärung ist, ähm, und dann, äh, wenn, wenn, wenn aus Gründen der Lesbarkeit, ähm, ein Wort abgehoben werden soll von dem normalen Text und nicht, um es hervorzuheben, wie als würde es jetzt jemand sprechen und besonders betonen.

Ähm, ähm, also ein, ähm, also ein, ein Textbereich, äh, mit einer sehr anderen semantischen Bedeutung als der umgebende Text, aber ohne es zu betonen. Ähm, ähm, und Anwendungsfälle wären zum Beispiel, ähm, Fachbegriffe, die hervorgehoben werden, ähm, oder Gedanken in einem Text, das kennt man vielleicht aus, äh, aus Romanen, wenn, äh, wenn irgendwie so ein, so ein Einschub kommt mit, ähm,

ähm, sie dachte bla bla bla oder, oder so ein wirklich so ein reiner Gedanke, äh, schaffe ich das wirklich, äh, oder sowas, sind dann manchmal in Kursiv, äh, gedruckt, ähm, neben dem normalen Text, der, oder neben dem anderen Text, der nicht Kursiv ist, der eben aus einer anderen Perspektive, ähm, gezeigt wird.

Ähm, äh, weitere Beispiele, ähm, wären zum Beispiel noch technische Fachbegriffe, ähm, alternative Stimmen oder Stimmungen, ähm, und es gibt noch einige weitere, ähm, die genannt werden in der Speck. Und das finde ich tatsächlich logisch, weil das ist was, was nicht jetzt besonders hervorgehoben werden muss, aber was eine andere, also nicht im Sinne von, es wird betont, aber es kriegt eine Hervorhebung.

Mhm. Finde ich ein bisschen, äh, einleuchtender als B, weil bei B fehlen mir irgendwie so die Use Cases dann am Ende. Also ein Beispiel gab's noch, ähm, da war ein Zitat, The Queen Mary sailed last night. Und dann wurde, Queen Mary wurde in E-Text, äh, mit E-Text umschlossen, um hervorzuheben, dass es da sich nicht um die Königin Mary handelt, sondern eben Queen Mary das Schiff, also als Name.

Und dann geht das Beispiel noch weiter, äh, ähm, weiteres Beispiel könnte sein, the word the is an article. Damit man, ne, das hervorhebt, es geht um das Wort the. Wobei ich da jetzt aber sagen würde, das finde ich streitbar, weil natürlich will ich da auch eine gesprochene Differenz. Sonst würde ich nämlich sagen, the word the is an article. Achso, ah, ja, stimmt, stimmt. Und ich sage dir aber, the word the is an article.

Und da würde ich jetzt sagen, ist auch nicht so, the, äh, ist an article. Also im Zweifel ein I und ein E, eben drumherum kroppen. Oh Gott, nein, keine solche Ratschläge annehmen. Nein, jetzt jetzt, äh. Aber das, also, da hatten wir es auch im Vorgespräch so ein bisschen, ne, die machen sich da Gedanken und gehen ins letzte Detail. Und wie du schon gesagt hast, wer passt das überhaupt am Ende?

Und dann ist es irgendwie teilweise so differenziert und auseinanderklamüsert, dass man schon wieder keine Ahnung mehr hat, was jetzt eigentlich genau Sache ist. Und man denkt sich, wozu das Ganze eigentlich? Ich hatte, ähm, ich hatte in der Spec einen Satz, das muss ich gerade mal gucken, ob der bei I oder M, äh, war. Moment, äh, ich brauche kurz eine Sekunde. Ah, nee, das war beim, das war beim Definition Element.

Da ist ein Satz in der MDN, der, der, der zeigt eigentlich alles, den lese ich auch später nochmal vor. Der zeigt den, der zeigt den, der zeigt den Wahnsinn, der da drinsteckt im Spec-Schreiben, glaube ich manchmal. Was ich mir auch vorstellen könnte, weil wir das ja beide so im Kopf haben mit diesem, ja, das benutzt man nicht mehr, benutzt jetzt das Semantische. Das Problem ist, dass halt B und I nie abgeschafft wurden, ne.

Also, sie sind halt nicht, die sind vielleicht, ich glaube, die waren auch mal deprecated markiert, aber sie existieren halt und sie werden aus Gründen der Rückwärtskompatibilität auch nicht einfach abgeschafft werden und nicht mehr unterstützt werden. Und dann musste man sich ja irgendwie überlegen, warum gibt's die denn jetzt noch und was ist denn der Unterschied und musste dann vielleicht was dafür definieren. Vielleicht war's auch so.

Aber andere Elemente wurden durchaus deprecated und quasi aus dem Standard rausgenommen. Also, das ist, glaube ich, vielleicht, weil's so weit verbreitet ist und man's deswegen nicht mehr, aber ich mein, Frameset waren auch so verbreitet. Ja, gut, das stimmt. Weil's halt immer noch so verwendet wurde, ja. Ja, also, ich verstehe, also bei I komm ich noch mit klar, wie schon gesagt, komm ich mit der Erklärung noch klar und sag, ja, das ist ein Anwendungsfall, den kann's geben.

Den kann ich nachvollziehen. Weil ich glaube, in den meisten Fällen mache ich mir diese Gedanken tatsächlich nicht, obwohl ich schon jemand bin, der sehr stark auf Semantik guckt. Aber ich hab, mittlerweile bin ich echt so, äh, so alt und so erfahren und so, und so auch, mir ist auch viel so egal, dass ich sag, ey, wenn das keiner passt, dann kann mir das scheißegal sein. Und ob das jetzt in 20 Jahren jemand passt, das ist mir doch jetzt noch egal. Also, Entschuldigung.

Das ist eh alles so schnelllebig, ne? Wir sollten, wir sollten advocaten, dafür, dass das alles gut ist. Aber ich, ich finde, man sollte auch Aufmaß haben. Es hat seine Grenzen. Wir weisen sehr oft auf Semantik hin, ne? Und so Sachen wie Diff-Suppe vermeiden und so, das hat alles seine Richtigkeit und Wichtigkeit.

Aber das sind jetzt echt so Dinge, wo ich dir da echt recht gebe und sag, okay, also, wenn nicht mal die Screenreader sich auch nur im Ansatz drum kümmern, aktuell, dann, und vor allem nicht nur aktuell, und das gibt's erst seit zwei Jahren, sondern das ist jetzt, wie gesagt, eine Dekade locker her, seit's diese Ansage gab. Und wahrscheinlich eher Richtung 15 Jahre.

Und wenn da nichts passiert ist, also, dann muss man halt nochmal ran an den Code, wenn's dann tatsächlich mal heißt, so, jetzt unterstützen, das aber alle. Also, M haben wir jetzt auch ausreichend erklärt, frage ich mich gerade. Genau, eine Sache noch, M versus Strong, haben wir das schon, also, M, Betonung versus Wichtigkeit bei Strong, genau. Ansonsten haben wir EM jetzt auch abgehakt.

Genau, also, das, das, das, das war das, was wir vorhin schon meinten, äh, Wichtigkeit im Prinzip, du wirst angebrüllt, äh, und M halt einfach, also, bei Strong und M, so die Hervorhebung, dass ein bestimmtes Wort besonders betont wird. Aber das haben wir jetzt auch schon 400 Mal gesagt. Und, äh, wir werden es jetzt noch ein 400 erstes Mal vielleicht sagen, aber dann, dann reicht's auch.

Genau, und dann, äh, kommt jetzt BDI und BDO, sind auch wieder zwei Elemente, die wir zusammengefasst haben, aber ich glaub, die kamen sowieso hintereinander. Und, äh, die hängen zusammen mit einer Geschichte, die sich nennt Unicode BD-Algorithmus. Ähm, da bin ich bei meiner Arbeit mit OpenType.js auch schon drüber gestolpert. Äh, was heißt das? BD steht für B-Directional. Das heißt, das sind Texte, wo sowohl, äh, Text von links nach rechts, als auch von rechts nach links drin vorkommt.

Also, arabischer Text, eingebettet in, in, ja, Text, wie wir ihn in westlichen Ländern, im Englischen, im Deutschen und so weiter, von links nach rechts schreiben. Und, äh, da muss man sich ja was überlegen, wie das dann funktioniert. Also, ich muss, äh, Zeichen gruppieren nach, nach verschiedenen Skripten. Also, eben arabisches Skript und, äh, lateinische Schriftzeichen. Und da gibt's so bestimmte Regeln, wie diese Zeichen zusammengefasst werden. Also, hauptsächlich bei Interpunktionen.

Also, ich muss ja zum Beispiel eine Klammer, eine geöffnete Klammer, muss ich ja umdrehen, wenn ich den Text aber von rechts nach links schreibe und, äh, ne, und die schließende Klammer auch wieder in die andere Richtung. Oder gehört ein Doppelpunkt jetzt noch zu dem lateinischen Zeichen? Oder gehört der Doppelpunkt jetzt, äh, schon zu dem arabischen und ich muss ihn auf die andere Seite stellen? Und so weiter.

Und da gibt's bestimmte Regeln, nach denen das, ähm, abläuft, auf die ich jetzt, die ich weder kenne, noch werde ich auf die jetzt eingehen, weil ich sie nicht kenne. Aber es spielt im Endeffekt auch keine Rolle. Ich glaub auch, dass die, dass der Einsatz von sowas so selten sein dürfte, weil ich, in der Regel, gut, vielleicht noch eher englische Begriffe im Arabischen als umgekehrt, außer ich hab jetzt ne Seite, die sich um Arabisch lernen irgendwie dreht.

Aber, ähm, im Endeffekt muss ich mich da fast nicht drum kümmern, weil der Browser das eben, oder weil dieser Algorithmus das macht. Aber es gibt bestimmte Fälle und ich hab da auch ne kleine Demo dazu gebastelt, ähm, die einfach mal anklicken, weil es wieder mal schwierig ist, einfach so ne Demo zu beschreiben.

Ähm, man kann ja den Text mit dem dir-Attribut, mit LTR für Left to Right und mit RTL für Radiotelevision Luxemburg, ähm, natürlich, quite to Left, ähm, kann ich den Text ja umstellen. Also auch lateinische Schriftzeichen kann ich sagen, der läuft aber von rechts nach links. Da werden aber nicht die Zeichen umgedreht, sondern der Text ist quasi einfach rechts ausgerichtet.

Aber das hat ne Wichtigkeit eben, wenn ich arabische Text, äh, Schriftzeichen benutze, dass die in der richtigen Reihenfolge dann auch ausgegeben werden. Weil gerade bei so arabischen Skripten, aber auch, äh, Urdu und was es noch so alles gibt, ähm, da ist es halt wirklich wichtig, da gibt's dann, äh, Kombinationen von Buchstaben, die dann wirklich die Form der Buchstaben verändern, ähm, und da ist es halt wichtig, wie rum läuft das und, und passen alle Buchstaben auch richtig.

Und da gibt's jetzt ein Beispiel, da steht jetzt vorne dran x, y, z, Doppelpunkt, dann ein arabisches Schriftzeichen und dann lorem ipsum dolor. Und da ist dann das Problem, dass das x, y, z auf der falschen Seite steht mit dem Doppelpunkt. Also ich möchte vielleicht, dass der Doppelpunkt links steht und dann der arabische Text eingesetzt.

Ähm, ist zum Beispiel wichtig, wenn ich User-Texteingaben, zum Beispiel, äh, irgendwelche Namen in der, in der Aufstellung, in der Liste, da war so eine, als Beispiel bei der MDN, so eine Rangliste mit Sportlern und einer hatte halt einen arabischen Namen mit arabischem Skript, ähm, auch eher selten, weil normalerweise würde man halt eine, mit lateinischem Buchstaben eine Umschrift davon benutzen.

Aber gut, wenn's User-Input ist, kann's theoretisch sein, dass da, dass da arabische Zeichen mittendrin vorkommen. Und dann würde ich diese arabischen Zeichen, wo der User-Input reinkommt, ähm, wenn ich davon ausgehen kann oder muss, dass vielleicht solche Zeichen drin landen, kann ich umschließen mit dem Tag BDI und das unterbricht dann eben diesen automatischen, ähm, diesen automatischen Prozess, in dem die, äh, Zeichen angeordnet werden.

Das ist jetzt echt sehr abstrakt und ich weiß nicht, ob man sich das richtig vorstellen kann. Ich glaub, wir müssen das auch nicht jetzt in aller Tiefe machen. Und genau so gibt's auch ... Aber die Demo anschauen hilft, ich hab's mir grad angeguckt, äh, da sind auf jeden Fall sehr viele coole Beispiele. Du hast das ja echt einmal komplett durchgebastelt.

Genau, und BDO ist das zweite Element, ähm, damit kann ich quasi das, äh, also das BDI setzt quasi das Wort in einen eigenständigen Kontext, das I steht auch für Isolation, also B-Direction, Isolation, und das BDO, das überschreibt quasi das, was standardmäßig mit dem Inhalt passieren würde, also mit dem Wort.

Das heißt, ich kann diesen arabischen Text, der von rechts nach links eben diesen, ähm, mit diesen Verschachtelungen und dass da der Punkt dann unter dem Zeichen ist und dass die Zeichen nebeneinander angeordnet sind, das kann ich aushebeln, indem ich, äh, das BDO-Tag außenrum setze und per dir LTR den Text eben von links nach rechts laufen lasse, obwohl's im arabischen Skript eigentlich nicht der Fall wäre.

Und umgekehrt kann ich auch bei einem lateinischen Skript, das von links nach rechts läuft, mit BDO, dir ist gleich RTL, dafür sorgen, dass da dann nicht mehr Lorem Ipsum Dolor steht, was dann rechts ausgerichtet ist, sondern da steht dann Rolot Muspi Merol mit einem, äh, der großen L am Ende, also das ist dann wirklich, die, die, äh, Schrift ist dann wirklich umgedreht, also das verdeutlicht für uns, die wir, äh, westliche Schriften gewohnt sind,

vielleicht eher noch, was das Ganze eigentlich macht, dass da eben die Buchstabenreihenfolge umgedreht wird, was halt bei arabischen Schriftzeichen oder auch bei anderen, die von rechts nach links laufen, wichtig ist. So, hu, alles verstanden. Danke, dass du das so gut vorbereitet hast. Äh, ich weiß dazu nämlich, dazu bin ich nämlich nicht mehr gekommen. Das macht ja gar nichts. Äh, das heißt, ich hab gar nichts hinzuzufügen, vielen Dank für diese Ausführung.

Ähm, und dann würden wir jetzt zum BR-Element kommen. Auch da vermisse ich irgendwie Aufzeichnungen, auch dazu hatte ich mir Sachen aufgeschrieben. Sag mal, bin ich denn irgendwie deppert? Was ist denn da los? Naja, egal. Aber ich glaub, so viel geht's doch da auch gar nicht zu zu sagen, oder? Aber ich lass dich mal. Ach, der Linebreak. Ähm, nee, was heißt viel? Ähm, also der Linebreak, den kennt wahrscheinlich jeder.

Äh, falls nicht, das ist einfach um einen Absatz, äh, nein, nicht um einen Absatz, um einen Umbruch, um einen Textumbruch zu machen. Das heißt, der Text nach dem BR kommt in eine neue Zeile. Ähm, fertig.

Nein, Spaß. Äh, äh, ähm, man sollte das auf jeden Fall nicht verwenden, um jetzt viele Abstände, größere Abstände, ähm, zu, hervorzurufen zwischen bestimmten, also, also jetzt nicht, ähm, ich hab jetzt zwei, äh, zwei Absätze, äh, und ich möchte, dass die weiter auseinander sind, dann sollte ich da jetzt nicht, äh, ewig BRs mit reinkloppen oder so, sondern das sollte man dann eher mit Padding oder Margin, ähm, lösen, wahrscheinlich in dem Fall dann eher mit Margin, ähm, aber letzten

Endes, äh, äh, ist es das eigentlich schon, das macht einen Umbruch, äh, ich glaube. In einem Paragraph, der ansonsten halt über die volle Breite laufen würde, ja. Gut, aber es muss nicht im Paragraph sein, kann, kann, geht überall. Zum Beispiel, also zum Beispiel, ja. Oder in einem, in einem Address-Tag, ähm, eine Adresse zu formatieren.

Warum möchte man das tun, ähm, zum Beispiel, die Beispiel hier in der MDN ist zum Beispiel ein Gedicht, das, das natürlich bestimmte Verse hat, die, ähm, nicht alle in einer Zeile stehen sollen, sondern jeder Vers steht in der nächsten Zeile und, äh, dafür ergibt es durchaus Sinn, ähm, aber es gibt ja auch manchmal den Fall, dass man, ähm, einen Text an einer ganz bestimmten Stelle umbrechen möchte, warum auch immer.

Da gibt's ja ganz viele, ähm, Beispiele dafür, dafür verwendet man das dann, ähm. Wobei das dann schon wieder teilweise schwierig wird, ähm, was so Mobile Breakpoints oder so angeht, weil was bei dem einen gut aussieht, muss bei dem anderen nicht gut aussehen.

Und da ist es dann manchmal besser, ein Und-NBSP zu nutzen, also ein Non-Breaking-Space, wenn ich möchte, dass zwei Worte zum Beispiel immer zusammenhängen, also ein Artikel und das, das Hauptwort, dass das immer zusammen ist und dann lieber zusammen in die nächste Zeile umbricht oder nicht. Ähm, und dann gibt's ja auch noch den, äh, Z-Z-W-N-J, also Zero-Width-Non-Joyner. Das heißt, man sieht, das ist quasi das Gegenteil davon, man sieht ihn nicht, aber er bricht da theoretisch um.

Also wenn ich jetzt möchte, aus irgendwelchen Gründen, dass ein Wort, äh, an einer Stelle umbricht, wo es normalerweise nicht umbrechen würde, dann kann ich diesen Zero-Width-Non-Joyner nehmen. Ähm, so, irgendwas hat, ich hatte gerade noch einen Gedanken dazu und jetzt ist er wieder weg. Macht nix. Dann sag ich noch was, was mir aufgefallen ist, bei allen Demo, äh, bei allem Markup, was die da zeigen, schreiben sie BR konstant in der XHTML-Schreibweise. Mit Leerzeichen, Slash, ne?

Leerzeichen, also warum, äh, ich war, ich war, ich war vorhin, ich war vorhin ein, ein Mühe davon entfernt, ein Ticket aufzumachen bei denen, ähm, mit, bei, bei einem anderen Artikel, jetzt nicht bei dem, ähm, warum sind, das ist doch widersprüchlich, wieso steht's da einmal so und einmal so? Ja, überall steht im Sons-BR, aber in den Code steht's so.

Und dann haben sie, und dann haben sie so ein, äh, ein relativ großes Formular, das man dann ausfüllen muss, also Report-Content-Issue kann man drücken, dann ist man bei GitHub und dann haben die ein Riesenformular, was man ausfüllen muss. Ja, und jetzt, was hast du gesehen und was, hey, wie hätte es sein sollen? Und hast du noch Links dafür? Und da, da, da, da, da, da, da, oh komm, ey, schon wieder kein Problem mehr. Ja, so kann man sich auch die Tickets vom Leib halten, ne?

Man kann's aber theoretisch auch direkt editieren, ähm, steht da. Man muss dann halt, ja, man kann dann halt einfach einen Merch-Request machen. Dazu gibt's natürlich auch einen Link. Ich hab natürlich keinen Write-Access auf die MDN, ähm, aber, äh, ja, ich glaube, das wäre vielleicht auch ein Weg, dass man es einfach dann verändert. Und dann einfach so im Sinne von, was will ich denn jetzt hier lang rumdiskutieren? Ich mach die Änderung jetzt einfach mal und guck mal,

was sie sagen. Ja. So, wieso steht das Element oben ohne Slash und unten in den Beispielen überall mit Slash? Ähm, was mir auch aufgefallen ist, jetzt mal, äh, ganz abgesehen davon, dass, ähm, offenbar ist so eine grundlegende Änderung in der MDN gegeben hat. Ich glaube, es ist nicht auf allen Seiten, die ich heute gesehen habe, aber auf einigen, wo so Demos drauf sind, ähm, sind nicht mehr die Demos so, wie sie früher waren, sondern, ähm, mit so einem Link Play, hast du das auch

gesehen? Und, ähm, du kommst dann quasi in so eine Art Code-Pen-Ding rein von der MDN, äh, wo du dann tatsächlich Code, also es ging vorher auch, aber vorher konntest du auf der Seite direkt den Code verändern, das geht jetzt irgendwie leider nicht mehr. Das war ein bisschen cooler, dass man die Demos, also, warte mal, doch, in manchen Containern gibt es noch. In manchen kann man es noch, ja.

Und es gibt welche, die jetzt dieses Play haben und dann landest du auf einer externen, das ist auch irgendwie blöd. Also, so direkt Code da drin rumschreiben ist schon ganz schön fein, muss ich sagen. Ähm, das ist eigentlich die schönere Möglichkeit, weil dann sehe ich direkt, ähm, direkt Resultate von dem, was ich da

gemacht habe. Also, direkt, wenn ich jetzt irgendwie ein CSS-Property oder sowas, äh, ausprobieren möchte und dann kann ich sofort das Result sehen, statt dass ich jetzt auf einen anderen Link, naja, wie auch immer. Ähm, ähm, so, BR, ich glaube... Genau, also, man soll halt keine, man soll keinen Margin nutzen, um irgendwie Abstände zu machen. Das würde man mit, äh, mit

Leihenheit, äh, stylen. Und, äh, aus Accessibility-Sicht steht hier auch noch, ähm, soll man also nicht jetzt innerhalb von einem Paragraph dann irgendwie BRs nutzen, um da mehrere Paragraphs drauf zu machen. Also, wenn ich jetzt zwei BRs hintereinander setze, hab ich jetzt theoretisch auch neun... Ich hast gerade gesagt, Leihenheit statt Margin, das hab ich jetzt grad nicht...

Genau, hier Styling with CSS. Also, man kann das BR-Element an sich so gut wie nicht stylen, wirklich, aber man kann ihm einen Margin geben und dadurch dann den Zeilenabstand quasi beeinflussen. Aber das sollte man eben nicht tun, sondern dann stattdessen halt konsequent die Leihenheit verändern. Okay, gut. Das, äh, ich wäre, also, ich hab, glaube ich, noch nie, hab ich schon mal versucht, das BR-Element zu

stylen. Doch, es kann schon sein, dass ich das mal aus Spaß gemacht habe, um zu gucken, ob's geht, aber ich würde einfach sagen, BR-Element einfach nicht stylen. Tut das nicht. Ähm, das ist, das soll unsichtbar sein und das soll auch so bleiben und das soll keinen Einfluss nehmen, außer, dass es einen Umbruch macht. Fertig. So, mach ich jetzt gleich noch ein Ticket auf zu dem, warum habt ihr denn da das mit dem Leerzeichen-Slash, also schon auch Leerzeichen-Slash? Es sieht so wirkend aus.

Es ist wirklich, weil man es halt so selten sieht. Und unten ist die HTML5-Spec verlinkt und ich denke mir so, naja, da steht das doch bestimmt nicht mit dem, da steht bestimmt drin, man darf, wenn man möchte. Aber es ist der Mühe nicht wert und wahrscheinlich steht es auch deswegen halt immer noch so drin. Ach, ich finde, es wäre der Mühe vielleicht schon wertvoll.

Nee, mich nervt's jedes Mal, wenn ich in der MDN, ich denke, und die Beispiele sind oft so kompliziert in der MDN und die Texte sind so kompliziert und ich denke mir so, das würde doch extrem vielen Leuten helfen, wenn die Beispiele einfacher wären und die Texte, zumindest der erste Absatz, der bei einem Element steht, der sollte doch super pipi einfach zu verstehen sein, was tut denn das eigentlich? Sollte man meinen.

Und ich lese später, wie gesagt, ich lese später noch einen vor, da hat es mich schon ein bisschen geschüttelt, muss ich sagen. Gut, aber bevor wir uns in MDN-Bashing verrennen, kommen wir zum nächsten. Ja, mir folgt ja jetzt jemand, der MDN-Editor ist bei Mastodon, weil ich irgendwann mal was Schlimmes geschrieben habe. Und ja, weiß nicht genau, vielleicht.

Ja, und dann kam natürlich auch gleich der Freddy um die Ecke und hat gesagt, ja, aber du kannst doch alles direkt bearbeiten und du musst dich doch nicht beschweren, mach doch, mach es doch besser. Und dann denke ich schon so, ja, halt Zeit. Ja, das denken sich halt viele wahrscheinlich.

Ja, das ist, und deswegen, und genau deswegen denke ich, es wäre es vielleicht mal wert, wenn einem so was nervt, einfach mal, jetzt gerade diese kleine Geschichte mit den Leerzeichen und den Slashes, einfach mal ausbauen. Dann ein Kommentar hinten dran, ja, das ist doch irgendwie nicht mehr zeitgemäß. Einfach mal committen, Merch-Request aufmachen und gucken, was passiert. Das kostet mich fünf Minuten. Das ist einfacher als ein Issue, auf jeden Fall.

Muss ich mir das jetzt auch noch aufschreiben auf meiner Liste? Du hast ja Mate getrunken, du machst das heute Nacht noch. Ich mach das heute Nacht noch dreimal. Request 23.30 Uhr. Alles mach ich heute um 23.30 Uhr. Sehr gut. Gut, aber jetzt das Side-Element, also nicht Side mit S, sondern Side mit C. Und da hast du dir, glaube ich, ein bisschen mehr dazu aufgeschrieben.

Ja, genau. Das Side-Element wird verwendet, um bei einem Zitat, jetzt muss ich gerade nochmal die, wieso habe ich das denn nicht mehr offen, wo ist das denn hin? Es kann sogar sein, dass wir das im Rahmen von Blogquote schon mal benutzt haben. Ja, das kann sehr gut sein. Also, das ist quasi, um die Referenz eines Zitates festzulegen, das kann alles Mögliche sein. Beispielsweise kenne ich das in einem Blogquote.

Und am besten ist das, oder am coolsten ist das, wenn da auch noch ein Link drin ist, falls es einen Link dazu gibt. Also, ich meine, bei einem Zitat jetzt hier in der MDN ist ein Zitat von einem Buch, das muss nicht unbedingt jetzt, da könnte man einen Amazon-Link hinpacken oder so, vielleicht aber auch blöd. Es muss aber auch nicht unbedingt ein Link mit drin sein.

Ich finde aber Side am besten mit einem Link, wenn ich auch irgendwo hingucken kann, wenn ich die Referenz mir angucken kann, sozusagen. Es kann aber auch ein Research Paper sein, ein Gedicht, ein Song, ein Bild, ein Stück, eine Oper, ein Musical, eine Ausstellung. Also, immer dann, wenn es ein Zitat gibt und ich möchte dazu festlegen, wo kommt denn das her, was ist die Referenz dazu, dann benutze ich dafür das Side-Element. Ich bin mir gar nicht sicher, ob es im Blogquote sein muss.

Es ist aber, glaube ich, so die häufigste Anwendung davon und auch diese DM. Also, in dem Beispiel ist es gar nicht in dem Blogquote, ne? Es ist in der Nähe von dem Blogquote, es ist eigentlich in der Fig-Caption, also es ist ein Figure-Element außenrum, da drin ist ein Blogquote, nach dem Blogquote ein Fig-Caption-Element und darin ist das Side. Und da frage ich mich halt auch wieder, ist das jetzt, zu was ist das jetzt dann genau zugeordnet?

Also, ne, ergibt sich das einfach aus der Logik, das übergeordnete Parent-Element und da ist ein Blogquote drin, also wird sich das darauf beziehen? Das ist halt immer, ja, auch wieder schwierig, schön gedacht, aber semantisch ist ja eigentlich nur, wenn ich die Daten dann wirklich auch miteinander verknüpfen kann, dann kann ich es ja richtig auswerten. Ja. So muss ich halt viel raten wieder.

Und ich, ja genau, und ich denke, ja genau, und ich denke in dem Fall halt auch, ein Link ist immer auch noch besser, wenn er dabei ist. Ebenso auch bei einem weiteren Beispiel, tatsächlich auch ohne Blogquote, nämlich zum Beispiel, wenn man einen Standard von irgendetwas, also hier das Beispiel ist, more information can be found in ISO-Standard, bla bla bla, dann kann auch dafür ein Side-Element verwendet werden, jetzt ganz ohne Quote.

Also immer dann, wenn es eine Referenz auf irgendwas ist, muss also gar nicht jetzt irgendwie ein Zitat sein aus irgendwas. In dem Fall auch, würde ich auch sagen, ohne Link ist es relativ nutzlos, weil, wer passt es und was bringt es?

Ich meine, ich könnte mir jetzt vorstellen, dass wenn jetzt irgendein System sagt, ah ja, die Links, die will ich nicht immer von Hand reinschreiben, aber ich kenne diese Liste von Standards und wenn du den da reinschreibst, dann verlinke ich den automatisch, könnte ich mir vorstellen, dass es funktioniert.

Also, dass man es quasi nicht selbst schreibt, den Link. Aber ich finde, ein, ja, ein Side-Element ohne Link ist irgendwie, außer es ist jetzt die Bibel, ja, irgendwas, was jeder kennt, da kann ich, da ist es mir recht, da muss kein Link hin, aber ansonsten möchte ich eigentlich immer einen Link haben. Gibt es die Bibel eigentlich auf GitHub? Auf GitHub? Habe ich mich gerade gefragt. Ja, warum eigentlich nicht? Sodass man, sodass man bestimmte Stellen verlinken kann.

Ach so. Also, es gibt online, also Bibel online gibt es auf jeden Fall in verschiedensten Ausgaben. Aber so große Werke sollte es doch eigentlich auf GitHub geben, also gerade, wenn sie irgendwie keinen Copyright mehr haben, wobei ich bezweifle, dass sie nicht als Copyright hatte. In der Regel willst du die ja auch nicht verändern, nachträglich. Nee, nee, du willst sie nicht verändern, aber du möchtest sie vielleicht verlinken können und auf GitHub kannst du jede Zeile verlinken.

Das ist eigentlich ganz cool. Es gab ja auch mal so Gesetze im Internet und die, ja gut, die verändern sich manchmal, aber das ist tatsächlich interessant. Und wenn die Bibel sich mal verändert, ist auch interessant. Das ist interessant, ja. Dann geht's weiter mit C und Code ist das nächste. Und damit kann man inline, und das ist halt der Unterschied zu, ob ich jetzt in einem Pre-Tag irgendwas ausgebe, inline im Fließtext Code markieren.

Also wenn ich eben zum Beispiel drüber spreche über HTML-Elemente und ich schreibe dann einen Satz hier, das Site-HTML-Element macht dies und das, dann würde ich das Site vielleicht in ein Code setzen. Genau. Üblicherweise wird das dann vom Browser auch ein bisschen anders gestylt, mit einer Monospace-Schriftart versehen.

Und soweit ich weiß, nutzt man das Code-Element tatsächlich aber auch in einem Pre. Also es ist nicht einfach nur Pre und dann Code drin, sondern Pre-Code und dann hat man das mehrzeilig. So würde man das dann üblicherweise machen. Jo, da gibt's tatsächlich, äh, aus meiner Sicht auch nicht mehr. Gut, es ist standardmäßig, äh, nutzt man das Monospace-Font, das könnte man vielleicht noch sagen.

Ähm, aber ansonsten, also es ist immer ganz gut, wenn man das zusätzlich noch hervorhebt, indem's eine andere Hintergrundfarbe zum Beispiel hat. Äh, dass das ein bisschen hinterlegt ist und ein bisschen Padding außenrum oder so, das schadet eigentlich nicht. Ich weiß nicht genau, warum mir das jetzt einfällt, aber ich, äh, ich glaube, ich schreibe das selten aus im Code, sondern ich schreibe das oft in Markdown und in Markdown wären das einfache Backticks.

Also ein Backtick, dann kommt der Code und nochmal Backtick, aber das ist ja eigentlich, das spuckt dann am Ende einen Code. Und das Mehrzeilige wären die drei Backticks hintereinander. Genau, das Mehrzeilige sind die drei Backticks, das, ja, genau. Mensch, das ging noch richtig schnell. Hi, wir sind ja schon, wir sind schon fast fertig, ne? Das ist ein bisschen übertrieben, aber, ähm, ich glaube, die Schlimmen haben wir, die Schlimmen haben wir.

Naja, es stimmt nicht, es kommt noch was Schlimmes. Naja, es ist ein bisschen, was kommt noch. Dann kommt als nächstes das Data-Element. Äh, da hab ich, oh Mann, oh, wie war das? Verdammt, jetzt hab ich gesehen, gerade fiel mir noch was ein. Ähm, fang du doch schon mal an, ich such das noch schnell raus. Das Data-Element, ja.

Es ist dafür gedacht, dass man maschinenlesbare Daten, also es hat ein Value-Attribut, das verpflichtend ist und darin kann man maschinenlesbare Daten verknüpfen mit dem Text, den das Data-Element umschließt. Ähm, also ich könnte jetzt eine Liste haben mit Zutaten oder mit Büchern und könnte die Artikelnummern in einem Shop dann zum Beispiel dahinter legen. Ähm, ja.

Und was ich mich da gefragt hab und vielleicht hast du da irgendwie noch eine andere Eingebung, aber warum sollte ich das nutzen wollen, wenn's doch auch Data-Attribute gibt, die ich erstens, also von denen ich mehrere setzen kann und von denen ich sprechend benamen kann, also irgendwie Data-Product-ID und Data-Product-URL vielleicht und was weiß ich. Und die vor allem auch in älteren Browsern unterstützt werden.

Das erschließt sich mir wieder, das ist auch so, ne, wir haben jetzt ein semantisches Element dafür, aber was bringt mir das denn dann? Also ich hab die Artikelnummer, ich weiß aber nicht mal, dass das die Artikelnummer ist, es könnte genauso gut auch was anderes sein, was da drin steht. Also das Programm braucht schon wieder, dass das eventuell parsen würde, braucht schon wieder Hintergrundinformationen und ein Wissen, das halt nirgends hinterlegt ist.

Und gut, das kann man jetzt sagen, bei den Data-Attributen auch, da muss ich wissen, dass es dann Data-Product-ID gibt und so, aber da frag ich mich halt, wozu? Wozu das Ganze? Ich kann halt, also eigentlich ist für mich Semantik halt so gedacht, unabhängig davon, ob ich ein Wissen metamäßig über den Inhalt habe, kann ich Dinge miteinander verknüpfen und weiß, ob Dinge wichtig sind oder wie Dinge zusammenhängen so ein bisschen.

Und wenn ich, wenn ich das, wenn ich aber Informationen brauche, die ich nicht habe, dann bringt mir das Ganze doch gar nichts. Dann kann ich, ja gut. An der Stelle ist es halt für einen speziellen Sonderfall, den sich mal jemand ausgedacht hat, der könnte doch sinnvoll sein. Das Data-Attribut, das HTML5-Data-Attribut ist ja quasi so ein ganz, das kann ich ja für alles Mögliche verwenden.

Das hat keinen speziellen Zweck. Also denk, das kann ich ja für alles. Ich kann das theoretisch für Styling verwenden. Ich kann es verwenden, um irgendwas mit JavaScript mit dem Ding zu machen. Ich kann das verwenden, um zum Beispiel Daten zu speichern. Genau, was du jetzt gerade gesagt hast, also eine Artikelnummer oder so.

In dieser Fall, das Data-Element mit dem verpflichtenden Value-Attribut ist halt genau dafür gedacht, ob es jemand passt, keine Ahnung mal wieder, ja, ob es irgendjemand in dieser Art verwendet.

Ich weiß es nicht. Aber es ist halt genau für diesen einen Zweck gedacht. Dieses, ich habe ein Datum, das maschinenlesbar ist und ich habe aber auch eine menschenlesbare Variante dazu und die möchte ich irgendwie an einem Ort abspeichern, logisch miteinander verknüpft und irgendeine Maschine kann dann irgendwie was daraus lesen.

Da wäre halt dann wenigstens noch interessant gewesen, dass man irgendwie noch ein Key-Attribut hat oder so, mit dem man dann nochmal definieren kann, auf was sich das denn jetzt, also dass das eben die Product-ID ist oder so. Damit ich sagen kann, das Data-Element mit dem Key-Product-ID möchte ich haben. Da könnte ich eine ID draufsetzen oder eine Klasse, aber ich finde es, ich habe es bisher noch nicht gebraucht oder vermisst, sagen wir es so.

Aber ich glaube, dann brauchen wir uns damit auch nicht näher aufhalten. Aber du hast doch irgendwie einen Einschub oder willst du den dann ganz am Ende noch? Ja, ich habe ihn gerade wieder gelöscht, weil es den falschen Link hat, aber ich habe es jetzt tatsächlich gefunden. Ich fand es halt witzig, Data, da hat es jetzt gerade, ich habe komische Verknüpfungen in meinem Kopf, ich muss es einfach dazu sagen.

Weil Data, der Peter Kröner, der ja auch Host oder Co-Host vom Working-Draft-Podcast ist, der hat die Tage einen ziemlich witzigen Post geschrieben, den glaube ich nur ich witzig fand, weil ich weiß nicht genau, wie viele es verstanden haben, was er eigentlich damit sagen wollte. Ich habe mich ziemlich weggekichert. Und zwar hat er einen Codeschnipsel gepostet, der steht drin, Export Class Form Lore, Extents Form Data, also Lore, L-O-R-E.

Und nicht googeln jetzt. Und die Star Trek-KennerInnen unter euch, die Star Trek Next Generation kennen, die wissen, dass Lore quasi der böse Zwilling von Data ist. Also Data ist der Android, der auf dem Raumschiff ist, auf der Enterprise. Und der hat quasi so eine Art bösen Zwilling. Ist ein bisschen kompliziert, ist nicht wirklich der Zwilling, aber er sieht halt genauso aus, hat halt irgendwie ein bisschen rote Augen natürlich, damit man sieht, dass es der Böse ist.

Klar. Und der Kommentar oben drüber ist dann, Lore ist gleich Data plus some extra Features. Und genau, das ist es halt tatsächlich bei Star Trek. Also er hat das halt jetzt für seinen Codeverbinder, bei Star Trek Next Generation ist es halt genauso, dass Lore zum Beispiel, also Data ist ja quasi einfach nur eine kalte Maschine, die sich bemüht, so zu sein wie ein Mensch.

Aber Lore hat ein Emotionschip. So, ne? Das heißt hier zum Beispiel so ein extra Feature von Lore ist, dass er halt, der kann böse sein oder sowas, ja? Das kann Data nicht. Data ist quasi immer neutral. Er hat dann irgendwann auch, der schaltet es dann mal an, hat dann irgendwie Angst und entscheidet sich dann dagegen. Das ist keine gute Idee, Emotionschip. Das brauchen wir nicht. Das stört nur.

Ja, das ist der kleine Einschub. Da muss ich gerade beim Data dran denken. Ja, den Post von Peter, den werden wir auch noch in den Show Notes verlinken. Sehr gut. Jo. Oh Gott. Und jetzt? Jetzt haben wir noch. Jetzt DFN. Definition. Oh Gott. Oh Gott. Und da dachte ich nämlich auch zuerst, dass, ja, sag ruhig. Definition ist das Element, wo ich mir die Speck angeguckt habe und gesagt habe, was wollt ihr mir denn eigentlich damit sagen? Ich lese mal den ersten Satz vor, der da steht.

The DFN HTML element is used to indicate the term being defined within the context of a definition, phrase or sentence. Mhm. Das ist doch klar, sofort klar. Und dann geht's weiter. The ancestor P element and the DT, DD pairing or the nearest section ancestor of the DFN element is considered to be the definition of the term.

Und ich finde allein schon die Benahmung von dem Tag so unglücklich, weil unter Definition würde ich mir eben die Definition vorstellen, weil das heißt ja auch Definition. Aber es ist eigentlich das, was definiert wird. Ne? Also es ist ja nicht die ganze Definition steht in diesem DFN-Tag, sondern das Wort in dem Fall hier, a validator is a program that checks bla bla bla, da ist das Wort validator, ist das, was mit DFN markiert wird.

Und der Sinn dahinter ist, dass ich dem eine ID geben kann und dann im weiteren Verlauf das Wort validator verlinken kann eben auf diese Definition. Das heißt, das ist so komisch, weil natürlich verlinke ich dann auf zum Beispiel einen Paragraph, in dem dieses DFN drin ist, aber ich verlinke eben auf das Wort da drin und nicht auf das Äußere. Also ich habe es mir dann irgendwann zusammen erklärt und das ist ein völliger semantischer Wahnsinn aus meiner Sicht.

Und zwar funktioniert das folgendermaßen. Wenn ein DFN-Element in einem P drin ist, dann ist die Definition dessen, was in DFN drin steht, das P selbst, das übergeordnete P. Dasselbe wie auch bei der Section oder bei DT-DD-Pairings. Das heißt, das geht von innen nach außen. Und das hat man sonst irgendwie ... Und das ist implizite Semantik, die irgendwie von innen, also was, was, äh, äh, äh, warum?

Warum? Also, äh, es ist doch ... Also, möchte ich ... Also, ich meine, das ergibt ja schon irgendwie, schon logisch irgendwie keinen so richtigen ... Also, dieses eine Beispiel ergibt irgendwie schon Sinn, dass da ist in der MDN. Also, da ist ein P, das steht drin, äh, und dann DFN-Validator is a program that checks for syntax errors in code or documents, so P zu.

Ja, da ergibt es irgendwie Sinn, dass ich das Wort da irgendwie markiere und das ganze Ding die Definitionserklärung ist von dem einen Wort, was mit DFN markiert ist. Aber warum so kompliziert? Äh, ich würde den Text niemals so auszeichnen. Ich weiß nicht, wo, was ist der, also, was, was ist der Mehrwert jetzt davon an der Stelle? Welche? Wieder die Frage, welche Maschine passt das? Was für, dass, das ...

Ein Lexikon zum Beispiel, das dann wieder Cross-References hat auf das Wort und dann kannst du draufklicken. Aber es ist halt so, ja, also, mich stört schon allein die Benamung und dass das halt eigentlich nicht die Definition ist, sondern eben das zu definierende Wort. Und dann geht's ja auch noch weiter, wenn das nämlich ein Title-Element-Attribut hat, dann muss in diesem Title-Attribut das definierte Wort drinstehen und sonst nichts.

Und was, was umgebe ich dann aber mit dem DFN? Würde ich dann den kompletten Paragraph mit dem DFN umgeben und als Title dann das Wort Validator setzen? Und würde zum Beispiel nur schreiben, a program that checks for syntax errors? So würde ich das jetzt deuten, weil das steht, steht eindeutig unten hier, if the DFN contains a single, äh, nicht single title, äh, contains, äh, has a title attribute, the value of the title attribute is considered to be the term being defined.

The element must still have text within it, but that text may be an abbreviation or another form of the term. Also eben nicht die Definition wieder, sondern, sondern in der Alternative. Aber so, und dann ist es auch wieder so schwammig, also das kann das sein, vielleicht aber auch was anderes. Ein ABBR da drin sein, das wiederum ein Title haben darf und dann braucht das DFN aber keinen Title. Genau. Es ist ein Wahnsinn.

Generell an der Stelle noch, sei noch mal drauf hingewiesen, Title, Screenreader, mhm, mhm. Ich würde sagen, ähm, das lassen wir uns jetzt mal von jemandem anderen nochmal erklären, der das besser weiß wie wir, weil das Internet weiß ja immer alles besser. Bitte tut das mal, sagt uns mal wirklich Anwendungsfälle dafür, ähm, die jetzt nicht irgendein Spezialfall in irgendwelchen wissenschaftlichen Arbeiten sind.

Weil, das, das, das lasse ich gelten, da gibt's bestimmt spezielle Sachen, das finde ich aber, also da wurde doch bestimmt irgendein Konstrukt, was es irgendwo anders gibt, versucht auf HTML zu quetschen. So, so, so wirkt es auf mich irgendwie. Ähm, ich würde das gerne mal, das wäre doch was, was man mal nachgucken könnte, in, ähm, was, wie war das, war das das, ah, wie hieß denn diese, diese Auswertung?

Es gab doch diese, da haben wir auch mal eine Folge dazu gemacht, ähm, wo, wo das ganze Web irgendwie ausgewertet wurde nach bestimmten Kriterien, wie wird JavaScript verwendet, wie wird CSS verwendet und so weiter. Und da drin würde ich gern mal gucken, in diesem Datensatz, das DFN-Element. Ähm, das nehme ich mir mal, nehme ich mir mal in Gedanken mit, weil, äh, das ... Stimmt, ja, wie oft das tatsächlich irgendjemand benutzt.

Wahrscheinlich kein einziges Mal. Okay, aber damit sind wir jetzt schon beim, beim vorletzten Element für heute. Nicht beim vorletzten, äh, Inline-Element, aber wir haben es aufgesplittet und machen jetzt noch zwei und dann geht's irgendwann mal in einem Part 2 dann weiter. Und das hat mich auch überrascht in seiner Komplexität.

Das, das Element, ja, K, B, D. Und auch da wieder die Benahmung, K, B, D für Keyboard vermutlich, aber es steht da, es ist eben nicht nur für Keyboard-Input, sondern jeglicher Art von User-Input, wie auch Spracheingabe oder Texteingabe gedacht. Aber dann heißt es halt K, B, D. Ja, also damit wird, wird User-Input, ähm, entsprechend hervorgehoben und eben halt semantisch als sollte deklariert.

Ähm, genau, also, äh, es kann aber auch, es können aber auch so Keyboard-Shortcuts zum Beispiel sein, die halt jemand eingegeben hat. Wobei ich mich dann frage, würde ich das aber auch in einer Erklärung, wo ich jetzt Shortcuts definiere für ein Programm, in einem Manual zum Beispiel, würde ich das doch wahrscheinlich auch so nutzen, obwohl es keine User-Eingabe jetzt ist, sondern das, was der User mal irgendwo eingeben soll. Ähm, und dann ...

So kenne ich's, das ist die einzige Verwendung, die ich in The Wild auch kenne, dieses, wenn du das machen möchtest, musst du folgenden Shortcut drücken. Dann drücke Steuerung XY, ja. Hier, K, B, D-Element. Das ist das Einzige, wie ich's auch wirklich in Verwendung schon gesehen hab. Und dann find ich auch wieder, dann geht's nämlich weiter, äh, genestete K, B, D-Elemente, also jetzt ne Kontroll-, äh, eine Kombination zum Beispiel, Control-X, Control-F ist da, äh, als Beispiel.

Und dann ist das ein K, B, D außenrum und dann ist aber das Control, das X und das zweite Control und das F sind jeweils auch mit K, B, D umgeben. Da fehlt ja dann auch wieder die, die, die Verknüpfung, dass das erste Control zu dem X gehört und das zweite Control zu dem F gehört. Also da wird, das, das wird wieder nicht kombiniert. Dann könntest du aber ... Kombiniert. Also da müsste ich dann nach Leerzeichen splitten, oder ...

Ich würde, ich würde zweimal, zwei umgebende Container-KBD-Elemente, nee, man könnte's doch dreimal verschachteln. Richtig, ja, das würde dann wiederum Sinn ergeben, ja. Das, irgendwie und irgendwie wird's dann auch ein völliger Wahnsinn, richtig. Du müsstest es eigentlich dreimal, du müsstest es eigentlich dreimal verschachteln. Du müsstest das Ganze, äh, genau, du müsstest diese Control-X nochmal in ein KBD rappen und Control-F. Genau, und dann jede einzelne Taste nochmal.

Und dann das Ganze ... Aber es ist doch ... Und auch da wieder, ähm, nimmt, ich würde sagen, meine Empfehlung, nutzt das KBD für so, für Sachen, genau so Shortcuts, keine Ahnung. Was, was Webseiten ja mittlerweile ganz gern anbieten, ähm, ist, äh, so, äh, Keyboard-Shortcut, äh, Übersicht mit Fragezeichen. So, das, dann hier, drück doch Fragezeichen, wenn du diese Übersicht sehen willst. Ja, KBD-Element, gute Sache.

Ähm, was da jetzt auch noch als Beispiel, äh, genannt wurde, was jetzt damit, ähm, gar nichts zu tun hat, sind quasi Ausgaben, äh, also, na, ne, ach Gott. Mit einem SEMP-Element zusammen. Was eigentlich auch erst später kommt, aber dann haben wir das jetzt auch schon abgefrühstückt.

Genau, in einem KBD-Element ist das eine Eingabe, die auf dem vom System präsentierten Text basiert, beispielsweise Name von Menüs oder Menü-Elementen oder den Namen, die auf Bildschirm- oder angezeigten Schaltflächen stehen. Ähm, also, sowas wie, äh, bestimmte Namen von Menüpunkten irgendwo. Ja, also, keine Ahnung, wenn ich jetzt hier mein Betriebssystem angucke, Datei bearbeiten, irgendwas. Ähm, warum das jetzt das KBD-Element ist, wenn das mit Keyboard-Shortcut, ach, ist ja auch egal.

Es ist echt, hui, hui, hui. Also, vielleicht ist das eher, war da so die Wiese. Ich muss aber auch sagen, vielleicht, vielleicht bin ich, äh, vielleicht denke ich da aber auch zu schmal und zu sehr nur in Webseiten und vielleicht kann es tatsächlich total sinnvoll sein, wenn man viel mit Apps arbeitet.

Wenn man jetzt viel Apps baut, die wirklich so Menükram haben, könnte ich mir vorstellen, dass es dafür Anwendungsfälle gibt, dass ich wirklich genau beschreibe, in welchem Menü ich irgendwie was machen kann. Und das sieht genau so aus und dafür habe ich jetzt eine semantische Auszeichnung. Warum nicht? Also, haben ist besser als brauchen.

Ja, gebraucht habe ich es persönlich noch nie, aber ich muss auch sagen, im Vergleich zu vielen anderen baue ich normalerweise relativ simple Webseiten, die kein Menü haben. Oder nicht kein Menü in dieser Form, wo ich irgendwie was runterklappen kann und dann ganz bestimmte, ja, meistens ist bei mir sehr simpel alles. Ja, so. Ich glaube, das mit dem Output, das ziehe ich zurück, das hatte ich ja da in den Notizen geschrieben.

Genau, ich habe es dann noch beantwortet in den Notizen und habe aber auch gerade gesehen, beim Samp-Element ist nämlich auch nochmal ein Kästchen mit einer Note, für was man das Output-Element benutzt. Aber dann übergehen wir diese Frage einfach. Ja, genau. Gut, okay, gut. Ist das, gehört das noch dazu? Okay. Nee, das habe ich quasi schon gesagt. Dann haben wir das auch hinter uns. Puh. Und kommen jetzt tatsächlich zum Letzten. Mark. Ja, das ist das Thiele-Element.

Das, das, wenn man das benutzt, dann findet man sich plötzlich auf einer schönen Konferenz wieder. Was? Ach so. Ah. Ah. Ja, das war, der war, der war, der war blöd. Ja, der war blöd. Also hier viele Grüße an Mark Thiele, falls du das hörst. Ach, Thiele-Element. Das Mark-Element, das habe ich tatsächlich auch schon mal ganz bewusst eingesetzt. Und mir fallen, ja, also einen ganz speziellen Use-Case habe ich dafür auf jeden Fall.

Und zwar, also dargestellt wird das oft so wie Textmarker, markierter Text, also ganz gern irgendwie so mit gelbem Hintergrund oder so. Und wofür ich das auf jeden Fall schon eingesetzt habe, und das ist auch einer der Use-Cases, der in der MDN angegeben wird, ist, zum Beispiel, wenn ich eine Suchseite habe, eine Suchergebnisseite mit Suchergebnissen, dass ich damit die genauen Matches markiere.

Das heißt, ich habe jetzt gesucht nach Hund oder so, und ich, auf Google kriege ich ja jetzt nicht einfach nur Seiten, nicht einfach nur Hund angezeigt, sondern da kriege ich dann Texte, wo das Wort drin vorkommt. Also tatsächlich ist ja meistens irgendwie, kommt darauf an, ob es der Text, ob es im Inhalt selbst vorkommt oder in der Description.

Und dann wird das Wort ja gehighlighted, oder kann man das Wort highlighten, der exakten Match von dem, was ich gesucht habe, was ich in die Suche eingetippt habe. Und für sowas ist das Mark-Element gedacht. Das finde ich tatsächlich relativ sinnvoll, muss ich sagen. Also es gibt nicht so extrem viele Anwendungsfälle, aber wenn man zum Beispiel auch noch was ganz Besonderes hervorheben will, in einem Zitat oder so, im Blog-Board, und witzigerweise habe ich genau das vor kurzem mal gemacht.

Und hey, was war in Code? Genau, in einem Code-Blog hatte ich, habe ich was hervorgehoben, wo ich gesagt habe, das ist jetzt aber das Wichtige. Das habe ich da eigentlich auch mit Mark gemacht. Oder halt auch einen bestimmten Teil von einem Zitat in einem Blog-Board ist mit Mark hervorhebbar.

Genau. Was da auch noch dabei stand, ist, dass man Syntax-Highlighting nicht damit machen soll. Ich weiß nicht genau, wer jetzt auf diese Idee gekommen wäre. Mark gibt halt auch tatsächlich semantische, ja, das hat die semantische Qualität von, ich möchte was besonders hervorheben. Also jetzt jenseits von Strong und M nochmal was anderes. Ich möchte nur quasi darauf zeigen, das ist jetzt das, das ist das Ding jetzt hier, möchte ich so sagen damit.

Also Syntax-Highlighting wurde hier jetzt aber noch erwähnt, sondern wurde gesagt, naja, das soll man lieber mit einem Span machen, das ist neutral, das hat quasi keine Hervorhebung verdient, keine semantische, sondern die soll nur rein visuell sein. Genau. Interessanterweise wird bei dem Mark-Element in der MDN, wenn auch die Screenreader noch erwähnt, dass die das ja oft nicht vorlesen und mich wunderten. Das ist wieder so eine Inkonsistenz in der MDN.

Das steht bei Strong und M und so steht es nicht dabei und da gibt es einen extra Block dazu. Also ich finde es gut, dass der Block da dabei ist, aber warum ist er bei den anderen nicht? Können wir jetzt auch noch wieder tausend Tickets aufmachen?

Genau, und da wird vorgeschlagen, wenn man das doch verwenden möchte und der Screenreader damit abholen möchte, dann könnte man mit Before- und After-Pseudo-Elementen, die wiederum visuell versteckt werden, einen Text einblenden mit Highlight Start und Highlight End.

Was ich eigentlich einen ganz coolen Hack finde, aber ist eigentlich halt dann auch wieder nur ein Hack, der drumherum arbeitet, dass die Screenreader ihren Job nicht machen an der Stelle, weil die sollten das, also wozu gibt es ein Element mit semantischer Information, die vielleicht tatsächlich auch wichtig und sinnvoll ist, wenn die Technologie, die es auswertet ist, ignoriert?

Also ich könnte zum Beispiel eine App haben oder eine Webseite im Webapp, wo der User Text markieren kann, bestimmte Wörter im Buch, um sich die irgendwie halt als Lesezeichen quasi zu markieren, so wie man halt auch bei Unterlagen, die mit dem Marken markieren würde. Und jetzt wird der Text wieder vorgelesen und dann sollte ja der Browser mir einen Hinweis geben, dass ich ein bestimmtes Wort oder einen bestimmten Absatz markiert habe.

Und da wäre es halt dann schon gut, irgendwie, dass dann kommt halt Markierung Start und Markierung Ende oder so, dass ich dann eben auch Accessible dann weiß, ah okay, das ist markiert und ich möchte es vielleicht demarkieren oder so. Also es wäre schon sinnvoll, aber gut, dass man wenigstens das mit als Workaround nutzen kann.

Ich werde, glaube ich, diesen kleinen Hack, diesen Code bei mir tatsächlich in meinem Blog einbauen, weil da habe ich das Mark-Element ja schon verwendet und ich finde das eigentlich ganz neat.

Und das kann man tatsächlich, das ist tatsächlich so eine klassische Copy-Paste-Lösung, würde ich behaupten, weil also wenn man den Text jetzt nicht anpassen will, wenn man jetzt mit Englisch Highlight Start und Highlight End irgendwie zufrieden ist, dann ist das, glaube ich, ganz cool, kann man einfach so einbauen, glaube ich, Fire & Forget, würde ich sagen.

Und dann hat man es ein bisschen barrierefreier gemacht, obwohl man da den Job vom Screenreader macht, den er halt nicht richtig macht. Stellt man sich natürlich die Frage, wäre das für Strong und M auch sinnvoll? Aber da kommt es wahrscheinlich in Teufelsküche, falls es irgendwann mal unterstützt wird und du machst überall so Pseudo-Elemente hin mit, was weiß ich, Text hervorgehoben, hervorgehoben Anfang, hervorgehoben Ende, brüllt Stimme an, brüllt Stimme aus.

Ja, ich weiß nicht. Das würde mich mal, falls jemand zuhört, der Screenreader-Nutzender ist, bitte mal sagen, ob ihr sowas sinnvoll fändet, wenn eine Seite das macht, also quasi dafür was einbaut. Und dann geht auf die Gefahr hin, dass, wenn der Screenreader es irgendwann unterstützt, dass das dann irgendwie doppelt gemobbelt ist. Ja, genau. So. Hey, komm mal.

Oh Gott, ich habe das Gefühl, ich habe schon wieder so ein, es ist wie beim letzten Stream, den ich alleine gemacht habe, also der vorletzte, da hatte ich auch so dieses Gefühl, dass ich mit dem Mund fusselig rede. Und ich habe da dann irgendwie, also bei mir ist es weniger, also das ist ja so nur so eine Phrase, in meinem Mund fühlt es sich dann so an, dass ich an bestimmten Stellen, jetzt wird es ein bisschen eklig, Triggerwarnung.

An bestimmten Stellen wird es so ein bisschen klebriger innen drin und schlammelt sich so Schleim an. Und wenn ich so lange am Stück rede, ohne mal innen zu halten und das, da merke ich dann irgendwann, wird das zu viel und zu viel und zu viel und dann muss ich mich räuspern und denke so, jetzt musst du irgendwann mal ein bisschen die Schnauze halten, das ist jetzt einfach zu viel.

Ja, bei mir ist es im Kopf, bei mir ist es jetzt gerade einfach so, da schwirrt alles rum und ist irgendwie ganz, ganz wild. Der Vorteil, den ihr habt beim Zuhören, ist ja, ihr könnt jederzeit Pause drücken, nochmal zurück. Richtig. Wir mussten das jetzt am Stück durchballern, beziehungsweise wir machen es, wir müssten es nicht, wir könnten auch Stück für Stück aufnehmen und sagen, wir machen es Kapitel für Kapitel. Aber dafür sind wir viel zu faul. Richtig. Genau.

Gut. Okay. Dann haben wir das Thema fertig. Dann darfst du jetzt trotzdem noch ein bisschen weiter reden, statt zu schweigen, weil es kommt. Das Geiltein. Geiltein. So, ich habe jetzt nochmal kurz gemutet und nochmal kurz gehustet. Also ich habe es gehört, das wusste. Das hat nicht funktioniert mit den Minuten, jaja. Was? Das schneiden wir jetzt aber auch nicht raus. Das kommt jetzt nach dem Jingle ein ...

Wieso mein Dings hat mir ... Moment, du hast aber nur eins von den Hustern gehört hoffentlich, hoffentlich nicht den Lauten, oder? Warte mal, ich mute jetzt nochmal. Ich sage jetzt nochmal, Konstantin ... Ich höre dich, das wird auch aufgenommen. Überleg dir gut, was du sagst. Das gibt es ja nicht. Ja, was, bin ich? Das interessiert es mich schon. Das ist ein hervorragender, sehr guter Freund von mir. Das scheint hier dieses Studio-Link nicht sehr zu interessieren.

Das ist ja interessant, das ist gut zu wissen. Ja, besser ist es, bevor du mal was Falsches sagst. Dann habe ich das jetzt echt schon ... Oh Gott. Oh Gott. Ist es zwischendrin mal gerülpst in irgendeinem Call, oder? Bestimmt. Und alle haben es einfach übergangen und dachten sich, okay. Oh Gott, doch, gar garantiert. Nee, warte mal, ich habe hier, warte mal, All Input Devices, Default Input Device. Warte mal. Wenn ich jetzt nochmal ...

Okay, gut, dann lassen wir das jetzt, das nervt jetzt auch die Zuhörenden einfach. So, das Geilteil kommt jetzt. Und zwar, ich hatte bis kurz vor der Sendung, hatte ich noch was anderes drinstehen und dann habe ich noch was Neues entdeckt und neue Sachen sind immer cooler und fresher und deswegen habe ich noch ausgetauscht und was anderes eingebaut. Und zwar, nee, aber das, was jetzt da drinsteht, das ist es schon.

Und zwar habe ich ja heute mehrere GitHub-Repositories, glaube ich, angelegt und halt unter anderem das eine für den Barrierefreiheitsleitfaden und habe dann mal auf den Tabs rumgeklickt, die so ein Repository hat mittlerweile. Es sind ja einige Reiter da. Also irgendwie, es gibt jetzt ja nicht nur Code und Issues. Es gibt Pull Requests, Actions, Projects, Security, Insights und Settings. Und ich habe halt mal auf Insights gedrückt und dachte mir so, was gibt es denn da eigentlich so?

Aber der Link, den du da gepostet hast, der funktioniert von extern nicht, ne? Also der funktioniert nur für dich. Wenn ich da mit meinem GitHub draufgehe, dann sehe ich da halt nichts. Also das geht nur bei Repositories, wo ich auch Zugriff drauf habe. Aber dieses Repository ist public. Ja, aber die Insights nicht. Deswegen, ah, die Insights nicht. Okay, dann geht das nur bei Repositories, von denen ihr Owner seid wahrscheinlich? Oder bei denen man bestimmte Rechte hat, trotzdem.

Genau. Es gibt dann in dem Insights-Reiter noch mal tatsächlich ganz viele Unterlinks. Sie haben noch mal eine ganz eigene Navigation. Das erste heißt Pulse. Ich glaube, das ist quasi so eine Übersicht über eine bestimmte Zeit, was da passiert ist. Das habe ich nicht so ganz verstanden, weil bei dem Repository, was ich jetzt hier habe, da ist nicht so viel passiert. Vielleicht muss ich mal eins nehmen, wo mehr passiert ist. Da gibt es Contributors.

Da sind natürlich alle, die mitgemacht haben. Darum soll es aber eigentlich gar nicht gehen. Was ich interessant fand, war Traffic. Man kann tatsächlich sehen, wann, wie viele Clones gemacht wurden. Ich glaube, man kann aber nur einen bestimmten Zeitraum, ich glaube, zwei Wochen zurückschauen. Ich würde sagen, es sind wahrscheinlich zwei Wochen. Kann man sehen, wie viele Clones in der Zeit gemacht wurden von dem Repository.

Also wenn es öffentlich ist, wie viele Leute haben es denn irgendwie ausgecheckt irgendwo. Fand ich eine ziemlich interessante Geschichte. Und wie viele Visitors es hatte. Visitor ist hier wahrscheinlich einfach jemand, der es aufgerufen hat. Und da sieht man dann echt so Grafen, was ich sehr interessant finde. Das wusste ich nicht, dass man tatsächlich sehen kann, wie viel Action ist eigentlich auf dem Repo. Ich sehe, dass Sterne vergeben werden oder so was.

Oder irgendwelche Issues, die aufgemacht werden. Aber dass ich tatsächlich auch sehen kann, wie viele Leute es aufgerufen haben und wie viele Leute es geklont haben. Das finde ich dann doch ganz interessant. Dazu gibt es auch noch Statistiken zu Commits. Code Frequency, da sagt er gerade noch Crunching Latest Data. Deswegen weiß ich noch nicht genau, steht Code Frequency over the History. Dependency Graph würde es noch geben. Habe ich bei meinen Repos aber meistens nicht.

Und dann gibt es auch noch Forks und Network. Und das ist eine Timeline von den Branches. Naja, wie auch immer. Also ich fand den Traffic-Reiter da sehr interessant. Also das würde ich auf jeden Fall mal ... Guckt da mal rein. Ich weiß nicht, wie viele das kennen, wie viele das nutzen. Mir ist das jetzt heute zum ersten Mal aufgefallen, dass es das gibt. Und deswegen ist das heute mein Guide-Teil. Cool. Dann sind wir jetzt tatsächlich schon am Ende. Nach nur ein Dreiviertelstunden.

Also? Wie, nur ein Dreiviertelstunden? Das Ende. Ja, Mensch. Jetzt ... Sag's uns nicht immer. ... hier Time to say goodbye einspielen. Also ein paar Wochen sind wir jetzt erst mal Sendepause. Das sei schon mal angekündigt. Genau. Twitch-Streams gibt es noch zwei. Genau. Da machen wir noch mal zwei. Und zwar am Montag, den 5. Februar und am Freitag, den 9. Februar, wird noch mal gestreamt. Und dann ist erst mal Pause. Ist Sendepause.

Vielleicht, das haben wir gestern schon, am letzten Stream schon gesagt, vielleicht streame ich auch mal alleine, wenn der Moritz unterwegs ist. Muss ich mal überlegen, was ich da dann so machen kann, weil ich ja ... Vielleicht machen wir wirklich einfach nur so ein bisschen Entwicklertherapie, weil so viel Coding kann ich ja aktuell nicht beisteuern, aber vielleicht machen wir da einfach eine kurze Runde, wenn es nur eine halbe Stunde ist. Aber gucken wir mal. Genau.

Ansonsten haben wir es heute in der Retro schon angekündigt. Gerne uns weiterempfehlen. So ein bisschen mehr Reichweite wäre echt noch ganz cool. Also euren KollegInnen weitererzählen und alte Folgen nachhören. Und ja, ansonsten vielen Dank fürs Zuhören. Falls euch dieses Programm gefällt, dann empfehlt uns weiter. Genau. Ja, hast du noch was zu sagen? Ich hab nichts mehr zu sagen. Ich hab mich schon fusselig gequatscht. Wie reicht's. Bis bald. Macht's gut. Bis bald. Ciao. Ciao.