Indenting With HTML
= Index DOT Html by Brian Wilson =

Main Index | Element Index | Element Tree | HTML Support History
The Issue | Possible Solutions | Conclusions

The Issue
    "How can you indent in HTML?"
I see this question asked quite a bit in the various forums I frequent. The question should probably be:
    "How do I reliably indent in HTML?"
The answer is not what most authors would want. The natural behavior of HTML in most common browsers is to collapse multiple spaces in HTML code content to a single space. How then can an author produce a reliable indent?

There are potential drawbacks to ALL methods available to produce content that is not left-justified to the viewing area (the common default in browsers.) None of the solutions will work in ALL browsers, so you must decide which method will work best given the capabilities of your expected readership and weighing the potential loss of easy readability for some users.

Note: Jim Barchuk has created an excellent page related to this topic that you may want to check out called 'Stupid HTML Indent Tricks.' It is devoted to the investigation of actual left margin and indenting sizes/values used by various browsers (including those surveyed in these pages.)

Possible Solutions

What:   or  
Support ( ): [IE1|M1|N1|O2.1|S1]
Support ( ): [IE2|M2A8|N1.1|O2.1|S1]
Browsers usually treat multiple consecutive spaces and/or carriage returns as a single space. In the case of non-breaking spaces (  or  ) browsers will typically honor multiple consecutive occurrences as-is with no collapsing to a single space.
  • Generally works in most browsers
  • No HTML structures are necessary to achieve the indent
  • Almost ALL browsers will understand  
  • Author can crudely effect indent size using desired number of multiple   (or  ) entities.
  • Only works for a single line of indent - when it wraps it returns to previous indentation level.
  • Not ALL browsers will render multiple   occurrences as-is. Some browsers will collapse this to a single space.
  • Some old browsers do not understand the   named entity
  • Author cannot guarantee exact size of indent (Depending on font size, platform and viewer resolution, the size of a space can vary.)

What: <Pre>
Support: [IE1|M1|N1|O2.1|S1]
The PRE tag preserves ALL spaces, carriage returns and line feeds 'as-is' from the original HTML source code. A predetermined layout can thus be created.
  • Most ALL browsers support this feature, even text-only browsers.
  • Can control indentation for multiple lines of text.
  • Supported in HTML 2.0 - Older browsers support it.
  • PRE formatting generally applies a fixed-width font to the text in order to achieve the desired fixed appearance.
  • Linebreaking is always preserved (may be an unwanted side-effect.)
  • PRE is a block formatting structure and a linebreak is always inserted before and after the structure. The size of the spacing before and after the block cannot be guaranteed from browser to browser.

What: <Blockquote>
Support: [IE1|M1|N1|O2.1|S1]
Most browsers render the contents of a BLOCKQUOTE passage indented.
  • Can usually nest BLOCKQUOTEs to create deeper indenting.
  • Most browsers indent BLOCKQUOTE structures.
  • The markup is supported in HTML 2.0 - Older browsers support it.
  • Some browsers unconditionally apply italics to BLOCKQUOTE structures as well as an indent.
  • Author cannot control the size of the indent.
  • BLOCKQUOTE is a block formatting structure and a linebreak is always inserted before and after the structure. The size of the spacing before and after the block cannot be guaranteed from browser to browser.
  • By marking code with BLOCKQUOTE, it does not actually mean "indent me"; HTML definitions do not REQUIRE a browser to indent BLOCKQUOTE simply indicates that the content is (or SHOULD be) a quotation.

What: <Spacer>
Support: [IE|M|N3B5-6.2|O|S]
Netscape created a tag specifically for the purpose of controlling white space in an HTML document. An author can produce horizontal-only, vertical-only or block white space using this tag.
  • Gives pixel-level control of the size of spacing desired.
  • Tag is specifically made for controlling the desired indent property.
  • This method also allows the creation of floating spacing elements.
  • Netscape specific tag only supported in some versions so it is VERY limited in support. It is also not currently in any HTML standard, nor will it ever be (more control is possible with Style Sheets now.)
  • There is nothing backward compatible about the SPACER structure to allow for graceful degradation on non-supporting browsers.
  • This element is no longer supported in current Netscape versions.

What: <Dl>
Support: [IE1|M1|N1|O2.1|S1]
The DD term of a Definition List is usually indented by most browsers
  • Most browsers indent DD terms in DL structures.
  • Supported in HTML 2.0 - Older browsers will support it.
  • Some browsers MAY indent a DD term on the same line as a previous DT term.
  • The HTML specifications recommend that a DD term should not exist without a DT term coupled to it, but this is almost never required in browsers.
  • Size of indent is static and cannot be controlled - Internet Explorer indent is about half that of Netscape and Mosaic's indent size.
  • By marking code with DL, it does not actually mean "indent me"; HTML definitions do not REQUIRE a browser to indent the DD term in a definition list simply indicates that the content is (or SHOULD be) the associated explanation of a defining term.

