I've spent my entire life searching for a simple way to use tab spaces in html. (well, my entire life that I've known about html anyway..)

There is no official HTML tab. HTML was made to eliminate white space usage, so the only space is single spaces and newlines(plus right/left/center align). This is good for having a web page look consistently decent across multiple browser resolutions. Unfortunately nothing was made to allow a simple tab at the beginning of paragraphs, or for indentation in poetry or prose.

I've seen web pages with indentations, but they always cheat, and I never seem to be able to figure out how to cheat.

UL

Some people will use <ul> to indent a single line. UL(unordered list) has a few unfortunate side effects. It does a line break(>br<) before it starts, and it also indents every line until >/ul<, which also inserts another line break, leaving unsightly space above and below the indented line. You also must have a definite end to the line--you can't have it wrap around to being un-indented on the next line.
Here is an example of trying to end one paragraph, and begin another indented paragraph on the next line:
and I never seem to be able to figure out how to cheat.
    Some people will use <ul> to indent a single line. UL(unordered list) has a few unfortunate(/ul)
side effects. It does a line break(>br<) before it starts, and it also

Blockquote

Blockquote has the same problems as UL:
and I never seem to be able to figure out how to cheat.
Some people will use <ul> to indent a single line. UL(unordered list) has a few unfortunate(/bq)
side effects. It does a line break(>br<) before it starts, and it also

DD

So UL is pretty worthless. What about definitions with <dd> and <dt>? Here is the same paragraph using just a single >dd< where the indentation is wanted:
and I never seem to be able to figure out how to cheat.
Some people will use <ul> to indent a single line. UL(unordered list) has a few unfortunate side effects. It does a line break(>br<) before it starts, and it also

So DD expects no /dd to end it, it simply does a single indentation! Wowee! It even works under both Netscape and IE.
Unfortunate side effects? It won't do multiple tabs in a row(all DDs are consolidated into a single tab) and you can't insert a tab into the middle of a sentence--dd will drop to the next line before indenting.

Tables

Tables can be used, as explained by another writeup here. I still feel like tables are bulky(slow to render in some browsers), and way too much HTML for such a simple task.

&nbsp;

So it looks like, not counting CSS, there are no viable options for indenting, especially on E2 where tables aren't allowed, besides no-break spaces. These still frustrate me with their bulk and inefficiency. Why do I have to do &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; to do something that I should be able to do with a single tag?
There is no special HTML character for tab. You can, however, use a cascading style sheet to do indentation. The following style does first line indentation...

.para { text-indent: 3em; }

You can put this at the top if the page inside a STYLE tag, and then, for each paragraph, write <p class="para">

That's the easiest way I know to indent. If you use CSS, you can do a ton of other things with the text, too, and your HTML will also be W3C 4.01 compliant.

If you need to avoid CSS, though, the traditional method of doing tabs is one of two methods: either using a transparent 1-pixel GIF and stretching it to be 10 pixels wide or so, or using &nbsp;

I use four or five in a row with no spaces in between like this:

&nbsp;&nbsp;&nbsp;&nbsp;
and then start off your paragraph. nbsp stands for non-breaking space.

The ideal solution to implement tab in HTML is CSS stylesheets, as Orange Julius suggested.

The two work-arounds suggested have some drawbacks.

  • Multiple &nbsp;&nbsp; are not guaranteed to give you more than one space indentation, since "nbsp" are also whitespace that could be eliminated as necessary. However, I note IE5 and NS5 do treat them as multiple spaces.
  • Transparent 1-pixel GIF has the overhead of the an extra HTTP request for that small image.

My current preference, if I'm forced to emulate tab in HTML without CSS, is to use inline "table" tags, since almost all browsers understands them now.

<table width=40 border=0 cellspacing=0 cellpadding=0 align=left>
 <tr><td>&nbsp;</td></tr>
</table>

But, if I only need one space I would of course use "nbsp".

Log in or register to write something here or to contact authors.