{"id":4697,"date":"2022-12-17T19:13:41","date_gmt":"2022-12-17T18:13:41","guid":{"rendered":"https:\/\/ekiwi.de\/index.php\/4697\/html-text-einruecken\/"},"modified":"2024-02-04T17:46:17","modified_gmt":"2024-02-04T16:46:17","slug":"html-indent-or-tab-text","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/en\/index.php\/4697\/html-indent-or-tab-text\/","title":{"rendered":"HTML: Indent or tab text"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of content<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ekiwi.de\/en\/index.php\/4697\/html-indent-or-tab-text\/#Example_Display_of_an_indented_text\" >Example: Display of an indented text<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ekiwi.de\/en\/index.php\/4697\/html-indent-or-tab-text\/#Use_cases\" >Use cases<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ekiwi.de\/en\/index.php\/4697\/html-indent-or-tab-text\/#Tables_of_contents\" >Tables of contents<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/ekiwi.de\/en\/index.php\/4697\/html-indent-or-tab-text\/#Enumerations\" >Enumerations<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/ekiwi.de\/en\/index.php\/4697\/html-indent-or-tab-text\/#Displaying_tab_stops_with_HTML\" >Displaying tab stops with HTML<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/ekiwi.de\/en\/index.php\/4697\/html-indent-or-tab-text\/#HTML-_and_CSS-Code\" >HTML- and CSS-Code<\/a><\/li><\/ul><\/nav><\/div>\n<p>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.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Example_Display_of_an_indented_text\"><\/span>Example: Display of an indented text<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>This can then look like the following, for example:<\/p>\n<div style=\"border-radius: 10px; padding: 1em; background: lightgray; width: 100%; border: 1px solid gray;\">\n<div><strong>Example Contents of Table<br \/>\n<\/strong><\/div>\n<div style=\"text-indent: 0px;\">1 Heading 1<\/div>\n<div style=\"text-indent: 0px;\">2 Heading 2<\/div>\n<div style=\"text-indent: 20px;\">2.1 Heading Outline 1.1<\/div>\n<div style=\"text-indent: 20px;\">2.2 Heading Outline 1.1<\/div>\n<div style=\"text-indent: 40px;\">2.2.1 Heading Outline 1.1.1<\/div>\n<div style=\"text-indent: 40px;\">2.2.2 Heading Outline 1.1.1<\/div>\n<div style=\"text-indent: 40px;\">2.2.3 Heading Outline 1.1.1<\/div>\n<div style=\"text-indent: 20px;\">2.3 Heading Outline 1.1<\/div>\n<div style=\"text-indent: 20px;\">2.4 Heading Outline 1.1<\/div>\n<div style=\"text-indent: 0px;\">3 Heading 3<\/div>\n<div style=\"text-indent: 0px;\">4 Heading 4<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"Use_cases\"><\/span>Use cases<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Tables_of_contents\"><\/span>Tables of contents<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The example already shows the possible use cases. A typical application is, for example, the display of a <strong>table of contents<\/strong>. Main headings are then displayed left-aligned, while subheadings are displayed single, double or multiple indented according to the outline level.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Enumerations\"><\/span>Enumerations<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>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.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Displaying_tab_stops_with_HTML\"><\/span>Displaying tab stops with HTML<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Displaying <strong>source code<\/strong> of any programming language or structured text <a title=\"Limit characters in text field of HTML form\" href=\"https:\/\/da-software.net\/en\/2020\/01\/limit-the-number-of-characters-in-the-text-field-of-an-html-form\/\" target=\"_blank\" rel=\"noopener\">using HTML<\/a> 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.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"HTML-_and_CSS-Code\"><\/span>HTML- and CSS-Code<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>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 &#8220;<em>Style<\/em>&#8220;. It is &#8220;<strong>text-indent: &#8230;;<\/strong>&#8220;. <em>text-indent<\/em> can be passed various values, and negative values are also possible:<\/p>\n<ul>\n<li>px (pixel)<\/li>\n<li>% (percent)<\/li>\n<li>em (relative size in relation to the <a title=\"Set or change font and font size with VBA for Outlook email\" href=\"https:\/\/ekiwi-blog.de\/en\/62449\/vba-outlook-setchange-font-and-font-size\/\" target=\"_blank\" rel=\"noopener\">font size<\/a>)<\/li>\n<\/ul>\n<div style=\"background: #ffffff; overflow: auto; width: auto; border: solid gray; border-width: .1em .1em .1em .8em; padding: .2em .6em;\">\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #007700;\">&lt;div<\/span> <span style=\"color: #0000cc;\">style=<\/span><span style=\"background-color: #fff0f0;\">\"border-radius: 10px; padding: 1em; background: lightgray; width: 100%; border: 1px solid gray;\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\r\n<span style=\"color: #007700;\">    &lt;div&gt;&lt;strong&gt;<\/span>Example Content of Table<span style=\"color: #007700;\">&lt;\/strong&gt;&lt;\/div&gt;<\/span>\r\n<span style=\"color: #007700;\">    &lt;div<\/span> <span style=\"color: #0000cc;\">style=<\/span><span style=\"background-color: #fff0f0;\">\"text-indent: 0px;\"<\/span><span style=\"color: #007700;\">&gt;<\/span>1 Heading 1<span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\r\n<span style=\"color: #007700;\">    &lt;div<\/span> <span style=\"color: #0000cc;\">style=<\/span><span style=\"background-color: #fff0f0;\">\"text-indent: 0px;\"<\/span><span style=\"color: #007700;\">&gt;<\/span>2 Heading 2<span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\r\n<span style=\"color: #007700;\">    &lt;div<\/span> <span style=\"color: #0000cc;\">style=<\/span><span style=\"background-color: #fff0f0;\">\"text-indent: 20px;\"<\/span><span style=\"color: #007700;\">&gt;<\/span>2.1 Heading Outline 1.1<span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\r\n<span style=\"color: #007700;\">    &lt;div<\/span> <span style=\"color: #0000cc;\">style=<\/span><span style=\"background-color: #fff0f0;\">\"text-indent: 20px;\"<\/span><span style=\"color: #007700;\">&gt;<\/span>2.2 Heading Outline 1.1<span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\r\n<span style=\"color: #007700;\">    &lt;div<\/span> <span style=\"color: #0000cc;\">style=<\/span><span style=\"background-color: #fff0f0;\">\"text-indent: 40px;\"<\/span><span style=\"color: #007700;\">&gt;<\/span>2.2.1 Heading Outline 1.1.1<span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\r\n<span style=\"color: #007700;\">    &lt;div<\/span> <span style=\"color: #0000cc;\">style=<\/span><span style=\"background-color: #fff0f0;\">\"text-indent: 40px;\"<\/span><span style=\"color: #007700;\">&gt;<\/span>2.2.2 Heading Outline 1.1.1<span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\r\n<span style=\"color: #007700;\">    &lt;div<\/span> <span style=\"color: #0000cc;\">style=<\/span><span style=\"background-color: #fff0f0;\">\"text-indent: 40px;\"<\/span><span style=\"color: #007700;\">&gt;<\/span>2.2.3 Heading Outline 1.1.1<span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\r\n<span style=\"color: #007700;\">    &lt;div<\/span> <span style=\"color: #0000cc;\">style=<\/span><span style=\"background-color: #fff0f0;\">\"text-indent: 20px;\"<\/span><span style=\"color: #007700;\">&gt;<\/span>2.3 Heading Outline 1.1<span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\r\n<span style=\"color: #007700;\">    &lt;div<\/span> <span style=\"color: #0000cc;\">style=<\/span><span style=\"background-color: #fff0f0;\">\"text-indent: 20px;\"<\/span><span style=\"color: #007700;\">&gt;<\/span>2.4 Heading Outline 1.1<span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\r\n<span style=\"color: #007700;\">    &lt;div<\/span> <span style=\"color: #0000cc;\">style=<\/span><span style=\"background-color: #fff0f0;\">\"text-indent: 0px;\"<\/span><span style=\"color: #007700;\">&gt;<\/span>3 Heading 3<span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\r\n<span style=\"color: #007700;\">    &lt;div<\/span> <span style=\"color: #0000cc;\">style=<\/span><span style=\"background-color: #fff0f0;\">\"text-indent: 0px;\"<\/span><span style=\"color: #007700;\">&gt;<\/span>4 Heading 4<span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\r\n<span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\r\n<\/pre>\n<\/div>\n<p>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.<\/p>\n<p>Of course, you can also transfer the whole thing into a CSS class and then only refer to the respective class in the style.<\/p>","protected":false},"excerpt":{"rendered":"<p>Anyone who publishes content on the Internet sometimes wants to present it in a structured way. This includes the need<\/p>\n","protected":false},"author":2,"featured_media":3109,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[879],"tags":[901,902,903,904,905,906,907,908,909,898],"class_list":["post-4697","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-and-css","tag-css-en","tag-formatieren-en","tag-formatierung-en","tag-homepage-en","tag-html-en","tag-internet-en","tag-webdesign-en","tag-webseite-en","tag-website-en","tag-wordpress-en"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/posts\/4697","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/comments?post=4697"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/posts\/4697\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/media\/3109"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/media?parent=4697"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/categories?post=4697"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/en\/index.php\/wp-json\/wp\/v2\/tags?post=4697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}