BBCode from the English Bulletin Board Code is a small language used in forums to change and edit the way a message (post) is displayed. BBCode is a collection of formatting markers that are used to change the appearance of text in a forum. BBCode is based on the same principle as HTML, and is very similar to it.


[ hide ]

  • 1 Story
  • 2 Use of the BBCode
    • 1 Modify text appearance
    • 2 Colors
    • 3 Sources
    • 4 Images
    • 5 Links
    • 6 Spoiler
    • 7 Quote text
    • 8 More complex uses
      • 8.1 Examples
    • 3 Sources


This language for the layout of texts and images using tags was created by PhpBB for its own forums and has finally been disseminated in the vast majority of web forums.

BBCode was created to provide a more secure, simple and limited way to allow users to format their messages. Previously, many forums allowed the use of HTML, with the side effect that if there was malformed HTML , the entire page layout would be upset, or the HTML could be used to include JavaScript with XSS attack problems. Some BBCode implementations have experienced issues with how they translate BBCode into HTML, which may negate the security that was being attempted with BBCode. An alternative is a properly written HTML filter (many of which are freely available).

Use of the BBCode

Modify text appearance

The following markers change the appearance of the text:

  • [b] Bold [/ b]
  • [u] Underlined [/ u]
  • [i] Italic [/ i]
  • [color = # FF0000] Red [/ color]
  • [color = blue] Blue [/ color]
  • [size = 24] Extend font size to 24 [/ size]

The “size” can be used up to size 30. There are also forums that have an assigned default size and limits. Those cases use another type of code. Example: [size = + 3] Default size 19, displayed size 20 [/ size]


A small list of available colors:

  • Black = [color = black] [/ color]
  • Brown = [color = brown] [/ color]
  • Garnet = [color = maroon] [/ color]
  • Red = [color = red] [/ color]
  • Orange = [color = orange] [/ color]
  • Yellow = [color = yellow] [/ color]
  • Olive = [color = olive] [/ color]
  • Very light green = [color = limegreen] [/ color]
  • Light green = [color = lime] [/ color]
  • Dark green = [color = green] [/ color]
  • Cyan = [color = teal] [/ color]
  • Light blue = [color = aqua] [/ color]
  • Navy blue = [color = blue] [/ color]
  • Dark blue = [color = navy] [/ color]
  • Purple = [color = purple] [/ color]
  • Pink = [color = fuchsia] [/ color]
  • Dark gray = [color = gray] [/ color]
  • Light gray = [color = silver] [/ color]
  • White = [color = white] [/ color]
  • Coral = [color = coral] [/ color]
  • Hexadecimal system: [color = # 007700] [/ color]

The latter can also be used to generate colored texts, the only requirement is to know how to generate them, although there are utilities that take care of this, for example, the ColorZilla extension for the Mozilla Firefox browser. Certain forum programs support the use of 3 hexadecimal digits (RGB, with R being the value of the red color, G being the color of green, and B being the color of blue) at the cost of having less nuances of colors. However, the value of 6 hexadecimal digits is generally used (RRGGBB, where RR represents the value belonging to the red color, GG to the green color and BB to the blue color) since a greater amount of colors is obtained.


Also with BBCODE you have the option to change the font of the text: [font = Arial] Schmalbach [/ font]
A small list of available fonts (replace Arial with any of the ones that appear in this list):

  • Arial
  • Arial Narrow
  • Century
  • Comic Sans MS
  • Courier New
  • Fixedsys
  • Georgia
  • Lucida sans
  • Monotype Corsiva
  • Times New Roman
  • Trebuchet MS
  • Verdana

Although currently all types of fonts can be used.


If you want to display an image, you can use the img marker. This Bbcode allows users to place images in their signatures and in private messages without attaching them.

* [img] Path of the image [/ img]


This marker can be used in another way to show a link without showing the full address.

* [url] link_path [/ url] or [url = link_path] Visible Name [/ url]


This marker is used to cover content that, for whatever reason, must remain hidden. The content of the spoiler can be shown by clicking on the button corresponding to the spoiler.

* [spoiler] Spoiler phrase [/ spoiler]

* [spoiler = Text to be displayed] Spoiler phrase [/ spoiler]

Quote text

If you want to quote someone’s writing, you can use the quote marker.

  • [quote = “James”] This is the text I want to quote. [/ quote]

If you don’t want to quote anyone in particular, you can use the quote marker without specifying a name.

* [quote] This is the text I want to quote. [/ quote]

When the source code appears, be sure to use the code marker. Text written with this bookmark uses a type of letter spacing and is not affected by other bookmarks.

More complex uses

* [b] bold [/ b]

* [i] italic [/ i]

* [u] underlined [/ u]

* [s] crossed out [/ s]

* [table] [tr] [td] Cell [/ td] [td] Cell [/ td] [/ tr] [/ table]

This last tag is exclusive to forums based on Simple Machines Forum. (SMF)


* Ecured

* [b] Ecured [/ b]

* [i] Ecured [/ i]

* [b] [i] Ecured [/ i] [/ b]

* [url] [/ url]

* [url = http: //] Ecured [/ url]

They would look like this:

* Ecured

* Ecured

* Ecured


* Ecured


Leave a Comment