Most of us must have noticed custom markup tags being used in comment boxes and discussion forums. These custom markups would help you to format a text to make it bold, italics, add images, add url etc. Remember those? Well, these are known as BBCode or Bulletin Board Code.
BBCode or Bulletin Board Code is a lightweight markup language generally used to format posts in blogs and message boards.
The BBCode tags usually have a beginning and ending tag similar to HTML. BBCodes are usually indicated by the square brackets [ ]and contains a keyword within the [] tag , and the ending tags have the same keyword with a backslash ” / ” preceding the keyword. E.g [/b] . These BBCodes are parsed during the run-time to produce HTML or XHTML that can be understood by the browsers. Please keep in mind that you need to nest the tags properly as otherwise it might not work.
List of Commonly used BBCode tags or BBCode References
Name | Syntax | Purpose |
---|---|---|
Bold | [b] text [/b] | Makes the wrapped text bold |
Italic | [i] text [/i] | Makes the wrapped text italics |
Underline | [u] text [/u] | Underlines the wrapped text |
Strikethrough | [s] text [/s] | Strikethrough the wrapped text |
Link | [url] url text [/url] | Converts the url text to link |
Link (named) | [url=”https://www.moreonfew.com”]Link text [/url] | Converts the wrapped text to link with the href as the parameter passed |
Image | [img]http://test.com/img.jpg[/img] | Embeds the image indicated in the url |
Quote | [ quote] text [/quote] | Converts the text to a blockquote text. |
Code | [code] code here [/code] | Converts the text within to monospaced text. |
Color | [color=#FF0000]Red Text[/color] | Styles to wrapped text with the specified color. |
Font size | [size=14]Text[/size] | Changes the font size of the wrapped text to the specified font size. |
Font face | [face=Arial]Text[/face] | Changes the font family of the wrapped text to the specified font. |
Center | [center] text [/center] | Center aligns the text within. |
Left | [left] text [/left] | Left aligns the text within. |
Right | [right] text [/right] | Right aligns the text within. |
Justify | [justify] text [/justify] | Justifies the text on left and right. |
Sub-script | [sub] text [/sub] | Sub-scripts the text within. |
Super-script | [sup] text [/sup] | Super-scripts the text within. |
[email] [email protected] [/email] | Converts the email id within to a mailto link. | |
Email (named) | [[email protected]] Email Us [/email] | Converts the text within to a mailto link with the href as the email address passed. |
Large | [large] text [/large] | Converts the font size of the text within to a larger size. |
Large (Coloured) | [large=#cccccc]text[/large] | Converts the font size of the text within to a larger size and changes the colour to the specified colour code. |
Small | [small] text [/small] | Converts the font size of the text within to a smaller size. |
Small (Coloured) | [small=#cccccc]text[/small] | Converts the font size of the text within to a smaller size and changes the colour to the specified colour code. |
List(unordered) | [list] [li]Item 1[/li] [li]Item 2[/li] [/list] | Generates an unordered list of the items specified |
List(unordered) | [ul] [li]Item 1[/li] [li]Item 2[/li] [/ul] | A different way to Generate an unordered list of the items specified |
List(Ordered) | [ol] [li]Item 1[/li] [li]Item 2[/li] [/ol] | Generates an ordered list of the items specified. |
While most of these are commonly used, not all the BBCodes might work on the platform you are working on since they are not yet standardized. Like BBCode Colors or BBCode URL might be a common tag but not necessarily bbcode table or any other tags might be common and so on.
BBCode Reference links
You can find a larger list of BBCodes, their examples and online BBCode testers at the following sites:
Hope you found this article to be helpful. Tell us about your experiences on using BBCode.
I WOULD LIKE TO POST AN IMAGE OR PHOTO TO A “SOCIAL SITE”
i AM TOLD THAT I SHOULD USE A bb code. HOW IS THAT DONE ?
DO I HAVE TO BE A GENIOUS OR DO YOU HAVE A SUGGESTION FOR ME.
THANK YOU.
Hi Humberto,
Did you try using the [img] tag? You can find the syntax mentioned above.
Witam 🙂