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.

<element align="bottom"> <element style="vertical-align: bottom"> (align)
<element align="center"> <table style="margin-left: auto; margin-right: auto;"> (for table elements)
<element style="text-align: center"> (for most other elements; align)
<element align="justify"> <element style="text-align: justify"> (align)
<element align="left"> <element style="float: left"> (for applet, iframe, img, object, and table elements; align)
<element style="text-align: left"> (for most other elements; align)
<element align="middle"> <element style="vertical-align: middle"> (align)
<element align="right"> <element style="float: right"> (for applet, iframe, img, object, and table elements; align)
<element style="text-align: right"> (for most other elements; align)
<element align="top"> <element style="vertical-align: top"> (align)
<b>content</b> <span style="font-weight: bold">content</span>
<element background="url"> <element style="background-image: url(url)">
<basefont color="color"> body { color: color; } (bf)
<basefont face="fontname"> body { font-family: fontname; } (bf)
<basefont size="htmlsize"> body { font-size: csssize; } (bf, size)
<bdo dir="horiz">content</bdo> <span style="unicode-bidi: bidi-override; direction: horiz">content<span> (dir)
<element bgcolor="color"> <element style="background-color: color">
<big>content</big> <span style="font-size: larger">content</span> (size)
<blink>content</blink> <span style="text-decoration: blink">content</span>
<blockquote>content</blockquote> <div style="margin:1.12em 40px">content</div> (bq)
<body alink="color"> :link:active, :visited:active { color: color; }
<body link="color"> :link { color: color; }
<body text="color"> body { color: color; }
<body vlink="color"> :visited { color: color; }
<element border="n%"> <element style="border-width: npx; border-style: solid"> (for img and object)
<table style="border-width: npx; border-style: outset"> and also border-width: 1px; border-style: inset for cells (for table)
<table bordercolor="color"> <table style="border-color: color"> and also border-style: solid for the table and its cells; on IE, also the individual cell colors are affected
<br><element> element:before { content: "\A"; white-space: pre; }
<br clear="left"><element> <br><element style="clear:left">
<br clear="right"><element> <br><element style="clear:right">
<br clear="all"><element> <br><element style="clear:both">
<caption align="alignment"> <caption style="caption-side: alignment">
<table cellpadding="n"> padding: npx for each cell
<table cellspacing="n"> <table style="border-spacing: npx">
<br><element> element:before { content: "\A"; white-space: pre; }
<center>content</center> <div style="text-align:center">content</div>
<col …> see HTML and CSS tutorials; this is a tough issue
<colgroup …>
<dir>content</dir> <ul>content</ul> (no CSS needed, since no difference in presentation)
<element dir="horiz"> <element style="direction: horiz; unicode-bidi: embed;"> (dir)
<font color="color">content</font> <span style="color: color">content</span>
<font face="fontlist">content</font> <span style="font-family: fontlist">content</span>
<font size="number">content</font> <span style="font-size: htmlsize">content</span> (size)
<table frame="frametype"> affects presence of borders around the table and around its cells; CSS counterpart depends on context
<element height="number"> <element style="height: numberpx">
<element height="number%"> <element style="height: number%">
<hr> set a bottom border for the preceding element or a top border for the following element
<element hspace="number"> <element style="margin-left: numberpx; margin-right: numberpx;">
<i>content</i> <span style="font-style: italic">content</span>
<menu>content</menu> <ul>content</ul> (no CSS needed, since no difference in presentation)
<nobr>content</nobr> <span style="white-space: nowrap">content</span>
<hr noshade> <hr style="background: gray"> (other effects occur, too, not all describable in CSS)
<element nowrap> <element style="white-space: nowrap">
<pre>content</pre> <div style="white-space: pre">content</div>
<table rules="ruletype"> affects presence of borders around the table and around its cells; CSS counterpart depends on context
<s>content</s> <span style="text-decoration: line-through">content</span>
<hr size="n"> <hr style="height: npx">
<small>content</small> <span style="font-size: smaller">content</span> (size)
<ol start="number"> no direct CSS counterpart; counters and generated content offer a similar mechanism
<strike>content</strike> <span style="text-decoration: line-through">content</span>
<sub>content</sub> <span style="vertical-align: sub; font-size: smaller">content</span> (subsup)
<sup>content</sup> <span style="vertical-align: super; font-size: smaller">content</span> (subsup)
<element target="targetname"> no CSS counterpart
<textarea> when used for presentation only, use CSS to create a scrollable box
<tt>content</tt> <span style="font-family: monospace">content</span>
<element type="a"> <element style="list-style-type: lower-alpha"> (for ol and li)
<element type="A"> <element style="list-style-type: upper-alpha"> (for ol and li)
<element type="i"> <element style="list-style-type: lower-roman"> (for ol and li)
<element type="I"> <element style="list-style-type: upper-roman"> (for ol and li)
<element type="1"> <element style="list-style-type: decimal"> (for ol and li)
<element type="circle"> <element style="list-style-type: circle"> (for ul and li)
<element type="square"> <element style="list-style-type: square"> (for ul and li)
<element type="disc"> <element style="list-style-type: disc"> (for ul and li)
<u>content</u> <span style="text-decoration: underline">content</span>
<element valign="valignment"> <element style="vertical-align: valignment">
<ol value="number"> no direct CSS counterpart; counters and generated content offer a similar mechanism
<element vspace="number"> <element style="margin-top: numberpx; margin-bottom: numberpx;">
<element width="number"> <element style="width: numberpx">
<element width="number%"> <element style="width: number%">

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.


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.


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.


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:

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:

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):

size="7" font-size: 300%
size="6" font-size: xx-large
size="5" font-size: x-large
size="4" font-size: large
size="3" font-size: normal
size="2" font-size: small
size="1" font-size: xx-small

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:

One line. Second line. Third line. Fourth line. Fifth and last line.