Wie man in HTML einrückt: Eine Schritt-für-Schritt-Anleitung

Wer schon einmal eine fremde HTML-Datei geöffnet und sich in einem Gewirr von Tags verloren gefühlt hat, weiß, warum Einrückungen so wichtig sind. Richtiges Einrücken in HTML zu lernen, gehört zu den ersten Gewohnheiten, die einen Entwickler, der einfach nur Code schreibt, von einem Entwickler unterscheiden, der lesbaren Code schreibt.

Dieser Leitfaden behandelt sowohl die Strukturierung Ihres HTML-Dokuments mit korrekter Einrückung auf Codeebene als auch die visuelle Einrückung von Text auf Ihrer Webseite mithilfe von CSS-Eigenschaften.

Kurz gesagt: Einrücken in HTML

• Die HTML-Einrückung funktioniert auf zwei Ebenen: der Codestruktur in Ihrem Editor und der visuellen Texteinrückung auf der gerenderten Seite

• Verwenden Sie für die Codeeinrückung zwei Leerzeichen pro Verschachtelungsebene und halten Sie diese Formatierung in der gesamten Datei einheitlich ein

• Für die visuelle Texteinrückung verwenden Sie `text-indent` nur für die erste Zeile, `margin-left`, um einen ganzen Block zu verschieben, und `padding-left` für Einrückungen innerhalb formatierter Container

• Niemals verwenden oder<blockquote> lediglich um eine optische Einrückung zu erzeugen

• Verwenden Sie den in VS Code integrierten Formatter oder Prettier, um die Einrückung für Ihr gesamtes Team zu automatisieren

Warum ist die korrekte Einrückung in HTML wichtig?

Stellen Sie sich vor, Sie lesen ein Buch ohne Kapitel, ohne Absätze und ohne Leerzeichen zwischen den Sätzen. Genau so sieht nicht eingerückter HTML-Code für jeden Entwickler aus, der damit arbeiten muss.

Korrekte Einrückung macht die Eltern-Kind-Beziehung zwischen Elementen sofort ersichtlich. Sie beschleunigt die Fehlersuche, da man ein fehlendes schließendes Tag auf einen Blick erkennen kann.

Außerdem wird die Zusammenarbeit dadurch deutlich erleichtert, da ein neuer Entwickler, der Ihrem Team beitritt, nicht erst eine Stunde damit verbringen muss, Ihre Codestruktur zu entschlüsseln, bevor er mitarbeiten kann.

Neben der Lesbarkeit Suchmaschinen- Crawler Ihren HTML-Code, um die Seitenstruktur zu verstehen. Sauberer, gut strukturierter HTML-Code hilft Crawlern, Ihre Inhaltshierarchie korrekt zu interpretieren, was sich indirekt positiv auf Ihre SEO-Performance auswirken kann.

Zwei Arten von HTML-Einrückungen, die Sie kennen sollten

Bevor wir uns mit den Techniken befassen, sollten wir ein Missverständnis ausräumen, das vielen Anfängern Schwierigkeiten bereitet. Wenn von „Einrücken in HTML“ die Rede ist, sind zwei unterschiedliche Dinge gemeint

• Die Einrückung auf Codeebene bezieht sich auf die Anordnung Ihrer HTML-Tags im Code-Editor. Sie hat keinen Einfluss darauf, was Benutzer auf der Website sehen. Ihr einziger Zweck besteht darin, Ihren Code lesbarer zu machen, indem die Verschachtelungshierarchie der Elemente visuell dargestellt wird.

• Visuelle Texteinrückung bezeichnet das Einrücken von Inhalten auf der gerenderten Webseite, sodass Benutzer einen tatsächlichen Einzug sehen. Dies wird über CSS-Eigenschaften gesteuert. Eine Verwechslung dieser beiden Konzepte führt dazu, dass Entwickler Elemente wie beispielsweise `visual text indent` falsch verwenden.

Wie kann ich meinen HTML-Code im Editor einrücken?

