Oh MyUtils

HTML to Markdown Converter - Convert HTML to MD & MD to HTML Online

Convert between HTML and Markdown formats bidirectionally with GFM support for tables, task lists, and strikethrough. 100% client-side, your data never leaves your browser.

Frequently Asked Questions

What is an HTML to Markdown converter?

An HTML to Markdown converter is a tool that transforms HTML markup (the tag-based language used to structure web pages) into Markdown syntax (a lightweight, human-readable formatting language). For example, <code>&lt;h1&gt;Title&lt;/h1&gt;</code> becomes <code># Title</code>, <code>&lt;strong&gt;bold&lt;/strong&gt;</code> becomes <code>**bold**</code>, and <code>&lt;a href="url"&gt;link&lt;/a&gt;</code> becomes <code>[link](url)</code>. This is useful when migrating content from HTML-based CMS platforms (WordPress, Drupal) to Markdown-based systems (Hugo, Jekyll, Gatsby), cleaning up web-scraped content, or converting HTML documentation into developer-friendly Markdown files for GitHub repositories and wikis.

How do I use this HTML to Markdown converter?

1. Select your conversion direction: <strong>HTML to Markdown</strong> or <strong>Markdown to HTML</strong>. 2. Paste your content into the input area (left panel on desktop, top panel on mobile), or click <strong>Sample</strong> to load example content, or click <strong>Upload</strong> to load a file. 3. The conversion happens automatically in real-time as you type. 4. For HTML-to-Markdown, adjust formatting options (heading style, bullet marker, code block style) as needed. 5. Review the converted output in the output area. 6. Click the <strong>Copy</strong> button to copy the result to your clipboard, or <strong>Download</strong> to save as a file. 7. Use the <strong>Swap</strong> button to quickly reverse the conversion direction with your current data.

Is my data safe? Does it get sent to a server?

Your data is 100% safe and never leaves your browser. This converter uses the Turndown library (for HTML-to-Markdown) and the Marked library (for Markdown-to-HTML), both running entirely in client-side JavaScript. No data is transmitted to any server, stored in any database, or logged anywhere. All parsing and conversion happens locally on your device. You can verify this by disconnecting from the internet — the tool works fully offline after the initial page load. This makes it safe for converting proprietary HTML templates, internal documentation, and sensitive content.

What HTML elements are supported for conversion to Markdown?

This converter supports all standard HTML elements that have Markdown equivalents: headings (h1-h6), paragraphs (p), bold (strong/b), italic (em/i), strikethrough (del/s), links (a), images (img), ordered lists (ol/li), unordered lists (ul/li), blockquotes (blockquote), code blocks (pre/code), inline code (code), horizontal rules (hr), and tables (table/thead/tbody/tr/th/td). It also supports GitHub Flavored Markdown extensions including tables, task lists (input type="checkbox"), and strikethrough. HTML elements without Markdown equivalents (such as div, span, form elements) are stripped cleanly, preserving only their text content.

What Markdown syntax is supported for conversion to HTML?

The Markdown-to-HTML direction supports the full CommonMark specification plus GitHub Flavored Markdown (GFM) extensions. This includes: headings (ATX # and Setext underline), emphasis and strong emphasis (* and **), links (inline and reference), images, fenced code blocks with language hints, indented code blocks, blockquotes, ordered and unordered lists (including nested), horizontal rules, GFM tables, task lists, strikethrough, and autolinked URLs. The output is clean, valid HTML that can be directly embedded in web pages.

Can I customize the Markdown output format?

Yes, when converting HTML to Markdown, you can configure several output formatting options: <strong>Heading Style</strong> (ATX with # symbols or Setext with underlines), <strong>Bullet List Marker</strong> (dash -, asterisk *, or plus +), and <strong>Code Block Style</strong> (fenced with backticks or indented with 4 spaces). These options let you match the Markdown conventions used by your project or team. All options are synced to the URL, so you can share a link with your preferred settings. Note: these options only apply to the HTML-to-Markdown direction.

What happens to CSS styles and JavaScript in the HTML during conversion?

CSS styles (both inline style attributes and class names), JavaScript code (script tags and event handlers), and other non-content elements are stripped during conversion. The converter focuses on content-level conversion only — it extracts the semantic structure and text content from HTML, not visual styling. This is by design, as Markdown is a content format that does not support styling. If you need to preserve specific formatting, consider using inline HTML within your Markdown (most Markdown renderers support embedded HTML).

Code Examples

// HTML to Markdown conversion using Turndown library
// Install: npm install turndown turndown-plugin-gfm

const TurndownService = require('turndown');
const { gfm } = require('turndown-plugin-gfm');

function htmlToMarkdown(html, options = {}) {
  const {
    headingStyle = 'atx',
    bulletListMarker = '-',
    codeBlockStyle = 'fenced',
  } = options;

  try {
    const turndownService = new TurndownService({
      headingStyle,
      bulletListMarker,
      codeBlockStyle,
      hr: '---',
      fence: '```',
      emDelimiter: '_',
      strongDelimiter: '**',
      linkStyle: 'inlined',
    });
    turndownService.use(gfm);
    const markdown = turndownService.turndown(html);
    return { success: true, output: markdown };
  } catch (error) {
    return { success: false, error: error.message };
  }
}

// Markdown to HTML using marked
// Install: npm install marked
const { marked } = require('marked');

function markdownToHtml(markdown) {
  try {
    const html = marked.parse(markdown, { gfm: true });
    return { success: true, output: html };
  } catch (error) {
    return { success: false, error: error.message };
  }
}

// Example usage
const html = '<h1>Hello</h1><p>This is <strong>bold</strong></p>';
const result = htmlToMarkdown(html);
console.log(result.output);
// Output: # Hello\n\nThis is **bold**

Related Tools