mc0de

links

03
HTML Fundamentals

Links

Connect your webpage to other pages, websites, email addresses, and resources.

HTML Beginner
<a href=“https://mc0de.com”>
  Visit mC0de
</a>

href = destination

>_ What Are HTML Links?

Links are what make the web connected. They allow visitors to move between webpages, websites, files, email addresses, and other resources.

HTML creates links using the <a> element, also known as the anchor element. The href attribute tells the browser where the link should go.

https://

External Links

Connect your page to a different website using a complete URL.

/page

Internal Links

Connect pages within the same website using a relative path.

@

Email Links

Use mailto: to create a link that opens the visitor’s email application.

>_ Create Your First Link

The content between the opening and closing <a> tags becomes clickable. The destination goes inside the href attribute.

links.html
<a href=“https://mc0de.com”>
  Visit mC0de
</a>

>_ Internal vs. External Links

An external link sends someone to another website. An internal link connects to another page within your own website.

https://example.com

A complete URL commonly used for an external website.

/learn/html-css/basic-elements

A relative path to another page on the same website.

href

Specifies the destination of the link.

<a>Text</a>

The content between the tags becomes the clickable link.

>_ Open a Link in a New Tab

The target attribute can control where a link opens. Using target=”_blank” tells the browser to open the destination in a new tab.

new-tab.html
<a
  href=“https://example.com”
  target=“_blank”
  rel=“noopener noreferrer”
>
  Visit Example
</a>

>_ Create an Email Link

Links aren’t limited to webpages. Using mailto: inside the href can launch the visitor’s default email application.

email.html
<a href=“mailto:hello@example.com”>
  Send an Email
</a>
🔗
Remember

Use descriptive link text. A link like View HTML Lessons tells visitors where they are going and is more useful than vague text such as Click Here.

Ready to Code?

Let’s connect your webpage.

Build a small resource page containing different types of links, then watch them appear in the live Sandbox preview.

⚡
mC0de Challenge

Build a Mini Links Page

Create a small resource page that demonstrates the different ways HTML links can be used.

  • ✓ Add an <h1> titled My Favorite Links.
  • ✓ Create an external link using href.
  • ✓ Create an internal link to /learn/html-css/basic-elements.
  • ✓ Make one external link open in a new tab using target="_blank".
  • ✓ Add an email link using mailto:.
💡 Try it yourself first. The complete solution is waiting inside the Sandbox if you need it.
>_ Challenge accepted. Build it below.
>_
mC0de Interactive Sandbox

Links Challenge

Live Preview
links.html
HTML Input EDIT
Live Result PREVIEW
💡 Edit the links and watch the preview update. Reset restores the starter code.
✓
Lesson 03 Recap

What You’ve Learned

✓ How to create links using the <a> element.
✓ How href defines the destination of a link.
✓ The difference between internal and external links.
✓ How to open a destination in a new tab with target="_blank".
✓ How to create email links using mailto:.
✓ Why descriptive link text creates a clearer experience for visitors.
Connected! Your webpages can now lead visitors to other pages and resources across the web.
🚀

Nice work!

Finished this lesson? Mark it complete to track your progress.

← Basic Elements HTML & CSS Home Next Lesson → Lists