You are here: > >

How do I indent or tab text on my web page or in HTML?

HTMLThere are different methods of indenting text. However, for compatibility with multiple browsers and accessibility, we discuss the most popular methods of indenting text on your web page.

Recommended method with CSS & HTML

For indenting text or a paragraph, the most commonly used and recommended method would be to use CSS. Below are different examples of how CSS can be used to indent text. Each of these examples below would be placed in between your <head></head> HTML tags.

The example below would create a style class named "tab" that indents the text and paragraph 40 pixels from the left.

<style type="text/css">
<!--
.tab { margin-left: 40px; }
-->
</style>

Once the above code is in the <head> section you can use it at any point by adding it to your paragraph (<p>) tags as shown below.

<p class="tab">This is a tab</p>

If you plan on using this CSS on multiple pages, we'd recommend that you create a .css file and link to that .css file on each of your pages instead of adding the above code to all of your pages. To do this, add the line below in between your <head> tags and create a link to the .css file. In the example below, we've named our .css file "basic.css"

<link rel="stylesheet" Type="text/css" href="http://www.example.com/basic.css">

Once this .css file has is created, edit the file and add the same CSS code, excluding the <style> and comment tags into it, as shown below.

.tab { margin-left: 40px; }

Finally, once the above steps are completed, you can tab any text using the same <p class="tab"> example we've shown above.

There are also other forms of indenting. For example, if you only wanted to indent the first line of a paragraph, instead of using the above CSS line, you would use the line below.

.tab { text-indent:40px }

Tip: You can also indent using a percentage. For example, instead of indenting by 40px (pixels), you could replace the indent with 5% to indent text by 5% of the current view. You can also use an em space when defining the width of an indent.

Bonus Tip: You can also change the from a left indent to a right indent by changing margin-left to margin-right.

Recommended method using HTML

It is possible to achieve the same results above by using an inline style within HTML. While using the above CSS example can make it easier to maintain across multiple web pages, if you need to use a style only once you can use the example below.

<p style="margin-left: 40px">This text is indented.</p>

In this first example, all the text in the paragraph tag is indented 40 pixels from the left. Any other paragraph tags are not indented.

<p style="text-indent: 40px">This text is indented.</p>

In this second example, only the first line of text in the paragraph will be indented 40 pixels from the left. Any additional lines of text in that paragraph will not be indented.

Tip: You can also indent using a percentage. For example, instead of indenting by 40px (pixels), you could replace the indent with 5% to indent text by 5% of the current view. You can also use an em space when defining the width of an indent.

Bonus Tip: You can also change the from a left indent to a right indent by changing margin-left to margin-right.

Alternative method

Another common (but improper) method of indenting text is using the <blockquote> tags, as shown in the example below. Although this is a much easier solution, there are accessibility issues that can be caused by using this solution to indent your text. This tag is meant for quoting text and not for indenting.

<blockquote>This text would be indented</blockquote>

Additional information