Letzte Woche haben wir Freunde in England besucht, und ich habe bei der Reisevorbereitung ChatGPT nach dem besten Weg von Heathrow’s Terminal 4 nach Reading gefragt. Das Ergebnis ist ähnlich wie bei Léonie Watsons Frage nach dem HTML für einen zugänglichen Button: Chatten mit GPT kann wirklich Spaß machen. Besonders, wenn man die richtige Antwort schon kennt.
Sie sehen alle Beiträge zum Thema
HTML
Beiträge zu HTML. Alles was nicht zu Buch und Videokurs passt.
- Bücher (29)
- CSS-Grundlagen (18)
- CSS-Layout (10)
- HTML (17)
- HTML + CSS (22)
- Social Media (5)
- Sonstiges (10)
- Tools (24)
- Videokurse (23)
- WordPress (39)
Linktipps: Infos zum <head>
Zwei Linktipps zu Infos im <head>: eine Referenz (Josh Buchea) und eine Boilerplate (Manuel Matuzović).
Inhalte am Bildschirm verstecken mit der Klasse »visually-hidden«
Auf Webseiten gibt es manchmal Elemente, die zwar im Quelltext und für Benutzer mit einem Screenreader sinnvoll sind, in einem visuellen Layout aber nicht benötigt werden.
Zu diesem Zweck kann man, wie in diesem Beitrag beschrieben, einen Hilfsklasse erstellen, die man z. B. visually-hidden
nennt.
Meine Lesezeichen zu HTML
Raindrop.io ist ein phantastischer Dienst zum Sammeln von Bookmarks, der bei mir als Nachfolger von del.icio.us und Pinboard.in seinen festen Platz in meinem Workflow hat. Mit Raindrop kann man seine gesammelten Lesezeichen sogar veröffentlichen:
Auf dieser Webseite finden Sie alle Lesezeichen aus meiner Sammlung zu HTML, und zwar immer die aktuelle Version. Hier eine kleine Vorschau:
Beispiele aus der Praxis: H-T-M-Hell
H-T-M-Hell ist ein Projekt von Manuel Matuzović, und mit hell ist hier das englische Wort für Hölle gemeint, also wie in »Highway to Hell«, und nicht wie in »Auf dem Heimweg wird’s hell«.
Die Website hat zwei große Bereiche:
- Hell ist die Hölle und enthält »a collection of bad practices in HTML, copied from real websites«, und Tips wie man es besser machen könnte.
- Heaven ist der Himmel und zeigt interessante Tipps und Tricks zu HTML.
Wer nichts verpassen möchte, kann Manuel auf Mastodon folgen und / oder einen Newsletter abonnieren.
Über Zitate, Quellenangaben und HTML
Man lernt ja nie aus. Heute habe ich z. B. gelesen, dass Quellenangaben für Zitate laut HTML-Spezifikation außerhalb von <blockquote>
stehen sollen. Aha, dachte ich. Sowas auch …
Lazy Loading: Seiten mit vielen Bildern optimieren
Das sogenannte Lazy Loading für Bilder ist eine echte Verbesserung für die Performance von bildlastigen Webseiten. Was sich dahinter verbirgt, zeigt dieser Beitrag.
Beschreibungslisten gestalten per Grid
Beschreibungslisten, die auch unter ihrem alten Namen Definitionslisten bekannt sind, kann man mit ein paar einfachen CSS-Grid-Anweisungen sehr einfach layouten.
HTML? Muss man das lernen?
HTML ist eine vergleichsweise einfache Sprache und wird vielleicht gerade deshalb oft nicht ganz ernst genommen. „H-T-M-L? Das macht bei uns der Azubi!“ oder so ähnlich heißt es dann.
Bilder optimieren: DPR 2 ist meist genug
HTML bietet mit dem Attribut srcset
die Möglichkeit, je nach Auflösung des Bildschirms verschiedene Grafiken auszuliefern. Inzwischen gibt es jede Menge Geräte mit einer DPR 3 und einige sogar mit 4, Tendenz steigend. Muss man also jetzt von jedem Bild drei oder vier verschiedene Versionen ausliefern? Kurze Antwort: Nein, zwei sind fast immer genug.
W3C und WhatWG arbeiten (mal wieder) zusammen
In »Eine kurze Geschichte von HTML5« hatte ich geschrieben, dass es in 2011 zu einer Trennung zwischen W3C und WhatWG kam. Jetzt haben sie die Zeichen der Zeit erkannt und sich wieder zusammen gerauft. Oder so.
Webtechniken lernen 1: HTML (2018)
Es gibt einen neuen Videokurs von mir. Zu HTML.
Eine kurze Geschichte von HTML5
Das Web ist nicht am Reißbrett entstanden, sondern im Laufe der letzten gut zwanzig Jahre natürlich gewachsen, und das gilt auch für HTML. Darum hilft ein kurzer Blick in die Entstehungsgeschichte von HTML5 dabei, die Verwirrungen rund um den Begriff besser zu verstehen.
Semantisches HTML gibt Inhalten Bedeutung
Im Zusammenhang mit HTML5 werden Sie oft das Wort Semantik hören. Statt langer Reden möchte ich Ihnen anhand eines einfachen Beispiels zeigen, was es damit auf sich hat und warum semantisches HTML eine gute Idee ist.
Responsive Grafiken: ein Überblick
Dieser Beitrag gibt einen kurzen Überblick über das wichtigste zum Thema responsive Bilder bzw. Grafiken, von der picture-Spezifikation über die Attribute srcset
und size
bis hin zum picture
-Element.
Videokurs: »Little Boxes – der HTML-Crashkurs«
Seit November 2018 gibt es den offiziellen Nachfolge-Kurs »Webtechniken lernen, Teil 1: HTML», mit neuer Beispielsite, komplett überarbeitet, aktualisiert und erweitert.
Am 11. März 2015 ist Teil 1 der neuen Little Boxes-Reihe veröffentlicht worden, die das vor über vier Jahren erschienene „große Training“ aktualisiert und erweitert.
Videotraining: »HTML5 für Webdesigner«
Pünktlich zu Weihnachten ist bei video2brain ein neues Videotraining von mir erschienen: »HTML5 für Webdesigner«.