How to convert Markdown to HTML in three steps

In short
  • You get a semantic fragment: real tags, no classes, no CSS, no <head>.
  • Copy it into a CMS block, or download it as an .html file.
  • marked.js parses and DOMPurify cleans, both inside your own tab.
  • Anything outside GitHub Flavored Markdown passes through as plain text.

The output panel is already full, so the tool has done its part. What follows is what those tags mean, why some of your syntax may have been ignored, and where this markup is supposed to end up.

Three steps from Markdown to markup

  1. Paste your Markdown into the input panel. It can come from a GitHub README, a note in Obsidian or Notion, an AI chat answer, or text you type from scratch. Whole documents are fine. So is one paragraph you want to check.
  2. Read the HTML in the output panel. The result appears at once, with one tag per structural element so you can scan it. Fix the Markdown on the left and the markup changes as you type, which is the fastest way to learn what each symbol produces.
  3. Copy or download the result. Copy puts the markup on your clipboard for a CMS block, an email template or a static site. Download saves an .html file you can open in any browser.

What runs in your tab

Two libraries do the work. marked.js parses the Markdown, and DOMPurify sanitizes the result. Both load as ordinary JavaScript in this page.

Nothing is sent to a server at any point, so unpublished posts, internal docs and client work are all safe here. Want to write and convert in one place? The free Markdown editor on our homepage has a live preview and the same export buttons.

Illustration of plain-text Markdown symbols flowing through a converter and emerging as neatly nested HTML tags

A worked example: Markdown in, HTML out

One real pass through the converter beats any amount of theory. Here is a short release note, exactly as you would paste it into the input panel:

# Release Notes

We shipped **dark mode** and fixed the *export* bug.

- Faster preview
- Smaller bundle

