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 <a> (anchor) tag, which turns any text or image into a clickable hyperlink.

The <a> 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

• <a> - Defines the hyperlink
• href - Contains the destination address
• The text between <a> 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 <a> tag properly improves user experience, accessibility, and SEO - making your website easier to explore and understand.