How to Use BBCode: A Complete Guide

Bold

Tag: [b]

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.

Italic

Tag: [i]

Example: The word [i]guide[/i] is in italics.

Result: The word guide is in italics.

Underline

Tag: [u]

Example: The word [u]guide[/u] is underlined.

Result: The word guide is underlined.

Crossed out

Tag: [s]

Example: The word [s]guide[/s] is crossed out.

Result: The word guide is crossed out.

Superscript

Tag: [sup]

Example: The equation x[sup]2[/sup] is a parabola.

Result: The equation x² is a parabola.

Subscript

Tag: [sub]

Example: The formula of water is H[sub]2[/sub]O.

Result: The formula of water is H₂O.

Increase the size of a word

Tag: [size]

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

Tag: [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

Tag: [blur]

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

Tag: [url]

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

Tag: [email]

There are two options for email linking using BBCode, similarly to URL linking.

Example 1 (clickable email): The address [email]dev@bbcode.org[/email] is clickable.

Result 1: The address dev@bbcode.org is clickable.

Example 2 (anchor text): The address [email=dev@bbcode.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.

Inserting images

Tag: [img]

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.

Example: [img]https://www.bbcode.org/wp-content/uploads/2022/03/bbcode_example.jpg[/img]

Result:

You can also specify the dimensions (in pixels) of the image.

Example: [img=150×150]https://www.bbcode.org/wp-content/uploads/2022/03/bbcode_example.jpg[/img]

Result:

Or you can also enter only the width, so that the height is automatically calculated respecting the original proportions of the image.

Example: [img=90]https://www.bbcode.org/wp-content/uploads/2022/03/bbcode_example.jpg[/img]

Result:

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.

Adding videos

BBCode supports embedding videos from different sources, such as Youtube, Vimeo and SoudCloud.

Example: [bbvideo]https://www.youtube.com/watch?v=3b_Sy5mE_S0[/bbvideo]

Result:

Adding Quotes

Tag: [quote]

To add a quotation block to a simple sentence, simply wrap the text with the tags.

Example: [quote]This sentence is a quote.[/quote]

Result:

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.

Creating code

To add blocks of code in programming forums, it is indicated to separate these codes into separate blocks.

Example:

[code]<!DOCTYPE html>

<html>

<body>

<h1>My first PHP page</h1>

<?php

echo “Hello World!”

?>

</body>

</html> [/code]

Creating lists

Tag: [list]

The BBCode formatting allows you to create numbered and unnumbered lists.

Unnumbered lists correspond to an unordered set of items.

Example:

We will serve the following fruits at the picnic:

[list]

[*]Banana

[*]Apple

[*]Avocado

[/list]

Result:

We will serve the following fruits at the picnic:

• Banana
• Avocado
• Avocado

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.

Example:

Follow the following steps to perform the registration:

[list=1]

[*]Click on the register menu

[*]Enter your e-mail address

[*]Create a password

[*]Click on complete registration

[/list]

Result:

Follow the following steps to complete the registration:

1. Click on the register menu
2. Enter your e-mail
3. Create a password
4. 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

Tag: [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.

Result:

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.

Result:

Text before the break

text after the break.

Aligning Text

You can make the alignment right, left or centered with BBCode.

Example:

[align=center]This text is centered.[/align]

Result:

This text is centered.

Creating Headings

Tag: [h1]

You can simplify the creation of h1, h2, h3, h4, etc. headers with BBCode.

Example:

[h2]Header 2[/h2]

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

Tag: [nfo]

Example: [nfo]

            __

           ( )

            ||

            ||

        ___|””|__.._

       /____________\

       \____________/~~~.

[/nfo]

Result:

Creating tables

Tags: [pipes]

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.

Example:

[pipes]

| Student | Age | Weight |

|:—–|:—:|:—–|

| John|12|46|

|Alice|11|32|

|Bob|13|51|

[/pipes]

Result:

Another option to create tables is using the [table], [row] and [cell] tags.

Example:

[table]

[row][cell]Student[/cell][cell]Age[/cell][cell]Weight[/cell][/row]

[row][cell]John[/cell][cell]12[/cell][cell]46[/cell][/row]

[row][cell]Alice[/cell][cell]11[/cell][cell]32[/cell][/row]

[/table]

Result:

Creating a star rating

Tag: [rate=”(VALUE)”]

Example: [rate=”3.67″]

Result: