Help:HTML

HTML is a markup language for the web. Some HTML, mostly presentational, can be used on the wiki. Some wiki tags (such as &lt;nowiki&gt;) look like HTML, but are not. Each HTML tag creates an "element".

Syntax
HTML syntax is as follows: content

<                                        tagname                           attribute="value"                                  >                    content ^                                               ^                                   ^                                         ^                    ^                               ^ open tag (no space between < and tagname)        spaces separate attributes          don't forget the = sign, and both quotes  end the tag opening  can be HTML, text, or wikicode  close the tag by specifying the name, and prefixing it with a slash (no attributes are given)

^  some tags are self-closing, i.e. they have no content or end-tag

Tags
Not all tags are allowed to be used on the wiki. Some permitted tags:
 * creates a page section
 * can be used to style some text
 * unordered list (in most cases, preferable to use wiki -syntax list)
 * ordered list (in most cases, preferable to use wiki -syntax list)
 * list item (must be a child (sub element) of a  or
 * creates a pre-formatted block of text
 * inline computer code style
 * bold (in most cases, preferable to use wiki -syntax bold)
 * italics (in most cases, preferable to use wiki -syntax italics)
 * underlined
 * strikethrough
 * superscript
 * subscript
 * paragraph
 * abbreviation
 * centers text

Some tags that cannot be used: (The descriptions are for ordinary HTML)
 * creates a link (must use wiki syntax here)
 * creates an image (must use wiki syntax)
 * executes JavaScript
 * adds CSS to the page
 * embed a Flash object and the like
 * draw on the page with JavaScript

Of course, there are many more tags in the HTML standard.

Classes and IDs
HTML elements can contain "classes" and an ID. These are set via the  and   attributes. These are mainly used with CSS, but also with JavaScript.

CSS
CSS is a stylesheet language, meaning it tells the browser how to display the HTML. CSS can be used in HTML through the use of the  attribute. Because full CSS cannot be used on the wiki (except in skins), selector syntax will not be covered.

Syntax
Typical CSS properties look like this: height: 100px;

height        :                                       100px                                         ; ^             ^                                       ^                                             ^ property name  the colon separates property and value  the value, in this case, a number with a unit  separate properties with a semicolon

Properties
Following is a list of properties commonly used on the wiki:
 * sets the height of a block element
 * sets the width of a block element
 * sets the color of text
 * sets the font size of some text
 * sets borders of a block element
 * border width (also settable via )
 * border style (also settable via )
 * Can also be:
 * border color (also settable via )
 * sets padding (internal) of a block element
 * sets margin (external) of a block element
 * creates rounded corners
 * creates a specified corner radius at the top-left corner

Of course, there are many more properties in the CSS standard, all of which can be used.

Floating
Block elements can be made to float. Float means to head to a specific side or location. This can be accomplished with the  property.

Another method of floating is called "relative positioning". By default, each element is "statically" positioned it is in its default space, according to its place in the documents, and its size, float, padding, and margins. However, it can be made to move from this location. This code will move the  50 pixels above its normal location. If -50 were specified, it would be 50 pixels below.

The  tells the browser that this element is relatively positioned. There are 4 properties which can be used with this:,  ,  , and. They can be mixed.

Note however, that relative positioning keeps the element's space intact, i.e. the rest of the page will not also be pushed.

Block vs. Inline
Above, "inline" or "block" elements were sometimes mentioned. These will now be explained:

A "block" element is one that creates a new line, and rendering area, for its space. Examples include,  ,.

An "inline" element is one that does not create a new line, and applies within a parent element. Examples include,  ,.

This is not a full explanation of block and inline; for that, the reader is pointed to this article.

Using
The  tag is the most-often used tag for creating block elements for styling. On the wiki, this is manifest in the Table of Contents.

Using CSS properties, a  can have a specified height, width, position, and even background. Readers are recommended to look at source code for those articles to gain a better understanding.