See the [changelog](https://example.com/changelog).

> Upgrade before 1 March.

What comes out the other side

Nine lines of Markdown become eleven lines of markup. Nothing is added, and nothing is decorated:

<h1>Release Notes</h1>
<p>We shipped <strong>dark mode</strong> and fixed the <em>export</em> bug.</p>
<ul>
<li>Faster preview</li>
<li>Smaller bundle</li>
</ul>
<p>See the <a href="https://example.com/changelog">changelog</a>.</p>
<blockquote>
<p>Upgrade before 1 March.</p>
</blockquote>

Three details worth noticing

Read that output once more, because three things about it are deliberate:

  • No class attributes, no inline styles, no wrapper divs. This is the semantic minimum, which is exactly what a CMS or a template wants to receive.
  • The blockquote holds a nested <p> rather than bare text. That is correct HTML, and what every standards-compliant parser produces.
  • The list is a clean <ul> with two <li> children. No stray whitespace, no empty paragraphs wedged between them.

That is what "clean HTML" means in practice: markup that carries structure and nothing else, so your own stylesheet decides how it looks. Still weighing up which format to author in? Markdown vs HTML works through the tradeoff in detail.

What each Markdown element becomes in HTML

Every construct in the language maps to a specific tag. Keep this table beside you and you can predict the output before you convert anything:

Markdown you writeHTML producedNotes
# Title<h1>Title</h1>One to six # marks give <h1> through <h6>
A blank-line separated block<p>…</p>Blank lines are the paragraph separator; single newlines are not
**bold**<strong>bold</strong>__bold__ produces the same tag
*italic*<em>italic</em>Underscores work too, except mid-word
~~struck~~<del>struck</del>GitHub Flavored Markdown extension
- item<ul><li>item</li></ul>* and + are accepted markers as well
1. item<ol><li>item</li></ol>Starting at 3 adds start="3" to the list
[text](url)<a href="url">text</a>A quoted title becomes a title attribute
![alt](pic.jpg)<img src="pic.jpg" alt="alt">No width or height; add those in HTML if you need them
`code`<code>code</code>Angle brackets inside are escaped automatically
Fenced block with a language<pre><code class="language-js">The info string becomes a class for syntax highlighters
> quote<blockquote><p>quote</p></blockquote>The inner paragraph is required by the spec
Pipe table rows<table><thead><tbody>Alignment colons become style="text-align:…"
- [ ] task<li><input type="checkbox" disabled>GFM task list; the box renders but cannot be clicked
--- on its own line<hr>Three or more dashes, asterisks or underscores
Two spaces then a newline<br>A backslash at line end does the same in GFM
Raw HTML in the sourcePassed through, then sanitizedSafe tags survive; scripts and event handlers do not

The whole language is about that size

Seventeen rows is close to the entire vocabulary, which is why people learn Markdown in an afternoon. Our Markdown cheat sheet is the printable version of this table.

For the detail behind each row, the complete Markdown guide walks through every element in depth, and the tables guide covers the one construct that reliably trips people up.

What does not convert cleanly, and what to do instead

An honest converter tells you where it stops. Five things surprise people here, and every one of them has a short fix.

You get a fragment, not a finished page

  • The output has no styling. You get <h1> and <p>, not fonts, colours or spacing. That is deliberate, because a CMS or site template supplies the CSS.
  • There is no document shell. No <!DOCTYPE html>, no <head>, no charset line, because those belong to the page you are pasting into.

Need a standalone file? Paste the output between <body> tags in a minimal template and set <meta charset="utf-8">. Skipping that line is the usual cause of mangled accented and Chinese characters. The quicker route is the .html export in the editor, which wraps the same markup in a complete document with a stylesheet attached.

Three things the converter changes or drops

  • Relative paths stay relative. ![chart](img/q3.png) becomes src="img/q3.png", which resolves against wherever the HTML ends up, not your original folder. Use absolute URLs before converting if the markup is moving.
  • Unsafe raw HTML is removed. DOMPurify strips <script>, event handlers such as onclick, and javascript: URLs. An <iframe> embed may go too, depending on the sanitizer profile.
  • Non-GFM syntax will not render. Footnotes in some dialects, definition lists, Pandoc's fenced ::: containers and math blocks all pass through as literal text.

That last row needs one clarification, because the preview looks like it disagrees. The preview pane does colour tagged code fences, typeset $maths$ with KaTeX and draw mermaid fences as diagrams. All three are display upgrades applied to the preview after conversion. The HTML in the output box is the converted markup itself, so a formula still arrives at your CMS as dollar signs and text.

The scope here is GitHub Flavored Markdown, so the GFM guide is the definitive list of what will work. If you are wondering why so many rival dialects exist at all, what Markdown is tells that story.

Tip: Add video embeds and tracking scripts in your CMS after pasting, not in the Markdown. They survive the sanitizer that way, and your source file stays portable.

Where the converted HTML actually goes

People reach this page for a handful of very practical reasons. Knowing which one you are is the fastest route to the right button.

The four common destinations

  • Pasting into a CMS. WordPress, Ghost, Webflow, Shopify and most help-desk tools accept a raw HTML block. Convert, copy, paste, and your headings and lists keep their structure instead of arriving as one grey wall of text.
  • Email and newsletters. Mail clients still need real markup. Converting your draft gives you a clean starting point your email tool can style.
  • Static sites and legacy pages. Sometimes a page has to be a file. Download the .html, drop it into the project, and let the site stylesheet take over.
  • Checking your syntax. If a list refuses to render on GitHub, converting the same source here shows you whether the fault is your Markdown or the platform.

The neighbouring tools

Going the other way, from existing markup back to plain text, is what the HTML to Markdown converter is for. That direction loses detail, and its page is honest about which detail.

If the goal is a document to send rather than a page to publish, use Markdown to PDF instead, or read the deep dive on converting Markdown to PDF for the automated route.

Two smaller helpers finish the set. The Markdown viewer renders a .md file someone sent you, with no editing pane in the way, and the table generator builds pipe tables so you never count dashes by hand.

For background on the conversion itself, the FAQ answer on converting Markdown to HTML explains the process in prose, and the main FAQ collects the rest of the questions people ask.

Support data verified

Frequently Asked Questions

Is this Markdown to HTML converter free?

Yes, completely. There is no account, no paid tier, no document limit and no watermark on the output. You can convert a one-line snippet or a hundred-page manual, as often as you like.

Does my Markdown get uploaded anywhere?

No. Parsing runs in your own tab with marked.js, and the result is sanitized locally with DOMPurify. Your text is never sent to a server, which is why the tool works on confidential drafts and even with your network disconnected once the page has loaded.

Why does the HTML have no CSS or styling?

Because a fragment should not carry its own design. You get semantic tags so your site's stylesheet controls the look. If you want a finished styled page, use the .html download in the editor, which wraps the markup in a complete document.

Which Markdown flavor does it convert?

GitHub Flavored Markdown, so tables, task lists, strikethrough and fenced code blocks all work alongside the original syntax. Details are in the GFM guide.

Can I convert HTML back into Markdown?

Yes, with the sibling tool: the HTML to Markdown converter. Be aware that direction is lossy, since Markdown cannot express classes, inline styles or nested tables.

Keep learning

Try the Editor

Open Editor