A user account is required in order to edit this wiki, but we've had to disable public user registrations due to spam.

To request an account, ask an autoconfirmed user on IRC (such as one of these permanent autoconfirmed members).

Difference between revisions of "Presentational elements and attributes"

From WHATWG Wiki
Jump to: navigation, search
Line 55: Line 55:
 
|-
 
|-
 
|alink on body elements
 
|alink on body elements
|
+
|'color' on :link:active, :visited:active
 
|-
 
|-
 
|background on body elements
 
|background on body elements
|
+
|'background-image' on body
 
|-
 
|-
 
|bgcolor on body elements
 
|bgcolor on body elements
|
+
|'background-color' on body
 
|-
 
|-
 
|link on body elements
 
|link on body elements
|
+
|'color' on :link
 
|-
 
|-
 
|text on body elements
 
|text on body elements
|
+
|'color' on body
 
|-
 
|-
 
|vlink on body elements
 
|vlink on body elements
|
+
|'color' on :visited
 
|-
 
|-
 
|clear on br elements
 
|clear on br elements
|
+
|'clear' (or other techniques to clear floats)
 
|-
 
|-
 
|align on caption elements
 
|align on caption elements
|
+
|'caption-side', 'text-align'
 
|-
 
|-
 
|align on col elements
 
|align on col elements
|
+
|'text-align' on the appropriate th/td
 
|-
 
|-
|ch on col elements
+
|char on col elements
 
|
 
|
 
|-
 
|-
|chOff on col elements
+
|charoff on col elements
 
|
 
|
 
|-
 
|-
 
|valign on col elements
 
|valign on col elements
|
+
|'vertical-align' on the appropriate th/td
 
|-
 
|-
 
|width on col elements
 
|width on col elements
|
+
|'width' on col
 
|-
 
|-
 
|align on div elements
 
|align on div elements
|
+
|'text-align' and 'margin-left:auto' and/or 'margin-right:auto' on descendant blocks
 
|-
 
|-
 
|compact on dl elements
 
|compact on dl elements
Line 100: Line 100:
 
|-
 
|-
 
|align on hr elements
 
|align on hr elements
|
+
|'margin-left:auto' and/or 'margin-right:auto' on hr
 
|-
 
|-
 
|noshade on hr elements
 
|noshade on hr elements
|
+
|'border-style:solid' on hr
 
|-
 
|-
 
|size on hr elements
 
|size on hr elements
|
+
|'border-width' or 'height' on hr
 
|-
 
|-
 
|width on hr elements
 
|width on hr elements
|
+
|'width' on hr
 
|-
 
|-
 
|align on h1—h6 elements
 
|align on h1—h6 elements
|
+
|'text-align' on h1-h6
 
|-
 
|-
 
|align on iframe elements
 
|align on iframe elements
|
+
|'float' on iframe
 
|-
 
|-
 
|frameborder on iframe elements
 
|frameborder on iframe elements
|
+
|'border' on iframe
 
|-
 
|-
 
|marginheight on iframe elements
 
|marginheight on iframe elements
|
+
|'margin-top' and 'margin-bottom' on body in the containing document
 
|-
 
|-
 
|marginwidth on iframe elements
 
|marginwidth on iframe elements
|
+
|'margin-left' and 'margin-right' on body in the containing document
 
|-
 
|-
 
|scrolling on iframe elements
 
|scrolling on iframe elements
|
+
|'overflow' on the root element in the containing document
 
|-
 
|-
 
|align on input elements
 
|align on input elements
|
+
|'float' or 'vertical-align' on input
 
|-
 
|-
 
|align on img elements
 
|align on img elements
|
+
|'float' on img
 
|-
 
|-
 
|border on img elements
 
|border on img elements
|
+
|'border' on img
 
|-
 
|-
 
|hspace on img elements
 
|hspace on img elements
|
+
|'margin-left' and 'margin-right' on img
 
|-
 
|-
 
|vspace on img elements
 
|vspace on img elements
|
+
|'margin-top' and 'margin-bottom' on img
 
|-
 
|-
 
|align on legend elements
 
|align on legend elements
Line 148: Line 148:
 
|-
 
|-
 
|type on li elements
 
|type on li elements
|
+
|'list-style-type' on li
 
|-
 
|-
 
|compact on menu elements
 
|compact on menu elements
Line 154: Line 154:
 
|-
 
|-
 
|align on object elements
 
|align on object elements
|
+
|'float' on object
 
|-
 
|-
 
