How do I replicate a \t tab space in HTML?

Question

How can I use the common \t escape character in html ? Is it possible?

I need a code that has the same function as the /t escape character

score 26 · Answer 1 · edited Apr 14 '20 at 19:18

You can enter the tab character (U+0009 CHARACTER TABULATION, commonly known as TAB or HT) using the character reference 	. It is equivalent to the tab character as such. Thus, from the HTML viewpoint, there is no need to “escape” it using the character reference; but you may do so e.g. if your editing program does not let you enter the character conveniently.

On the other hand, the tab character is in most contexts equivalent to a normal space in HTML. It does not “tabulate”, it’s just a word space.

The tab character has, however, special handling in pre elements and (although this not that well described in specifications) in textarea and xmp element (in the latter, character references cannot be used, only the tab character as such). This is described somewhat misleadingly in HTML specifications, e.g. in HTML 4.01: “[Inside the pre element, ] the horizontal tab character (decimal 9 in [ISO10646] and [ISO88591] ) is usually interpreted by visual user agents as the smallest non-zero number of spaces necessary to line characters up along tab stops that are every 8 characters. We strongly discourage using horizontal tabs in preformatted text since it is common practice, when editing, to set the tab-spacing to other values, leading to misaligned documents.”

The warnings are unnecessary except as regards to the potential mismatch of tabbing in your authoring software and HTML rendering in browsers. The real reason for avoiding horizontal tab is that it a coarse and simplistic tool as compared with tables for presenting tabular material. And in displaying computer source programs, it is better to use just spaces inside pre, since the default tab stops at every 8 characters are quite unsuitable for any normal code indentation style.

In addition, in CSS, you can specify white-space: pre (or, with slightly more limited browser support, white-space: pre-wrap) to make a normal HTML element, like div or p, rendered like pre, so that all whitespace is preserved and horizontal tab has the “tabbing” effect.

In CSS Text Module Level 3 (Last Call working draft, i.e. proceeding towards maturity), there is also the tab-size property, which can be used to set the distance between tab stops, e.g. tab-size: 3. It’s supported by newest versions of most browsers, but not IE (not even IE 11).

score 21 · Answer 2 · answered Aug 11 '16 at 15:55

21

     would be a work around if you're only after the spacing.

answered Aug 11 '16 at 15:55

xr280xr

12,621
7
81
125

score 7 · Answer 3 · answered Dec 06 '13 at 01:59

7

HTML doesn't have escape characters (as it doesn't use escape-semantics for reserved characters, instead you use SGML entities: &, <, > and ").

SGML does not have a named-entity for the tab character as it exists in most character sets (i.e. 0x09 in ASCII and UTF-8), rendering it completely unnecessary (i.e. simply press the Tab key on your keyboard). If you're working with code that generates HTML (e.g. a server-side application, e.g. ASP.NET, PHP or Perl, then you might need to escape it then, but only because the server-side language demands it - it has nothing to do with HTML, like so:

echo "<pre>\t\tTABS!\t\t</pre>";

But, you can use SGML entities to represent any ISO-8859-1 character by hexadecimal value, e.g. 	 for a tab character.

answered Dec 06 '13 at 01:59

Dai

141,631
28
261
374

`

` is *perfect* for certain types of output, for example tabulated data. However it is not useful to simply wrap tabs in a `` tag to produce tab-like spaces within other types of text that occurs on web pages (due to the design of html). The `pre` tag interrupts the flow of text, and applies other style changes, such as font, and indentation. For example, see the difference in these two lines: `echo " Wrapping 
\ttabs in pre\t interrupts the flow of text. ";` and
`echo " Setting tag style to \t style='white-space:pre'\t does not. 
";`.

– SherylHohman Apr 14 '20 at 19:53

1

