HTML: Indent or tab text

Anyone who publishes content on the Internet sometimes wants to present it in a structured way. This includes the need to display indented text using HTML, similar to the indentation using tab stops in text editing programs or programming language development environments.

Example: Display of an indented text

This can then look like the following, for example:

Use cases

Tables of contents

The example already shows the possible use cases. A typical application is, for example, the display of a table of contents. Main headings are then displayed left-aligned, while subheadings are displayed single, double or multiple indented according to the outline level.

Enumerations

Another possibility can be that you want to make a bullet list, where there are also sub-bullet points, which are then to be displayed below a bullet point offset to the right or indented.

Displaying tab stops with HTML

Displaying source code of any programming language or structured text using HTML can also be a use case. Most code is structured in a readable way by inserting tab stops. This must then be reproduced in the HTML code.

HTML- and CSS-Code

The example shown above can be achieved with the following HTML code. The CSS property that causes the text to be indented is defined in the HTML attribute “Style“. It is “text-indent: …;“. text-indent can be passed various values, and negative values are also possible:

• px (pixel)
• % (percent)
• em (relative size in relation to the font size)

<div style="border-radius: 10px; padding: 1em; background: lightgray; width: 100%; border: 1px solid gray;">
    <div><strong>Example Content of Table</strong></div>
    <div style="text-indent: 0px;">1 Heading 1</div>
    <div style="text-indent: 0px;">2 Heading 2</div>
    <div style="text-indent: 20px;">2.1 Heading Outline 1.1</div>
    <div style="text-indent: 20px;">2.2 Heading Outline 1.1</div>
    <div style="text-indent: 40px;">2.2.1 Heading Outline 1.1.1</div>
    <div style="text-indent: 40px;">2.2.2 Heading Outline 1.1.1</div>
    <div style="text-indent: 40px;">2.2.3 Heading Outline 1.1.1</div>
    <div style="text-indent: 20px;">2.3 Heading Outline 1.1</div>
    <div style="text-indent: 20px;">2.4 Heading Outline 1.1</div>
    <div style="text-indent: 0px;">3 Heading 3</div>
    <div style="text-indent: 0px;">4 Heading 4</div>
</div>

Of course, there are no limits to the number of outline levels that can be introduced and the corresponding headings and sub-headings can be indented to different degrees.

Of course, you can also transfer the whole thing into a CSS class and then only refer to the respective class in the style.