How It Works
The converter processes Markdown line by line, detecting block-level elements (headers, code blocks, lists, blockquotes, tables, horizontal rules) and then applying inline transformations (bold, italic, links, images, inline code, strikethrough). The output is semantic HTML that uses proper tags like <strong>, <em>, <pre><code>, and <table>.
The HTML-to-Markdown direction reverses the process by parsing HTML tags and converting them back to their Markdown equivalents. All processing runs in your browser with zero server calls.
Markdown Syntax Cheat Sheet
| Element | Markdown Syntax | HTML Output |
|---|---|---|
| Heading 1 | # Title | <h1>Title</h1> |
| Heading 2 | ## Section | <h2>Section</h2> |
| Bold | **text** | <strong>text</strong> |
| Italic | *text* | <em>text</em> |
| Link | [text](url) | <a href="url">text</a> |
| Image |  | <img src="url" alt="alt" /> |
| Inline code | `code` | <code>code</code> |
| Code block | ```lang ... ``` | <pre><code>...</code></pre> |
| Unordered list | - item | <ul><li>item</li></ul> |
| Ordered list | 1. item | <ol><li>item</li></ol> |
| Blockquote | > text | <blockquote>text</blockquote> |
| Horizontal rule | --- | <hr /> |
| Strikethrough | ~~text~~ | <del>text</del> |
| Table | | H1 | H2 | | <table>...</table> |
Markdown vs HTML Comparison
| Aspect | Markdown | HTML |
|---|---|---|
| Learning curve | Minutes to learn basics | Hours to learn tags and attributes |
| Readability | Readable as plain text | Cluttered with tags |
| Flexibility | Limited to supported syntax | Full control over layout and semantics |
| Browser rendering | Needs conversion to HTML first | Rendered natively |
| Common use | README files, docs, blogs, notes | Websites, emails, rich content |
| Tooling | GitHub, Notion, Obsidian, VS Code | Every browser and web framework |
FAQ
Can I convert HTML back to Markdown?
Yes. Use the direction toggle to switch to HTML-to-Markdown mode. The converter maps HTML tags back to their Markdown equivalents:<strong> becomes **text**, <a href> becomes [text](url), and so on. Complex HTML that has no Markdown equivalent (like <div>with classes) is simplified to plain text.
Does the preview tab render actual HTML?
Yes. The Preview tab renders the generated HTML in an isolated container so you can see exactly how your Markdown will look when published. This is useful for checking table formatting, code block syntax highlighting placeholders, and heading hierarchy before copying the output.
Are GitHub-flavored Markdown features supported?
The converter supports the most widely used GFM extensions: tables (pipe syntax with header separators), fenced code blocks with language hints, and strikethrough with ~~text~~. Task lists and footnotes are not currently supported.
Will the converted HTML pass W3C validation?
The output uses semantic, self-closing, and properly nested HTML tags. It produces valid HTML fragments suitable for embedding in an existing page. For a complete valid document, wrap the output in standard <html>, <head>, and <body> tags.
Building developer documentation? Generate TypeScript interfaces from JSON or create SEO-friendly URL slugs.