Basic 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.

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(not always but in most cases it has to be done); 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

For example:

The [i]forum[/i] signature [b]looks[/b] very [u]nice[/u].

Output:

The forum signature looks very nice.

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]I want to design a cool signature![/quote]
Hey, me too!

Output

I want to design a cool signature!

Hey, me 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.

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]

Output:

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!

Output:

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]https://cryptoplanet.club[/url]
[url=http://www.google.com/]Click here to go to Google[/url]

Output:

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]

Output:

I love Google!

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]

Output:

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 BBCode. A basic knowledge of BBCode allows you to put more expression into your comments, signatures etc.

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.)

 

 

Credits go to nookkin.

Hey! Waaaait...

Subscribe or else!!!

Want to know when I write more? Enter your email address and name below to find out when you die.