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 Chat (such as one of these permanent autoconfirmed members).
Presentational elements and attributes
The HTML5 spec lists some obsolete elements and attributes, some of which the advice given is, for attributes "Use CSS instead", and for elements:
Use appropriate elements and/or CSS instead.
For the
sandstrikeelements, if they are marking up a removal from the element, consider using thedelelement instead.Where the
ttelement would have been used for marking up keyboard input, consider thekbdelement; for variables, consider thevarelement; for computer code, consider thecodeelement; and for computer output, consider thesampelement.Similarly, if the
uelement is being used to indicate emphasis, consider using theemelement; if it is being used for marking up keywords, consider thebelement; and if it is being used for highlighting text for reference purposes, consider themarkelement.See also the text-level semantics usage summary for more suggestions with examples.
This page is intended to give further 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. You may also have to reset any other properties that some elements have by default. If there is no appropriate semantic element for the purpose, then you should probably use div or span instead.
For example, if you have a page such as:
<body> <big><strong>Welcome to my page</strong></big> <p>Hello world.</p> ...
...then clearly the intent of "Welcome to my page" is to represent a heading, and thus h1 should be used:
<body> <h1>Welcome to my page</h1> <p>Hello world.</p> ...
You can then style the h1 so that it looks like the first example by using:
h1 { font-size:larger; margin:0 }
Now, search engines and assistive technologies such as screen readers will know that it is a heading and will be able to make more sense of your page.
Some semantic elements
| Element | Represents |
|---|---|
| h1, h2, h3, h4, h5, h6 | The heading for its section. |
| address | Contact information for its nearest article or body element ancestor. |
| p | A paragraph. |
| blockquote | A section that is quoted from another source. |
| ol | A list of items, where the items have been intentionally ordered, such that changing the order would change the meaning of the document. |
| ul | A list of items, where the order of the items is not important — that is, where changing the order would not materially change the meaning of the document. |
| dl | An association list consisting of zero or more name-value groups (a description list). |
| q | Some phrasing content quoted from another source. |
| cite | The title of a work (e.g. a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theatre production, a play, an opera, a musical, an exhibition, etc). This can be a work that is being quoted or referenced in detail (i.e. a citation), or it can just be a work that is mentioned in passing. |
| em | Stress emphasis of its contents. |
| strong | Strong importance for its contents. |
| small | Small print or other side comments. |
| mark | A run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. When used in a quotation or other block of text referred to from the prose, it indicates a highlight that was not originally present but which has been added to bring the reader's attention to a part of the text that might not have been considered important by the original author when the block was originally written, but which is now under previously unexpected scrutiny. When used in the main prose of a document, it indicates a part of the document that has been highlighted due to its likely relevance to the user's current activity. |
| dfn | The defining instance of a term. |
| abbr | An abbreviation or acronym, optionally with its expansion. |
| time | A precise date and/or a time in the proleptic Gregorian calendar. |
| code | A fragment of computer code. This could be an XML element name, a filename, a computer program, or any other string that a computer would recognize. |
| var | A variable. This could be an actual variable in a mathematical expression or programming context, or it could just be a term used as a placeholder in prose. |
| samp | (Sample) output from a program or computing system. |
| kbd | User input (typically keyboard input, although it may also be used to represent other input, such as voice commands). |
| sup | A superscript. |
| sub | A subscript. |
| i | A span of text in an alternate voice or mood, or otherwise offset from the normal prose, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name, or some other prose whose typical typographic presentation is italicized. |
| b | A span of text to be stylistically offset from the normal prose without conveying any extra importance, such as key words in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is boldened. |
| ins | An addition to the document. |
| del | A removal from the document. |
Presentational elements
| Element | CSS equivalent |
|---|---|
| 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', 'text-indent' |
| strike | 'text-decoration:line-through' |
| tt | 'font-family:monospace' |
| u | 'text-decoration:underline' |
Presentational attributes
| Attribute | CSS equivalent |
|---|---|
| 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' or 'text-align' on caption |
| align on col elements | 'text-align' on the appropriate td/th |
| char on col elements | - |
| charoff on col elements | - |
| valign on col elements | 'vertical-align' on the appropriate td/th |
| 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 |
| 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 |