Mapping presentational HTML to CSS

The table describes how HTML elements and attributes that are often used only for affecting presentation could be replaced by the use of CSS. There are explanations after the table.

The purpose of this document

The table describes possible replacements of presentational HTML by CSS. It is not always a good idea to do such replacements. In general, it is not very useful to “purify” existing web pages, but if you do such things, the table might help you. More constructively, you can use the table to find CSS counterparts for presentational HTML, so that you can design new pages without resorting to old techniques that you might be familar with.

Some of the HTML constructs have been defined semantically (e.g., blockquote means a block of quoted text) but are widely used, or abused, for mere presentation (e.g., blockquote is used just to indent a block of text, which is not a quotation of any kind). In such situations, replacing it by the use of CSS might be a good idea.

Legend

Mapping presentational HTML to CSS constructs is not an exact science. In most cases, there is no official description of how web browsers should interpret a presentational HTML construct in terms CSS rules. The CSS specifications contain sample style sheets for HTML, but they are far from complete, and they partly differ from common practice in browsers.

Thus, the preceding table is based on various sources, intepretations, and experiences.

Explanations:

• If the second column contains CSS only (does not start with the “<” character), then you would add that CSS code into the page’s style sheet and remove the attribute from HTML markup.
• If the second column contains HTML markup (starts with the “<” character), then that markup is meant to replace the markup in the first column.

In order to present things compactly here, the second column contains a style sheet embedded into a style attribute. This should not be regarded as a recommendation—quite on the contrary: you should define a class for the element and write a CSS rule using the class into an external style sheet. For example, if you have <b>foo</b>, you would replace the markup e.g. by <span class="x">foo</span> and you would additionally write .x { font-weight: bold; } into the page’s style sheet. You should use a name that corresponds to the meaning of the text, rather than a simplistic name like x.

The span element is used as an example only. Generally, you should select markup that describes the content and assign styles to such logical elements; use span and div as last resort only. For example, if existing markup has
<h1><font face="Arial">heading</font></h1>
it can be replaced by <h1>heading</h1> in the markup and h1 { font-family: Arial; } in a style sheet.

With few exceptions, only presentational attributes and elements defined in the HTML 4.01 specification are listed. Classification of constructs to presentational and non-presentational is of course partly subjective, but mostly obvious. However, see notes below.

The table does not cover all presentational elements and attributes. For example, the presentational attributes in a col element cannot be described in any simple way in CSS terms. Markup related to frames is not discussed here. Perhaps most importantly, the issue of replacing layout tables by CSS positioning or floating is too complex to be discussed in a compact summary.

Notes

Browser support

As a rule, browser support to presentational HTML markup is better than for corresponding CSS constructs. The difference is now relatively small, though, and decreasing. Yet, there are essential problems especially in Internet Explorer, even though all the CSS features discussed here belong to the CSS 2.0 specification and the CSS 2.1 draft. For example, generating line breaks in the presentation using CSS, instead of the br tag, does not work at all on IE.

For overviews of browser support to CSS properties, consult the following:

• CSS 2.1 Reference : Cultured Code
• CSS3 Preview - CSS3.info
• Index DOT Css.

Replacing presentational markup by structural markup

Consider whether presentational markup could be replaced by logical markup rather processed as above.

For example, in most cases, the use of b markup really means strong emphasis and would best be replaced by strong markup (or maybe with e.g. h2 markup, if it is really a heading).

align attribute

The align attribute is allowed for several elements, partly in different meanings; see Index of the HTML 4 Attributes. Beware that browsers may deviate from the specifications:

• align="center" is very often treated as centering all inner blocks as blocks, instead of just centering each text line
• align="char" is not supported

For most elements where it is allowed, align corresponds to text-align but it may suffer from the same problems as that attribute. Specifically, on IE (even IE 7 in “standards mode”, as opposite to Quirks Mode), setting either align="center" in HTML or text-align: center" in CSS for a div element centers any inner block as a whole. This means that on IE, <div align="center"> centers each line in the content as well as any inner table, div element, or other block as a whole (but not the div element itself as a block). Other browsers usually follow the specifications and center each line only.

If a page uses div align="center" in order to center an inner div element as a block, a suitable CSS counterpart is to set margin: 0 auto for the block to be centered. This does not work in Quirks Mode, however.

For caption and table elements, the attribute has a different CSS counterpart. Note that for table align="center", the defined (as well as actual) effect is to center the table as a block.

The meaning of align for fieldset cannot be described definitively in CSS.

The setting align="char" and the related char and charoff attributes and their CSS counterparts have not been mentioned, since none of them has any support in any browser.

basefont element

The basefont element as such has no CSS counterpart, since the effect of this element extends from its occurrence until the end of the document or up to the next basefont element. The correspondence given in the table applies to a situation where the document contains only one basefont element and it appears at the start of the body element.

dir attribute and bdo element

The dir attribute, specifying writing direction and allowed in most elements, might be regarded as presentational in some situations. It corresponds to the direction property in CSS. For example, the attribute dir="rtl" corresponds to style="direction:rtl".

However, for languages such as Arabic and Hebrew, right to left direction is an inherent part of the normal writing system. It is thus not presentational in the same sense as typical visual effects, and hence using HTML for the purpose might be regarded as more adequate.

Similar considerations apply to the bdo element (bidirectional override).

blockquote element

The blockquote element is not presentational, but it is commonly abused for mere indentation of text that are not quotations. The style sheet presented in the table describes the common browser rendering for blockquote. It means indentation of 40 pixels on the left and on the right and setting a 1.12em top and bottom margin. Of course, if you really want some left indent, you can set just that (e.g., margin-left:2em).

Font size correspondence

There is no defined correspondence between font sizes in HTML and in CSS. However, the following table presents a natural mapping, which reflects the behavior of most modern browsers at least in their “standard” mode (as opposite to Quirks Mode):

The effect of font size attributes like size="+1" is relative to the base font size. For example, if the base font size is 3 (the default), size="+1" is equivalent to size="4".

The effect of big and small is in practice mostly the same as that of font size="+1" and font size="-1", respectively.

sub and sup elements

The sup element and, less often, the sub element can be used as presentational, but in mathematical and technical use, they are often structural: removing the superscripting or subscripting may change the meaning of an expression.

Generally, the default rendering of these elements involves both vertical alignment and font size reduction. The alignment and the reduction factor vary by browser, and the reduction need not exactly correspond to the setting font-size: smaller.

textarea element

The textarea element indicates a multi-line text input area, and it is structural and functional rather than presentational. However, rather often it is used for pure presentation, namely to display a large amount of text in a scrollable box. In that role, it can be replaced by the use of CSS for a div element. There is no exact correspondence, since textarea elements have special rendering features, which vary from one browser to another.

However, the following example gives a rough idea. Consider the following markup:

<textarea rows="2" cols="20">One line.
Second line.
Third line.
Fourth line.
Fifth and last line.</textarea>

The following markup and CSS code create a similar (though not identical) scrollable box:

<div style=
"height: 3.6em; width: 15em; overflow: auto;
 border: solid 1px;
 padding: 2px;
 white-space: pre; font: 90% monospace;">One line.
Second line.
Third line.
Fourth line.
Fifth and last line.</div>

Your browser displays these elements as follows: