Markdown Links

Links are one of the most important elements in web documents. Markdown provides simple yet powerful link syntax that makes it easy to create various types of hyperlinks. This chapter will detail various uses of Markdown links.

Basic Link Syntax

Inline Links

Inline links are the most commonly used link form:

[Link Text](URL)

Examples

Visit [GitHub](https://github.com) to learn more.
View [Python official documentation](https://docs.python.org).

Effect:

Visit GitHub to learn more. View Python official documentation.

Links with Titles

Syntax

[Link Text](URL "Title displayed on mouse hover")

Examples

[Google](https://google.com "Google search engine")
[Baidu](https://baidu.com "Chinese search engine")

Effect:

GoogleBaidu

Tip: Hover over the link to see the title.

Reference Links

Basic Syntax

Reference links separate link definitions from usage:

[Link Text][Reference ID]

[Reference ID]: URL "Optional Title"

Examples

Welcome to [my website][home] and [blog][blog].

[home]: https://example.com
[blog]: https://example.com/blog

Effect:

Welcome to my website and blog.

Advantages of Reference Links

1. Strong readability: Content not interrupted by URLs
2. Easy maintenance: Only need to modify link in one place
3. Reusable: Same link can be used multiple times in document
4. Simple and clear: Suitable for complex long documents

Implicit Reference

If the reference ID matches the link text, can omit brackets:

Welcome to visit [GitHub][] and [GitLab][].

[GitHub]: https://github.com
[GitLab]: https://gitlab.com

Automatic Links

URL Automatic Links

Directly wrap URL with < >:

<https://github.com>
<https://www.python.org>

Effect:

https://github.comhttps://www.python.org

Email Automatic Links

<user@example.com>
<support@company.com>

Effect:

user@example.comsupport@company.com

Relative Links

Basic Usage

[Visit homepage](./index.html)
[View documentation](./docs/readme.md)
[Parent directory](../parent.md)

Examples

Go back to [previous chapter](./headings)
View [index](./index.md)

Effect:

Go back to previous chapter View index

Directory Structure Example

Assume the following directory structure:

docs/
├── index.md
├── basics/
│   ├── introduction.md
│   └── syntax.md
└── advanced/
    └── tables.md

Link syntax in different files:

<!-- Link from index.md to basics/introduction.md -->
[Introduction](./basics/introduction.md)

<!-- Link from basics/introduction.md back to index.md -->
[Back to Home](../index.md)

<!-- Link from basics/introduction.md to advanced/tables.md -->
[Tables](../advanced/tables.md)

Anchor Links

Page Internal Anchors

Link to different parts of the same page:

[Jump to Introduction](#Introduction)
[View Examples](#Example Section)

Effect:

Jump to Introduction [View Examples](#Example Section)

Cross-page Anchors

Link to specific parts of other pages:

[View Headings Chapter](./headings#Level 1 Heading)
[Jump to Tables](./tables#Alignment)

Protocol Links

Email Links

[Contact Me](mailto:example@email.com)
[Send Feedback](mailto:feedback@site.com?subject=Feedback)

Effect:

Contact MeSend Feedback

Phone Links

[Call Customer Service](tel:400-123-4567)

FTP Links

[Download File](ftp://example.com/file.zip)

Image Links

Basic Image Link

Use image as link:

[![Image Description](Image URL)](Link URL)

Examples

[![GitHub Logo](https://github.com/github.png)](https://github.com)

Effect:

Button Style Links

Create Buttons with HTML

<a href="https://example.com" class="button">
    Click to Visit
</a>

Combine with CSS

<a href="https://example.com" style="
    display: inline-block;
    padding: 10px 20px;
    background: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
">
    Click to Visit
</a>

Link Best Practices

1. Use Descriptive Text

❌ Click [here](https://example.com)
✅ Visit [Python official documentation](https://docs.python.org)

2. Keep URLs Concise

Use short link services:

[Full Documentation](https://bit.ly/3xYzAbc)

3. Test All Links

Ensure links are valid and point to correct locations.

4. Add Identifier for External Links

External link [Example](https://example.com) ↗

5. Use Relative Links for Internal Links

<!-- Internal links use relative paths -->
[Related Article](./related.md)

<!-- External links use full URLs -->
[Reference Material](https://example.com)

Link Support on Different Platforms

GitHub Flavored Markdown

• Supports @username, #issue number links
• Auto-recognizes repository references

Mention @octocat
View issue #123
Repository octocat/Hello-World

Effect:

Mention @octocat View issue #123 Repository octocat/Hello-World

Wikilinks

Some editors support Wiki-style links:

[[Page Name]]
[[Page Name|Display Text]]

Link States

Visited Link Style

CSS can control link colors:

<style>
a:visited { color: purple; }
a:hover { color: red; }
</style>

<a href="https://example.com">Visit Example</a>

Open Link in New Window

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
    Open in New Window
</a>

Advanced Link Techniques

1. Link Variables (specific editors)

[Homepage]({{site.url}}/)
[Documentation]({{site.url}}/docs)

2. Conditional Links

[Download](https://example.com/download)
<!-- Links adapted to different platforms -->

3. Multilingual Links

[Chinese Version](./zh/docs)
[English Version](./en/docs)

Common Questions

Q: What if there are spaces in the link?

A: Use URL encoding or %20 to replace spaces:

[Link](https://example.com/my%20page)

Q: How to link to files?

A: Ensure correct file extension is used:

[PDF Document](./document.pdf)
[Image](./image.jpg)
[Code File](./script.js)

Q: How to create download links?

A: Add download attribute:

<a href="./file.pdf" download>Download PDF</a>

Practical Examples

Technical Documentation Navigation

## Table of Contents

- [Introduction](./introduction.md)
- [Quick Start](./quickstart.md)
- [API Documentation](./api.md)
- [FAQ](./faq.md)

## Related Resources

- [Official Documentation](https://docs.example.com)
- [Community Forum](https://forum.example.com)
- [GitHub Repository](https://github.com/example/repo)

Reference Link List

## Reference Materials

1. [MDN Web Documentation](https://developer.mozilla.org)
2. [W3Schools Tutorial](https://www.w3schools.com)
3. [Stack Overflow](https://stackoverflow.com)

## External Links

- [Wikipedia](https://wikipedia.org) - Online encyclopedia
- [Open Source Software](https://github.com) - Code hosting platform

Footer Links

---

**Related Links:** [Home](./) | [Documentation](./docs) | [Blog](./blog) | [Contact Us](mailto:contact@example.com)

© 2024 My Website

Summary

This chapter comprehensively introduced Markdown link usage:

• Inline links: Most commonly used link form
• Reference links: Suitable for complex documents and repeated links
• Automatic links: URL and email address auto-conversion
• Relative links: Used for internal document navigation
• Anchor links: In-page navigation
• Best practices: Use descriptive text, keep links valid

Mastering various link methods will make your documents more professional and easy to navigate.

Next: Learn how to insert Markdown Images.