BBCode Tutorial

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

Pepperoni pizza is my favorite!
Hey, mine too!

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:

Why doesn't this HTML work?
<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:

Normal size
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:

Roses are red
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.)

Back to top

Posted on Monday, December 22, 2008 at 12:00 AM | Permalink

Comments (18)

Nike shoes
Wednesday, August 26, 2009 at 7:50 PM
<a href="http://URL REMOVED.com">Nike shoes</a>
<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>

Options: Reply | Quote | Flag / Report

Saturday, August 29, 2009 at 4:39 PM
@Nike shoes: I know you're a bot and all, but you, erm, failed. You completely failed at reading the directions.

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.
Options: Reply | Quote | Flag / Report

nimah
Monday, May 23, 2011 at 9:09 PM
@nookkin
Ok, that is epic.
Options: Reply | Quote | Flag / Report

Tuesday, May 24, 2011 at 5:49 PM

Just thought it would fit xD.

Nice tut, by the way!
Options: Reply | Quote | Flag / Report

Tuesday, May 24, 2011 at 7:27 PM
Thanks... smiley works great too. I actually made this as an internal page but surprisingly enough, it's the second result on Google for "BBCode tutorial."
Options: Reply | Quote | Flag / Report

Wednesday, May 25, 2011 at 2:45 AM
<hihihi>http://pspology.forumotion.com/users/1813/25/27/24/smiles/33812383 57.gif</hihihi>
Options: Reply | Quote | Flag / Report

Wednesday, May 25, 2011 at 2:46 AM
Options: Reply | Quote | Flag / Report

Wednesday, May 25, 2011 at 4:00 PM
And another...

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]
Options: Reply | Quote | Flag / Report

Wednesday, May 25, 2011 at 6:50 PM
@Player863 Sorry, those won't work here, and neither will :smiley:, [flash], [spoiler], [highlight], [center], [list], [*], [youtube], all the goodies... I wrote this site's BBCode implementation myself and didn't really think I'd need them. Perhaps someday they'll be added.

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.
Options: Reply | Quote | Flag / Report

Wednesday, May 25, 2011 at 7:37 PM
Have you ever thought about making a forum for this site? I'm sure you could get a good one up on forumotion. Just thinkin it might help out a bit here.
Options: Reply | Quote | Flag / Report

Wednesday, May 25, 2011 at 8:00 PM
@Player863 Yep, actually I made one at http://nookkin.com/forums but it didn't really work out. I had maybe 3 people sign up :S
Options: Reply | Quote | Flag / Report

Wednesday, May 25, 2011 at 8:14 PM
Have you tried advertising on other sites? Put the site in forum sigs, free ads, etc.

By the way, how long was it up?
Options: Reply | Quote | Flag / Report

h20mysticshadow
Saturday, June 11, 2011 at 1:38 AM
Thank you Nookkin. I have given this tutorial to my cousin because I'm teaching him the BB code and Html. :)

More power.
Options: Reply | Quote | Flag / Report

Saturday, January 7, 2012 at 3:22 AM
<HTML><FONT COLOR="#FF0000">n</FONT><FONT COLOR="#FF4300">o</FONT><FONT COLOR="#FF8600">r</FONT><FONT COLOR="#FFC900">a</FONT><FONT COLOR="#FFff00">z</FONT><FONT COLOR="#BCff00">i</FONT><FONT COLOR="#79ff00">m</FONT><FONT COLOR="#36ff00">a</FONT><FONT COLOR="#00ff00">h</FONT><FONT COLOR="#00ff43"> </FONT><FONT COLOR="#00ff86">l</FONT><FONT COLOR="#00ffC9">o</FONT><FONT COLOR="#00ffff">v</FONT><FONT COLOR="#00C9ff">e</FONT><FONT COLOR="#0086ff"> </FONT><FONT COLOR="#0043ff">q</FONT><FONT COLOR="#0000ff">u</FONT><FONT COLOR="#3600ff">a</FONT><FONT COLOR="#7900ff">s</FONT><FONT COLOR="#BC00ff">i</FONT><FONT COLOR="#FF00ff">d</FONT><FONT COLOR="#FF00C9">i</FONT><FONT COLOR="#FF0086">e</FONT></HTML>

<a href="http://img-url.com/?v=angahgagap0-1293153340.jpg"><img src="http://img-url.com/thumbs/angahgagap0-1293153340.jpg" border="0"></a>
Options: Reply | Quote | Flag / Report

Saturday, January 7, 2012 at 3:51 AM
Trying again.. Hehe..
I love
myself!
[img]http://img-url.com/thumbs/angahgagap0-1293153340.jpg[/
img]
Options: Reply | Quote | Flag / Report

Thursday, February 2, 2012 at 12:22 PM
Thanks it works. But the smile don't.
Best wishes with your forums.

Verdi
Options: Reply | Quote | Flag / Report

ahmed
Wednesday, April 11, 2012 at 6:59 AM
@Verdi great
Options: Reply | Quote | Flag / Report

Thursday, April 19, 2012 at 7:55 PM
@EMAMOAH Quite personally, Club Penguin doesn't matter to me :I
Options: Reply | Quote | Flag / Report

Leave a comment

 
three plus three is (Huh?)
Comment moderation is enabled.
Your comment will appear on the page after it has been reviewed.