Skip to content
markdown→html

Element Converter

Markdown Links & Images to HTML

Paste Markdown links or images to generate clean HTML instantly. The converter maps [text](url) to <a> elements, ![alt](src) to <img> elements, resolves reference-style definitions, and preserves title attributes in the output.

input.md

Visit the CommonMark spec for details.

Site logo

Build badge

Docs live on the reference site.

20 words272 chars✓ HTML 0 B

Key facts

Link syntax
[text](url)
Link output
<a href="url">text</a>
Image syntax
![alt](src)
Image output
<img src alt>
Title attribute
(url "Title")

How do Markdown links convert to HTML?

A Markdown link converts to an HTML anchor element. The bracket text becomes the link text, the URL becomes the href attribute, and an optional quoted title becomes the title attribute.

The form is [text](url "Title"), with the title optional. For all authoring variants — heading anchors, autolinks, escaping — see Markdown Links.

markdown
[CommonMark spec](https://commonmark.org "The spec")
html
<a href="https://commonmark.org" title="The spec">CommonMark spec</a>

How do Markdown images convert to HTML?

A Markdown image converts to an <img> element. The bracket text becomes the alt attribute, the path becomes src, and an optional quoted title becomes the title attribute. <img> is a void element — no closing tag.

The image form is ![alt](src) — identical to a link with a leading exclamation mark. Authoring rules, alt-text guidance, and sizing live in Markdown Images.

markdown
![Site logo](https://example.com/logo.png)
html
<img src="https://example.com/logo.png" alt="Site logo">

How do reference-style links convert to HTML?

Reference-style links convert to the identical <a> element as inline links. The [text][label] usage pairs with a [label]: url definition elsewhere in the document, and the definition line is removed from the HTML output.

Reference style keeps long URLs out of your prose. Definitions can sit anywhere — most writers collect them at the document's end. Labels are case-insensitive.

markdown
Docs live on [the reference site][docs].

[docs]: https://example.com/docs
html
<p>Docs live on <a href="https://example.com/docs">the reference site</a>.</p>

How do you make an image a link?

Wrap the image syntax inside link syntax: [![alt](image-src)](target-url). The converter emits an <a> element containing the <img>, so clicking the image navigates to the target URL. Badges use this pattern.

markdown
[![Build badge](https://example.com/badge.svg)](https://example.com/build)
html
<a href="https://example.com/build"><img src="https://example.com/badge.svg" alt="Build badge"></a>

Frequently Asked Questions

Do converted links open in a new tab?
No. Markdown has no new-tab syntax, so the output contains no target attribute. Add target="_blank" rel="noopener" to the HTML output manually if you need new-tab behaviour.
Why is my image not showing?
Check the src path first: relative paths resolve against the page hosting the HTML, not your Markdown file. A broken path renders the alt text instead of the image.
What is image alt text for?
Alt text describes the image for screen readers and displays when the image fails to load. The bracket text in ![alt](src) becomes the alt attribute verbatim.
Do plain URLs convert to links automatically?
Under GitHub Flavored Markdown, yes — bare URLs like https://example.com autolink. In strict CommonMark they stay plain text unless wrapped in angle brackets: <https://example.com>.