Der Code-Editor ist der Ort, an dem gute Einrückungsgewohnheiten beginnen. Eine korrekte Einrichtung von Anfang an spart später stundenlanges Debuggen und Umformatieren.

Die Eltern-Kind-Struktur verstehen

HTML ist eine hierarchische Sprache. Befindet sich ein Element innerhalb eines anderen, wird es zu einem Kindelement dieses Elternelements. Das Kindelement sollte immer eine Ebene tiefer eingerückt sein als sein Elternelement, um diese Beziehung im Code sichtbar zu machen.

Hier ist nicht eingerückter HTML-Code, der zwar funktioniert, aber schwer lesbar ist:

<div><h1>Seitentitel</h1><p> Dies ist ein Absatz.</p><ul><li> Punkt eins</li><li> Punkt zwei</li></ul></div>

Hier ist derselbe HTML-Code mit korrekter Einrückung:

<div><h1>Seitentitel</h1><p> Dies ist ein Absatz.</p><ul><li> Punkt eins</li><li> Punkt zwei</li></ul></div>

Die Struktur ist sofort ersichtlich.<h1> ,<p> , Und<ul> sind alle Kinder der<div> . Der<li> Elemente liegen eine Ebene tiefer, weil sie Kinder der<ul> Jede Verschachtelungsebene wird einheitlich um den gleichen Betrag eingerückt.

Zwei Leerzeichen, vier Leerzeichen oder Tabulatoren?

Die konkrete Wahl ist weit weniger wichtig als die Konsistenz. Die meisten HTML-Styleguides verwenden standardmäßig zwei Leerzeichen pro Einrückungsebene, da HTML tief verschachtelt ist und vier Leerzeichen den Code schnell weit nach rechts verschieben können.

Am wichtigsten ist es, sich für einen Stil zu entscheiden und diesen im gesamten Projekt konsequent zu verwenden. Die Verwendung von zwei Leerzeichen in manchen Dateien und vier in anderen führt zu unübersichtlichen Versionskontroll-Diffs und Reibungsverlusten im Team.

Automatische Einrückung mit VS Code

VS Code handhabt Einrückungen standardmäßig sehr gut. Wenn Sie HTML schreiben und nach einem öffnenden Tag die Eingabetaste drücken, rückt VS Code die nächste Zeile automatisch ein. Sollten Sie eine bestehende Datei mit inkonsistenter Einrückung öffnen, können Sie das gesamte Dokument auf einmal korrigieren.

• Unter Windows können Sie durch Drücken von Shift + Alt + F das gesamte Dokument formatieren.
• Auf dem Mac drücken Sie Shift + Option + F.

Für Teams erzwingt die Prettier-Erweiterung mithilfe einer gemeinsamen .prettierrc-Konfigurationsdatei Einrückungsregeln im gesamten Editor jedes Entwicklers. Dadurch werden Merge-Konflikte aufgrund von Einrückungen und Probleme bei Code-Reviews vollständig vermieden.

Wie kann man Text in HTML mithilfe von CSS einrücken?

Nun zum Teil, der sich auf die tatsächliche Darstellung für Ihre Nutzer auswirkt: die visuelle Einrückung von Text auf der Webseite. Hierfür verwenden Sie drei wichtige CSS-Eigenschaften, die sich jeweils unterschiedlich verhalten.

Die CSS-Eigenschaft text-indent

Die Eigenschaft `text-indent` rückt nur die erste Zeile eines Textblocks ein. Sie funktioniert bei Blockelementen wie Absätzen und Überschriften. Alle nachfolgenden Zeilen desselben Elements behalten ihren normalen Rand.

p { text-indent: 30px; }

Dadurch wird die erste Zeile jedes Absatzes um 30 Pixel eingerückt. Je nach Layout können Sie andere Einheiten verwenden. Pixel ergeben einen festen absoluten Einzug.

