Learn how to create clickable links, reference links, and internal navigation in Markdown.
The most common way to create links:
[Link text](URL "Optional title")Examples:
[Google](https://google.com)
[GitHub](https://github.com "Visit GitHub")
[Local file](./docs/readme.md)Result: Google GitHub Local file
URLs and email addresses become clickable automatically:
https://www.example.com
user@example.comResult: https://www.example.com user@example.com
Define links separately for cleaner text:
[Link text][reference-id]
[Another link][ref2]
[reference-id]: https://example.com "Optional title"
[ref2]: https://github.comResult: Link text Another link
Use the same text for link and reference:
[GitHub][]
[Stack Overflow][]
[GitHub]: https://github.com
[Stack Overflow]: https://stackoverflow.comResult: GitHub Stack Overflow
Link to headers within the same document:
## Table of Contents
- [Introduction](#introduction)
- [Getting Started](#getting-started)
- [Advanced Features](#advanced-features)
## Introduction
Content here...
## Getting Started
More content...
## Advanced Features
Even more content...Some processors support custom anchor IDs:
## My Section {#custom-anchor}
Link to [custom section](#custom-anchor)Add formatting to link text:
[**Bold link**](https://example.com)
[_Italic link_](https://example.com)
[`Code link`](https://example.com)Result:
Bold link
Italic link
Code link
Make images clickable:
[](https://example.com)Link to files in your project:
[Documentation](./docs/README.md)
[API Reference](../api/index.md)
[Home](/)# Project Documentation
## Quick Links
- [Installation Guide](./installation.md)
- [API Reference](./api/README.md)
- [Examples](./examples/)
- [Contributing](./CONTRIBUTING.md)
- [License](./LICENSE)
## External Resources
- [Official Website](https://project.example.com)
- [GitHub Repository](https://github.com/user/project)
- [Issue Tracker](https://github.com/user/project/issues)
- [Discussions](https://github.com/user/project/discussions)# Research Paper
## Introduction
According to recent studies[^1], the adoption of Markdown has increased significantly.
The GitHub survey[^2] shows that 78% of developers prefer Markdown for documentation.
## Methodology
We followed the guidelines outlined in the documentation[^3].
## References
[^1]: [Markdown Usage Study](https://example.com/study)
[^2]: [GitHub Developer Survey](https://github.com/survey)
[^3]: [Research Guidelines](https://example.com/guidelines)# The Future of Web Development
## Related Articles
- [JavaScript Trends in 2024](./js-trends-2024.md)
- [CSS Grid vs Flexbox](./css-grid-flexbox.md)
- [React vs Vue Comparison](./react-vs-vue.md)
## External Resources
- [MDN Web Docs](https://developer.mozilla.org) - Comprehensive web documentation
- [Can I Use](https://caniuse.com) - Browser compatibility tables
- [Web.dev](https://web.dev) - Google's web development guidance
## Tools Mentioned
- [VS Code](https://code.visualstudio.com "Free code editor")
- [GitHub](https://github.com "Version control platform")
- [Netlify](https://netlify.com "Web hosting service")Make link text meaningful:
✅ Good:
[Download the installation guide](./install.pdf)
[View the GitHub repository](https://github.com/user/repo)❌ Poor:
[Click here](./install.pdf)
[Link](https://github.com/user/repo)Choose one style and stick with it:
✅ Consistent:
[GitHub](https://github.com)
[Documentation](./docs.md)
[Examples](./examples/)❌ Mixed styles:
[GitHub](https://github.com)
[Documentation][docs]
[docs]: ./docs.md Group reference links at the bottom:
# Document Content
Main content with [links][ref1] and [more links][ref2].
[ref1]: https://example.com "First reference"
[ref2]: https://github.com "Second reference"Always verify that links work:
- Use relative paths for internal files
- Check external links regularly
- Provide alternative text for images
- Include meaningful titles
- @username mentions: @octocat
- Issue references: #123
- Commit references: commit-hash
- Pull request links: #456
- User mentions: @username
- Issue links: #123
- Merge request: !456
- Milestone references: %milestone
- Page links: [[Page Name]]
- Database links: @DatabaseName
- User mentions: @UserName
[Visit our accessibility guide](./accessibility.md "Learn about web accessibility")
❌ [Click here](./accessibility.md)
✅ [Read our accessibility guide](./accessibility.md)Provide context for links:
For more information about installation, see our
[step-by-step installation guide](./install.md).
The [official React documentation](https://reactjs.org/docs)
provides comprehensive learning resources.❌ Wrong:
[File](file.md) ✅ Better:
[File](./docs/file.md) ❌ Incomplete:
[Website](www.example.com) ✅ Complete:
[Website](https://www.example.com) ❌ Problematic:
[Link with (parentheses)](parens>) ✅ Escaped:
[Link with (parentheses)](parens>) | Link Type | Syntax | Example |
|---|---|---|
| Inline | [text](url) | |
| Reference | [text][ref] | [Google][google-ref] |
| Automatic | url | https://google.com |
| Anchor | [text](#header) | Top |
email | user@example.com |
Links are the connective tissue of the web – use them to create rich, navigable content that guides your readers exactly where they need to go!