WebToolsPlanet
Converter Tools

HTML to Markdown Converter

Convert HTML into readable Markdown for docs, notes, README files, and content migrations. Paste HTML markup, clean the structure, and copy Markdown that is easier to edit or version control.

Last updated: March 25, 2026

Client-Side Processing
Input Data Stays on Device
Instant Local Execution
Something wrong with this tool? Report it

Markdown workflow shortcuts

Convert Markdown to HTMLWrite Markdown in EditorClean Markdown with FormatterCheck Markdown Output in Viewer

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is HTML to Markdown Converter?

Markdown is a lightweight text formatting language created by John Gruber in 2004, designed to be readable as plain text while converting to valid HTML when rendered. It is now the de facto standard for developer documentation, README files, pull request descriptions, wiki pages, and static site generators (Jekyll, Hugo, Eleventy, Astro). The most widely supported variant is GitHub Flavored Markdown (GFM), which adds tables, fenced code blocks, strikethrough, and task lists.

Converting HTML to Markdown is a common need when migrating content: moving a WordPress blog to a Markdown-based CMS, converting a web-scraped article into a format for a documentation site, exporting Google Docs HTML to a Git repository, or archiving web content for long-term readability. Pure HTML is verbose and difficult to edit directly; Markdown is compact, readable, and version-control-friendly. This tool converts all standard HTML elements — headings, emphasis, links, images, ordered/unordered lists, tables, blockquotes, and code blocks — to their Markdown equivalents.

How to Use HTML to Markdown Converter

1

Paste your HTML code (or a full web page excerpt) into the left "HTML Input" pane

2

The Markdown output updates instantly in the right pane as you type or paste

3

Toggle "GitHub Flavored Markdown" on if your target platform supports GFM (tables, strikethrough, task lists)

4

Check the generated Markdown for any complex HTML that could not be automatically converted (shown as preserved HTML)

5

Click "Copy Markdown" to copy to clipboard, or "Download .md" to save it as a Markdown file

Common Use Cases

  • Migrating WordPress blog post content into a Next.js MDX or Contentful Markdown CMS
  • Converting scraped article HTML into clean Markdown for a documentation knowledge base
  • Transforming Google Docs exported HTML into Markdown for a project's Git repository README
  • Converting email newsletter HTML into Markdown format for archiving in a text-readable format
  • Migrating legacy CMS content (Drupal, Joomla) into a modern Gatsby or Astro static site
  • Converting StackOverflow answers (copy HTML) into Markdown for internal wiki documentation
  • Transforming a Bootstrap-era HTML page into clean Markdown as the first step in a redesign
  • Extracting and converting the body HTML from email to Markdown for clean documentation

Example Input and Output

Converting a simple HTML article excerpt to GFM Markdown:

HTML input
<h2>Getting Started with CSS Grid</h2>
<p>CSS Grid is a <strong>two-dimensional</strong> layout system. 
Learn more at <a href="https://css-tricks.com/snippets/css/complete-guide-grid/">CSS-Tricks</a>.</p>
<ul>
  <li>Define <code>display: grid</code> on a container</li>
  <li>Use <code>grid-template-columns</code> to set columns</li>
</ul>
<blockquote>
  <p>Grid is the first CSS module created specifically to solve layout problems.</p>
</blockquote>
Markdown output
## Getting Started with CSS Grid

CSS Grid is a **two-dimensional** layout system. 
Learn more at [CSS-Tricks](https://css-tricks.com/snippets/css/complete-guide-grid/).

- Define `display: grid` on a container
- Use `grid-template-columns` to set columns

> Grid is the first CSS module created specifically to solve layout problems.

How This Tool Works

The HTML input string is parsed by the browser's native DOMParser() (DOMParser.parseFromString(html, 'text/html')), producing a real DOM tree. The converter then performs a depth-first traversal of this DOM tree, visiting each element and applying a rule set to serialize it to its Markdown equivalent. Heading tags map to # prefixes, <strong> maps to **, anchor tags serialize their href, list items recurse for nesting depth. The final Markdown string is assembled during the traversal and displayed in real time as the user types.

Technical Stack

Browser DOMParser APIDOM tree traversalTurndown.js-style rule engineGitHub Flavored Markdown rulesClient-side only

Client-Side Processing

HTML parsing and Markdown generation run entirely in your browser using a JavaScript HTML parser and Markdown serializer. Your content is never sent to a server.

For CMS Migrations

When migrating a large number of blog posts from WordPress or Drupal, consider using the WordPress REST API or WP-CLI to export post HTML content programmatically, then running each through a Node.js turndown script (the same library used here) in batch. Do not manually paste hundreds of posts.

WYSIWYG Editor Integration

Many WYSIWYG editors (TipTap, Quill, ProseMirror, TinyMCE) output HTML internally. If your CMS requires Markdown storage, place this conversion step in your content pipeline: WYSIWYG → HTML → Markdown conversion via a library like Turndown.js → stored as .md file. Do not rely on regex-based HTML-to-Markdown conversion for production pipelines.

Frequently Asked Questions

What HTML tags can be converted to Markdown?

Supported elements: headings (<h1>–<h6> → # through ######), emphasis (<strong> → **, <em> → *), links (<a href> → [text](url)), images (<img> → ![alt](src)), ordered and unordered lists (<ol>/<ul>/<li>), blockquotes (<blockquote> → >), inline code (<code> → `backtick`), fenced code blocks (<pre><code> → triple-backtick fences), and tables (<table><tr><td>) → GFM pipe tables. Complex nested or positional HTML (CSS-styled divs, spans) that has no Markdown equivalent is preserved as raw HTML.

What is GitHub Flavored Markdown (GFM)?

GFM is an extension of standard Markdown created by GitHub. It adds: pipe tables (| col1 | col2 |), fenced code blocks with syntax highlighting (```javascript), ~~strikethrough~~, task list checkboxes (- [ ] task), and @mentions and #issue links (on GitHub). GFM is supported by GitHub, GitLab, Bitbucket, many static site generators, and Notion. When targeting these platforms, enable GFM mode.

What happens to CSS styles in the HTML?

CSS styling (color, font-size, background-color, class attributes) is discarded, since Markdown has no CSS concept — formatting is purely semantic. Semantic formatting (bold, italic, headings, lists) is preserved. If visual styling is critical, the HTML should remain as HTML rather than being converted to Markdown.

Can I convert a full webpage?

Yes, but paste only the body content — avoid the <head> section with script/link/style tags. For best results, paste only the main content area (<article>, <main>, or the div containing the actual text). Navigation menus, sidebars, and footers will convert to confusing Markdown clutter.

What is the difference between HTML to Markdown and Markdown to HTML conversion?

HTML to Markdown (this tool) takes verbose, tag-heavy HTML and simplifies it to human-readable shorthand. Markdown to HTML (reverse operation, also available) takes Markdown source and renders it into proper HTML for display. The Markdown → HTML direction is lossless. HTML → Markdown is lossy — any HTML features without Markdown equivalents (CSS styling, data attributes, ARIA attributes) are discarded.

Will the converter handle nested lists?

Yes. Nested <ul> and <ol> inside <li> elements are converted to properly indented Markdown lists. Each nesting level is indented by 2 spaces (or 4 spaces for ordered lists, per CommonMark spec). More than 3 levels of nesting is rare in practice and may render inconsistently across Markdown parsers.

Related Tools

Part of Collections