Wikipedia:WikiProject Usability/HTML

Wiki supports a subset of XHTML, e.g. <br /> instead of <br>.

Wikipedia allows the use of HTML directly, and the use of CSS through the style="[…]" and class="[…]" 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. <em>emphasised text</em>, and it will show up as the tags defined it. Most HTML elements, like <b> (bold), <i> (italics), <ul>, <ol> and <li> (lists), <h1>, <h2>, … (headings) and even <table> (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), <b> & <i> are inline elements. In each context, there is a generic HTML element available:

• <span>: inline
• <div>: block

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

<span class="noprint" style="color:red;">red text that does not show up when printed</span>

produces

.

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: style="p: v; p: v; …", 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 Wikipedia:WikiProject Usability/Color

• color: color; – the foreground color.
  • <span style="color:red;">test</span> → test
• background: color; – 'shorthand' for several background properties, notably the background color.
  • <span style="background:black; color:#ff0000;">test</span> → test
• border: thickness type color; – the border: color, type and thickness. Type may be solid, inset, outset, dashed, and others.
  • <span style="border: 2px outset cyan; background:yellow;">test</span> → test
  • <span style="border: 1px dashed red; background:white;">test</span> → test
  • foo<span style="border: 1px solid red; background:transparent;">test</span>bar → footestbar
    • 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).
• padding: thickness; – 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<span style="border: 1px solid red; padding: 1em;">test</span>bar → footestbar
  • foo<span style="border: 1px solid red; padding: .1em 1em;">test</span>bar → footestbar
    • Two values: [top & bottom] [right & left].
  • foo<span style="border: 1px solid red; padding: .1em .5em 1em;">test</span>bar → footestbar
    • Three values: [top] [right & left] [bottom].
  • foo<span style="border: 1px solid red; padding: .1em .5em 1em 2em;">test</span>bar → footestbar
    • Four values: [top] [right] [bottom] [left] (clockwise).
• margin: thickness; – 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 top and bottom for margins on inline elements.
  • foo<span style="border: 1px solid red; margin: 1em;">test</span>bar → footestbar
  • foo<span style="border: 1px solid red; margin: 3em 1em;">test</span>bar → footestbar
  • foo<span style="border: 1px solid red; margin: 0em 1em 2em;">test</span>bar → footestbar
  • foo<span style="border: 1px solid red; margin: 0em 1em 2em 3;">test</span>bar → footestbar
  • foo<span style="border: 1px solid red; margin: 0em -.3em;">test</span>bar → footestbar

List of classes

Main page: Wikipedia:Catalogue of CSS classes

• syntax: class="class1 class2 …"
• noprint and metadata – will not get printed onto paper. metadata is more descriptive for actual metadata, like notices, but the intent of noprint is much clearer.
  • <span class="noprint">This will not show up when printed</span> →

See also

• meta:Help:HTML in wikitext