What: <Ol>, <Ul>
Support: [IE1|M1|N1|O2.1|S1]
It is possible to use a list containing structure without the necessary list items (LI) to achieve indent in several browsers.
  • Internet Explorer, Mosaic, Netscape and Opera all exhibit the indenting behavior with this HTML.
  • Strictly speaking, this HTML is not valid with respect to the established standards. Whenever you use illegal HTML the end result can NOT be guaranteed. This method should not be used.
    [Note: One could argue that using only a list structure such as the list header (LH) element existing only in the expired HTML 3.0 draft would be an instance where you could get away with this behavior... still, syntax like LH is deprecated markup and not recommended.]

What: <Img>
Support: [IE1|M1|N1|O2.1|S1]
Use of a transparent image of desired indentation width dimension or using a small (1 X 1 pixel will suffice and keeps download time minimal) transparent image with explicit width dimension allows definition of the desired white space area.
  • Allows pixel level indentation control.
  • This method also allows the creation of floating spacing elements.
  • Fair degradation can occur by using the ALT attribute - browsers often preserve multiple spaces in its display.
  • Most graphical browsers support image insertion.
  • Text-only browsers will not be able to render the desired graphic indentation.
  • ALT attribute to the image tag may collapse multiple consecutive spaces to one.
  • Extra download request and time is necessary to load the image.
  • Only indents a single line of text unless more recent tags/attributes are used (Tables or floating IMG ALIGN attributes.)
  • Browsers that support images but do not support transparent images may display a colored image in the requested indentation space.

What: Tables
Support: [IE2|M2A8|N1.1|O2.1|S1]
Using the first column of a table or the first cell of a row to control indentation can be quite successful. Many methods can be used to size this first column: transparent images or non-breaking spaces in the cell content, or explicit WIDTH attribute declarations for the cell definitions.
  • Can control either first line or entire blocks of text.
  • Allows pixel level indentation size control.
  • Complex indentation appearances are possible using tables (COLSPAN and ROWSPAN attributes allow even greater display possibilities.)
  • In-cell methods used to create indentation (transparent images and non-breaking spaces) degrade well in browsers that do not understand tables.
  • Almost all browsers now support Tables
  • Historically, tables have not always been supported. Very old browsers are not likely to support them.
  • Browsers that do not allow nested tables may not display nested content well.
  • Using table structuring mechanisms to control indentation size (such as WIDTH attributes) will not degrade well on browsers that do not understand tables.
  • Table structures require more HTML tags to create - this can cause longer download time in contrast to some other indenting methods.
  • Ever since tables were created, they were used to create spacing and alignments for one or more text and/or other content objects. Tables should, strictly speaking, represent tabular data. Nothing about a table strictly means "indent me" - that is just what many users and authors have come to expect. Authors should not rely on this.

What: Cascading Style Sheets [-->Index DOT Css]
Support: [IE3B1|M|N4B2|O3.5|S1]
Using Cascading Style Sheet Margin and/or Padding properties on most ANY HTML allows indentation on any side of an element - even negative values with margins.
  • Higher degree of control possible on most any element than with any other method.
  • Rendering information can be attached to HTML elements without losing the original semantic meaning (good backward compatibility.)
  • Older browsers will never support Cascading Style Sheets. Newer browsers DO support CSS with varying degrees of accuracy.

Of the common methods mentioned here, only a few work really well on many browsers. The prime question you should ask when you wish to indent is "Does the method degrade well on non-supporting browsers?" The answer should be fairly easy after that. To help though, here is a summary:
Use is Encouraged Works OK in Some
or Most Cases
Use is Discouraged
  • Cascading Style Sheets
  • Images
  • Tables
  • Non-breaking Spacing
  • Preformatted Text
  • Blockquotes
  • Definition Lists
  • The SPACER element
  • Bad list structures

Personal Opinion Addendum:
It has been several years since I first wrote this page, and browsers have come a long way, as has popular practice in authoring. While the standards have always wanted authors to author documents semantically marked up correctly with respect to their contents, in reality it was often not an option.

But authors should no longer ignore these wishes if we are to create, or at least slowly evolve the web into a domain of correctly marked-up documents. Of the recommended methods for indentation listed above, I now can really only recommend one method to reliably indent: CSS. With the advent of greater personalization given to readers, different rendering devices (such as cell phones), and the trends towards making the web more accessible to all readers and devices it is silly to try and guarantee indentation...any method you choose is simply an "indent me please." There simply is NO 100% reliable way to indent...Get over it. =) Let go of attempting to create pixel-perfect pages and give in to the adaptive rendering way of thinking.

Boring Copyright Stuff...