Die Verwendung von em oder rem bindet den Einzug an die Schriftgröße, was eine bessere Skalierung auf verschiedenen Bildschirmgrößenermöglicht. Prozentwerte beziehen den Einzug auf die Breite des umgebenden Blocks.

p { text-indent: 2em; }

Sie können auch negative Werte verwenden, um einen hängenden Einzugseffekt zu erzeugen, bei dem die erste Zeile nach links herausragt, während die übrigen Zeilen eingerückt sind:

p { text-indent: -2em; padding-left: 2em; }

Die Browserkompatibilität für Texteinzüge ist in allen modernen Browsern hervorragend. Es sind keine Herstellerpräfixe erforderlich.

Die Eigenschaft „margin-left“

Die `margin-left`-Eigenschaft rückt einen gesamten Inhaltsblock ein, indem sie das gesamte Element nach rechts verschiebt. Dies ist nützlich, wenn Sie einen ganzen Absatz, Abschnitt oder Container und nicht nur dessen erste Zeile versetzen möchten.

.indented-section { margin-left: 40px; }

Die margin-left-Eigenschaft funktioniert bei nahezu jedem HTML-Element.

Eine Sache ist zu beachten: Ränder erzeugen Platz außerhalb des Elementrahmens und verschieben daher das Element selbst, nicht nur den darin enthaltenen Text. Dies ist relevant bei Flexbox- oder Grid-Layouts, bei denen die Abstände bereits vom Layoutsystem verwaltet werden.

Die Eigenschaft „Padding-Left“

Die `padding-left`-Eigenschaft erzeugt innerhalb des Inhaltsbereichs eines Elements einen Abstand zwischen Rahmen und Inhalt. Dies ist der wesentliche Unterschied zu `margin-left`.

