Module 1:7 HTML - Understanding Hyperlinks

HTML Links - Hyperlinks

HTML links, also known as hyperlinks, allow users to navigate between different documents or resources on the web. They can be applied to text, images, or any HTML element.

HTML Links - Syntax

The HTML <a> tag defines a hyperlink with the following syntax:

            <a href="url">link text</a>
        

The href attribute specifies the destination URL, and the link text is the visible part that users can click on.

Example:

            <a href="https://www.amurchem.com/">Visit amurchem.com!</a>
        

HTML Links - The target Attribute

By default, linked documents open in the same browser window/tab. You can change this behavior using the target attribute, which specifies where to open the linked document.

Options for the target attribute include:

• _self: Opens the linked document in the same window/tab (default).
• _blank: Opens the linked document in a new window/tab.
• _parent: Opens the linked document in the parent frame.
• _top: Opens the linked document in the full body of the window.

Example:

            <a href="https://www.amurchem.com/" target="_blank">Visit AmurChem!</a>
        

Absolute URLs vs. Relative URLs

Links can use either absolute URLs (full web addresses) or relative URLs (without the "https://www" part). Absolute URLs point to a specific location on the web, while relative URLs specify a location relative to the current page.

Examples:

Absolute URLs

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

Relative URLs

            <a href="amurchem.com">AmurChem</a>
            <a href="google.com">Google</a>
        

HTML Links - Use an Image as a Link

To use an image as a link, just put the <img> tag inside the <a> tag:

            <a href="https://www.google.com/">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/800px-Google_2015_logo.svg.png" alt="Google" style="width:40px;height:40px;">
            </a>
        

Link to an Email Address

Use mailto: inside the href attribute to create a link that opens the user's email program to send a new email:

            <a href="mailto:raufijaz978@google.com">Send email</a>

Link Titles

The title attribute specifies extra information about an element. It is often shown as a tooltip text when the mouse moves over the element:

            <a href="https://www.amurchem.com/" title="Go to AmurChem Homepage">Visit our Website HomePage</a>