To create a link in Markdown, write [link text](url) — the visible text in square brackets, immediately followed by the destination URL in parentheses. To embed an image, use the same pattern with a leading exclamation mark: . That single ! is the entire difference between a clickable link and an inline picture. Both work across every Markdown flavor — CommonMark, GitHub Flavored Markdown, Obsidian, and the rest — because they are part of the original 2004 Markdown spec.
That's the summary an AI Overview gives you. Here's what it can't show you: exactly which character does which job, when to reach for reference-style links instead of inline ones, and the three quirks (new-tab behavior, image sizing, and case-sensitive paths) that trip people up in real documents. The diagram below dissects the syntax character by character, and the table further down tells you which of the four link/image forms to use for each situation.
Markdown Link Syntax Fundamentals
Creating links in Markdown is one of the most essential skills for content creators and developers. Markdown provides elegant syntax for links that's far simpler than HTML while remaining readable in the source. Learning link syntax opens up rich content creation possibilities.
The basic Markdown link syntax consists of link text in square brackets followed by the URL in parentheses. The structure is straightforward: [link text](url). This simplicity has made Markdown popular for documentation, blogs, and content management.
When you write [Visit Inventive HQ](https://inventivehq.com), the Markdown renderer converts it to HTML like <a href="https://inventivehq.com">Visit Inventive HQ</a>. The text between brackets appears as clickable link text, and the URL in parentheses becomes the href attribute.
Basic Link Examples
The simplest links use full URLs:
[Google](https://www.google.com)
[Wikipedia](https://www.wikipedia.org)
[My Blog](https://example.com/blog)
When rendered, each displays clickable text that leads to the specified URL. The link text should describe the destination, helping users understand where the link goes.
Relative URLs work just as well for links within the same site:
[Home](/)
[About Us](/about)
[Services](/services/security)
[Blog Post](/blog/jwt-security)
Relative URLs are especially useful in documentation and blogs where you're linking between pages on the same domain. They're shorter, more portable, and continue working if your domain changes.
You can even create links to specific sections using fragment identifiers:
[Jump to security section](#security)
[See related article](#related-articles)
[Back to top](#top)
These links take users to sections with matching heading IDs on the same page or other pages.
Email Links
While not strictly links to websites, email links are common in Markdown. The syntax uses the same basic structure:
[Email us](mailto:contact@example.com)
When clicked, this opens the user's default email client with the specified email address in the "to" field.
Advanced Link Features
Markdown supports optional titles on links, which appear as tooltips when hovering:
[Inventive HQ](https://inventivehq.com "Cybersecurity Services")
[Blog](https://example.com/blog "Read our latest articles")
The text in quotes appears in a tooltip when users hover over the link in most browsers.
Markdown also supports reference-style links, useful when the same URL appears multiple times:
This is a [link to Google][1] and another [link to Google][1].
[1]: https://www.google.com
Define the URL once and reference it multiple times. This approach keeps long URLs out of the text, improving readability and making updates easier.
Numbered references work fine, but many prefer meaningful names:
Check out our [security guide][sec-guide] and [privacy policy][privacy].
[sec-guide]: https://example.com/guide
[privacy]: https://example.com/privacy
Image Syntax Fundamentals
Markdown image syntax is nearly identical to links, with one addition: an exclamation mark before the brackets. The structure is .
The alt text (alternative text) is crucial for accessibility. Screen readers read alt text to visually impaired users, and search engines use alt text to understand images. Always write descriptive alt text.
When rendered, these display actual images with the specified alt text. If the image fails to load, users see the alt text instead.
Image URLs and Paths
Images can use absolute URLs:
Or relative paths for images in your project:
Relative paths are often better for projects and documentation. They work regardless of your domain and continue working if you move your project.
Image Sizing and Advanced Features
Standard Markdown doesn't support sizing images, but many Markdown flavors add support:
HTML notation works in some Markdown processors:
<img src="image.jpg" alt="Description" width="300" height="200">
Some systems support an extended syntax:
{width=300 height=200}
Your specific Markdown processor determines which syntax works. Check documentation for your platform.
Combining Links and Images
You can create clickable images by combining link and image syntax:
[](https://example.com)
This displays an image that, when clicked, navigates to the linked URL. Useful for logo links and thumbnail galleries.
Which Form Should I Use? A Quick Reference
There are four link/image forms and one HTML escape hatch. Here is when to reach for each:
| Form | Syntax | Renders as | Use it when |
|---|---|---|---|
| Inline link | [text](url) | Clickable text | The default. A URL you use once. |
| Reference link | [text][id] + [id]: url | Clickable text | The same long URL repeats, or you want prose to stay readable. |
| Autolink | <https://url> | The bare URL, clickable | You want the URL itself shown and clickable with zero label. |
| Image |  | Inline picture | Embedding a static image; the bracket text is alt text, not clickable. |
| Clickable image | [](url) | Picture that links | Logo links, thumbnail galleries, badges. |
Raw HTML <a>/<img> | <a href target>, <img width> | Full control | You need target="_blank", rel, image sizing, or loading="lazy" — things pure Markdown can't express. |
Rule of thumb: stay in Markdown for anything readers should be able to read as plain text, and drop to HTML only for the three attributes Markdown genuinely lacks — new-tab targets, image dimensions, and lazy loading.
Best Practices for Links
Write descriptive link text. Instead of "click here," write "Read our security guide." Descriptive text helps users understand destinations before clicking and benefits search engines.
Use meaningful URLs when possible. Links like "/blog/jwt-security" are clearer than "/blog/index.php?id=42."
When linking externally, consider opening in new tabs. This keeps users on your site while allowing them to explore external resources:
[External Link](https://external-site.com "Opens in new tab")
Note: Standard Markdown doesn't control whether links open in new tabs. Use HTML when this matters:
<a href="https://external-site.com" target="_blank">External Link</a>
Check link validity regularly. Broken links hurt user experience and SEO. Use automated tools to regularly check links in larger projects.
Avoid link rot by keeping links current. When updating content, verify linked resources still exist and are relevant.
Best Practices for Images
Always include alt text. Alt text is essential for accessibility and SEO. Write concise descriptions of what the image shows.
Use appropriate image formats. JPEGs work well for photographs, PNGs for graphics with transparency, and SVGs for scalable graphics.
Optimize image file sizes. Large images slow page loads. Compress images appropriately for the web without sacrificing necessary quality.
Use descriptive filenames. Instead of "image123.jpg," use "team-meeting-2024.jpg." Descriptive names help with organization and provide minor SEO benefits.
Consider responsive images in web contexts. Modern web development uses techniques to serve appropriately-sized images to different devices.
Create images that are readable and clear. Small text in images isn't readable on mobile devices. Ensure images work at any size.
Markdown Flavor Differences
Different Markdown flavors support different features. GitHub Flavored Markdown (GFM) extends standard Markdown with additional features. CommonMark is a standardized specification. Some systems like Notion or Obsidian add their own extensions.
Check what Markdown flavor your platform supports. The core link and image syntax is consistent, but advanced features vary.
Interactive Markdown Previews
Many modern editors provide live Markdown preview. As you write Markdown syntax, the preview updates in real-time, showing how links and images will render.
Using a Markdown preview tool helps you verify links and images work correctly without publishing. Online Markdown preview tools available on Inventive HQ and many other sites let you test syntax instantly.
Common Mistakes to Avoid
Forgetting the exclamation mark for images: [alt text](url) is a link,  is an image.
Incorrect bracket matching: [text]url and text(url) don't work. Brackets must come first, then parentheses.
Not escaping special characters in URLs: Some characters need escaping. If your URL contains parentheses or other special characters, use full HTML syntax.
Broken image paths: Test image URLs thoroughly. Relative paths are fragile if you move files.
Poor alt text: "image," "photo," or empty alt text isn't helpful. Write descriptive alt text that conveys the image's meaning.
Troubleshooting Links and Images
Most link and image failures come from a handful of specific causes. Match your symptom to its fix:
| Symptom | Likely cause | Fix |
|---|---|---|
Link shows as literal [text](url) text | Space between ] and (, or missing ( | Remove the space; brackets and parentheses must touch: [text](url) |
| Image shows as a clickable link, not a picture | Missing leading ! | Add the exclamation mark:  |
| Image broken on the server but fine locally | Case-sensitive path on Linux | Match the exact filename case: Logo.PNG ≠ logo.png |
| External link works, relative link 404s | Wrong base path | Use a root-relative path (/blog/post) instead of ./post |
URL with ( or ) breaks the link | Unescaped parentheses in the URL | Escape as %28/%29, or use an HTML <a> tag |
| Link opens in same tab, you wanted new | Markdown can't set target | Use <a href="..." target="_blank" rel="noopener"> |
Image won't resize with {width=...} | Non-standard attribute syntax | Use <img src="..." width="300"> instead |
If links don't work, verify:
- URL is correct and accessible
- Protocol (https://) is included for external links
- No spaces or special characters break the URL
- Relative paths are correct
If images don't display:
- Image file exists at the specified path
- Image format is supported
- File path is correct
- Filename is correct (case-sensitive on some systems)
- Image isn't too large or corrupted
Use browser developer tools to inspect links and images, revealing actual URLs and error messages.
Conclusion
Creating links and images in Markdown is fundamental to modern content creation. The simple syntax—[text](url) for links and  for images—enables rich, engaging content. Always write descriptive link text and alt text, test images and links thoroughly, and follow best practices for accessibility and SEO. Whether you're writing documentation, blog posts, or readme files, mastering Markdown links and images improves content quality and user experience.