Table of Contents
Markdown Links & Images
Master the creation of links and images in Markdown. Learn all the syntax variations and advanced techniques for rich content.
Jump to Section
Inline Links
Create clickable links using the inline link syntax.
Basic Links
Visit [Google](https://www.google.com) for search.
Check out the [Markdown Guide](https://www.markdownguide.org) for more info.Visit Google for search.
Check out the Markdown Guide for more info.
Use [text](URL) syntax to create inline links.
Links with Titles
Visit [Google](https://www.google.com "Google Search Engine") for search.
Read the [documentation](https://docs.example.com "Official Documentation").Visit Google for search.
Read the documentation.
Add titles with quotes after the URL for tooltip text.
Links to Sections
Jump to [Basic Syntax](#basic-syntax) section.
See the [FAQ](#frequently-asked-questions) for common questions.Jump to Basic Syntax section.
See the FAQ for common questions.
Use # followed by the heading ID to link to sections within the same page.
Email Links
Contact us at [[email protected]](mailto:[email protected]).
Send feedback to [[email protected]](mailto:[email protected] "Send us your thoughts").Contact us at [email protected].
Send feedback to [email protected].
Use mailto: protocol for email links.
Tips & Best Practices
- Use descriptive link text instead of "click here"
- Titles appear as tooltips when hovering over links
- Section links work with auto-generated heading IDs
- Test email links to ensure they open the mail client
Reference Links
Use reference-style links to keep your text clean and organized.
Basic Reference Links
I get 10 times more traffic from [Google][1] than from [Yahoo][2] or [MSN][3].
[1]: http://google.com/ "Google"
[2]: http://search.yahoo.com/ "Yahoo Search"
[3]: http://search.msn.com/ "MSN Search"Define links separately to keep text readable.
Named References
Visit [Google][google] or [GitHub][github] for development resources.
[google]: https://www.google.com "Google Search"
[github]: https://github.com "GitHub - Where the world builds software"Use descriptive names instead of numbers for references.
Implicit References
Check out [Google] and [GitHub] for development resources.
[Google]: https://www.google.com
[GitHub]: https://github.comReference name can be the same as the link text.
Mixed Styles
Here's an [inline link](https://example.com) and a [reference link][ref].
You can also use [Google] style references.
[ref]: https://reference.com "Reference Link"
[Google]: https://google.comHere's an inline link and a reference link.
You can also use Google style references.
You can mix inline and reference links in the same document.
Tips & Best Practices
- Reference links make text more readable
- Define references at the end of the document or section
- References can be placed anywhere in the document
- Use meaningful reference names for easier maintenance
Automatic Links
Create links automatically from URLs and email addresses.
URL Auto-links
Visit <https://www.markdownguide.org> for the complete guide.
Check out <https://github.com> for open source projects.Visit https://www.markdownguide.org for the complete guide.
Check out https://github.com for open source projects.
Wrap URLs in angle brackets for automatic linking.
Email Auto-links
Contact me at <[email protected]> for questions.
Send reports to <[email protected]>.Contact me at [email protected] for questions.
Send reports to [email protected].
Email addresses in angle brackets become clickable mailto links.
Plain URLs
Many Markdown processors automatically convert plain URLs:
https://www.example.com
www.example.comMany Markdown processors automatically convert plain URLs:
Some processors automatically detect and link plain URLs (not standard Markdown).
Tips & Best Practices
- Automatic links show the full URL as the link text
- Use angle brackets for guaranteed URL linking
- Plain URL auto-linking varies by Markdown processor
- Consider using descriptive link text for better UX
Images
Embed images in your Markdown documents.
Basic Images
Use  syntax to embed images.
Images with Titles
Add titles for image descriptions and tooltips.
Local Images
Use relative paths for local images in your project.
Tips & Best Practices
- Alt text is crucial for accessibility and SEO
- Use descriptive alt text that explains the image content
- Optimize image sizes for web performance
- Consider using CDNs for better image loading
Reference Images
Use reference-style syntax for images, similar to reference links.
Basic Reference Images
![Markdown Logo][logo]
![GitHub Logo][github-logo]
[logo]: https://markdown-here.com/img/icon256.png "Markdown Logo"
[github-logo]: https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png "GitHub Logo"
Reference images work like reference links but with exclamation mark.
Multiple Image References
Here are some popular logos:
![Google][google-img] ![Facebook][facebook-img] ![Twitter][twitter-img]
[google-img]: https://via.placeholder.com/100x50/4285F4/FFFFFF?text=Google
[facebook-img]: https://via.placeholder.com/100x50/1877F2/FFFFFF?text=Facebook
[twitter-img]: https://via.placeholder.com/100x50/1DA1F2/FFFFFF?text=TwitterHere are some popular logos:
Great for documents with many repeated images.
Tips & Best Practices
- Reference images help organize documents with many images
- Group image references at the end of sections
- Use descriptive reference names
- Easier to update image URLs when centralized
Clickable Images
Make images clickable by combining image and link syntax.
Image Links
[](https://markdown-here.com)
[](https://via.placeholder.com/800x600)
Wrap image syntax in link syntax to make images clickable.
Complex Image Links
[](https://via.placeholder.com/1200x800)
[](https://apps.apple.com/app)Combine image titles and link functionality for rich interactions.
Reference Style Clickable Images
[![App Screenshot][screenshot]][app-link]
[screenshot]: https://via.placeholder.com/300x200 "App Screenshot"
[app-link]: https://example.com/appUse reference style for complex clickable images.
Tips & Best Practices
- Perfect for image galleries and product showcases
- Use clear visual indicators that images are clickable
- Consider adding captions to explain click behavior
- Test clickable images across different devices
Advanced Image Techniques
Advanced methods for image control and presentation.
HTML for Image Control
<img src="https://via.placeholder.com/400x200" alt="Responsive Image" width="300" height="150">
<img src="https://via.placeholder.com/400x200" alt="Centered Image" style="display: block; margin: 0 auto;">Use HTML when you need more control over image display.
Image with Caption
*Figure 1: Monthly sales data showing growth trend over the last quarter.*Figure 1: Monthly sales data showing growth trend over the last quarter.
Add captions using italic text below images.
Multiple Images
 
**Before and After Comparison**
Before and After Comparison
Place images side by side for comparisons.
Tips & Best Practices
- Use HTML img tags for precise control over dimensions
- Add captions with italic or bold text for context
- Consider responsive image techniques for web use
- Use consistent image sizing throughout your document