Like we all know BB code is a set of tags based on the HTML language that you may already be familiar with. They allow you to add formatting to your messages in the same way as HTML does, but have a simpler syntax and will never break the layout of the pages you are viewing.
There's a lot of BBCode to implements and I think most of them is useful. By implementing a good bbcode, forum thread and post will have a better layout and a better change to attract new members.
Here is a list of BBCode tag that I think will be useful:
1. Anchor Tag
Title: Named anchor link
Tag: anchor
Replacement:
<a name="{param}"></a>
Example: [anchor]You are here[/anchor]You are here
Description: The [goanchor] tag is used in conjunction with the <a href="#name">Jump to the anchor</a> tag. One is not functional without the other.
Use {option}: no
Create another bbcode using these settings and parameters:
Title: Anchor link
Tag: goanchor
Replacement:
<a href="#{option}">{param}</a>
Example: [goanchor=You are here]This takes you to a new location within a post[/goanchor]
Description: The tag allows you to jump to another location within a post, usually used for long posts with headings and/or sections of interest. This tag
must be used in conjunction with the [anchor] tag. One is not functional without the other.
Use {option}: Yes
Reason: Anchor tag can make a very long post to be easily navigable the perfect example is
this thread. By putting either an index or back to top anchor viewers can easily read post without have to searching their desired contents.
How it will look like:
2. Spoiler TagTitle: Spoiler
Tag: Spoiler
Replacement:
<div style="margin:20px; margin-top:5px">
<div class="smallfont" style="margin-bottom:2px"><b>Spoiler </b>: <input type="button" value="Show" style="width:45px;font-size:10px;margin:0px;padding:0px;" onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }">
</div>
<div class="alt2" style="margin: 0px; padding: 6px; border: 1px inset;">
<div style="display: none;">
{param}
</div>
</div>
</div>
Description: Use this to hide important information which might spoil a movie, program, etc for other users.
Use {option}: No
Reason: I think everyone that ever use this BBCode agree that this one is a must implement. It has many use in general and a need in moving pictures sub-forum.
How it will look like:
3. Spoiler Tag with NameTitle: Spoiler
Tag: Spoiler
Replacement:
<div style="margin:20px; margin-top:5px">
<div class="smallfont" style="margin-bottom:2px"><b>Spoiler</b> for <i>{option}</i>: <input type="button" value="Show" style="width:45px;font-size:10px;margin:0px;padding:0px;" onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }">
</div>
<div class="alt2" style="margin: 0px; padding: 6px; border: 1px inset;">
<div style="display: none;">
{param}
</div>
</div>
</div>
Description: Use this to hide important information which might spoil a movie, program, etc for other users.
Use {option}: Yes
Reason: Same as above but instead of showing 'Spoiler :' it shows 'Spoiler for Name :'. Not does it matter but listed for the sake of completeness
How it will look like :
4. Image Left AlignTitle: Image Left Align
Tag: imgleft
Replacement:
<IMG SRC="{param}" align=left hspace=10>
Description: Currently when image tag is use the text is then aligned at the bottom right of the image. This BBCode allow text to wrap the image from the left
Use {option}: No
Reason: If you are making a guide with images sometime you want it to be neatly place with the text. This one allowed you to do so. Not really important but there will be no harm done by implementing this. Click
this link to see an example of a wrapped text image.
5. Image Right AlignTitle: Image Right Align
Tag: imgright
Replacement:
<IMG SRC="{param}" align=right hspace=10>
Description: Currently when image tag is use the text is then aligned at the bottom right of the image. This BBCode allow text to wrap the image from the right
Use {option}: No
Reason: Same as above but this one is right aligned. Click
this link to see an example of a wrapped text image.
How both will look like :
6. HighlightTitle: Highlight
Tag: Highlight
Replacement:
<span style="background-color: rgb(255, 255, 0);">{param}</span>
Description: Gives text a highlighted stabilo effect
Use {option}: No
Reason: A better highlight tag than the current because the current can be easily recreated by [highlight]using bold and font color. [/highlight]
How it will look like :
7. BoxTitle: Box
Tag: Box
Replacement:
<div style="margin: 5px 20px 20px;"><table border="0" cellpadding="6" cellspacing="0" width="100%"><tbody><tr><td class="alt2" style="border: 1px inset; width: 640px;">{param}</td></tr></tbody></table></div>
Description: Put text into a quote-style box
Use {option}: No
Reason: Can be useful to be used when people want to put a famous quote, a definition, or something important to be easily noticeable.
How it will look like :
8. TableTitle: Table
Tag: Table
Replacement:
<table>{param}</table>
Use {option}: No
Create another bbcode using these settings and parameters:
Title: Table Row
Tag: tr
Replacement:
<tr>{param}</tr>
Use {option}: No
Create another bbcode using these settings and parameters:
Title: Table Column
Tag: td
Replacement:
<td>{param}</td>
Use {option}: No
Reason: Table has many use. From listing a recipe, tools, or ingredients to numerical data statistic. Although it's awesome but it has a big flaw which can cause the page viewed broken. It needs a plugin to prevent it to be a broken page though I'm not sure but you can check
this page10. SubscriptTitle: Subscript
Tag: sub
Replacement:
<sub>{param}</sub>
Use {option}: No
Description: To subscript text
Reason: Why not?
11. SubscriptTitle: Superscript
Tag: sup
Replacement:
<sup>{param}</sup>
Use {option}: No
Description: To superscript text
Reason: Why not?
How both will look like:
12. LineTitle: Line
Tag: line
Replacement:
<hr size="2" width="{param}%">
Use {option}: No
Description: To create a horizontal line
Reason: Useful when you are making a multiple content articles within one post. Can be used to divide each content
13. AbbreviationTitle: Abbreviation
Tag: abbr
Replacement:
<span title="{option}" style="border-bottom: 1px dotted; cursor: help;">{param}</span>
Use {option}: Yes
Description: To give a a message when you mouse hover it
Reason: Useful when you are making an article with a lot of abbreviation.
How it will look like :
14. StriketroughTitle: Strike
Tag: s
Replacement:
<Strike>{param}</strike>
Use {option}: No
Description: To create a strike-trough text
Reason: Useful when you are making a list of goal to show which one is done.
14. Image Mouse OverTitle: Image Mouse Over
Tag: imgover
Replacement:
<img src="{param}" onmouseover="this.src='{option}" onmouseout="this.src={param}" >
Use {option}: Yes
Description: To create an image that when you mouse over it, it will show another image
Reason: For the lulz
15. Legend Field SetTitle: Legend Field Set
Tag: legend
Replacement:
<fieldset><legend>{option}</legend>{param}</fieldset>
Use {option}: Yes
Description: To create a legend
Reason: Why not?
How it will look like :
Will be updated if I see another interesting BBcode
If you are interested on making a BBCode it's very simple to make one
Here's a simple tutorial
Let's say we are going to make
<MARQUEE>Hi There! </MARQUEE>
into a BBCode.
All you have to do is find the variable in this case it's 'Hi there!' with {param}
Give your BBCode tag a name and you are done
Title: Any title will do
Tag: marquee (This one act as a BBCode tag name which will be [Marquee])
Replacement:
[code]<MARQUEE>{param}</MARQUEE>
Description: Any description will do
Use {option}: No (It's only be used if there's a second variable within your tags)
Example if you wish to use option in marquee
<MARQUEE WIDTH="20%">Hi There!</MARQUEE>
In default marquee has set it width to be always 100%. We can then set this as a second variable (The first variable is 'Hi There' which is replaced by {param}) by replacing '20' into an {option}
Therefore it will be
<MARQUEE WIDTH="{option}%">{param}</MARQUEE>
Basically any html functions can be turned into a bbcode. It's nice to have a semi functional html in user generated content without the possibility of harming the main site.
Comments
Anchor tags are a good idea for epic posts.
Spoiler tags should be implemented for entertainment forums where they serve a purpose.
The rest will not serve any particular useful purpose, at all.
Whilst we're at it, remove the alignment, indent, file attachment, font, colour, size tags.
Someone show me a post where these tags have improved the content?
Yes, it doesn't improve any content but it is there for the sakes of beauty and readability. People tends to read something that has a neat format. Of course we can always put a great article with nice formatting by using text and a lot of spacing still it doesn't kill for having some nice BBCode to make it to look even better. I think the better question is why not?
Bunghole and stupid noob would probably take a liking to this.
Well, it might be useful in math and science related thread though.
Why would you want to remember it? We can easily create a shortcut in the reply form. All we need to is making/finding the proper icon and voila you'll see them right besides vimeo shortcut
I forgot to mention that I added several tag in the list
I support OP's post.