BBCode is a markup language that is often used in forums, bulletin boards, and blogs. It allows you to format your text by changing text size, color, and more; it can be used for embedding images and links, and can be used for quoting others.
There are different implementations of BBCode in use on different sites. This tutorial covers the implementation used by the comment system on this site; however, many of the tags mentioned here work very similarly on forums like phpBB and vBulletin.
Structure of BBCode
BBCode, like HTML, is composed of tags. Different BBCode tags perform different functions, including text formatting and inserting objects. Like HTML, BBCode tags must be closed properly; if you forget to close a tag, you can cause undesired results (more on this below). (NOTE: BBCode tags should be in lowercase. Although uppercase tags may work in some cases, they won't work in others. Plus, it's bad programming.)
Here is a simple BBCode example:
This is [b]bold text[/b].
Basic text formatting
You can perform basic formatting using the following tags:
[b] – makes text bold
[i] – makes text italic
[u] – makes text underlined
[s] – can be used to cross things out
For example:
The [i]quick[/i] brown [b]fox[/b] jumps [u]over[/u] the lazy [s]rat[/s] dog.
will yield:
The quick brown fox jumps over the lazy rat dog.
Inserting quotations
Sometimes, you may want to quote another person or article, specify text taken from another place, or reply to another user's comment. You can do so easily with [quote] tags.
[quote]Pepperoni pizza is my favorite![/quote]
Hey, mine too!
yields
You can nest a near infinite amount of [quote] tags within each other. This is useful in cases where you would like to quote another person's quotation.
Inserting computer code
If you would like to enter computer source code in your comments, place it within [code] tags. This will help to distinguish it from other text. Additionally, whitespace is preserved within [code] tags, so indented code will not lose its indentation.
Why doesn't this HTML work?
[code]
<html>
<head>
<title>My page
</head>
<body>
<H1>My page>
<P>Lorem ipsum dolor sit amet conscientiur<p> elit,
sed nonummy<p><p>
</body>
</html>
[/code]
yields:
<html>
<head>
<title>My page
</head>
<body>
<H1>My page>
<P>Lorem ipsum dolor sit amet conscientiur<p> elit,
sed nonummy<p><p>
</body>
</html>
Changing text size
You can customize the size of the text in your comment. Use the [size] tag to accomplish this. The [size] tag accepts the standard CSS units of size (px, %, pt, em, and so on). (NOTE: If you don't specify units, % is assumed.)
Normal size
[size=200%]Twice normal size[/size]
[size=200]Twice normal size, no units[/size]
[size=16pt]16 point text[/size]
[size=10px]10 pixel text[/size]
yields:
Twice normal size
Twice normal size, no units
16 point text
10 pixel text
Changing text color
You can also change the color of your text using the [color] tag, using either named colors or hexadecimal/RGB values. (NOTE: Be sure to include the # in front of a hexadecimal color value.)
Roses are [color=red]red[/color]
Violets are [color=#0000ff]blue[/color]
RGB sure is [color=rgb(0,255,0)]sweet[/color]
And so are you!
yields:
Violets are blue
RGB sure is sweet
And so are you!
Inserting links
There are 2 methods for inserting links using BBCode. Using the first method, you can simply enclose a URL within [url] tags, and it will be automatically turned into a link. Using the second method, you can specify the URL and title of the link separately.
Check out my website, [url]http://www.nookkin.com/[/url]
[url=http://www.google.com/]Click here to go to Google[/url]
yields:
Inserting images
If you want to insert an image into your comment, you can do so using the [img] tag. The [img] tag accepts only one parameter, the URL to the image file (much like the first variant of the [url] tag. (NOTE: Please be considerate of others and do not hotlink their images unless you know that it is allowed. Also, be aware of malicious anti-hotlinking techniques in use.)
I love Google!
[img]http://www.google.com/intl/en_ALL/images/logo.gif[/img]
yields:
I love Google!
Replying to other comments
The [reply] tag is used for inserting a jump to another comment. This is useful when you are replying to someone: if someone else clicks your jump, they will see the comment you are replying to. The syntax for this tag is:
[reply=token]@name[/reply]
where token is the 32-character token of the comment that you are replying to. Since tokens are not visible by default, it is strongly recommended that you click the "Reply" link below the comment to generate the appropriate BBCode automatically.
Nesting tags
Want to make your text bold, italic, red, and 18 points in size? Want to make an image into a link? You can do this by nesting tags.
[b][i][color=red][size=18pt]Hello World[/size][/color][/i][/b]
yields:
Hello World
When nesting tags, be sure to close them in order. For example:
The [b][i]quick brown fox[/b][/i] jumps over the lazy dog
is incorrect, since the [i] tag must be closed before the [b] tag in this case. Corrected:
The [b][i]quick brown fox[/b][/i] jumps over the lazy dog
Tags of the same type cannot be nested, with the exception of [quote]. It is not necessary to nest [b] tags, for example, because bold text cannot be made any more bold. On the other hand, it is possible to quote someone else's quotation.
Final notes
As you can see, there are many things that you can do with the comments system on this site. A basic knowledge of BBCode allows you to put more expression into your comments, and a knowledge of the rules allows you and others to better enjoy this site.
So what are you waiting for? Go ahead and try out the comments system! Show off your vast knowledge of the wonders of BBCode! (In this case, it is perfectly OK to post irrelevant comments for the purpose of experimentation with BBCode.)
![[XML]](/images/xml.png)
Comments (19)
<a href="http://www.URL REMOVED.com">China plastic injection molding</a>
<a href="http://www.URL REMOVED.com">shanghai escort</a>
<a href="http://www.URL REMOVED.com">vitiligo</a>
<a href="http://www.URL REMOVED.com">Steelers jerseys</a>
<a href="http://www.URL REMOVED.com">replica watches</a>
<a href="http://www.URL REMOVED.com">air Jordan Shoes</a>
You're supposed to use BBCode, not HTML. I'm breaking your URLs but I'm keeping the rest of the comment for the sheer fail factor.
Ok, that is epic.
Just thought it would fit xD.
Nice tut, by the way!
Anyway, I think that you might want to add the scroll and updown tags, just to contribute to it.
Speaking of which, I think I might see if they work here
[scroll]Scroll[/scroll]
[updown]Up Down[/updown]
I guess I'll consider writing them in because this page is more popular than I expected. Might be confusing to the users though, since they won't be able to use the cooler tags in my comment form.
By the way, how long was it up?
More power.
<a href="http://img-url.com/?v=angahgagap0-1293153340.jpg"><img src="http://img-url.com/thumbs/angahgagap0-1293153340.jpg" border="0"></a>
I love
myself!
[img]http://img-url.com/thumbs/angahgagap0-1293153340.jpg[/
img]
Best wishes with your forums.
Verdi
Leave a comment