Wir stoßen irgendwann auf eine Webseite, deren Mechanik wir verstehen möchten: ein aufklappendes Menü, ein gut ausgerichtetes Formular, ein Layout, das wir nachahmen möchten. Der HTML-Code dieser Seite ist mit ein paar Klicks direkt im Browser zugänglich. Man muss nur wissen, wo man schauen und wonach man suchen muss, um sich nicht in Hunderten von Zeilen von Tags zu verlieren.
Ein bestimmtes Element mit den DevTools des Browsers inspizieren
Die direkteste Methode, um den HTML-Code einer Webseite zu lesen, ist der Rechtsklick und dann “Untersuchen” (oder “Inspect” je nach Sprache des Browsers). Man erhält das DevTools-Fenster, das den Quellcode der Seite in einem aufklappbaren Tag-Baum anzeigt.
Der wahre Shortcut ist das Überfahren mit dem Elementauswähler. Oben links im DevTools-Fenster ermöglicht ein kleines Cursor-Symbol das Überfahren jedes Blocks der Seite. Jeder Bereich wird blau hervorgehoben und der entsprechende Code erscheint sofort im Elements-Bereich. So verbindet man das Visuelle mit dem Markup, ohne manuell suchen zu müssen.
Wenn man den HTML-Code einer Webseite verstehen möchte, ohne technische Ausbildung, ersetzt diese visuelle Inspektion vorteilhaft das lineare Lesen des Rohquellcodes. Man zielt auf einen Titel, ein Bild oder einen Button und sieht sofort das Tag, das ihn generiert.
Zu merkende Tastenkombinationen
- Strg + Umschalt + I (Windows) oder Cmd + Option + I (Mac) öffnet die DevTools in Chrome, Edge und Firefox.
- Strg + Umschalt + C aktiviert direkt den Auswahlmodus, bereit, die Seite zu überfahren.
- F12 funktioniert in den meisten Desktop-Browsern als schnelle Alternative.
Diese Shortcuts vermeiden den Umweg über die Kontextmenüs, was Zeit spart, wenn man mehrere Elemente hintereinander inspiziert.
Vollständiger Quellcode oder Elements-Bereich: zwei unterschiedliche Ansichten des HTML
Oft werden “Quellcode anzeigen” (Strg + U) und der Elements-Bereich der DevTools verwechselt. Beide zeigen HTML, aber nicht dasselbe.
“Quellcode anzeigen” gibt die rohe HTML-Datei zurück, wie sie vom Server gesendet wurde. Es ist ein statisches Dokument, das zum Zeitpunkt des Ladens festgelegt wurde. Man findet die Grundstruktur: head-, body-Tags, Links zu CSS- und JavaScript-Dateien.
Der Elements-Bereich hingegen zeigt das DOM (Document Object Model), die “lebendige” Version des HTML nach der Ausführung von JavaScript. Wenn ein Skript ein Dropdown-Menü hinzufügt oder einen Text beim Klicken ändert, erscheinen diese Änderungen im Elements-Bereich, aber nicht im Rohquellcode.
Wann man das eine oder das andere verwenden sollte
Um Meta-Tags, Links zu Stylesheets oder die allgemeine Struktur einer Seite zu erkennen, reicht der rohe Quellcode aus. Um zu verstehen, wie ein interaktives Element funktioniert (ein Karussell, ein dynamisches Formular, ein Tab), ist der Elements-Bereich der richtige Zugang.
Eine häufige Falle: Man sucht ein Tag im Quellcode, findet es nicht und schließt, dass es nicht existiert. Es wurde einfach durch JavaScript nach dem Laden generiert. Die Rückmeldungen zu diesem Punkt variieren je nach Browser, aber die Regel bleibt dieselbe: Wenn der Inhalt dynamisch ist, nutzt man die DevTools.
Nützliche HTML-Tags erkennen, ohne alles zu lesen
Eine Webseite enthält oft mehrere Hundert Zeilen Code. Alles zu lesen wäre kontraproduktiv. Stattdessen zielt man auf die Tags, die den sichtbaren Inhalt strukturieren.
Die Überschriften (h1 bis h6) bilden das Rückgrat der Seite. Das Erkennen des h1 gibt den Haupttitel an, die h2 grenzen die großen Abschnitte ab. Indem man den DOM-Baum in den DevTools aufklappt, visualisiert man diese Hierarchie, ohne den Rest lesen zu müssen.
Die semantischen HTML5-Tags helfen auch, sich schnell zurechtzufinden:
- nav umrahmt das Hauptnavigationsmenü.
- main enthält den zentralen Inhalt der Seite, abgesehen von Kopf- und Fußzeile.
- footer fasst die Informationen am Seitenende zusammen (rechtliche Hinweise, sekundäre Links).
- article isoliert einen Block autonomer Inhalte, wie einen Blogbeitrag oder ein Produktblatt.
Wenn diese semantischen Tags verwendet werden (was nicht immer der Fall ist), ermöglichen sie eine Navigation im Code wie in einem Inhaltsverzeichnis. Man klappt nav auf, um die Struktur des Menüs zu sehen, man klappt main auf, um auf den Inhalt zuzugreifen.
HTML live ändern, um zu testen und zu lernen
Der Elements-Bereich der DevTools ermöglicht es, den auf dem Bildschirm angezeigten HTML-Code zu ändern. Doppelklick auf einen Text, man ändert ihn. Rechtsklick auf ein Tag, man kann es löschen, duplizieren oder ein neues hinzufügen. Diese Änderungen sind temporär und verschwinden beim Neuladen der Seite.
Diese Funktionalität ist ein risikofreies Experimentierfeld. Man kann beispielsweise die Farbe eines Buttons im Styles-Bereich (rechts vom HTML) ändern, um den Effekt zu sehen, oder ein h2 durch ein h3 ersetzen, um den Unterschied in der Darstellung zu beobachten. Man lernt die Verbindung zwischen Tag und visueller Darstellung durch direktes Ausprobieren.
Ein konkretes Anwendungsbeispiel
Man erkennt einen gut gestalteten Textblock auf einer Webseite. Man inspiziert ihn: Es ist ein Absatz in einem p-Tag, mit einer CSS-Klasse, die eine Schriftgröße, eine Farbe und einen Rand anwendet. Indem man die Klasse ändert oder eine CSS-Eigenschaft im Styles-Bereich hinzufügt, versteht man, welcher Stil welchen Effekt erzeugt. Diese visuelle Schleife, ändern und dann beobachten, ist effektiver als ein theoretischer Kurs, um die Grundlagen zu verankern.
Der Console-Bereich, gleich daneben, ermöglicht es auch, einfache JavaScript-Befehle wie document.querySelectorAll(‘h2’) zu testen, die alle h2-Titel der Seite auflisten. Man erhält in einer Zeile die Struktur der Abschnitte, ohne den DOM-Baum manuell aufklappen zu müssen.
Der HTML-Code einer Webseite ist kein Dokument, das nur für Entwickler reserviert ist. Mit dem Elementauswähler, der Unterscheidung zwischen Quellcode und DOM und der Möglichkeit, die Darstellung live zu ändern, hat man alles, was man braucht, um jede Webseite direkt im Browser zu analysieren. Das nächste Mal, wenn ein Layout Sie interessiert, ist der Rechtsklick nur einen Handgriff entfernt.
