Quelltext einer Webseite: der Bauplan dahinter

Was ist ein Quelltext einfach erklärt: Der Quelltext ist der geschriebene Code, aus dem eine Webseite oder ein Programm besteht. Du kannst ihn dir als Bauplan vorstellen. Was du im Browser siehst, ist das fertige Haus. Der Quelltext ist die Zeichnung, nach der das Haus gebaut wurde. Jede Überschrift, jeder Link und jedes Bild auf einer Seite hat im Quelltext eine entsprechende Zeile.

Was ist ein Quelltext einfach erklÃ¤rt: Code-Bausteine links werden rechts zur fertigen Webseite gerendert

Warum es den Quelltext einer Webseite gibt

Computer und Browser brauchen genaue Anweisungen. Ein Browser kann nicht raten, dass ein bestimmter Satz eine Überschrift sein soll. Im Quelltext steht das ausdrücklich. Dort wird mit Befehlen und Markierungen festgelegt, was wie dargestellt wird. Der Browser liest diese Anweisungen von oben nach unten und baut daraus die sichtbare Seite. Im Quelltext einer Webseite findest du typischerweise:

Text, der später sichtbar wird
Markierungen, die festlegen was Überschrift oder Absatz ist
Verweise auf Bilder und andere Seiten
Anweisungen für das Aussehen und das Verhalten

Ein echtes Mini-Beispiel

Am schnellsten verstehst du Quelltext an einer einzigen Zeile. So sieht eine Überschrift im Quelltext aus:

Im Quelltext	Auf der Seite
<h1>Mein Titel</h1>	Mein Titel (groß und fett)

Diese Markierungen in spitzen Klammern heißen Tags. Hier gibt es einen öffnenden Tag <h1> und einen schließenden Tag </h1> mit dem Schrägstrich. Dazwischen steht der Inhalt, also der Text Mein Titel, der später sichtbar wird. Der Tag selbst erscheint nicht auf der Seite, er sagt dem Browser nur: Behandle diesen Text als wichtigste Überschrift. Tauschst du h1 gegen p, wird aus der Überschrift ein normaler Absatz. Nach diesem Muster ist eine ganze Seite aufgebaut: lauter Tags, die Inhalte umschließen und ihre Bedeutung festlegen. Welche Rolle dabei spezielle Tags im Kopf der Seite spielen, zeigt der Beitrag Was sind Meta Tags einfach erklärt.

Quelltext einer Webseite ansehen: zwei Wege

Du musst kein Programmierer sein, um Quelltext zu sehen. In jedem Browser gibt es dafür zwei verschiedene Wege, die unterschiedliche Stände zeigen.

Der erste Weg ist Seitenquelltext anzeigen, meist über einen Rechtsklick auf eine freie Stelle der Seite. Er zeigt den Original-Quelltext, genau so, wie der Server ihn ausgeliefert hat. Der zweite Weg heißt Element untersuchen oder Untersuchen und öffnet die sogenannten DevTools, die Entwicklerwerkzeuge des Browsers. Sie zeigen nicht das Original, sondern den aktuellen Stand der Seite, nachdem der Browser sie aufgebaut und eventuelle Skripte sie verändert haben. Dieser aufbereitete Stand heißt gerenderter DOM.

Weg	Was du siehst	Gut für
Seitenquelltext anzeigen	das unveränderte Original vom Server	nachsehen, was wirklich gesendet wurde
Element untersuchen (DevTools)	den gerenderten DOM, also den aktuellen Stand	gezielt ein einzelnes Element finden und prüfen

Für den Einstieg reicht Seitenquelltext anzeigen völlig. Sobald du eine bestimmte Stelle suchst, ist Element untersuchen praktischer, weil du im Browser auf ein Element klickst und sofort die zugehörige Zeile markiert siehst.

Den Quelltext einer Webseite lesen lernen

Den Quelltext zu lesen ist eine Fähigkeit, die mit der Zeit kommt. Es hilft, sich auf ein einzelnes Element zu konzentrieren und es im Code zu suchen. Findest du eine Überschrift, schau dir an, mit welchem Tag sie markiert ist. Dann erkennst du denselben Tag an anderer Stelle wieder. Diese Reihenfolge erleichtert den Einstieg:

Eine einfache Seite im Browser öffnen
Den Seitenquelltext anzeigen lassen
Einen sichtbaren Text im Code wiederfinden
Die Tags rund um diesen Text betrachten

Quelltext einer Webseite und Quellcode

Im Alltag werden die Wörter Quelltext und Quellcode meist gleichbedeutend benutzt. Beide meinen den geschriebenen Code, aus dem etwas entsteht. Manchmal trennt man feiner: Quelltext meint dann eher den lesbaren Text einer einzelnen Datei, Quellcode eher die Gesamtheit aller Dateien eines Programms. Wichtig ist der Gegensatz zum fertigen Ergebnis. Der Quelltext ist die Eingabe, die ein Mensch schreibt. Das, was Browser oder Server daraus machen, ist die Ausgabe, also das Bild auf dem Bildschirm. Welche Rolle ausführbarer Code dabei spielt, erklärt der Beitrag Was ist ein Script einfach erklärt.

Quelltext bei einem Galerie-Script

Bei einem Bildergalerie-Script ist der Quelltext besonders nützlich zu kennen. Willst du eine Kleinigkeit anpassen, etwa eine Überschrift oder einen Hinweistext, findest du die passende Stelle im Quelltext, oft genau in einem <h1>- oder <p>-Tag. Du musst dafür nicht das ganze Script verstehen. Es reicht, die eine Zeile zu finden, die du ändern willst. Geh dabei vorsichtig vor und mache vorher eine Kopie der Datei. So kannst du jederzeit zum Original zurück, falls eine Änderung nicht das gewünschte Ergebnis bringt.

Häufige Fragen

Sobald man den Quelltext zum ersten Mal öffnet, stellen sich schnell ein paar praktische Fragen zu Tags und den Anzeige-Funktionen des Browsers.

Was ist ein Tag im Quelltext?

Ein Tag ist eine Markierung, die festlegt, was ein Stück Text sein soll. In <h1>Mein Titel</h1> sind <h1> und </h1> die Tags für eine Hauptüberschrift, und Mein Titel dazwischen ist der eigentliche Inhalt. Der Browser zeigt den Inhalt an und nutzt die Tags nur als Anweisung für die Darstellung.

Was ist der Unterschied zwischen Seitenquelltext ansehen und Element untersuchen?

Seitenquelltext ansehen (oft mit Rechtsklick) zeigt das Original, das der Server geschickt hat. Element untersuchen, also die DevTools, zeigt den aktuell gerenderten Stand inklusive Änderungen durch JavaScript. Das Original bleibt gleich, der gerenderte Stand kann sich während der Nutzung verändern.

Wie finde ich im Quelltext die Stelle, die ich ändern will?

Konzentriere dich auf ein sichtbares Element, etwa eine Überschrift, und suche denselben Text im Code. Drumherum erkennst du die Markierungen wie <h1>. Mache vorher eine Kopie der Datei, dann kannst du jederzeit zum Original zurück, falls eine Änderung nicht passt.