To apply just the non-collapsable spacing options that `pre` offers, without bringing along the rest of `pre`'s settings, to other tags, such as `
` or `
`, you can add the style `'white-space:pre'` to your your tag. Then tabs, spaces, and line feeds will "work", within that tag, according to text rules, rather than html rules. Two answers to this post expand further: https://stackoverflow.com/a/20423268/5411817 and https://stackoverflow.com/a/45266304/5411817.
– SherylHohman Apr 14 '20 at 19:56

score 6 · Accepted Answer · answered Dec 06 '13 at 01:56

6

I need a code that has the same function as the /t escape character

What function do you mean, creating a tabulator space?

No such thing in HTML, you'll have to use HTML elements for that. (A <table> may make sense for tabular data, or a description list <dl> for definitions.)

answered Dec 06 '13 at 01:56

Pekka

442,112
142
972
1,088

2

excactly, I want the Tab like space So it can happen only by using table? – user2443085 Dec 06 '13 at 02:07

score 5 · Answer 5 · answered Jul 23 '17 at 14:40

5

This simple formula should work. Give the element whose text will contain a tab the following CSS property: white-space:pre. Otherwise your html may not render tabs at all. Then, wherever you want to have a tab in your text, type 	.

Since you didn't mention CSS, if you want to do this without a CSS file, just use

<tag-name style="white-space:pre">text in element&#9;more text</tag-name>

in your HTML.

answered Jul 23 '17 at 14:40

Andrew Puglionesi

945
1
11
16

Wow! This is great! Cannot believe I never ran across this before. Using `whitespace:pre` style, allows additional options: you can simply hit the spacebar 6 times, to insert 6 spaces. Similarly, if you use PHP to output HTML, `\t`, will also work for ` ` (tab), IFF your string is inside double quotes (because in double quotes PHP will apply string substitution to the `\t` to create the correct code.) Likewise PHP will substitute `\r\n` in double quotes to newlines, which will also be honored in `pre`. Docs on [white-space](https://www.w3.org/TR/css-text-3/#white-space-property). – SherylHohman Apr 14 '20 at 19:05
[Jukka K. Korpela](https://stackoverflow.com/a/20423268/5411817) also comments on how this can be done in HTML, with even more detail and options. – SherylHohman Apr 14 '20 at 19:21

score 5 · Answer 6 · answered Jul 08 '19 at 20:42

5

You can use this &emsp; or &ensp;

It works on Visual Studio

answered Jul 08 '19 at 20:42

Giampaolo Ficorilli

71
1
6

1

This is similar to stringing a bunch of `&npsp;` together. It will not absorb spaces like a tab does, but is handier than entering non-breaking-spaces together. I did not try to count the equivalent number of spaces either works out to, but ` ` resulted in a much wider space than ` `, when I tried it out, and both were more than 4 `&npsp;` strung together. – SherylHohman Apr 13 '20 at 18:04

score 3 · Answer 7 · edited Apr 13 '20 at 08:53

3

The same issue exists for a Mediawiki: It does not provide tabs, nor are consecutive spaces allowed.

Although not really a TAB function, the workaround was to add a template named 'Tab', which replaces each call (i.e. {{tab}}) by 4 non-breaking space symbols:

 &nbsp;&nbsp;&nbsp;&nbsp;

Those are not collapsed, and create a 4 space distance anywhere used.
It's not really a tab, because it would not align to fixed tab positions, but I still find many uses for it.

Maybe someone can come up with similar mechanism for a Wiki Template in HTML (CSS class or whatever).

edited Apr 13 '20 at 08:53

SherylHohman

16,580
17
88
94

answered Apr 10 '18 at 13:08

CatMan

173
8

To follow up on your conjeccture: In html you just type those characters as if it were a long word, and it will print as non-breaking, non-collapsed spaces to the screen. In php, using string substitution to output text and html, you can assign `$tab = ' ';` Then for example,`echo "
some text $tab some more text
";`to write the html code. – SherylHohman Apr 13 '20 at 08:58

Looks like there is already an official mechanism. See [Andrew Puglionesi's Answer](https://stackoverflow.com/a/45266304/5411817) to this question. Within `

` whitespace is honored, but it also makes other style changes that make it unsuitable for most HTML output. BUT, using `style="whitespace:pre"` inside an html tag, will honor standard text-based whitespace rules to the text within the element, *without changing anything else*.

– SherylHohman Apr 14 '20 at 19:13

score 2 · Answer 8 · edited Mar 24 '20 at 10:02

2

You must use

<dd> </dd> in the html code.

<dd>A free, open source, cross-platform,graphical web browser developed by theMozilla Corporation and hundreds of volunteers.</dd>

----------------------------------
Firefox
    A free, open source, cross-platform, graphical web browser developed by the Mozilla 
    Corporation and hundreds of volunteers.

enter image description here

edited Mar 24 '20 at 10:02

Nikos Hidalgo

3,666
9
25
39

answered Mar 24 '20 at 09:23

hizlan erpak

309
2
3

I think something went wrong with your formatting. I can't tell what you are trying to say. – Anna Ira Hurnaus Mar 24 '20 at 09:49
`dl`, `dt`, `dd` tags: https://www.w3schools.com/TAGS/tag_dl.asp Unfortunately, each term gets printed to a new line. So, `dt` is for the term, then `dd`, the definition, gets indented, but on a new line. This will not put tab-like spacing between items on the same line. It is a little like bullet lists without the bullet points. (`dl` wraps a list of term/definition sets). – SherylHohman Apr 14 '20 at 20:04

How do I replicate a \t tab space in HTML?

8 Answers8

Linked