Web Developer Tutorial: Learn How To Use BBcode

By Michael Rohde

When the World Wide Web began, it was nothing more than a bulletin board system and a few odd pages scattered here and there. As the Internet progressed, the bulletin board system grew and evolved. It branched off in two different directions: email and forums. There are a few sites that still have a classic bulletin board (such as Yahoo Groups), but for the most part, they have gone the way of the dinosaur. In their place are discussion forums, which are vibrant communities of like-minded individuals sharing their thoughts and wisdom.

Bulletin Board Systems Evolve Into Discussion Forums

When forums began, they were a basic means of posting messages to a group of people. Since then, they have become much, much more. Very recently, I added a forum to my own site for the purpose of fostering a dedicated community. Why is community such an important aspect to a web site? There are several reasons. One, it keeps visitors coming back. While they want to post and share their own ideas, they also want to see the responses. From there, the monologues turn to conversations. For the owner of a site, that equals a lower bounce rate, increased return visits and a likely chance that new visitors to the site will notice a new found community on the Internet. It's a win-win situation.

If you don't have the money for a custom forum, then look no further than Simple Machines Forum. I learned how to install SMF from another HTMLgoodies article. After the very fast and very easy installation, I began exploring all of the options, which are there in abundance. I could write pages and pages on all the best features. Suffice it to say, SMF has what you're looking for.

Enter Bulletin Board Code (BBcode)

One of the more powerful features of SMF is the ability to use BBcode while writing topics, replying to other posts or listing News items. Learning how to use BBcode can make you look like an experienced forum user even if you've never visited a forum before. As for me, I've never been a big forum person--that's why BBcode was brand new to me up until a week ago. Here are some useful tricks and tips for using BBcode.

BBcode is short for Bulletin Board Code. It's a simplified version of HTML, which is already extremely easy. It's hard to imagine how much more simple HTML can get, but it does. Some of the more advanced forums allow you to use BBcode while writing topic posts. Not all forums allow you to do this, so you might need to experiment or poke around on a specific site to see what it allows. As mentioned before, SMF does allow BBcode, so I will use that as an example.

One of the most common uses of BBcode is to insert a hyperlink to another article. You might want to do this to refer to another site that is relevant to the subject of the forum. A newbie might simply copy and paste the URL into the post. Many of us know that URLs have grown quite long and complex, especially for rich content sites. Services such as bit.lyallow you to shorten the URL, which is great in many circumstances, but it might not suit your purposes in a forum post. Here's how to use BBcode to present a clean hyperlink:

[url=http://www.htmlgoodies.com/beyond/webmaster/projects/article.php/3878716]Installing SMF article[/url]

You'll immediately notice that carrots <href> are replaced with brackets [url]. You don't have to write out a full href tag, instead, you simply reference [url]. It's amazing how simple that is, yet, if you didn't know how to do it, you might wind up copying and pasting a long and ugly URL into the topic post instead of a nice and neat text link.

You can also format your text with BBcode. Use [b], [i], [u] for bold, italic and underline. You can use [color], [size] and [font] as well. You can also include your email address with [email]. The format for each of these tags remains the same as shown in the example above.

[email=Yourname@hostname.com]Your Name[/email]

If you frequent sites that discuss code, you might be inclined to include sample code in your post. Here's how you can do that:

<script type="text/javascript">
    alert("Hello world!");

This works for specific code like [php] and [html] as well. The output from using these tags is formatted specifically to the language you are referencing.

The list goes on and on. For a complete listing, you can check out Sitepoint's BBcode list.

Hopefully, learning and using BBcode will increase your participation in the forums you frequent and make your posts look cleaner and more professional.

In my last article, someone left a comment that I didn't include any real world examples. To avoid this comment being raised again, here's an example of the SMF forum in action. If you poke around, you'll notice some clean links from those who use BBcode and you might also notice that some people simply copy and paste the URL. You can judge for yourself which format works better. I hope you come to the conclusion that using BBcode is a better method, and if your own discussion forum has the option available for your users, it is worth using.

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date