HTML Hyperlinks

Learn how to create hyperlinks, link pages together, link to sections, email addresses, files, and external websites.

What is a Hyperlink?

A hyperlink is a clickable reference that allows users to navigate from one resource or page to another.

HTML uses the <a> element, also called the anchor element, to create hyperlinks.

<a href="URL">Link Text</a>

Basic Hyperlink

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

Output

The href Attribute

The href attribute specifies the destination of the hyperlink.

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

External Links

An external link points to a page or resource on another website.

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

Internal Links

An internal link points to another page or resource within the same website.

<a href="/HTML/Introduction">
    HTML Introduction
</a>

Internal links are commonly used to connect different pages of a website.

Relative URLs

A relative URL points to a resource relative to the current document or site structure.

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

<a href="courses/html.html">
    HTML Course
</a>

Absolute URLs

An absolute URL contains the complete address of the resource.

<a href="https://www.example.com/courses/html">
    HTML Course
</a>

Opening a Link in a New Tab

The target="_blank" value can be used when you want the browser to open the linked resource in a new tab.

<a href="https://example.com"
   target="_blank">

    Open Website

</a>

Email Links

The mailto: scheme can be used to create a link that opens the user's configured email application.

<a href="mailto:info@example.com">
    Email Us
</a>

Telephone Links

The tel: scheme can be used for telephone links, especially on mobile devices.

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

Download Links

The download attribute can indicate that a linked resource is intended to be downloaded rather than simply navigated to.

<a href="files/notes.pdf"
   download>

    Download Notes

</a>

Linking to a Section of the Same Page

An id can be assigned to an element and a fragment link can point to that ID.

<a href="#html-topic">
    Go to HTML Topic
</a>


<h2 id="html-topic">
    HTML Topic
</h2>

HTML Topic

Link with title Attribute

The title attribute can provide additional advisory information about a link.

<a href="about.html"
   title="Learn more about us">

    About Us

</a>

Common Link Attributes

Using an Image as a Link

An image can be placed inside an anchor element to make the image clickable.

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

    <img src="logo.png"
         alt="Website Logo"
         width="150">

</a>

Accessible Hyperlinks

Link text should clearly communicate where the link leads or what action it performs.

<a href="courses.html">
    View HTML Courses
</a>

<a href="courses.html">
    Click Here
</a>

Example 🌍🤓

<h2>
    CIIT Institute
</h2>

<p>
    Learn HTML from our
    <a href="courses/html.html">
        HTML Course
    </a>.
</p>

<p>
    <a href="mailto:info@example.com">
        Email Us
    </a>
</p>

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

<h3 id="contact">
    Contact
</h3>

Common Mistakes

• Forgetting the href attribute.
• Using unclear link text.
• Using an incorrect URL.
• Using target="_blank" without considering an appropriate rel relationship.
• Using links when a normal button or other control is more appropriate for an action.

Practice Exercise

1. Create an external link to a website.
2. Create an internal link to another HTML page.
3. Create an email link using mailto:.
4. Create a telephone link using tel:.
5. Create a link that opens in a new tab.
6. Create a link to a section using an element ID.
7. Create an image that works as a hyperlink.