The simplest way I can think of would be to place the text in nested divs. Then add margin to the left of div. It will cascade down, giving you indentation.

<div id='testing'>
  Test1
  <div>
    Test2
    <div>
      Test3
    </div>
  </div>
</div>

With the CSS:

#testing div {
  margin-left: 10px;/*or whatever indentation size you want*/
}

With those, you'll get a nice tree, no matter how many levels deep you want to go.

EDIT: You can also use padding-left if you want.

If you really want to use tabs (== tabulator characters), you have to go with the following solution, which I don't recommend:

<pre>
test
&#x09;test
&#x09;&#x09;test
</pre>

or replace the <pre/> with <div style="white-space: pre" /> to achieve the same effect as with the pre element. You can even enter a literal tab character instead of the escaped 	.

I don't recommend it for most usages, because it is not really semantic, that is, from viewing the HTML source a program cannot deduce any useful information (like, e.g., "this is a heading" or such). You'd be better off using one of the nice margin-left examples of the other answers. However, if you'd like to display some stuff like source code or the such, the above solution would do it.

Cheers,

There have been a variety of good and bad answers so far but it seems no-one has addressed the way that you can choose between the solutions.

The first question to ask is "What is the relationship between the data being displayed?". Once this has been answered it the HTML structure you use should be obvious.

Please update the question explaining more about the structure of the content you need to display and you should find that you get better answers. At the moment everything from using <pre> to tables might be the best solution.

See Making a 'Tab' in HTML by Neha Sinha:

Preformatted

You can put tab characters in your HTML directly if you use what’s called “preformatted” text.In HTML, surround text that you want “preformatted” in a pair of “<pre>” and “</pre>” start and end tags.