| Markdown | HTML |
|---|---|
| # Heading 1 ... ###### Heading 6 | <h1> ... <h6> |
| **bold** or __bold__ | <strong> |
| _italic_ or *italic* | <em> |
| ~~strike~~ | <del> |
| [text](https://url) | <a href="..."> |
|  | <img src="..." alt="..."> |
| - item or 1. item | <ul><li> or <ol><li> |
| - [x] done | <li><input type="checkbox" checked disabled> |
| > quote | <blockquote> |
| `code` | <code> |
| ```js ... ``` | <pre><code class="language-js"> |
| | a | b |, then | --- | --- | | <table> |
| --- | <hr> |
| Two spaces at line end | <br> |
How to use
Write, paste or open Markdown
Type in the Markdown box, paste a document, or click Open .md file to load a .md, .markdown or .txt file. The starting sample shows headings, a table, a task list, a quote and code.
Set options and check the preview
Tick the options you want, such as Add id to headings or Sanitize HTML. The Preview tab shows the rendered page, the HTML tab the markup, and the CSS tab takes your own styles, all updating as you type.
Copy, download or print
Click Copy HTML, Download HTML only, Download full .html page or Download .md. Print or save as PDF opens your browser's print dialog, where you can choose Save as PDF.
Why Markdown to HTML Converter
- Live preview, HTML and custom CSS tabs side by side.
- GitHub Flavored Markdown, heading ids and optional sanitizing with DOMPurify.
- Download an HTML fragment, a full styled page, or a PDF through print.
- Open .md files from your computer without uploading them.
Markdown syntax and the HTML it produces
Markdown is a shorthand for a small set of HTML elements. Knowing the mapping helps when a CMS or email tool accepts HTML but not Markdown, or when you need to style the output with CSS. The table shows what the converter produces for each piece of syntax.
Two details trip people up. A single line break inside a paragraph does not create a new line in the HTML unless you tick Single line break becomes <br>; otherwise leave a blank line to start a new paragraph. And a list needs a blank line before it when it follows a paragraph in some Markdown tools, so adding one is a safe habit.
| Markdown | HTML |
|---|---|
| # Heading | <h1>Heading</h1> |
| ## Heading | <h2>Heading</h2> |
| **bold** | <strong>bold</strong> |
| *italic* | <em>italic</em> |
| ~~deleted~~ | <del>deleted</del> |
| [text](https://example.com) | <a href="https://example.com">text</a> |
|  | <img src="photo.png" alt="alt"> |
| - item | <ul><li>item</li></ul> |
| 1. item | <ol><li>item</li></ol> |
| > quote | <blockquote><p>quote</p></blockquote> |
| `code` | <code>code</code> |
| Three backticks around a block | <pre><code>...</code></pre> |
| --- | <hr> |
| | a | b | table with a --- row | <table> with <thead> and <tbody> |
What each Markdown to HTML option does
The options change the HTML, not your Markdown, so you can switch them on and off and compare the HTML tab.
| Option | Effect on the HTML |
|---|---|
| GitHub Flavored Markdown | Tables, task lists, strikethrough and bare links. Untick for plain Markdown. |
| Single line break becomes <br> | Every line break inside a paragraph becomes a <br>, like comments on GitHub. |
| Add id to headings | Adds id="what-changed" style ids so you can link to #what-changed. |
| Open external links in a new tab | Adds target="_blank" and rel="noopener noreferrer" to http and https links. |
| Sanitize HTML | Removes scripts, event handlers and other unsafe markup with DOMPurify. |
| Indent the HTML output | Formats the HTML with line breaks and indentation for reading. |