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; }

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 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="">

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 }

Recommended method using HTML

It is possible to achieve the same results above without using CSS. While using CSS can make it easier to maintain across multiple web pages, if you do not want to use CSS and only want to use HTML, here are examples of how this can be done.

<p style="margin-left: 40px">

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-index: 40px">

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.

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