Conversion Examples

See how different HTML elements are converted to Markdown

Basic Formatting

HTML Input

<h1>Main Title</h1>
<p>This is a paragraph with <strong>bold text</strong> and <em>italic text</em>.</p>
<p>Here's a <a href="https://example.com">link</a>.</p>

Markdown Output

# Main Title

This is a paragraph with **bold text** and _italic text_.

Here's a [link](https://example.com).

Lists

HTML Input

<h2>Shopping List</h2>
<ul>
  <li>Milk</li>
  <li>Eggs</li>
  <li>Bread</li>
</ul>

<h2>Steps</h2>
<ol>
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>

Markdown Output

## Shopping List

- Milk
- Eggs
- Bread

## Steps

1. First step
2. Second step
3. Third step

Code Blocks

HTML Input

<p>Inline code: <code>const x = 10;</code></p>

<pre><code>function hello() {
  console.log('Hello World!');
}
</code></pre>

Markdown Output

Inline code: `const x = 10;`

```
function hello() {
  console.log('Hello World!');
}
```

Blockquotes

HTML Input

<blockquote>
  <p>The only way to do great work is to love what you do.</p>
  <p>- Steve Jobs</p>
</blockquote>

Markdown Output

> The only way to do great work is to love what you do.
>
> - Steve Jobs

Images

HTML Input

<img src="https://example.com/image.jpg" alt="Description of image">
<p>Caption: A beautiful landscape</p>

Markdown Output

![Description of image](https://example.com/image.jpg)

Caption: A beautiful landscape

Mixed Content

HTML Input

<article>
  <h1>Blog Post Title</h1>
  <p>Published on <time>2024-01-01</time></p>

  <h2>Introduction</h2>
  <p>This is the <strong>introduction</strong> paragraph.</p>

  <ul>
    <li>Point one</li>
    <li>Point two</li>
  </ul>

  <blockquote>A relevant quote</blockquote>
</article>

Markdown Output

# Blog Post Title

Published on 2024-01-01

## Introduction

This is the **introduction** paragraph.

- Point one
- Point two

> A relevant quote

Try It Yourself

Ready to convert your own HTML? Head back to the converter and try these examples live.

Go to Converter