Wikisource:Style guide/Presentational elements and attributes

__NOINDEX__

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 and   elements, if they are marking up a removal from the element, consider using the   element instead.

Where the  element would have been used for marking up keyboard input, consider the   element; for variables, consider the   element; for computer code, consider the   element; and for computer output, consider the   element.

Similarly, if the  element is being used to indicate emphasis, consider using the   element; if it is being used for marking up keywords, consider the   element; and if it is being used for highlighting text for reference purposes, consider the   element.

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:

&lt;body> &lt;big>&lt;strong>Welcome to my page&lt;/strong>&lt;/big> &lt;p>Hello world.&lt;/p> ...

...then clearly the intent of "Welcome to my page" is to represent a heading, and thus h1 should be used:

&lt;body> &lt;h1>Welcome to my page&lt;/h1> &lt;p>Hello world.&lt;/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.