1. Technology

Tabs in HTML

Using the Tab Character in Web Pages


Tab Key

Tab Key

(Were you looking for help with Tabbed Navigation with HTML?)

One of the most confusing things about HTML for a beginning web designer is the way that white space is handled. In print, the three primary white space characters (space, tab, and carriage return) act in three distinct ways. But in HTML, browsers render them all essentially the same. If you place one space or 100 or mix it up with tabs and carriage returns, they will all be condensed down to one space when the page is rendered by the browser.

Then How Do You Get Tabs in HTML?

If you’re thinking of tabs the way that word processing programs use them—markers along the horizontal axis of the page that text align to—the short answer is that you can’t.

But typically, when people use tabs in a document, they are using them for layout reasons or to get the text to move over a certain amount. This you can handle in HTML and CSS.

Layout—When You Can’t Use Tabs

The easiest way to modify layouts in HTML is with CSS. If you’re using tabs to create columns of text, you can use DIV elements that are positioned with CSS to get the effect of a tab. If the data is appropriate, you can use tables to align your tabular data as you like.

The most common way to create tabs with CSS is with the following CSS styles:

For example, you can indent the first line of a paragraph like a tab with the following CSS:

<p style="text-indent: 5em;">
The first line of this paragraph will be indented about five characters, similar to a tabbed indent.

Moving Text More than One Space Without Tabs

If all you want is for your text to be moved more than one space away from the preceding item, you can use the non-breaking space. To use the non-breaking space, you simply type &nbsp; as many times as you need it. So if you wanted to move your word five spaces over, you would type &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; and then your word. Note that some really old browsers will still condense non-breaking spaces down to one space, but those browsers are very uncommon now.

Did you find this useful?

You can get more articles and information like this by subscribing to the site newsletter or RSS feed.

©2014 About.com. All rights reserved.