HTML to Markdown Converter (and Markdown to HTML)

What this converter does

HTML is how web pages are built. Markdown is a lighter way to write the same structure with plain characters: # for a heading, - for a list item, ** for bold. People convert between them all the time. You might move a blog post from a CMS into a static site, paste a web page into a README, or turn notes written in Markdown into HTML for an email template.

This page works in both directions. HTML to Markdown uses Turndown, a widely used converter, with extra rules for tables and code blocks. Markdown to HTML uses marked with GitHub Flavored Markdown turned on.

How to use it

Choose a direction with HTML to Markdown or Markdown to HTML.
Paste into the left box, press Open file, or press Sample to try it. The result updates as you type.
For HTML to Markdown, pick the Headings style (hash marks or underlined), the Bullets character and how to write Code blocks (fenced or indented).
For Markdown to HTML, turn on Line breaks become   if single line breaks should stay as breaks, as they do in GitHub comments.
Switch between Code and Preview to see the rendered result, then Copy or Download it.

HTML to Markdown example

This HTML:

<h1>Release notes</h1>
<p>Version <strong>2.4</strong> adds <a href="https://example.com/docs">offline mode</a> and fixes <em>three</em> bugs.</p>
<ul>
  <li>Faster search</li>
  <li>New <code>--quiet</code> flag</li>
</ul>
<pre><code class="language-bash">npm install [email protected]</code></pre>
<table>
  <tr><th>Platform</th><th>Status</th></tr>
  <tr><td>Windows</td><td>Ready</td></tr>
</table>

becomes this Markdown:

# Release notes

Version **2.4** adds [offline mode](https://example.com/docs) and fixes *three* bugs.

- Faster search
- New `--quiet` flag

```bash
npm install [email protected]
```

| Platform | Status |
| --- | --- |
| Windows | Ready |

The language-bash class on the code block turns into the language tag after the opening fence, so syntax highlighting still works on GitHub and most static site generators. Nested lists are indented under their parent item, and an ordered list keeps its numbers.

Markdown to HTML example

This Markdown:

## Install

Run `npm install` and open **http://localhost:3000**.

- [x] Node 20
- [ ] Docker

gives this HTML:

<h2>Install</h2>
<p>Run <code>npm install</code> and open <strong><a href="http://localhost:3000">http://localhost:3000</a></strong>.</p>
<ul>
<li><input checked="" disabled="" type="checkbox"> Node 20</li>
<li><input disabled="" type="checkbox"> Docker</li>
</ul>

Two GitHub extensions are at work here. The bare URL became a link, and the task list items became checkboxes. Tables with :-: in the divider row get align="center" on their cells.

By default a single line break inside a paragraph stays a plain line break in the source, which browsers show as a space. With Line breaks become   turned on, Line one and Line two on separate lines become Line one Line two.

What gets dropped

Markdown describes structure, not design. When going from HTML to Markdown:

script, style, noscript and template blocks are removed.
Classes, ids, inline styles and data attributes are dropped.
Wrapper elements such as div and span disappear, but their text stays.
Table cells that hold several paragraphs are joined into one line, because a Markdown table row must fit on one line. A pipe character inside a cell is escaped as \|.
Merged cells (colspan) are padded with empty cells so every row has the same number of columns.

If you need exact layout, keep the content as HTML. Most Markdown renderers allow raw HTML blocks.

Tips

Copy from the page source, not the rendered page, when you can. Copying rendered text loses the tags the converter needs.
If the HTML is minified or messy, the result is the same, because the converter reads structure, not whitespace. To read the HTML itself, run it through the HTML formatter first.
Run the Markdown through the Markdown formatter afterwards for padded tables and consistent emphasis.
For a Word document, use the Word to Markdown converter, which reads the .docx file directly.

Other ways to convert

Pandoc converts between dozens of formats on the command line. pandoc page.html -o page.md is the basic form.
Editors: VS Code shows a rendered Markdown preview with Ctrl+Shift+V. Several extensions add an HTML to Markdown paste command.
Code: the Turndown library in JavaScript and the markdownify package in Python do HTML to Markdown inside your own scripts.

Everything on this page runs in your browser. The HTML you paste is parsed as an inert document, so nothing in it runs or loads while it converts.

HTML to Markdown: questions and answers

Can I convert Markdown back to HTML here?

Yes. Press Markdown to HTML above the boxes. The tool supports GitHub style tables, task lists and strikethrough. If you switch direction after a conversion, the current result moves into the input so you can go back and forth.

Is the preview safe for HTML I copied from somewhere else?

Yes. The preview is a sandboxed frame. Scripts do not run, nothing is loaded from the network and links cannot open. That means remote images do not show in the preview, but they are still in the Markdown or HTML output.

What happens to scripts, styles and classes?

Script and style blocks are removed, because Markdown has no place for them. Classes, ids and inline styles are dropped too. The text and structure are kept: headings, paragraphs, lists, links, images, emphasis, code and tables.

Why are my tables kept as Markdown even without a header row?

Markdown tables need a header row. When an HTML table has none, the converter uses its first row as the header so you still get a Markdown table instead of leftover HTML.