|border on object elements
 
|border on object elements
|
+
|'border' on object
 
|-
 
|-
 
|hspace on object elements
 
|hspace on object elements
|
+
|'margin-left' and 'margin-right' on object
 
|-
 
|-
 
|vspace on object elements
 
|vspace on object elements
|
+
|'margin-top' and 'margin-bottom' on object
 
|-
 
|-
 
|compact on ol elements
 
|compact on ol elements
Line 169: Line 169:
 
|-
 
|-
 
|type on ol elements
 
|type on ol elements
|
+
|'list-style-type' on ol
 
|-
 
|-
 
|align on p elements
 
|align on p elements
|
+
|'text-align' on p
 
|-
 
|-
 
|width on pre elements
 
|width on pre elements
|
+
|'width' on pre
 
|-
 
|-
 
|align on table elements
 
|align on table elements
|
+
|'margin-left:auto' and/or 'margin-right:auto' on table
 
|-
 
|-
 
|bgcolor on table elements
 
|bgcolor on table elements
|
+
|'background-color' on table
 
|-
 
|-
 
|border on table elements
 
|border on table elements
|
+
|'border-width' on table and on the table's td and th
 
|-
 
|-
 
|cellpadding on table elements
 
|cellpadding on table elements
|
+
|'padding' on the table's td and th
 
|-
 
|-
 
|cellspacing on table elements
 
|cellspacing on table elements
|
+
|'border-spacing' on table
 
|-
 
|-
 
|frame on table elements
 
|frame on table elements
|
+
|'border-color:black' and 'border-style' on table
 
|-
 
|-
 
|rules on table elements
 
|rules on table elements
|
+
|'border-color:black' and 'border-style' on the table's appropriate elements
 
|-
 
|-
 
|width on table elements
 
|width on table elements
|
+
|'width' on table
 
|-
 
|-
 
|align on tbody, thead, and tfoot elements
 
|align on tbody, thead, and tfoot elements
|
+
|'text-align' on tbody, thead and tfoot and 'margin-left:auto' and/or 'margin-right:auto' on descendant blocks
 
|-
 
|-
|ch on tbody, thead, and tfoot elements
+
|char on tbody, thead, and tfoot elements
 
|
 
|
 
|-
 
|-
|chOff on tbody, thead, and tfoot elements
+
|charoff on tbody, thead, and tfoot elements
 
|
 
|
 
|-
 
|-
 
|valign on tbody, thead, and tfoot elements
 
|valign on tbody, thead, and tfoot elements
|
+
|'vertical-align' on tbody, thead and tfoot
 
|-
 
|-
 
|align on td and th elements
 
|align on td and th elements
|
+
|'text-align' on td and th and 'margin-left:auto' and/or 'margin-right:auto' on descendant blocks
 
|-
 
|-
|bgColor on td and th elements
+
|bgcolor on td and th elements
|
+
|'background-color' on td and th
 
|-
 
|-
|ch on td and th elements
+
|char on td and th elements
 
|
 
|
 
|-
 
|-
|chOff on td and th elements
+
|charoff on td and th elements
 
|
 
|
 
|-
 
|-
 
|height on td and th elements
 
|height on td and th elements
|
+
|'height' on td and th
 
|-
 
|-
|noWrap on td and th elements
+
|nowrap on td and th elements
|
+
|'white-space:nowrap' on td and th
 
|-
 
|-
|vAlign on td and th elements
+
|valign on td and th elements
|
+
|'vertical-align' on td and th
 
|-
 
|-
 
|width on td and th elements
 
|width on td and th elements
|
+
|'width' on td and th
 
|-
 
|-
 
|align on tr elements
 
|align on tr elements
|
+
|'text-align' on tr and 'margin-left:auto' and/or 'margin-right:auto' on descendant blocks
 
|-
 
|-
 
|bgcolor on tr elements
 
|bgcolor on tr elements
|
+
|'background-color' on tr
 
|-
 
|-
|ch on tr elements
+
|char on tr elements
 
|
 
|
 
|-
 
|-
|chOff on tr elements
+
|charoff on tr elements
 
|
 
|
 
|-
 
|-
 
|valign on tr elements
 
|valign on tr elements
|
+
|'vertical-align' on tr
 
|-
 
|-
 
|compact on ul elements
 
|compact on ul elements
Line 256: Line 256:
 
|-
 
|-
 
|type on ul elements
 
|type on ul elements
|
+
|'list-style-type' on ul
 
|-
 
|-
 
