HTML Text einrücken

Wer Inhalte im Internet veröffentlicht möchte diese manchmal strukturiert darstellen. Dazu zählt auch, dass man mittels HTML eingerückten Text darstellen muss ähnlich dem Einrücken mittels Tabstopps in Textbearbeitungsprogrammen oder Entwicklungsumgebungen von Programmiersprachen.

Beispiel: Darstellung eines eingerückten Textes

Dies kann dann zum Beispiel wie folgt aussehen:

Anwendungsfälle

Inhaltsverzeichnisse

Am Beispiel erkennt man schon die möglichen Anwendungsfälle. Eine typische Anwendung ist beispielsweise die Darstellung eines Inhaltsverzeichnisses. Hauptüberschriften werden dann linksbündig dargestellt, während Unterüberschriften entsprechend der Gliederungsstufe einfach, zweifach oder mehrfach eingerückt dargestellt werden.

Aufzählungen

Eine andere Möglichkeit kann sein, dass man eine Aufzählung machen möchte, wo es ebenfalls Unter-Aufzählungen gibt, die dann unterhalb eines Bullet-Points nach rechts versetzt bzw. eingerückt dargestellt werden sollen.

Tabstopps mit HTML darstellen

Darstellung von Quellcode irgendwelcher Programmiersprachen oder strukturierten Text mittels HTML kann ebenfalls ein Anwendungsfall sein. Der meiste Code wird lesbar strukturiert, indem Tabstopps eingefügt werden. Dies muss dann im HTML-Code nachgebildet werden.

HTML- und CSS-Code

Das oben gezeigte Beispiel lässt sich mit folgendem HTML-Code erreichen. Die CSS-Eigenschaft, die dazu führt, dass der Text eingerückt wird, wird im HTML-Attribute “Style” definiert. Es handelt sich dabei um “text-indent: …;“. text-indent kann man verschiedene Werte übergeben, wobei auch negative Werte möglich sind:

• px (Pixel)
• % (Prozent)
• em (relative Größe in Bezug zur Schriftgröße)

<div style="border-radius: 10px; padding: 1em; background: lightgray; width: 100%; border: 1px solid gray;">
    <div><strong>Beispiel eines Inhaltsverzeichnisses</strong></div>
    <div style="text-indent: 0px;">1 Überschirft 1</div>
    <div style="text-indent: 0px;">2 Überschrift 2</div>
    <div style="text-indent: 20px;">2.1 Überschrift Gliederung 1.1</div>
    <div style="text-indent: 20px;">2.2 Überschrift Gliederung 1.1</div>
    <div style="text-indent: 40px;">2.2.1 Überschrift Gliederung 1.1.1</div>
    <div style="text-indent: 40px;">2.2.2 Überschrift Gliederung 1.1.1</div>
    <div style="text-indent: 40px;">2.2.3 Überschrift Gliederung 1.1.1</div>
    <div style="text-indent: 20px;">2.3 Überschrift Gliederung 1.1</div>
    <div style="text-indent: 20px;">2.4 Überschrift Gliederung 1.1</div>
    <div style="text-indent: 0px;">3 Überschrift 3</div>
    <div style="text-indent: 0px;">4 Überschrift 4</div>
</div>

Hier sind natürlich keine Grenzen gesetzt beliebig viele Gliederungsstufen einzuführen und die zugehörigen Überschriften und Unter-Überschriften verschieden stark einzurücken.

Das Ganze kann man natürlich auch in eine CSS-Klasse überführen und dann im Style nur auf die jeweilige Klasse verweisen.