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 ]
- Support ( ): [ IE2 |
M2A8 | N1.1 |
O2.1 ]
- How:
- Browsers usually treat multiple consecutive 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.
- Pros:
- 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.
- Cons:
- 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.
- Not all browsers 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 ]
- How:
- 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.
- Pros:
- 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.
- Cons:
- 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 ]
- How:
- Most browsers render the contents of a BLOCKQUOTE passage indented.
- Pros:
- Can nest BLOCKQUOTEs to create deeper indenting.
- Most browsers indent BLOCKQUOTE structures.
- Supported in HTML 2.0 - Older browsers support it.
- Cons:
- 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.
- HTML definitions do not REQUIRE a browser to indent BLOCKQUOTE
structures.
- What:
<Spacer>
- Support: [ IE |
M | N3B5 |
O ]
- How:
- 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.
- Pros:
- 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.
- Cons:
- Netscape specific tag only supported in its most recent versions
(since 3.0 Beta 5) so is VERY limited in support. It is also not
currently in any HTML standard, nor is it likely to be (more
control is possible with Style Sheets.)
- There is nothing backward compatible about the SPACER structure to
allow for graceful degradation on non-supporting browsers.
- What: <Dl>
- Support: [ IE1 |
M1 | N1 |
O2.1 ]
- How:
- The DD term of a Definition List is usually indented by most browsers
- Pros:
- Most browsers indent DD terms in DL structures.
- Supported in HTML 2.0 - Older browsers will support it.
- Cons:
- 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.
- What: <Ol>,
<Ul>
- Support: [ IE1 |
M1 | N1 |
O2.1 ]
- How:
- It is possible to use a list containing structure without the
necessary list items (LI) to achieve indent in several browsers.
- Pros:
- Internet Explorer, Mosaic and Netscape exhibit the indenting
behavior with this HTML.
- Cons:
- This is illegal HTML. Whenever you use illegal HTML the end
result can NOT be guaranteed. This method should not be used.
Period.
- What: <Img>
- Support: [ IE1 |
M1 | N1 |
O2.1 ]
- How:
- 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.
- Pros:
- 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.
- Cons:
- 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 ]
- How:
- 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.
- Pros:
- 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.
- Cons:
- Tables are a relatively recent addition to HTML and older browsers
will likely not understand 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.
- What: Cascading
Style Sheets
- Support: [ IE3B1 |
M | N4B2 |
O ]
- How:
- Using Cascading Style Sheet Margin and/or Padding properties on
most ANY HTML allows indentation on any side of an
element - even negative values.
- Pros:
- Higher degree of control possible on most any element than with
any other method.
- Rendering information can be attached to semantic HTML tags
without losing the original semantic meaning (good backward
compatibility.)
- Cons:
- Not all browsers support Cascading Style Sheets yet. This is quickly changing
and the next proposed HTML standard allows this syntax as well. Older browsers
will not be able to support the newer syntax.
- Full use of Cascading Style Sheets are not within the realm of any
official HTML standard yet (STYLE tag and related CSS attributes are
not supported, but LINK is.) CSS is now a W3C Recommendation though,
and wide support seems imminent.
Conclusions
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: |