Haben Sie sich jemals gefragt, was sich hinter einer Webseite verbirgt, warum ein Button an einer bestimmten Stelle platziert ist oder warum ein Text fett dargestellt wird? All das steht im HTML-Code der Seite geschrieben. Die gute Nachricht: Sie benötigen keine spezielle Software, um ihn zu lesen. Ihr Browser enthält bereits alle notwendigen Werkzeuge, egal ob Sie am Computer oder mobil sind.
Den HTML-Code eines bestimmten Elements mit dem Inspektor erkunden
Die meisten Tutorials beginnen mit der Tastenkombination Ctrl+U, die den Rohquellcode einer gesamten Seite anzeigt. Das Problem: Sie stehen vor hunderten von Zeilen, ohne zu wissen, wo Sie schauen sollen. Der Inspektor für Elemente ist viel praktischer für den Einstieg.
In Chrome, Firefox oder Edge klicken Sie mit der rechten Maustaste auf ein beliebiges Element der Seite (eine Überschrift, ein Bild, einen Link) und wählen Sie “Untersuchen”. Ein Panel öffnet sich und hebt die entsprechende Zeile des HTML-Codes hervor. Sie sehen sofort das betroffene Tag, seine Attribute und den angewendeten CSS-Stil.
Dieses Werkzeug funktioniert in Echtzeit. Sie können den Text einer Überschrift oder die Farbe eines Hintergrunds vorübergehend im Panel ändern, ohne die echte Seite zu berühren. Es ist ein perfekter Sandkasten, um die Beziehung zwischen dem Code und dem, was Sie auf dem Bildschirm sehen, zu verstehen. Um mehr darüber zu erfahren, wie man den HTML-Code einer Webseite anzeigt, gibt es je nach Browser und Gerät mehrere ergänzende Methoden.
Fahren Sie mit der Maus über verschiedene Bereiche des Panels: Der Browser färbt den Teil der Seite blau, der dem ausgewählten Code entspricht. Diese visuelle Verbindung zwischen Code und Darstellung ist der beste Weg, um HTML zu lernen, ohne ein Handbuch zu lesen.
Tastenkombinationen zum Anzeigen des Quellcodes in Chrome, Firefox und Edge
Jeder Browser bietet mehrere Wege, um auf den Code zuzugreifen. Hier sind die nützlichsten Tastenkombinationen, die Sie kennen sollten, nach Verwendung gruppiert.
Den vollständigen Quellcode anzeigen
- Ctrl+U (Windows/Linux) oder Cmd+Option+U (Mac) öffnet den Rohquellcode in einem neuen Tab. Nützlich, um ein Meta-Tag, ein Skript oder eine im Code versteckte URL zu suchen
- Sie können auch view-source: gefolgt von der URL in die Adresszeile eingeben (zum Beispiel view-source:https://example.com). Das funktioniert in Chrome und Firefox
- Die Kombination Ctrl+F in dieser Ansicht ermöglicht es, ein bestimmtes Wort oder Tag im gesamten Code zu suchen, was das Lesen Zeile für Zeile vermeidet
Die Entwicklertools öffnen
Die Taste F12 (oder Ctrl+Shift+I) öffnet das vollständige Panel der Entwicklertools. Der Tab “Elemente” (Chrome, Edge) oder “Inspektor” (Firefox) zeigt den HTML-Code, wie ihn der Browser nach der Ausführung von JavaScript interpretiert.
Diese Unterscheidung ist wichtig. Der Rohquellcode (Ctrl+U) zeigt das HTML, das vom Server gesendet wird. Der Tab Elemente zeigt den HTML-Code nach Änderungen durch JavaScript-Skripte. Auf modernen Seiten können diese beiden Versionen sehr unterschiedlich sein.
Den HTML-Code einer Webseite auf Mobilgeräten anzeigen
Den Quellcode von einem Telefon aus zu konsultieren, war lange Zeit kompliziert. Mobile Browser bieten weder einen Rechtsklick, noch eine Tastenkombination, noch ein integriertes Inspektionspanel.
Die universelle Methode ohne App
In Safari oder Chrome mobil geben Sie view-source: gefolgt von der URL in die Adresszeile ein. In einigen neueren Versionen von Chrome Android funktioniert diese Methode weiterhin und zeigt den Rohcode direkt im Browser an.
Erweiterungen und spezielle Apps
Auf iPhone und iPad fügen Erweiterungen wie View Source Code einen Button direkt in die Safari-Oberfläche ein. Ein Klick reicht aus, um das vollständige HTML der Seite in einer lesbaren Ansicht anzuzeigen, ohne einen Mac oder ein komplexes Entwicklungstool zu verwenden.
Um weiter zu gehen, ermöglichen Apps wie Fonov HTML Viewer das Erfassen des Codes einer Seite, das Suchen nach bestimmten Mustern und das Exportieren des Ergebnisses. Diese Art von Werkzeug verwandelt ein Smartphone in einen Überwachungsplatz: Sie können die Struktur einer Konkurrenzseite während einer Reise untersuchen und den Code später zur Analyse speichern.
Eine mobile Seite von einem Computer aus inspizieren
Safari auf dem Mac kann die auf einem iPhone, das über USB verbunden ist, geöffneten Seiten inspizieren. Zuerst müssen Sie das Entwicklungsmenü in den Safari-Einstellungen auf dem Mac aktivieren und dann die Webinspektion in den Safari-Einstellungen des iPhones aktivieren. Das Telefon erscheint dann im Entwicklungsmenü des Macs, und Sie haben Zugriff auf die gleichen Inspektionswerkzeuge wie auf einer Desktop-Seite.
Die SEO-Tags einer Seite im Quellcode überprüfen
HTML lesen zu können, dient zu viel mehr als nur zur Befriedigung der Neugier. Es ist ein schnelles Diagnosewerkzeug für die natürliche Suchmaschinenoptimierung.
Öffnen Sie den Quellcode mit Ctrl+U und verwenden Sie dann Ctrl+F, um nach bestimmten Tags zu suchen. Hier sind die häufigsten Überprüfungen:
- Suchen Sie nach <title>, um den Titel der Seite zu sehen, wie ihn die Suchmaschinen lesen. Wenn er leer oder generisch ist, ist das ein sofortiges SEO-Problem
- Suchen Sie nach meta name=”description”, um die Anwesenheit und den Inhalt der Meta-Beschreibung zu überprüfen, die in den Google-Ergebnissen angezeigt wird
- Suchen Sie nach rel=”canonical”, um die deklarierte kanonische URL zu identifizieren, was Probleme mit doppeltem Inhalt zwischen mehreren Adressen vermeidet
- Suchen Sie nach den Tags h1, h2, h3, um zu überprüfen, ob die Hierarchie der Überschriften logisch ist und ob das h1-Tag einzigartig auf der Seite ist
Diese Überprüfungen dauern nur wenige Sekunden und erfordern keine fortgeschrittenen Kenntnisse in der Entwicklung. Ctrl+U und dann Ctrl+F ersetzen ein Mini-SEO-Audit für grundlegende Kontrollen.
Der Quellcode zeigt auch die Anwesenheit von Tracking-Skripten (Google Analytics, Werbe-Pixel) oder strukturierten Daten-Tags. Diese Elemente, die für den Besucher unsichtbar sind, beeinflussen direkt, wie Suchmaschinen die Seite verstehen und einstufen.
Zu lernen, wie man im HTML-Code einer Seite navigiert, erfordert keine technische Ausbildung oder kostenpflichtige Tools. Ein Rechtsklick und ein paar Tastenkombinationen genügen, um auf die andere Seite des Bildschirms zu gelangen. Das nächste Mal, wenn Sie auf ein Layout stoßen, das Sie interessiert, öffnen Sie den Inspektor: Die Antwort liegt immer im Code.