|}
 
|}

Revision as of 22:09, 24 June 2009

The HTML 5 spec lists some obsolete elements and attributes, some of which the advice given is "Use CSS instead.".

This page is intended to give advice about specific CSS features that can be used instead of each such element or attribute.

You should think about whether there is a semantic element that matches the intent of your use of a presentational element. If there is such an element, you should use it, and if it doesn't already have a default styling that you like, then you can use CSS from the tables below to make it look like you want.

Presentational elements

Element CSS feature
basefont 'font-size', 'font-family' and 'color' on body
big 'font-size:larger'
blink 'text-decoration:blink'
center 'text-align:center' and 'margin-left:auto; margin-right:auto' on descendant blocks
font 'font-size', 'font-family' and 'color'
marquee CSS transitions and animations
s 'text-decoration:line-through'
spacer 'margin', 'padding'
strike 'text-decoration:line-through'
tt 'font-family:monospace'
u 'text-decoration:undefline'

Presentational attributes

Attribute CSS feature
alink on body elements 'color' on :link:active, :visited:active
background on body elements 'background-image' on body
bgcolor on body elements 'background-color' on body
link on body elements 'color' on :link
text on body elements 'color' on body
vlink on body elements 'color' on :visited
clear on br elements 'clear' (or other techniques to clear floats)
align on caption elements 'caption-side', 'text-align'
align on col elements 'text-align' on the appropriate th/td
char on col elements
charoff on col elements
valign on col elements 'vertical-align' on the appropriate th/td
width on col elements 'width' on col
align on div elements 'text-align' and 'margin-left:auto' and/or 'margin-right:auto' on descendant blocks
compact on dl elements
align on hr elements 'margin-left:auto' and/or 'margin-right:auto' on hr
noshade on hr elements 'border-style:solid' on hr
size on hr elements 'border-width' or 'height' on hr
width on hr elements 'width' on hr
align on h1—h6 elements 'text-align' on h1-h6
align on iframe elements 'float' on iframe
frameborder on iframe elements 'border' on iframe
marginheight on iframe elements 'margin-top' and 'margin-bottom' on body in the containing document
marginwidth on iframe elements 'margin-left' and 'margin-right' on body in the containing document
scrolling on iframe elements 'overflow' on the root element in the containing document
align on input elements 'float' or 'vertical-align' on input
align on img elements 'float' on img
border on img elements 'border' on img
hspace on img elements 'margin-left' and 'margin-right' on img
vspace on img elements 'margin-top' and 'margin-bottom' on img
align on legend elements
type on li elements 'list-style-type' on li
compact on menu elements
align on object elements 'float' on object
border on object elements 'border' on object
hspace on object elements 'margin-left' and 'margin-right' on object
vspace on object elements 'margin-top' and 'margin-bottom' on object
compact on ol elements
type on ol elements 'list-style-type' on ol
align on p elements 'text-align' on p
width on pre elements 'width' on pre
align on table elements 'margin-left:auto' and/or 'margin-right:auto' on table
bgcolor on table elements 'background-color' on table
border on table elements 'border-width' on table and on the table's td and th
cellpadding on table elements 'padding' on the table's td and th
cellspacing on table elements 'border-spacing' on table
frame on table elements 'border-color:black' and 'border-style' on table
rules on table elements 'border-color:black' and 'border-style' on the table's appropriate elements
width on table elements 'width' on table
align on tbody, thead, and tfoot elements 'text-align' on tbody, thead and tfoot and 'margin-left:auto' and/or 'margin-right:auto' on descendant blocks
char on tbody, thead, and tfoot elements
charoff on tbody, thead, and tfoot elements
valign on tbody, thead, and tfoot elements 'vertical-align' on tbody, thead and tfoot
align on td and th elements 'text-align' on td and th and 'margin-left:auto' and/or 'margin-right:auto' on descendant blocks
bgcolor on td and th elements 'background-color' on td and th
char on td and th elements
charoff on td and th elements
height on td and th elements 'height' on td and th
nowrap on td and th elements 'white-space:nowrap' on td and th
valign on td and th elements 'vertical-align' on td and th
width on td and th elements 'width' on td and th
align on tr elements 'text-align' on tr and 'margin-left:auto' and/or 'margin-right:auto' on descendant blocks
bgcolor on tr elements 'background-color' on tr
char on tr elements
charoff on tr elements
valign on tr elements 'vertical-align' on tr
compact on ul elements
type on ul elements 'list-style-type' on ul