Still have old forum posts wrapped in square-bracket tags like [b] and [url]? Those tags are BBCode, and most modern websites cannot read them. This BBCode to HTML converter rewrites that markup into plain HTML tags that browsers understand.
It is built for forum admins, bloggers, and developers moving community content to a new site. You paste BBCode on the left, and the HTML appears on the right as you type.
Table of Contents
- What the Converter Does
- How to Use It, Step by Step
- How the Conversion Works
- Supported Tag Map
- Worked Example
- How to Read the Results
- Output Safety and Common Mistakes
- Limitations and Assumptions
- FAQs About the BBCode to HTML
What the Converter Does
The tool reads one block of BBCode and returns matching HTML. Two text boxes and three small counters sit at the top of the tool.
- BBCode Input: the box where you paste or type your markup.
- Converted HTML Code: a read-only box that fills in as you type.
- BBCode Length: the character count of what you pasted.
- HTML Output: the character count of the generated HTML.
- Status: a live label that reads Empty, No tags, or Converted.
- Clear empties the input, and Copy HTML copies the output.
How to Use It, Step by Step
- Paste your BBCode into the BBCode Input box on the left.
- Watch the Converted HTML Code box update as you type.
- Check the two length counters to compare input and output size.
- Press Copy HTML to send the result to your clipboard.
- Press Clear to empty the input and start again.
- Paste the HTML into your page, template, or content editor.
How the Conversion Works
The tool first escapes the three HTML special characters. It turns the ampersand into &, the less-than sign into <, and the greater-than sign into >. This keeps stray symbols from breaking your page.
It then pulls each [code] block aside so later steps leave it untouched. Next it scans for known BBCode tags and swaps each one for its HTML match. Last, it changes every line break outside code into a <br /> tag.
BBCode Text+Escape & < >+Swap Tags=HTML Output
Supported Tag Map
The tool knows a fixed list of tags. Tag names can be upper or lower case. Here are the pairs it handles.
| BBCode | HTML Result |
|---|
| [b]text[/b] | <strong>text</strong> |
| [i]text[/i] | <em>text</em> |
| [u]text[/u] | <u>text</u> |
| [s]text[/s] | <del>text</del> |
| [url=https://example.com]text[/url] | <a href="https://example.com" target="_blank" rel="noopener">text</a> |
| [img]link[/img] | <img src="link" alt="Image" /> |
| [color=red]text[/color] | <span style="color: red;">text</span> |
| [size=20]text[/size] | <span style="font-size: 20px;">text</span> |
| [quote]text[/quote] | <blockquote>text</blockquote> |
| [code]text[/code] | <pre><code>text</code></pre> |
| [list][*]item[/list] | <ul><li>item</li></ul> |
Worked Example
Priya is moving a short post to her blog. She pastes two lines of BBCode: a bold heading and an italic note on the next line.
| Field | Value |
|---|
| Input | [b]Team Update[/b]
[i]See the roadmap below[/i] |
| BBCode Length | 47 chars |
| Bold result | <strong>Team Update</strong> |
| Italic result | <em>See the roadmap below</em> |
| Line break | <br /> |
| HTML Output | 64 chars |
The output runs longer than the input. Each HTML tag holds more characters than the short BBCode it replaces.
How to Read the Results
BBCode Length counts the raw markup you entered. HTML Output counts the finished code. The output is almost always longer, since HTML tags hold more characters than BBCode tags.
Status reacts to your input. It reads Empty when the box is blank. It reads No tags when nothing in your text matches a known tag. It reads Converted once a known tag is found.
Output Safety and Common Mistakes
The tool escapes angle brackets in your text, so a typed <script> tag becomes harmless text. That protects this page from injected code.
It also escapes quote marks inside [url], [color], and [size] values, so they cannot break out of the attribute. Link schemes like javascript:, data:, and vbscript: are dropped, and only the link text remains. It still does not confirm that a color or size value is valid CSS. Review the HTML before you publish. For stricter control over symbols, the HTML entity encoder gives you more options.
Nesting the same tag now converts correctly. A [b] pair placed inside another [b] pair resolves from the inside out, so both bold layers close cleanly.
A [code] block keeps its real line breaks and does not gain <br /> tags inside it. To tidy the final markup around that block, run it through the HTML beautifier afterward.
Limitations and Assumptions
- Only the tags in the map above are supported. Unknown tags like [spoiler] stay in the text as plain BBCode.
- A [list] always builds an unordered <ul> list, never a numbered <ol> list. Each [*] starts a new item.
- Color and size values are not checked as valid CSS. You own the review step.
- A plain [url] with non-link text is left as plain words, not forced into a broken link.
- The tool converts text only. It does not fetch images or test that links work.
- Very large pastes depend on your browser memory, since all work runs in the browser.
FAQs About the BBCode to HTML
Does the Converter Work Without an Internet Connection After Loading?
Yes. All conversion runs inside your browser. Once the page loads, the tool does not send your text to any server.
Why Does My Converted Link Have Target and Rel Attributes?
Every [url] tag becomes a link that opens in a new tab. The tool also adds rel="noopener", which is a standard safety attribute for new-tab links.
What Alt Text Does a Converted Image Get?
The tool sets alt="Image" on every [img] result. It does not leave the alt text blank. Edit it later to describe the real picture.
Can I Convert HTML Back Into BBCode?
Not with this tool, since it runs one direction only. For the reverse job, use the HTML to BBCode converter instead.
Does It Handle Markdown as Well?
No. It reads BBCode square-bracket tags only. For Markdown source, try the Markdown to HTML tool, which covers that syntax.
What Happens to a Tag the Tool Does Not Know?
Unknown tags are left alone as plain text. You will see them in the output unchanged. You can find more utilities in the developer tools hub.
This calculator gives general estimates only and is not professional advice. Reviewed for general accuracy by Prof. Dr. Khalil Mudassar, PhD.