Wikipedia:WikiProject Usability/HTML

Wiki supports a subset of XHTML, e.g. &lt;br&#160;/&gt; instead of &lt;br&gt;.

Wikipedia allows the use of HTML directly, and the use of CSS through the   and   attributes.

We believe that:
 * The use of HTML instead of Wiki markup is discouraged
 * If HTML and CSS must be used, editors should know how to use them properly, with regard to:
 * W3C standards
 * Cross-browser compatibility

Why HTML should be used conservatively
HTML makes the edit pages hard to read for many users, and on a wiki the readability of the edit page is almost as important as the readability of the page itself, because nobody wants to edit something that they don't understand.

Occasionally, such as when you are creating notices, and so on (for which there is no markup defined) HTML/CSS must be used.

HTML and CSS primer
HTML is simple to use - just put a pair of tags around some text, e.g., and it will show up as the tags defined it. Most HTML elements, like  (bold),   (italics), ,   and   (lists),  ,  , … (headings) and even   (tables) have their equivalent in wikicode, so should be avoided in the main space. The CSS, which provides presentational hints for user agents (like browsers), may be added to the markup itself – this is covered later.

Sometimes, however, there isn't any appropriate wikicode for what you want to mark up. In this situation, there are two possible contexts, block and inline. Paragraphs, headings, lists and tables are block elements (they start on a new line),  &   are inline elements. In each context, there is a generic HTML element available:
 * : inline
 * : block

These span and div tags need  or   attributes to change the appearance of the page.

produces
 * red text that does not show up when printed.

Where possible, an appropriate class should be used instead of inline styles, to avoid clutter in the edit window and to be able to change the appearance of, for example, all article message boxes at once.

However, when you must use inline styles, you can do this. They take the following form:, where p is a property and v the value you want to assign to that property.

List of style properties
Before listing properties, you should get to know how to represent certain values:
 * Color can be represented using hexadecimal numbers between 00 and ff (#rrggbb, e.g. #000000 is black, #ff0000 is red, #00ff00 is green, #0000ff is blue, etc.), or using names (red, green...)
 * Size can be represented using em, % and px, among others.

Basic properties
''Please note: this page does not want to encourage the use of bright, or non-standard colors. They are used for clearer examples. Please see WikiProject Usability/Color''


 * – the foreground color.
 * → test
 * – 'shorthand' for several background properties, notably the background color.
 * → test
 * – the border: color, type and thickness. Type may be solid, inset, outset, dashed, and others.
 * → test
 * → test
 * → foo test bar
 * You'll note that "transparent" is used for the background here. The standard background on Wikipedia – apart from the main space – is #f8fcff, so if you put "white" and neglect the border, you may notice a very slight (but inappropriate) difference in color . Transparent should be used, or no background property should be specified (result is the same).
 * – the "spacing" on the inside of the border. 1, 2, 3 or 4 sizes may be specified, for the four sides of the element.
 * → foo test bar
 * → foo test bar
 * Two values: [top & bottom] [right & left].
 * → foo test bar
 * Three values: [top] [right & left] [bottom].
 * → foo test bar
 * Four values: [top] [right] [bottom] [left] (clockwise).
 * – the "spacing" on the outside of the border. It's also the distance at which other elements should be "kept away" at. 1, 2, 3 or 4 sizes may be specified, exactly as in "padding". Many user agents will ignore  and   for margins on inline elements.
 * → foo test bar
 * → foo test bar
 * → foo test bar
 * → foo test bar
 * → foo test bar

List of classes

 * syntax:
 * and  – will not get printed onto paper.   is more descriptive for actual metadata, like notices, but the intent of noprint is much clearer.
 * → This will not show up when printed