More on Front End Web !

What is a bulletin board code or BBCode?

By on Oct 12, 2013 in HTML, Web | 0 comments

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="http://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] test@example.com [/email] Converts the email id within to a mailto link.
Email (named) [email=test@example.com] 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.

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.

Post a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">