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

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=””]Link text [/url]Converts the wrapped text to link with the href as the parameter passed
Image[img][/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] [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.

Related Posts

  • Conditional Comments in HTML Many of us would have come across scenarios where we wanted a different Stylesheet or CSS properties for IE (Internet Explorer). While many would have resorted to […]
  • How to disable autocomplete in HTML? The autocomplete feature has been of a great help as a website visitor especially if you have a long form that you might fill more than once. The autocomplete feature […]
  • How to use Google web fonts ? Over the time if you notice, the web is becoming more beautiful and pleasant. People have actually become more serious about UX, UI, Typography and the related […]
  • How to generate QR Code using jQuery QR Code or the Quick Response Code is a square shaped matrix barcode that contains data encoded within it. QR Codes can be generated using JavaScript or jQuery too. QR […]
  • NetBiscuits – Getting Started What is Netbiscuits? Netbiscuits is a platform for the development and delivery of next generation web apps across all mobile and connected devices. In other words, […]
  • 25 HTML link rel attribute values that you might not have known about The <link> tag is one of the most primary tags that a lot of us must have been using. This tag is usually found in the <head> section and plays the role of […]