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:
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.
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)
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.