Skip to main content

Understanding and Using BBCode

What is BBCode?​

BBCode is the markup language of forum posts. More simply put, the code used to format and style forum posts. In addition to styling text (e.g. bold, italic, underline), BBCode is used to add links and embed content.

BBCode is similar to HTML in that it uses tags to instruct how specified content is to be affected.

The WYSIWYG post editor has built-in BBCode shortcuts in the form of buttons that allows you to apply and preview the BBCode affects without having to know BBCode or see the BBCode tags.

WYSIWYG post editor buttons

However you can easily toggle to BBCode view allowing you to see the tags and apply additional formatting or customize a post beyond what is available with the shortcut buttons.

What is a tag?​

A BBCode tag is a special word or letter surrounded by square brackets: [ ].
For example: [b], [u], and [sub].

The tag's word (or letter) usually refers to that tag's action. For example:
[b] = bolds text
[u] = underlines text
[sub] = makes the text subscript

Note

Please note that tags are preset. You cannot create your own tag by using a word or letter of your choosing. See Supported BBCode tags.

The BBCode Element​

Applying BBCode consists of three parts: an opening tag, a closing tag and content. The opening tag indicates when a particular style or format should begin and the closing tag indicates when it ends. The closing tag is identical to the opening tag except that it also includes the forward slash character: /. For instance, the closing tag for [b] would be [/b].

The syntax of a BBCode element is an opening tag, followed by some content, and then a closing tag.

BBCode element sample with open and close tags

Example:
In the sentence The cow jumped over the moon. we want to make the words "cow jumped" bold.

In BBCode view the sentence would look like this:
The [b]cow jumped[/b] over the moon.

and would preview and display as:

The cow jumped over the moon.

Tags with Attributes​

Some tags need additional information for the tag to work, like the [font] tag. By itself this tag does nothing to the content, however adding the attribute of color, face, or size provides additional instructions on how to style the content.

Attributes are only placed in the opening tag and consist of a name/value pairing like name="value" with the value always enclosed in quotation marks.

BBCode element showing tags with attributes Example:
In the sentence The cow jumped over the moon. we want to make the words "cow jumped" red.

In BBCode view the sentence would look like this:
The [font color="red"]cow jumped[/font] over the moon.

and would preview and display as:

The cow jumped over the moon.

Applying Multiple BBCode Tags​

Using the example sentence The cow jumped over the moon. we applied BBCode to make the words "cow jumped" bold, and then red. What if we want to make "cow jumped" both bold and red?

Multiple tags may be used in a BBCode element. The use of a tag within another tag is referred to as nested tags.

Example:
In the sentence The cow jumped over the moon. we want to make the words "cow jumped" now both bold and red.

In BBCode view the sentence would look like this:
The [font color="red"][b]cow jumped[/b][/font] over the moon.

and would preview and display as:

The cow jumped over the moon.

Notice how in the example the first opening tag was [font] followed by [b] however the closing tags had [/b] first, followed by [/font]. With nested tags the closing tags must be in the reverse order of the opening tags.

Empty Tags​

An empty tag is an opening tag that is considered self-closing, meaning there is no matching closing tag. These tags are referred to as empty because they do not surround content. They can however still contain an attribute.

The most common empty tags you would use in a post are: [img], [hr], and [br].