.callout-box { padding-left: 24px; background-color: #f5f5f5; border-left: 4px solid #0057ff; }

Wenn Sie hier margin-left anstelle von padding-left verwenden würden, würde der Text zwar eingerückt erscheinen, aber die Hintergrundfarbe und der Rahmen würden am ursprünglichen linken Rand beginnen, was fehlerhaft aussieht.

Die `padding-left`-Eigenschaft sorgt dafür, dass der formatierte Container erhalten bleibt, während der Text nach innen verschoben wird. Verwenden Sie sie immer dann, wenn Sie Text innerhalb eines Containers mit Hintergrund, Rahmen oder einem definierten Boxmodell einrücken.

Einrücken von HTML-Listen und verschachtelten Elementen

HTML-Listen werden von Browsern standardmäßig eingerückt, der genaue Einrückungsgrad variiert jedoch zwischen Chrome, Firefox und Safari. Für einheitliche und kontrollierte Ergebnisse sollte die Einrückung explizit in CSS definiert werden

ul, ol { padding-left: 24px; }

Bei verschachtelten Listen sollte das verschachtelte Element zusätzlich eingerückt werden, um eine klare zweite Ebene zu erzeugen:

<ul><li>Kernstück<ul><li> Verschachteltes Element A</li><li> Verschachteltes Element B</li></ul></li></ul>

Durch die CSS-Steuerung des linken Innenabstands auf jeder Ebene entsteht eine saubere, zweistufige eingerückte Liste, die in allen Browsern einheitlich aussieht.

HTML-Elemente, die Einrückungen nativ verarbeiten

Manche HTML-Elemente verfügen in Browsern über ein integriertes Einrückungsverhalten. Zu wissen, wann man es richtig verwendet und wann nicht, sorgt für barrierefreien und semantisch korrekten Code.

• Das Blockzitat-Element wird in den meisten Browsern standardmäßig eingerückt angezeigt. Viele Entwickler verwenden es fälschlicherweise nur wegen dieses visuellen Effekts.

Der<blockquote> Das `<code><b></code>`-Element dient dazu, Inhalte aus externen Quellen zu kennzeichnen. Bildschirmleseprogramme geben diese als Zitat aus. Die Verwendung des `<code><b></code>`-Elements für nicht zitierte Inhalte kann daher Nutzer, die auf Hilfstechnologien angewiesen sind, irreführen. Verwenden Sie es ausschließlich für tatsächliche Zitate und CSS für alle anderen Inhalte.

• Das `<pre>`-Element erhält alle Leerzeichen, Zeilenumbrüche und Einrückungen exakt so, wie sie in Ihrer HTML-Datei erscheinen. Daher ist es unerlässlich für die Anzeige von Code-Snippets und vorformatiertem Text, bei dem die Abstände eine Rolle spielen.

• Geschützte Leerzeichen (&nbsp;) sind eine gängige Anfängergewohnheit, um schnell Einrückungen zu erstellen. Die definitive Antwort lautet: Verwenden Sie sie niemals für diesen Zweck. Sie skalieren nicht; sie führen bei unterschiedlichen Bildschirmbreiten zu Umbrüchen und verursachen auf kleineren Bildschirmen unvorhersehbare Zeilenumbrüche. Verwenden Sie stattdessen immer CSS.

Häufige Einrückungsfehler, die Sie vermeiden sollten

Das Mischen von Tabulatoren und Leerzeichen in derselben Datei ist der häufigste Fehler im Team. In einem Editor sieht es gut aus, in einem anderen jedoch völlig unbrauchbar. Konfigurieren Sie Ihren Editor so, dass Tabulatoren automatisch in Leerzeichen umgewandelt werden, oder verwenden Sie Prettier, um einen einheitlichen Stil zu gewährleisten.

Die Verwendung von Inline-Styles für jedes einzelne Element anstelle einer wiederverwendbaren CSS-Klasse führt zu einem Wartungsalptraum.

Das Aktualisieren von style=”margin-left: 40px” in zwanzig verschiedenen Absatz-Tags Ihres HTML-Codes ist eine mühsame Arbeit, die durch eine einzige CSS-Klasse vollständig hätte vermieden werden können.

Wenn Zeilen im Editor so tief eingerückt werden, dass sie umbrechen, deutet das darauf hin, dass die HTML-Struktur selbst vereinfacht werden muss, nicht nur neu formatiert. Falls Ihr Code regelmäßig zehn oder zwölf Einrückungsebenen tief ist, sollten Sie die Struktur genauer unter die Lupe nehmen.

Zugänglichkeit und Einrückung

Das wird in den meisten Anleitungen ausgelassen. Korrekte Einrückung im Code beeinflusst direkt, wie genau Hilfstechnologien Ihre Seite interpretieren.

• Wenn Elemente korrekt verschachtelt sind und die HTML-Hierarchie übersichtlich ist, können Bildschirmleseprogramme Orientierungspunkte, Überschriften und Inhaltsbereiche präzise erkennen.

• Wenn Elemente aufgrund ihrer visuellen Nebeneffekte missbraucht werden, geben Bildschirmleseprogramme den Nutzern den falschen Kontext an.

auf semantische Korrektheit zu überprüfen WAVE und axe DevTools.

Schlussbetrachtung

Saubere HTML-Einrückung ist eine jener Gewohnheiten, die sich weitaus mehr lohnen, als sie kostet.

Die Zeit, die Sie für die korrekte Formatierung eines Projekts aufwenden, zahlt sich jedes Mal aus, wenn Sie es debuggen, jedes Mal, wenn ein neuer Entwickler die Datei öffnet, und jedes Mal, wenn Sie Monate später Ihren eigenen Code wieder aufrufen und ihn immer noch sofort verstehen.

wir prüfen , bei denen die Codequalität direkten Einfluss auf Leistung, Wartbarkeit und Benutzerfreundlichkeit hat.

Wenn Ihre Website eine Code-Überprüfung, eine Leistungsanalyse oder eine komplette Neuentwicklung benötigt, kontaktieren Sie uns. Lassen Sie uns gemeinsam etwas entwickeln, das unter der Haube genauso gut funktioniert, wie es auf dem Bildschirm aussieht.

Häufig gestellte Fragen