How to Indent Text With HTML

Although pure HTML is intended to structure rather than lay out Web page content, the language includes markup tags that may be used to indent text. Since the World Wide Web Consortium encourages the use of CSS or Cascading Style Sheets to format content, it specifies two style sheet properties to indent text. Finally, HTML provides a straight-forward, brute-force way to indent by inserting an HTML entity or special character in front of your text.

Non-breaking Spaces

The HTML non-breaking space character entity works the same as the space bar on your keyboard. Instead of pressing an actual key to indent a single line or the first line of a paragraph, however, type the HTML character entity   instead. For example, to indent five spaces, insert the following code directly before the line of text:

     

Block Quote Tag

Use HTML's <blockquote> tag to indent text five spaces to the right. The <blockquote> tag is intended to set apart website information you quote from someone else from the rest of the text on on the page. Unlike the non-breaking space, however, the <blockquote> tag indents every line of the of text it contains.

Website templates, blogging software or Web applications may include CSS code for font properties, background-colors, borders, padding or margins that format your blockquotes in ways that may not be appropriate or necessary. Use inline CSS code to override default blockquote styles. For example, the style to remove borders from blockquotes you use to indent text will resemble the code below:

<blockquote style="border:none">Your indented text </blockquote>

<Pre> Tag

The HTML tag

<pre>

forces the browser to display text formatted the way you typed it. Use the space bar or tab key to indent text the way you prefer. Add indentation to one or all lines of text you include between the

<pre>

tag pair. Unlike the

<blockquote>

tag, however, you may insert as many tabs or spaces as you desire into in front of each line of text. Because Web pages are plain-text files, your HTML editor converts tabs to spaces.

The number of spaces that your HTML editor inserts may not be the same number of spaces that the Web browser will display, however.

Indentation With CSS

Use the CSS text-indent or margin-left properties to indent your text. The text-indent property will indent the first line of text between a

<p> or <div>

pair a specific length rather that a set number of spaces or tabs. For example, add the following style to a

<p> tag pair </p>

to indent the first line of text it contains 10 pixels:

style=”text-indent:10px”

Indent all lines within paragraph or div using the margin property. For example

style=”margin-left:10px”

adds 10 pixels of empty spaces to the left of all text between a

<p>

or

<div>

tag pair.

Make margin or text-indent indentation rules apply to all the

<p> or <div>

tags within a Web page or entire website by adding them to an internal or external style sheet. For example, the following style indents all document paragraphs 10 pixels to the right:

p {text-indent-left:10px;}