How to Indent in HTML?

You can indent text in different ways depending on different situations-

  • You might either want to add indentation in the first line or before the entire paragraph.
  • You might want a pure HTML solution or HTML with CSS solution.
  • Instead of adding indent at left side of the content, you might want it at the right side.
  • You want to know how to indent in HTML code.

Now, let’s discuss the solutions of how we can apply indent in each case.

Note: If you don’t know about text indentation, take a quick check out the short article on what is text indent in html before you proceed.

Problem:

You want to indent just the first line of the content.

Solution:

You can add indent in the beginning of the first line of the paragraph, in the following two ways. Using “text-indent” property of CSS in the first method and using non-breaking space ( ) which is pure an HTML solution.

Method 1 (Using “text-indent” property of css): Use “text-indent” with the value that you want to add space in front of the first line. In the following example, we use10 pixels before the starting of the first text.

<div>
  <p style="text-indent:10px">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

You can change the amount of space as you want. Additionally, you can also change the unit from px to em, rem etc.

Method 2 (pure HTML solution using &nbsp; / non-breaking space): Add the HTML entity &nbsp; to add one space in the starting of the first line. Add as many &nbsp; as many space you need. The example below uses 3 space in the beginning.

<div>
  <p>&nbsp;&nbsp;&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Method 3 (pure HTML solution – using pre element / preformatted text): The pre element preserves any space between the tags and it displays the text as it is written in the code to the browser output.  There are four spaces in the beginning of the first line of the text and it will display same in the browser.

<div>
  <pre>    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</pre>
</div>

Problem:

You want to indent left side or right side of the content.

Solution:

Using “margin-left” property of CSS, you can indent the whole paragraph at left. Similarly, to indent right of the paragraph, you can use “margin-right” property.

<div>
  <p style="margin-left:10px">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

The above example, 10px is indented at the left of the whole paragraph. To indent the paragraph 10px at right, use “margin-right 10px”

Problem:

You have a long HTML code script that you want to make more readable so that, later, when you check the script you can understand the parent child relationship of the elements. You just want to know the best practice of how to indent in HTML code.

Solution:

Keeping the nested element two spaces to the right is considered the best practice. For example, in the following code, the p element is a nested child element of div. So, p element is nested two spaces right to the div element.

<div>
  <p style="margin-left:10px">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Note: Instead of two spaces some developers use four spaces, some use one tab which is equivalent to five spaces.

Note:

  1. It is recommended to use CSS for indentation as it is included in the presentation part.
  2. In the above example, for convenience, we used inline CSS, but, in real world, we write CSS in external style sheet for multiple files website and internal style sheet for single page website.