Im Laufe eines Jahres habe ich eine Sammlung von über zweitausend Webseiten aufgebaut – eine persönliche Archivierung sämtlicher Online-Lesezeichen der letzten fünfzehn Jahre. Dabei habe ich jede einzelne Webseite manuell gespeichert, den HTML-Code gelesen und bearbeitet, um eigenständige Kopien anzufertigen. Dieses intensive Studium fremder Webseiten erwies sich nicht nur als spannende Archivierungsaufgabe, sondern wurde zu einer unerwarteten Lektion im Bereich Webentwicklung und Frontend-Design. Das Lesen von fremdem Code ermöglicht einzigartige Einblicke in vielfältige Techniken und Ansätze, von denen man in traditionellen Tutorials selten erfährt. Denn jede Webseite ist ein Unikat, gestaltet von unterschiedlichen Entwickler*innen, die oft eigene Tools, Lösungen und Stilmittel einsetzen.
So konnte ich Muster, selten genutzte HTML-Elemente und durchdachte CSS-Tricks beobachten, die mein Verständnis für das Handwerk des Webseitenbauens deutlich erweitert haben. Besonders eindrucksvoll war die Begegnung mit interessanten HTML-Elementen, die ich entweder vergessen hatte oder zuvor noch nicht im praktischen Einsatz gesehen hatte. Das <aside>-Element, so definiert als ein Inhaltsbereich, der indirekt mit dem Hauptinhalt verbunden ist, fand ich häufig in redaktionellen Seiten, um beispielsweise Anzeigen, Newsletter-Anmeldungen oder Verweise auf verwandte Artikel elegant und semantisch korrekt unterzubringen. Dies bot mir eine konkrete Vorstellung, wie ein sinnvoll strukturiertes HTML-Dokument aufgebaut werden kann, das sowohl inhaltlich klar gegliedert als auch für Suchmaschinen und Screenreaders optimiert ist. Ein weiteres bemerkenswertes Element ist das <mark>-Tag, das hervorgehobenen Text mit meist gelbem Hintergrund versieht.
Ich habe es gesehen, wie es auf Plattformen wie Medium verwendet wurde, um beispielsweise von Leser*innen hervorgehobene Textpassagen kenntlich zu machen. Es ist nicht nur ein visuelles Highlight, sondern unterstützt auch Barrierefreiheit und Textauswertungstools. Die semantische Gruppierung von Inhalten ist ein weiterer wichtiger Aspekt moderner Webseiten. Das <section>-Tag wird dazu verwendet, Inhalte sinnvoll zu gliedern, was weit über eine bloße <div>-Container-Struktur hinausgeht. Beim Durchstöbern der tausenden Seiten zeigte sich, dass Autor*innen diese Elemente bewusst einsetzen, um ihrer Seite eine nachvollziehbare Struktur zu verleihen, die das Verständnis beim Leser und bei Maschinen gleichermaßen fördert.
Besonders faszinierend war auch die Wiederentdeckung des <hgroup>-Tags, welches Überschriften gemeinsam mit zugehörigen Metadaten wie Veröffentlichungsdaten gruppiert. Obwohl dieses Element einigen Entwicklern eher unbekannt oder in Vergessenheit geraten ist, habe ich es hier erstmals praktisch eingesetzt und kann eine bessere Lesbarkeit und Struktur meiner Seiten dokumentieren. Bei der Arbeit an der Webarchivierung trat der Einsatz des <video>-Elements in den Vordergrund. Vorbei sind die Zeiten, in denen Flash dominierte. Heute lässt sich mit wenigen Zeilen Code ein voll funktionales Videoelement mit Interface-Steuerelementen einbinden.
Wichtige Lernmomente gab es beim korrekten Schließen dieses Elements, denn anders als <img> ist <video> nicht selbstschließend. Dieses Detail kann leicht übersehen werden, hat aber Auswirkungen auf die ordnungsgemäße Darstellung. Der Fortschrittsindikator <progress> ist ebenfalls ein praktisches Werkzeug, das besonders bei längeren Artikeln verwendet wird, um Leser*innen ihren Fortschritt im Text visuell anzuzeigen. Die plattformübergreifende Unterstützung dieses Elements macht individuelle JavaScript-Lösungen oft überflüssig und ermöglicht einfach integrierte, native Progressbalken. Die Verwendung des <base>-Elements zeigte sich mir als ein mächtiges Instrument zur Definition einer Basis-URL für alle relativen Links im Dokument.
Obwohl der konkrete Nutzen je nach Projekt variiert, ist es eine elegante Lösung, URLs zu verkürzen und potenzielle Fehlerquellen bei relativen Verweisen zu minimieren. CSS bietet ebenfalls viele clevere Kniffe, die mir beim Lesen der archivierten Seiten aufgefallen sind. So ist die @import-Regel eine native Funktion, um Stylesheets zu verknüpfen, die ich bisher hauptsächlich aus Präprozessoren wie Sass kannte. Besonders nützlich ist die bedingte Einbindung von Styles anhand von Media-Queries, welche ich mir um eine erweiterte Möglichkeit gewünscht hätte, etwa das Laden von Styles basierend auf vorhandenen Klassen anstelle von Bildschirmgrößen. Ein echter Augenöffner war die Entdeckung fortgeschrittener Attributselektoren, beispielsweise [attr$=value], mit denen sich Elemente anhand des Endes eines Attributwertes selektieren lassen.
In Kombination mit anderen Attributselektoren eröffnen sie flexible Möglichkeiten für präzise CSS-Regeln. Ebenso faszinierte mich die CSS-Eigenschaft box-shadow mit dem Modifier inset, mit der sich Innenliegende Schatten erzeugen und so raffinierte, dreidimensionale Effekte erzielen lassen. Ein weiterer simpeler, aber wirkungsvoller CSS-Tipp, den ich durch die Archivseiten aufgriff, ist die Verwendung des Cursors zoom-in bei galerierelevanten Bildern. Die Verwandlung des Mauszeigers in eine Lupe mit Plus-Symbol signalisiert intuitiv eine Vergrößerungsfunktion, was die Nutzererfahrung subtil aber spürbar verbessert. Beim Blick auf die Strukturierung der HTML-Dateien fiel mir die bedeutende Rolle der Reihenfolge der Elemente auf.
Während meine eigenen Seiten häufig einer einfachen vertikalen Struktur mit Header, Hauptinhalt und Footer folgen, entdeckte ich bei komplexeren Layouts, dass das Hauptsegment häufig früher im Quellcode steht als beispielsweise die Sidebar. Optisch wird die Sidebar dennoch neben dem Inhalt positioniert. Dieser Ansatz verbessert die Priorisierung und erleichtert das schnellere Rendern des für die Nutzer wichtigsten Inhalts. Die Praxis, HTML-Kommentare zur Markierung großer Container oder inhaltsreicher Abschnitte zu verwenden, begegnete mir häufig, insbesondere in Content-Management-Systemen wie WordPress. Dieses Vorgehen erleichtert die Übersichtlichkeit, besonders bei ineinander verschachtelten Elementen, und fördert die Wartbarkeit des Codes enorm – gerade, wenn Templates und verschiedene Layouts im Spiel sind.
Auch das Setzen von Attributen wie data-href in <style>-Tags, um deren herkömmliche Quelle zu deklarieren, ist eine kleine, aber hilfreiche Dienstleistung an Entwickler*innen, die sich schnell orientieren wollen. Solche semantischen Hilfsmittel sind Zeichen von Code, der nicht nur funktioniert, sondern auch durchdacht dokumentiert wurde. Das internationale Umfeld des Webs wurde mir durch den Einsatz von <link> mit rel="alternate" und hreflang-Attributen klar vor Augen geführt. Diese Tags verweisen auf alternative Sprachversionen einer Seite und erleichtern Suchmaschinen die korrekte Zuordnung je nach Nutzerpräferenz, ohne Browser zu einer oft unerwünschten automatischen Weiterleitung zu zwingen. Die Performance-Optimierung durch <link rel="preload"> ist mittlerweile ein etabliertes Werkzeug.
Es erlaubt den Browsern, wichtige Ressourcen frühzeitig zu laden und erhöht so die wahrgenommene Ladegeschwindigkeit, besonders bei komplexen Seiten mit vielen Assets. Die genaue Abwägung und korrekte Spezifikation der zu preloadenden Ressourcen ist entscheidend für den Erfolg dieser Technik. Ein Blick in die Geschichte zeigte, dass auf vielen archivierten Webseiten noch immer Überbleibsel von Internet Explorer-Zeiten zu finden sind, beispielsweise durch sogenannte conditional comments. Diese speziellen Kommentare dienten früher dazu, browser-spezifische Anpassungen anzuzeigen und sind heute ein Relikt, das in modernen Umgebungen kaum noch Bedeutung hat. Manche Webseiten nutzten zudem alte Techniken, um HTML-Templates einzubinden, indem sie <script>-Elemente mit einem unbekannten Typ versehen haben.
Diese bestanden weiter als ein Trick, um HTML-Snippets im DOM zu verstecken, bis sie via JavaScript verarbeitet wurden. Das moderne Pendant hierzu ist das <template>-Element, das diese Aufgabe eleganter löst, dennoch findet man diese veralteten Muster noch vereinzelt. Ein typisches Problem, das ich bei lokalen Dateiarchiven erlebte, betrifft das Laden von externen Ressourcen über das file://-Protokoll. Sicherheitsmechanismen moderner Browser blockieren hier oft Ladeversuche von Dateiressourcen, um unkontrollierten Zugriff auf das lokale Dateisystem zu verhindern. Die übliche Lösung besteht darin, die Seiten über einen lokalen Webserver zu öffnen, um CORS-Richtlinien zu erfüllen.
Eine Überraschung stellte die Verwendung der Bezeichnung GPT in bestimmten Webseitenattributen dar. Während GPT heutzutage im Kontext von Künstlicher Intelligenz für Generative Pre-trained Transformer steht, handelt es sich hierbei vielmehr um Google Publisher Tag, ein Werbeelement zum Ausspielen von Anzeigen. Der auch mir bekannte Instapaper-Dienst nutzte spezielle CSS-Klassen wie instapaper_ignore, um bestimmten Inhalt aus der Leseansicht auszublenden. Diese Technik zeigt, wie Webseiten und Lese-Apps in Wechselwirkung stehen und welche Bedeutung semantische Klassen für die Nutzererfahrung neben reiner Optik haben können. Ein besonderer Fund war ein Fehler in den Entwicklerwerkzeugen von WebKit, die CSS-Regeln falsch formatierten, indem sie kritische Abstände einfügten und so das Selektorverhalten verfälschten.
Das führte zu einer Art Scheinwiderspruch zwischen Quellcode und tatsächlichem Verhalten – ein Fall, der verdeutlicht, wie wichtig akkurate Werkzeuge für die Webentwicklung sind. All diese Erkenntnisse aus dem Studium tausender Webseiten verdeutlichen die Vielfalt und den facettenreichen Charakter des modernen Webdesigns. Der offene Blick auf fremden Code bereichert nicht nur mit technischen Details, sondern inspiriert auch zu mehr Wertschätzung für strukturierten, semantischen und zugänglichen HTML- und CSS-Code. So wird jede Webseite zu einer Lernquelle, die weit über die sichtbare Oberfläche hinausgeht und jede*n Webentwickler*in ermutigt, die eigenen Projekte mit neuem Wissen und einer verbesserten Herangehensweise anzugehen. Das Internet ist eine lebendige, sich ständig weiterentwickelnde Welt, voller historischer Eigenheiten und moderner Innovationen.
Wer sich die Mühe macht, alte und aktuelle Webseiten zu lesen und zu verstehen, erwirbt wertvolles Wissen, das im Zeitalter von Frameworks und automatisierten Tools oft verloren geht. So bleibt die „View Source“-Mentalität ein wichtiger Schlüssel für nachhaltiges und bewusstes Webdesign.
