How to Use BBCode: A Complete Guide
This article is a tutorial on how to use BBCode in forums and websites. We will start with the most basic formatting and then move on to more complex tags. In some cases we will give tips on good usage practices.
Similar to HTML, BBCode tags work with opening and closing, something like: [tag]text[/tag].
The infographic below shows some quick tips. We will go into more detail shortly thereafter:
We have tried to create as comprehensive a list of commands as possible below, and will update this over time.
It is important to note that not all formatting will work for all forums, as this will depend on the customization of each administrator.
The BBCode Syntax
BBCode syntax uses tags. These tags are directly associated with the desired formatting. For example, the [b] tag is used for bold formatting.
Sometimes you will see a single letter, sometimes you will see words, but the code will always be intuitive. The examples below will make this clearer.
Example: The word [b]guide[/b] is in bold.
Result: The word guide is in bold.
Best Practice Tip: Avoid marking long sentences in bold, as this loses the highlighting effect.
Example: The word [i]guide[/i] is in italics.
Result: The word guide is in italics.
Example: The word [u]guide[/u] is underlined.
Result: The word guide is underlined.
Example: The word [s]guide[/s] is crossed out.
Result: The word
guide is crossed out.
Example: The equation x[sup]2[/sup] is a parabola.
Result: The equation x2 is a parabola.
Example: The formula of water is H[sub]2[/sub]O.
Result: The formula of water is H2O.
Increase the size of a word
Example 1 (without defining the size): The word [size=large]large[/size] is bigger than the others.
Result 1: The word large is bigger than the others.
Example 2 (without setting the size): The word [size=small]small[/small] is smaller than the others.
Result 2: The word small is smaller than the others.
Example 3 (setting the size in %): The word [size=80]small[/size] is 80% of the others.
Result 3: The word small is 80% of the size of all the other words.
Best Practice Tip: Avoid putting too many words in large font as this is spam. If you want to attract attention, do it discreetly through the quality of the content.
Changing the color
Example 1 (by entering the color name): The word [color=blue]guide[/color] is colored blue.
Result 1: The word guide is colored blue.
Example 2 (entering the color in hexadecimal): The word [color= #0000ff]guide[/color] is colored blue.
Result 2: The word guide is colored blue.
Blurring the text
It is possible to blur text with a specific color.
Example: The word [blur=”red”]guide[/blur] is blurred in red.
Result: The word guide is blurred with the color red.
Combining text formatting with multiple tags
To group formatting, you can simply use linked tags. The order is of little importance, but the same opening order must be followed when closing.
Correct example: The word [size=170][color=blue][b]guide[/b][/color][/size] is large, blue and bold.
Correct result: The word guide is large, blue and bold.
Incorrect example: The word [size=170][color=blue][b]guide[/color][/size][/blue] is large, blue and bold.
Best Practice Tip: Avoid creating formatting that could be mistaken for web standards. For example, links usually get the formatting blue color + underline. So don’t add these attributes to words that are not hyperlinks.
Creating links to URLs
To make a URL clickable, wrap the URL with the tag:
Example: The site [url]https://www.bbcode.org[/url] is clickable.
Result: The site https://www.bbcode.org is clickable.
To create an anchor text, enter the anchor and the target URL:
Example: The word [url=https://www.bbcode.org]BBCode[/url] is clickable.
Result: The word BBCode is clickable.
Some forums such as phpBB also include the Magic Links feature which automatically recognize a URL without the need for any tags.
Example: The bbcode.org site is up-to-date.
Result: bbcode.org is up-to-date.
For all link formats the user will either be taken to a new tab, or stay in the same tab depending on the browser settings.
Best practice tip: do not insert links to your blog in every post as a signature, as this may be considered spam.
Creating email link
There are two options for email linking using BBCode, similarly to URL linking.
Example 1 (clickable email): The address [email]firstname.lastname@example.org[/email] is clickable.
Result 1: The address email@example.com is clickable.
Example 2 (anchor text): The address [firstname.lastname@example.org]dev[/email] is clickable.
Result 2: The address dev is clickable.
Best practice tip: Avoid posting important emails in public forums to prevent robots from finding and adding your address to email marketing and spam lists.
To place an embedded image at a certain location in the post, wrap the image URL in the same way you would use the [url] tag.
You can also specify the dimensions (in pixels) of the image.
Or you can also enter only the width, so that the height is automatically calculated respecting the original proportions of the image.
Best practice tip: posts with many images usually get polluted, so evaluate well the need of each image before publishing. Also, never add inappropriate images, adult content (in forums without indicative content) or copyrighted images, as this is a crime. Internet usage needs to respect local laws.
BBCode supports embedding videos from different sources, such as Youtube, Vimeo and SoudCloud.
To add a quotation block to a simple sentence, simply wrap the text with the tags.
Example: [quote]This sentence is a quote.[/quote]
This sentence is a quote.
To reference a post that some user made on the same forum page, indicate the user’s name using the syntax quote=””, enclosing the user’s name in quotation marks (which are required).
Example: [quote=”Mr. Writer”]Text written by Mr. writer[/quote]
Good practice tip: Try to quote only the relevant passages to avoid making posts too long or repetitive. Many forums offer the feature of a quote button, allowing you to select specific paragraphs, which makes creating the reference even easier.
To add blocks of code in programming forums, it is indicated to separate these codes into separate blocks.
<h1>My first PHP page</h1>
echo “Hello World!”
The BBCode formatting allows you to create numbered and unnumbered lists.
Unnumbered lists correspond to an unordered set of items.
We will serve the following fruits at the picnic:
We will serve the following fruits at the picnic:
To change the symbol in the list (instead of using a circle), simply use the syntax “list=” in the opening tag, entering the desired symbol. For example:
[list=circle][/list], [list=disc][/list], [list=square][/list].
To create numbered lists, simply inform which type of numbering is desired in the opening tag.
Note: numbered lists are usually used for ordered elements.
Follow the following steps to perform the registration:
[*]Click on the register menu
[*]Enter your e-mail address
[*]Create a password
[*]Click on complete registration
Follow the following steps to complete the registration:
- Click on the register menu
- Enter your e-mail
- Create a password
- Click on complete registration
Besides the numbers 1, 2, 3, 4… you can use other numbers such as letters, Roman numerals, etc. For example:
[list=a][/list], [list=A][/list], [list=i][/list], [list=I][/list].
The above syntaxes would create the sequences: a, b, c…; A, B, C…; i, ii, iii…; I, II, III…
Creating a Horizontal Line
Horizontal lines are useful for dividing a block of text into two parts.
Example: Text before the line. [line] Text after the horizontal line.
Text before the line.
Text after the horizontal line.
Alternatively, some forums use the syntax [hr].
Best practice tip: avoid creating multiple horizontal lines to avoid polluting the forum.
Creating a forced text break
Example: Text before the break [br] text after the break.
Text before the break
text after the break.
You can make the alignment right, left or centered with BBCode.
[align=center]This text is centered.[/align]
This text is centered.
You can simplify the creation of h1, h2, h3, h4, etc. headers with BBCode.
Best practice tip: don’t use headers to highlight words, but as headings and subheadings for long articles. If the goal is just to highlight a word or phrase, use the [size] tag.
Creating ASCII art
The following blocks can be used for creating tables with BBCode:
|:–:| Aligns to the center
|—:| Aligns to the right
|:—| Aligns to the left
| Headers and data
BBcode even allows you to create complex structures like tables, without the need for additional code beyond a few tags.
| Student | Age | Weight |
Another option to create tables is using the [table], [row] and [cell] tags.
Creating a star rating