Last updated
Markdown to HTML Converter Examples
The Markdown to HTML converter transforms Markdown documents into clean, semantic HTML. Below are examples of Markdown input and the HTML it produces.
Headings
Markdown:
# Main Title
## Section Heading
### SubsectionHTML output:
<h1 id="main-title">Main Title</h1>
<h2 id="section-heading">Section Heading</h2>
<h3 id="subsection">Subsection</h3>Paragraphs and Inline Formatting
Markdown:
This is a paragraph with **bold**, *italic*, and ~~strikethrough~~ text.
Also `inline code` and a [link](https://example.com).HTML output:
<p>This is a paragraph with <strong>bold</strong>, <em>italic</em>,
and <del>strikethrough</del> text.
Also inline code and a <a href="https://example.com">link</a>.</p>Code Block with Language Class
Markdown:
```javascript
const greet = (name) => `Hello, ${name}!`;
console.log(greet('World'));
```HTML output:
<pre th:inline="none">const greet = (name) => `Hello, ${name}!`;
console.log(greet('World'));
Table Conversion
Markdown:
| Name | Role | Active |
|-------|--------|--------|
| Alice | Admin | Yes |
| Bob | Editor | No |HTML output:
<table>
<thead>
<tr>
<th>Name</th>
<th>Role</th>
<th>Active</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>Admin</td>
<td>Yes</td>
</tr>
<tr>
<td>Bob</td>
<td>Editor</td>
<td>No</td>
</tr>
</tbody>
</table>Task List Conversion
Markdown:
- [x] Write tests
- [x] Code review
- [ ] Deploy to productionHTML output:
<ul>
<li><input type="checkbox" checked disabled> Write tests</li>
<li><input type="checkbox" checked disabled> Code review</li>
<li><input type="checkbox" disabled> Deploy to production</li>
</ul>Blockquote
Markdown:
> This is an important note.
> It spans multiple lines.HTML output:
<blockquote>
<p>This is an important note.
It spans multiple lines.</p>
</blockquote>Footnotes
Markdown:
This claim needs a citation.[^1]
[^1]: Source: Example Research Paper, 2024.HTML output:
<p>This claim needs a citation.<sup><a href="#fn1" id="fnref1">1</a></sup></p>
<section class="footnotes">
<ol>
<li id="fn1">Source: Example Research Paper, 2024. <a href="#fnref1">↩</a></li>
</ol>
</section>Complete HTML Document Output
When "full document" mode is selected:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="main-title">Main Title</h1>
<p>Content here...</p>
</body>
</html>Output Options
- Fragment mode — HTML snippet only, for embedding in existing pages
- Full document mode — complete HTML with doctype, head, and body
- With CSS classes — adds class attributes for custom styling
- Sanitized output — script tags and event handlers removed (XSS safe)
- Heading IDs — anchor links generated from heading text
Common Use Cases
- Converting README files to HTML for web publishing
- Transforming documentation written in Markdown for a CMS
- Generating HTML email content from Markdown drafts
- Batch converting a folder of Markdown files to HTML
- Producing HTML from Markdown for static site generation
Paste your Markdown and get clean, semantic HTML output instantly. Choose between fragment and full document modes, and export the result for use in any web publishing workflow.