Courses/Markdown/Links and Images

    Links and Images

    Insert hyperlinks, embed images, and link to page sections like a pro.

    What You'll Learn

    • Inline and reference-style links
    • Section anchors for in-page navigation
    • Embedding images and clickable images
    • Using HTML for advanced image sizing

    Links

    Links are one of Markdown's most-used features. The syntax is: [display text](URL).

    📝 Real-World Analogy: Think of it as writing a label on a door. The square brackets [text] are the label people see, and the parentheses (url) are where the door leads.

    Inline Links

    [Visit Google](https://google.com)
[MDN Docs](https://developer.mozilla.org "Mozilla Developer Network")

    Reference-Style Links

    For documents with many links, define them once at the bottom:

    Read the [installation guide][install] and [API docs][api].

[install]: https://docs.example.com/install
[api]: https://docs.example.com/api "API Reference"

    Section Links (Anchors)

    Link to other headings in the same document using their auto-generated ID:

    ## Table of Contents
- [Installation](#installation)
- [Usage](#usage)
- [FAQ](#frequently-asked-questions)

## Installation
...

## Frequently Asked Questions
...

    ⚠️ Common Mistake

    Anchor IDs are generated by lowercasing the heading and replacing spaces with hyphens. ## My Cool Feature! becomes #my-cool-feature (punctuation is removed). Getting this wrong silently breaks the link.

    Links

    Practice inline links, reference links, and section anchors.

    Try it Yourself »
    JavaScript
    // Markdown Links — rendered as text
console.log("=== Inline Links ===");
console.log('[Click here](https://example.com)');
console.log('[Google](https://google.com "Google Search")');
console.log();

console.log("=== Link with Title ===");
console.log("Hover text appears as a tooltip:");
console.log('[MDN Docs](https://developer.mozilla.org "MDN Web Docs")');
console.log();

console.log("=== Reference Links ===");
console.log("Define links once, use them many times:");
console.log();
console.lo
...

    Images

    Images use the same syntax as links, but with an exclamation mark ! prefix:

    ![Alt text](image-url.png)
![Alt text](image-url.png "Optional title")

    The alt text describes the image for screen readers and shows if the image fails to load. Always include meaningful alt text!

    Clickable Images

    Wrap an image inside a link to make it clickable:

    [![App Screenshot](./screenshot.png)](https://myapp.com)

    Sizing Images

    Standard Markdown doesn't support image sizing. Use HTML instead:

    <img src="photo.jpg" width="400" alt="Photo description">

<!-- Center an image -->
<p align="center">
  <img src="logo.png" width="200" alt="Logo">
</p>

    💡 Pro Tip

    For README badges on GitHub, use services like shields.io: ![Build](https://img.shields.io/badge/build-passing-green)

    Images

    Practice embedding images and making them clickable.

    Try it Yourself »
    JavaScript
    // Markdown Images
console.log("=== Basic Image ===");
console.log("![Alt text](https://example.com/photo.jpg)");
console.log();

console.log("=== Image with Title ===");
console.log('![Logo](./logo.png "Company Logo")');
console.log();

console.log("=== Image as Link ===");
console.log("Wrap the image in a link:");
console.log("[![Alt](image.png)](https://example.com)");
console.log();

console.log("=== Reference Images ===");
console.log("![Screenshot][screenshot]");
console.log();
console.log
...

    📋 Quick Reference

    ElementSyntax
    Inline link[text](url)
    Link with title[text](url "title")
    Reference link[text][id] [id]: url
    Section link[text](#heading-id)
    Image![alt](image.png)
    Clickable image[![alt](img)](url)

    🎉 Lesson Complete!

    You can now add links and images to any Markdown document! In the final lesson, we'll cover advanced features: task lists, footnotes, GitHub-flavoured Markdown, and more.

    Sign up for free to track which lessons you've completed and get learning reminders.

    Previous

    Cookie & Privacy Settings

    We use cookies to improve your experience, analyze traffic, and show personalized ads. You can manage your preferences below.

    By clicking "Accept All", you consent to our use of cookies for analytics and personalized advertising. You can customize your preferences or reject non-essential cookies.

    Privacy Policy • Terms of Service