Logo Log in   

HTML (formatting) tags

Introduction
You can use HTML tags in your description and messages to jazz it up a little with colours, styles and smilies.
HTML is really easy to use: just surround the text you want to format by the apprpriate opening '<x>' and closing '</x>' HTML tags.
You can try out HTML in the test-area below. You can also preview formatted messages by clicking the "check spelling" link when you write a profile or message.

HTML examples
Here are some examples. (Please note that only certain specific tags may be used.)

Effect What you Write Looks Like Explanation
Bold text <b>Sample</b> Sample <strong> and <b> are equivalent
Italic text <i>Sample</i> Sample <em> and <i> are equivalent
Underlined text <u>Sample<u> Sample  
Superscript Super<sup>script</sup> Superscript  
Subscript Sub<sub>script</sub> Subscript  
Strikethrough <strike>Sample</strike> Sample <strike> and <s> are equivalent
Monospace <tt>Sample</tt> Sample Fixed-width font. (Use <pre> for pre-formatted text)
Colour <font color="green">Sample</font>
   or
<font color="#RRGGBB">Sample</font>
Sample RRGGBB are hex values of Red, Green, Blue from 00-FF.
Color is spelt without the 'u' in this context.
More examples are here.
Font Size <h1>Sample</h1>

Sample

Values are <h1> (largest) to <h6> (smallest).
You can also use <big> and <small>, and
<font size=1>sample</font>
Font Face <font face="arial">Sample</font> Sample Warning: not everyone has the same fonts available.
Paragraph <p>........</p>   Not usually necessary: just insert new lines
Line Break <br> Line
break inserted manually
Not usually necessary: just insert new line(s).
No closing </br> tag is required.
Horizontal rule <hr>
No closing </hr> tag is required.
Accented Characters &eacute;   &egrave; é     è These begin with & and end with a semi-colon. See below.
Lists <ul>
<li>first <li>second <li>third
</ul>
  • first
  • second
  • third
<ul>.......</ul> is an un-ordered (bullet) list
<ol>.......</ol> is an ordered (numbered) list
<li> begins each list element.
Block Quote A Haiku
<blockquote>
  reed warblers
  sing the great river
  still
</blockquote>
by Issa.
A Haiku
reed warblers
sing the great river
still
by Issa.
Blockquoted text is indented as a block.
This is useful for quotes or verse.
Blocks may be nested.
Emoticons <smile> , <frown> , <wink> , <heart>          "Pseudo-html" tags. See below for a complete list.

Permitted tags
Please note that, in the interests of security, only the following tags are allowed:

Formatting: <b>  <i>  <u>  <strong>  <em>  <sup>  <sub>  <strike>  <s>  <pre>  <tt>  <big>  <small>  <font (attributes: face, color, size)>
Headings: <h1> - <h6>  (attribute: align)
Structure: <hr>  <br>  <p (attribute: align)>  <center>  <blockquote>
Lists: <ul>  <ol>  <li>

Forbidden tags
Any other tags will be converted to literal plain-text. We hope that this provides all the formatting functionality you would wish for; while maintaining security (by blocking javascript, external links, web-bugs etc), and preventing confusion (by keeping user-content inside its own area).

If you wish to include a URL, you must write it in plain text (no <a> tags). Photographs may be uploaded to our server (no <img> tags.)


Automatic new lines, single spaces
New lines (pressing [ENTER]) are automatically preserved. You do not normally need to insert <p> or <br> tags. (The server uses nl2br().)
Only single spaces are preserved: multiple spaces ('    ') are shown as a single space (' '). If you don't want this, use <pre> or &nbsp;. (HTML is designed this way.)


Using Symbols, such as è
This is easy to do using character entity tags. An entity tag begins with an ampersand '&' and ends with a semi-colon ';' .
Common entities are: é , è , ê , ç , < , > , & . These are written respectively as: &eacute;  ,  &egrave;  ,  &ecirc;  ,  &ccedil;  ,  &lt;  ,  &gt;  ,  &amp;  .
UTF-8 should also work; typically using AltGr.


Nesting tags inside one another
HTML-tags may be "nested", like russian dolls. For example, <b><i>correct</i></b> gives you bold, italic like this: correct.
Be careful to always close tags in the reverse order from which you opened them. Don't write things like: <b><i>oops</b></i>.


Why doesn't ASCII Art Work?
ASCII art is where images are drawn using the letters, numbers and symbols in a fixed-width font. There is an example (a penguin) below. However, in HTML, multiple spaces are rendered using only a single space and the text is usually displayed in a variable width font. You can get around this by specifying preformatted text by enclosing it in <pre> </pre>. Because our HTML filter converts newlines into <br>\n, if you are using <pre>, you also need to remove all newlines from your ASCII art and replace them by <br>, or you'll get two newlines where you only want one. Please also use the character entities instead of literal &, <, or > characters.

	(o_
	//\
	V_/_     
                           This is what you need to write:
<pre>    (o_<br>    //\<br>    V_/_<br>   </pre>

Pesudo-code
Pseudo-code is the art of making up pretend tags to express meaning. For example <explanation>, <flamebait>, or <hat type="captain">. Use whatever you like, and it will be rendered as you expect (but be careful not to use something that is a valid tag or smiley). [This works because non-permitted tags are converted to entities e.g. &lt;tag&gt;, which then display literally as <tag>.]


Reply Quoting
Note that message reply-quoting (as in email) also uses the '>' character. The server is intelligent enough to guess which you mean - provided you leave blank lines where expected. [more]


Smileys
You can use any text smiley such as :-) that you want. If you would like to use an image, then simply insert the relevant pseudo-html tag. These are the ones which work - if you'd like to have any others, please suggest them...

 What you Write  Looks Like  What you Write  Looks Like  What you Write  Looks Like  What you Write  Looks Like 
<smile> <laugh> <happy> <grin>
<sun> <glasses> <heart> <heart2>
<hug> <wink> <tongue> <frown>
<sad> <surprise> <shock> <annoyed>
<mad> <devil> <dizzy> <sleepy>
<bed> <jester> <party> <birthday>
<xmas> <pumpkin> <rose> <cat>
<cat2> <cat3> <dog> <tux>


HTML toolbar
In the edit and sendmessage pages, there is a toolbar, underneath the text-field for profile/message composition. Click any of the buttons to embed the relevant HTML tag. If you have some text already highlighted/selected, just click the [B] button, and it will be made bold; if no text is currently selected, the [B] button will insert the placeholder 'Bold text', ready for you to edit. Not all tags are available from the toolbar, but it should remind you of the syntax for the others. The toolbar looks like this:



Try it out for yourself...
Here is a sample text-area. Edit it as you please, then click the "Try it" button to see what it looks like.


Your HTML...             What it looks like...

[Sample contents will appear here
(click the 'Try it' button).]



Flowers