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]
- How:
- 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.
- 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.
- 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]
- 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|S1]
- How:
- Most browsers render the contents of a BLOCKQUOTE passage indented.
- Pros:
- 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.
- 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.
- By marking code with BLOCKQUOTE, it does not actually mean "indent me";
HTML definitions do not REQUIRE a browser to indent BLOCKQUOTE
structures...it simply indicates that the content is (or SHOULD
be) a quotation.
- What:
<Spacer>
- Support:
[IE|M|N3B5-6.2|O|S]
- 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 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]
- 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.
- 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 structure...it 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]
- 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, Netscape and Opera all exhibit the indenting
behavior with this HTML.
- Cons:
- 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]
- 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|S1]
- 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.
- Almost all browsers now support Tables
- Cons:
- 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]
- 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 with margins.
- Pros:
- 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.)
- Cons:
- Older browsers will never support Cascading Style Sheets. Newer
browsers DO support CSS with varying degrees of accuracy.
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:
| 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.
|