HTML to Markdown

How do you turn HTML into usable Markdown?

Paste your HTML into HTML Input; Markdown Output updates without a conversion button. For a reproducible example, use the default settings: ATX headings, dash bullets, backtick fences, inline links, asterisk emphasis, and no content filtering. This fragment contains a heading, strong text, a relative link, and a checked task:

<h2>Release notes</h2>
<p>Read the <strong>setup</strong> guide at <a href="/developer-tools/">Tools</a>.</p>
<ul><li><input type="checkbox" checked>Reviewed</li></ul>

The output is:

## Release notes

Read the **setup** guide at [Tools](/developer-tools/)\.

- [x] Reviewed

The relative destination stays /developer-tools/; it is not resolved against the original website. Before moving the result to another site, check that destination yourself. Click Copy Markdown for the text or Download .md for a file. Use Compare to inspect structure before exporting.

Why convert HTML back to Markdown?

Conversion is useful when migrating article fragments, documentation, or rich-text exports into a Markdown workflow. It replaces supported semantic tags with editable text syntax and drops presentation attributes. The result is easier to review as text, but it is a content transformation rather than a copy of the page's appearance.

Start with the relevant article fragment when possible. A whole HTML export often includes menus, repeated footer text, and interface controls that do not belong in the destination document. For the reverse direction, use Markdown to HTML. Conversion in either direction should be reviewed; it is not a lossless round trip.

How does the browser parse the HTML?

The converter passes the input to DOMParser as text/html, then walks the parsed element tree. It starts from the body unless main-content extraction is enabled. The document head is excluded; script, style, meta, and link elements are skipped. Browser parsing handles HTML entities before text is converted, so & becomes an ampersand.

Literal Markdown punctuation is escaped in ordinary text. For example, a paragraph containing literal *draft* produces \*draft\* rather than italic text. Source newlines inside ordinary paragraphs become spaces; an explicit HTML br creates a Markdown hard break. This distinction prevents source-code indentation from becoming unwanted document formatting.

How do you choose the Markdown output style?

Open Output options to match your destination's conventions. Defaults apply on a fresh visit; previously saved browser settings can change the starting configuration. These controls change syntax rather than adding CSS styling:

Formatting controls and their effects

Control	Choices and behavior
Headings	ATX (# Title) or Setext (underline); Setext applies only to levels 1 and 2.
Bullet marker	Dash, asterisk, or plus for unordered lists.
Code fence	Three backticks or three tildes, extended when that fence occurs inside the code.
Links	Inline destinations or a Reference list; repeated destinations share one reference number.
Emphasis	Asterisk or underscore for em and i elements; strong and b use double asterisks.

Preformatted blocks preserve internal blank lines. A nested code element's language- class supplies the fence language label. Inline code containing backticks uses a longer delimiter to keep the code content intact.

What happens to HTML tables and GFM features?

The converter emits pipe tables, strikethrough, and task-list markers associated with the GitHub Flavored Markdown specification. CommonMark alone does not define those extensions. Check that your destination enables them rather than assuming every Markdown renderer will display the same result.

Every table uses its first nonempty row as the header, followed by a dash separator, regardless of whether the HTML explicitly supplies a header section. Shorter rows receive empty cells to match the widest row. A colspan adds empty cells after the original content, with each span limited to 50 columns. A rowspan does not duplicate content down the table.

Cell pipes are escaped and explicit line breaks become <br>. Captions are omitted. Table loss report counts merged cells, nested tables, cells containing block content, additional header rows, and captions. It analyzes the original input, so warnings can still mention a table removed by cleanup options. A report with no detected structures is not a guarantee of visual equivalence.

How are nested lists and checkboxes converted?

Nested lists are indented by the parent marker width plus one space: two spaces after a dash marker, three after 1., and four after 10.. Ordered lists read the HTML start attribute and increment their numbering. This is more specific than assuming every nesting level always adds two spaces.

A checkbox directly inside a list item becomes [x] when the checked attribute is present or [ ] when absent. Other input elements produce no text. Paragraphs and nested lists within an item are processed recursively, so review complex list content in Compare and in the renderer where you will publish it.

How can you keep only the main content?

The main-content checkbox removes nav, aside, footer, form, and selected landmark roles. It removes header elements outside article, main, or role=main containers. Explicit hidden attributes, aria-hidden="true", and inline display: none are recognized; external stylesheet visibility is not evaluated.

After cleanup, the tool chooses the main, role=main, or article element with the longest trimmed text, falling back to the body. This heuristic can select a broader container than you intended. Use Extra remove selectors (CSS, comma separated), such as .ad, #cookie-banner, for precise exclusions. Selector removal runs even with the main-content checkbox off; invalid selectors are ignored.

What are the file, preview, and formatting limits?

Open file accepts .html and .htm files up to 5 MB, implemented as 5 × 1024 × 1024 bytes. Dropping a file uses the same checks and reads the first dropped file. An opened notes.html downloads as notes.md. Pasting a URL does not fetch that page; supply its HTML or copied rendered content instead.

Images become alt text plus the original src destination; CSS classes, colors, and layout are discarded. Underline becomes double-underscore emphasis. Compare sanitizes both panes, removing styles, controls, and resource destinations, so it checks semantic formatting rather than reproducing a live page. Conversion runs locally, and output preferences are stored in browser local storage. Review link and image destinations in the Markdown itself before publishing.