There are many ways to indent text in HTML, but there are only two ways that deserve to be used. These ways work in all HTML-rendering devices, and are highly configurable. So, I have decided to list all of the best indentation options, and I have ranked them accordingly.
- The <dl> family
- This is the indentation option to use. The DL family of tags work on all browsers, and are WAI compliant. The dl family (Consisting of <dl>, <dt>, and <dd>, the latter two do all the work) is a little complex to learn how to use, but it's worth it. Use this if you simply want to indent text.
- The blockquote tag is a great tag. You can nest this one to create multiple levels of indentation. It indents on all browsers. It is a shame, however, that the standards do not require indentation. This tag was meant for long quotations, and that is what you should use. Use this if you want multiple levels of indentation, but it's still recommended that you use the DL family.
- You can use the property 'margin-left' to specify your indent. This allows for the most control. But why map that to a <div> tag? Use stylesheets to control indent size, but apply them to the above tags.
- You could do some simple indentation in HTML using tables. But, they don't work in many browsers, and the above tags were designed for cross-platform indentation purposes. Please use them instead.
- You could create a small 1 pixel by 1 pixel transparent GIF and resize it in the tag to create the desired effect. But, this does not show in text-only browsers, nor does it indent whole blocks unless tables or CSS is used. If you are doing single-line indentation, use instead.
<ol> or <ul>
- The preformatted tag preserves all spaces and line breaks for all text enclosed it it's maw. Sadly, this does not allow for liquid designs. Not to mention that all text enwrapped by the preformatted tag is rendered in a fixed-width font. Only use this if you are working on concrete poetry.
- The theory behind this one is that if you specify that there is a list without marking any items, this will indent text. Problem is, this is not valid HTML, and should not be used.
- You've probably never heard about this one. You've never heard about this one for a good reason, too. This tag only works in Netscape 4. Please, avoid this one like the plague.
More on HTML Indentation: