ToolBoxOnline
Developer

HTML to Markdown vs Markdown Preview The Conversion Round Trip and Why It Never Comes Back Exactly the Same

Convert HTML to Markdown, then preview the Markdown back to HTML. The result is close to the original — but never identical. Here's what gets lost in each direction and why.

HTML to MarkdownMarkdown previewconversionformattinground trip

You have an old blog post in HTML. You want to switch to Markdown for your static site generator. You use an HTML to Markdown converter — paste the HTML, get clean Markdown. Then you preview the Markdown to make sure it looks right. The rendered HTML is close to your original, but the links are in a different order, the table alignment is slightly off, and some inline formatting disappeared. What happened?

HTML → Markdown → HTML is a lossy round trip. Information is lost in both directions. Here is exactly what gets lost, why, and how to minimize the damage.

HTML → Markdown: What Gets Dropped

Alignment attributes. HTML tables support align="right" on cells, <th> vs <td> semantics, colspan and rowspan. Markdown tables have none of these. A Markdown table is always left-aligned text with pipe separators. Complex HTML tables with merged cells cannot be represented in basic Markdown at all — the converter either drops the alignment or approximates with extra spaces.

Inline styling. <span style="color: red; font-size: 18px;">Important</span> has no Markdown equivalent. Markdown has bold, italic, code, links, and images — that is it. Inline CSS styles, class names, and IDs are silently dropped. The text content survives. The presentation does not.

Image dimensions. <img src="photo.jpg" width="600" height="400"> becomes ![alt text](photo.jpg). The width and height attributes are gone. If your layout depended on specific image sizes, the Markdown version will render at the image's native resolution.

Nested lists with different types. HTML supports ordered lists with custom start numbers and mixed ordered/unordered nesting. Markdown's list handling varies by implementation — some reset numbering on nested lists, some do not. The converter makes a best guess, but complex nested lists often need manual cleanup.

Markdown → HTML: What Gets Added (That Was Not There Before)

When you use a Markdown preview to render Markdown back to HTML, the renderer adds its own HTML structure. A Markdown heading ## Section becomes <h2 id="section">Section</h2> — the renderer added an id attribute for anchor linking. A code block gets wrapped in <pre><code> with syntax highlighting classes. These additions are useful but they are not in the original HTML.

Different Markdown renderers produce different HTML from the same Markdown. GitHub Flavored Markdown, CommonMark, and original Markdown all handle edge cases differently — especially around line breaks in paragraphs, underscore handling in the middle of words, and link reference definitions. The Markdown you generate from HTML will render correctly only in the renderer you target.

The Practical Workflow: Convert, Then Diff

Step 1: Convert HTML → Markdown with the HTML to Markdown converter. Step 2: Preview the Markdown to see the rendered output. Step 3: Use a text diff tool to compare the original HTML and the rendered HTML. Step 4: Manually fix the differences that matter for your content — tables, image sizes, complex formatting. Step 5: Once the rendered output matches your expectations, save the Markdown as your canonical source.

The conversion is a starting point, not a finished product. The tools get you 90% of the way. The last 10% — alignment, dimensions, edge cases — requires human judgment about what matters for your content.

Start your conversion at HTML to Markdown and preview the result at Markdown preview — the round trip is lossy, but with the right workflow the losses are manageable.

Tools mentioned in this article

شارك هذه الأداة