HTML ↔ Markdown Converter — Free Online Tool

What is HTML to Markdown Converter (Clean, GitHub Flavored)?

HTML to Markdown converter transforms HTML (web pages, emails, CMS content) to Markdown syntax (.md files). Converts: HTML headings (<h1>-<h6>) → Markdown (# ##), lists (<ul>, <ol>) → Markdown (-, 1.), links (<a>) → [text](url), images (<img>) → , tables (<table>) → GitHub Flavored Markdown tables, code blocks (<pre><code>) → fenced blocks (```). Outputs clean Markdown (removes unnecessary HTML, preserves structure). Supports: GitHub Flavored Markdown (GFM: tables, task lists, strikethrough), CommonMark (standard Markdown), cleaning options (remove CSS, inline styles, empty tags). Useful for: migrating content (WordPress/Medium → Markdown), documentation (HTML docs → GitHub README), note-taking (web clippings → Markdown notes), simplifying HTML (remove styling, keep content), CMS export (Drupal, Joomla → Markdown for static site generators).

• HTML to Markdown syntax: <h1>Title</h1> → # Title, <strong>bold</strong> → **bold**, <a href='url'>link</a> → [link](url), <ul><li>item</li></ul> → - item. Preserves structure (headings, lists, paragraphs).
• Table conversion: <table> → GitHub Flavored Markdown table (| Header | Header |). Preserves rows, columns, alignment. Useful for data tables, comparison charts.
• Code block conversion: <pre><code>code</code></pre> → ```code``` (fenced block). <code>inline</code> → `inline`. Syntax highlighting support (```javascript).
• Clean HTML: Removes: CSS (<style>), inline styles (style='...'), empty tags (<p></p>), comments (<!-- -->), scripts (<script>). Keeps content only (no styling).
• Nested structures: Handles nested lists (<ul><li><ul><li>)), nested blockquotes (<blockquote><blockquote>), complex tables. Preserves hierarchy in Markdown.

Why use html to markdown?

HTML is verbose (<p><strong>text</strong></p>), hard to edit manually. Markdown is clean (# heading, **bold**), easy to read/write.

• Migrate content to Markdown: WordPress, Medium, Drupal content → Markdown (static site generators: Jekyll, Hugo, Gatsby). Convert HTML export to Markdown. Version control with git.
• Simplify web clippings: Copy HTML from web (articles, docs) → convert to Markdown (clean, readable). Save in notes app (Obsidian, Notion), remove styling/ads/scripts.
• Create GitHub README: HTML docs → Markdown for GitHub README. Convert existing HTML documentation to GitHub-compatible Markdown (tables, code blocks, task lists).
• Clean CMS export: CMS export (Drupal, Joomla) = messy HTML (inline styles, empty divs). Convert to clean Markdown (remove styling, keep content). Easier to edit.
• Email to Markdown: HTML emails → Markdown (plain text, no formatting). Archive emails as Markdown notes. Remove inline styles, tracking pixels, scripts.
• Learn Markdown syntax: Compare HTML input with Markdown output. See conversion: <h1> → #, <strong> → **, <a> → []. Understand Markdown structure.

When to use html to markdown

Use whenever you need to convert HTML to Markdown format.

• Migrating from WordPress/Medium to static site generators (Jekyll, Hugo, Gatsby).
• Converting web articles to Markdown notes (Obsidian, Notion, Roam).
• Creating GitHub README from HTML documentation.
• Cleaning CMS export (Drupal, Joomla HTML → clean Markdown).
• Converting HTML emails to plain text Markdown.
• Documentation migration (HTML docs → Markdown for Docusaurus, VuePress).
• Learning Markdown (see HTML → Markdown conversions).
• Simplifying HTML (remove CSS, scripts, keep content).

How to use html to markdown

Paste HTML, convert to Markdown, copy result.

1. Paste HTML: Copy HTML from web (Ctrl+U for page source, or inspect element), CMS export, email. Paste in input area. Or upload .html file.
2. Configure options (optional): GitHub Flavored Markdown (GFM: tables, task lists, strikethrough) or CommonMark (standard). Clean HTML: remove CSS, styles, empty tags, comments. Code block style: fenced (```) or indented (4 spaces).
3. Convert to Markdown: Click Convert. Tool parses HTML, generates Markdown. Shows: # Heading, **bold**, [link](url), - list, | table |.
4. View Markdown output: Right pane shows Markdown. Headings (#), lists (-), links ([text](url)), images (), tables (| col |), code (```).
5. Preview (optional): Toggle preview to see rendered Markdown (HTML output from Markdown). Verify conversion accuracy (headings, lists, tables look correct).
6. Copy Markdown: Click Copy to copy Markdown. Paste into: README.md (GitHub), .md files (Obsidian), docs (Docusaurus), static site generator (Jekyll, Hugo).
7. Download (optional): Download as .md file. Save for version control (git), share with team, use in documentation pipeline.

Key features

• Clean conversion: Removes CSS, inline styles, empty tags, comments, scripts. Keeps content only (headings, paragraphs, lists, links, images). Output: clean, readable Markdown.
• GitHub Flavored Markdown: Tables (| Header |), task lists (- [ ] Task), strikethrough (~~text~~), fenced code blocks (```language). Compatible with GitHub README.
• Table support: Converts <table> to Markdown table. Preserves rows, columns, alignment (left, center, right). Example: <th align='center'> → |:---:|.
• Code block conversion: <pre><code> → ``` (fenced block), <code> → ` (inline). Detects language from class (class='language-javascript' → ```javascript).
• Nested structures: Nested lists (<ul><li><ul>), nested blockquotes (> >), complex tables. Maintains hierarchy in Markdown (indentation for nested lists).
• Link and image conversion: <a href='url'>text</a> → [text](url), <img src='url' alt='text'> → . Preserves URLs, alt text, titles.
• Customizable output: Options: GFM vs CommonMark, fenced vs indented code blocks, clean HTML (remove styles), preserve HTML (keep certain tags like <video>).

Common use cases

• WordPress to Markdown: Export WordPress post (HTML). Convert to Markdown. Use in Jekyll, Hugo, Gatsby (static site generators). Migrate blog from WordPress to Markdown-based CMS.
• Web article to notes: Copy HTML from web article (inspect element, copy outer HTML). Convert to Markdown. Save in Obsidian, Notion (clean, no styling). Remove ads, tracking, scripts.
• HTML docs to README: Existing HTML documentation → GitHub README.md. Convert <h1>, <ul>, <table> to Markdown. GitHub renders Markdown (# heading, | table |).
• Email to Markdown: HTML email → Markdown (plain text). Remove inline styles, tracking pixels. Archive email as .md file (version control, search).
• CMS export cleanup: Drupal/Joomla HTML export (messy: inline styles, empty divs). Convert to clean Markdown (no styling). Edit Markdown (easier than HTML).
• Table extraction: HTML page with data table (<table>). Convert to Markdown table (| col1 | col2 |). Copy to GitHub README, documentation, Markdown editor.

Examples

HTML to Markdown conversion examples.

<h1>Title</h1>\n<p>This is <strong>bold</strong> and <em>italic</em> text.</p>

# Title\n\nThis is **bold** and *italic* text.

<ul><li>Item 1</li><li>Item 2</li></ul>\n<ol><li>First</li><li>Second</li></ol>

- Item 1\n- Item 2\n\n1. First\n2. Second

<a href='https://example.com'>Visit</a>\n<img src='logo.png' alt='Logo'>

[Visit](https://example.com)\n![Logo](logo.png)

<table><tr><th>Name</th><th>Age</th></tr><tr><td>Alice</td><td>30</td></tr></table>

| Name | Age |\n|------|-----|\n| Alice | 30 |

<pre><code class='language-javascript'>const x = 10;</code></pre>

```javascript\nconst x = 10;\n```

Technical reference

HTML to Markdown conversion rules:

Headings

<h1>Title</h1> → # Title, <h2> → ##, <h3> → ###, up to <h6> → ######. Setext style (underline): <h1> → Title\n===, <h2> → Title\n---. Use ATX (# style, more common).

Emphasis

<strong>bold</strong> or <b>bold</b> → **bold**. <em>italic</em> or <i>italic</i> → *italic*. <del>strikethrough</del> → ~~strikethrough~~ (GFM only).

Links

<a href='https://example.com'>link</a> → [link](https://example.com). With title: <a href='url' title='title'>link</a> → [link](url 'title'). Bare URL: <a href='url'>url</a> → <url> (autolink).

Images

<img src='url' alt='alt text'> → . With title: <img src='url' alt='alt' title='title'> → . No width/height in Markdown (use HTML <img> if needed).

Lists

<ul><li>item</li></ul> → - item (unordered). <ol><li>item</li></ol> → 1. item (ordered). Nested: indent 2 spaces (- item\n - nested). Task list: <input type='checkbox'> → - [ ] (GFM).

Code

<code>inline</code> → `inline`. <pre><code>block</code></pre> → ```\nblock\n``` (fenced) or indent 4 spaces (legacy). Language: <code class='language-js'> → ```javascript.

Tables (GFM)

<table><tr><th>Header</th></tr><tr><td>Data</td></tr></table> → | Header |\n|--------|\n| Data |. Alignment: <th align='center'> → |:---:|, align='right' → |---:|, default → |---|.

Blockquotes

<blockquote>quote</blockquote> → > quote. Nested: <blockquote><blockquote> → > > nested. Multi-line: > Line 1\n> Line 2.

Line breaks

<br> → two spaces + newline ( \n) or \\ (backslash). <p>Para 1</p><p>Para 2</p> → Para 1\n\nPara 2 (blank line between paragraphs).

Horizontal rule

<hr> → --- or *** or ___ (3+ chars). Separates sections.

Common mistakes to avoid

Expecting perfect conversion of complex HTML (nested tables, custom CSS)

Why it happens: Markdown = limited features (no CSS, no custom styling, simple tables only). Complex HTML (colspan, rowspan, inline styles) doesn't map to Markdown. Conversion = best effort (may lose formatting).

How to avoid it: Simplify HTML before conversion (remove complex tables, CSS). Or keep HTML for complex elements (Markdown supports inline HTML: <details>, <video>). Tool shows warnings for unsupported features.

Forgetting to clean HTML (keeps inline styles, scripts)

Why it happens: Without cleaning, Markdown includes: <p style='color:red'>text</p> (inline styles), <script>...</script> (scripts). Markdown renderers may strip or display as text (ugly output).

How to avoid it: Enable 'Clean HTML' option (removes styles, scripts, empty tags). Or manually clean HTML before conversion (remove <style>, <script>, style='...').

Using indented code blocks (4 spaces) instead of fenced (```)

Why it happens: Indented code blocks (4 spaces) = legacy, no syntax highlighting. Fenced blocks (```) = modern, supports language (```javascript). GitHub, Obsidian prefer fenced.

How to avoid it: Use fenced code blocks: ```language\ncode\n```. Tool default: fenced (change in options if needed). Specify language for syntax highlighting.

Not previewing Markdown output (conversion errors unnoticed)

Why it happens: Conversion may have errors: broken links ([text]()), malformed tables (| col |), incorrect nesting. Without preview, errors not caught until publishing.

How to avoid it: Use preview mode (render Markdown to HTML). Check: headings correct level (#, ##), lists indented, tables formatted, links work. Fix Markdown before using.

Expecting HTML attributes in Markdown (id, class, style)

Why it happens: Markdown doesn't support HTML attributes (no id='...', class='...', style='...'). Conversion drops attributes. <h1 id='intro'> → # (id lost).

How to avoid it: If need attributes, keep HTML: <h1 id='intro'>Title</h1> (Markdown allows inline HTML). Or use Markdown extensions (some support {#id}, {.class}).

Frequently asked questions

Can I convert Markdown back to HTML?

Yes, use Markdown renderer (marked.js, markdown-it, GitHub). Markdown → HTML = common (static site generators). HTML → Markdown → HTML = lossy (formatting lost).

What happens to CSS and inline styles?

Removed by default (Markdown = no styling). Enable 'Clean HTML' to strip <style>, style='...'. Or preserve HTML (keep <span style='...'> as-is in Markdown, some renderers support it).

Does the tool support all HTML tags?

Common tags: yes (<h1>-<h6>, <p>, <a>, <img>, <ul>, <ol>, <table>, <code>, <strong>, <em>). Rare tags: <details>, <summary>, <video> → kept as HTML (Markdown doesn't have equivalent). Custom tags: removed.

What is the difference between GFM and CommonMark?

CommonMark = standard Markdown (headings, lists, links, code). GFM (GitHub Flavored Markdown) = CommonMark + tables, task lists, strikethrough, autolinks. Use GFM for GitHub README.

Can I convert HTML tables to Markdown?

Yes, simple tables (rows, columns). Complex tables (colspan, rowspan, nested tables) → best effort (may lose structure). GFM tables: | Header |. No merged cells in Markdown.

How do I preserve videos, iframes in Markdown?

Markdown supports inline HTML. Keep <video>, <iframe> as-is: <video src='...'></video>. Some renderers support it (GitHub, Docusaurus). Or use Markdown extensions ().

Why does my Markdown look different on GitHub vs Obsidian?

Different Markdown flavors: GitHub = GFM (tables, task lists), Obsidian = CommonMark + extensions (wikilinks, callouts). Test Markdown on target platform (GitHub, Obsidian, Hugo).

References

• GitHub Flavored Markdown
• CommonMark Specification
• Markdown Guide
• Turndown (HTML to Markdown Library)