When you embed a TAB character (U+0009) in a <PRE> block (or more precisely, an element whose
white-space CSS property is computed to be
pre-wrap), Internet Explorer will move the current position to the next multiple of eight characters. Many people prefer four. (Some insist that only four is the correct value and anybody who disagrees with them is simply wrong.)
Because that's what the standard says.
All tabs (U+0009) are rendered as a horizontal shift that lines up the start edge of the next glyph with the next tab stop. Tab stops occur at points that are multiples of 8 times the width of a space (U+0020) rendered in the block's font from the block's starting content edge.
Note that the standard does not provide an extensibility point to customize the position of tab stops. The number eight is hard-coded into the standard. If you don't like that, then don't use tabs. (There appears to be a draft proposal to add a
tab-size property to control this, but nothing standard yet, at least not at the time I originally wrote this article.)
Okay, but why did the standard pick eight as the tab stop interval? I don't know (never having attended any CSS standardization meetings), but I suspect they were observing existing practice. For reasons unknown even to Wikipedia, teletypewriter tab stops were historically placed at eight-column intervals.