HTML Links

HTML Links allow you to connect one page to another or link to files, images, or external websites.
Links are created using the (anchor) tag, which turns any text or image into a clickable hyperlink.

The Tag – Basic Syntax

The anchor tag uses the href attribute to specify the destination URL.

<a href="https://html5andcss3.org">Visit HTML5 & CSS3</a>

Explanation

• - Defines the hyperlink
• href - Contains the destination address
• The text between and </a> becomes clickable

Types of HTML Links

a) External Links

Links to a different website.

<a href="https://www.google.com">Go to Google</a>

b) Internal Links

Links to another page on the same website.

<a href="about.html">About Us</a>

c) Anchor Links (Within Same Page)

Links to a specific section on the same page using the id attribute.

<a href="#contact">Go to Contact Section</a>

<h2 id="contact" style="margin-top: 700px">Contact Us</h2>

d) Email Links

Use the mailto: prefix to open an email app.

<a href="mailto:contact@html5andcss3.org">Send Email</a>

e) Phone Links

Use the tel: prefix to make a phone number clickable on mobile.

<a href="tel:+911234567890">Call Us</a>

The target Attribute

The target attribute defines how the link opens.

<a href="https://html5andcss3.org" target="_blank">Open in New Tab</a>

Using Links with Images

You can turn an image into a clickable link:

<a href="https://html5andcss3.org">
  <img src="/assets/images/html5_and_css3_logo.png" alt="HTML5 Logo" width="120">
</a>

The title Attribute

Adds extra information that appears when you hover over the link.

<a href="https://html5andcss3.org" title="Visit HTML5 and CSS3 Tutorials">HTML5 & CSS3</a>

Example: Navigation Menu Using Links

<nav>
  <a href="#">Home</a> |
  <a href="#">About</a> |
  <a href="#">Services</a> |
  <a href="#">Contact</a>
</nav>

This creates a simple, text-based navigation menu for your website.

You can change # with your desired path to link these navigation menus.

Best Practices for Links

• Always use meaningful link text (avoid “Click here”).
• Use target="_blank" only for external sites.
• Ensure all links are accessible and have clear purpose.
• Use CSS to style links consistently across pages.

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE9+
Yes	Yes	Yes	Yes	Yes	Yes

Conclusion

HTML Links are essential for connecting web pages and building site navigation.
Using the tag properly improves user experience, accessibility, and SEO - making your website easier to explore and understand.