HTML to Markdown Converter

Why convert HTML to Markdown at all

HTML is what browsers render, but it is noisy to read and edit by hand: every emphasis, link, and list is wrapped in angle-bracket tags. Markdown expresses the same structure with lightweight punctuation — **bold**, [text](url), - item — so it stays readable as plain text and converts cleanly back to HTML when needed. People reach for a converter when moving content out of a CMS or rich-text editor into a static-site generator, a README, a wiki, or an AI prompt, where Markdown is the lingua franca. This tool does that conversion entirely in your browser: it parses the HTML with the built-in DOMParser, walks the resulting tree, and emits Markdown. Nothing you paste is sent anywhere.

How the tree walk works

Rather than using fragile regular expressions on raw text, the converter builds a real document object model and then recursively visits every node. Each element type maps to a Markdown rule: an <h2> becomes ##, <strong> and <b> become **…**, <em> and <i> become _…_, <del> becomes ~~…~~, and text inside generic wrappers like <div> or <span> is unwrapped and kept. Tags that carry no textual meaning — <script>, <style>, <meta> — are dropped entirely. Because the parser understands real nesting, deeply nested lists convert correctly: each level of <ul> or <ol> adds two spaces of indentation, and ordered lists are renumbered from 1.

A worked example

Paste this snippet:

<h2>Features</h2>
<ul><li>Handles <a href="https://example.com">links</a></li></ul>
<pre><code class="language-js">console.log("hi");</code></pre>

The tool produces ## Features, then - Handles [links](https://example.com), then a fenced code block. Notice it read class="language-js" and wrote the opening fence as ```js, preserving syntax highlighting downstream. A <code> directly inside a <pre> is treated as a block, while a bare <code> mid-sentence becomes inline `backticks` — the parent tag decides.

The three options, and exactly what they do

• Preserve unknown HTML. When the walker meets a tag it has no Markdown rule for, it normally keeps just the text. Turn this on and it keeps the original outerHTML instead. Useful when your source contains custom elements or inline SVG you don't want flattened — Markdown allows raw HTML, so the output still renders.
• Reference-style links. Instead of putting each URL inline, the tool numbers every link as [text][1] and collects the definitions ([1]: https://…) at the bottom. This keeps prose lines short and readable when a paragraph is dense with links.
• Line wrap. Choose 80, 100, or 120 characters to hard-wrap long paragraphs at word boundaries. Crucially, it skips wrapping lines that start with code indentation, a fence, a heading #, a table |, or a blockquote >, because breaking those would corrupt the structure.

Tables become GitHub-flavored Markdown

An HTML <table> is rebuilt as a pipe table: the first row becomes the header, a --- separator row is inserted, and every row is padded to the same column count so the result is valid even if some <tr> elements had fewer cells. Cell contents are flattened to a single line, since Markdown tables cannot hold line breaks inside a cell.

Common mistakes and tips

• Paste fragments, not whole pages. You can paste a full document, but the body's chrome — navigation, footers, ad markup — will also be converted. Copy just the article region for the cleanest output.
• Expect cell formatting loss in tables. A list or multiple paragraphs inside one table cell will be collapsed to a single line. That is a Markdown limitation, not a bug.
• Reference links plus heavy reuse. Each link gets its own number even if the same URL appears twice, so the definitions list can grow; inline links may be tidier for short pieces.
• Use the preview to verify. The "Show Preview" panel re-renders the Markdown so you can confirm headings, lists, and code blocks survived the round trip before you copy or download the .md file.