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

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

Recommended method

For indenting text or a paragraph, the most commonly 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 would indent the text and paragraph 40 pixels from the left.

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

Once the above code is in-between your <head> tags 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 the .css file you're linking to, in the example below we've named our .css file "basic."

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

Once this .css file has been 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 have been completed, you can tab any text using the same <p class="tab"> example we showed above.

In addition to indenting a whole paragraph of text, other forms of indenting can also be done. For example, if you wanted to only indent the first line of a paragraph instead of using the above CSS line, you would use the line below.

.tab { text-indent:40px }

Alternative solution

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

  • See the indent definition for related information and links.