HTML Links - Hyperlinks

HTML links are hyperlinks that you can click on to move to a new page or a different section of the current page. The basic syntax uses the <a> tag:

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

Using the Target Attribute

The target attribute defines how to open the linked document:

• _self: Default. Opens the document in the same window/tab.
• _blank: Opens the document in a new window or tab.
• _parent: Opens the document in the parent frame.
• _top: Opens the document in the full body of the window.

Examples of Target Attribute

<a href="https://www.example.com" target="_blank">Visit Example.com (new tab)</a>

Absolute vs. Relative URLs

Absolute URLs include the full path to the resource:

<a href="https://www.example.com/about">About Us</a>

Relative URLs point to a file within the same website:

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

Linking an Image

You can turn an image into a link by wrapping the <img> tag with the <a> tag:

<a href="https://www.example.com">
        <img src="image.jpg" alt="Descriptive Text">
    </a>

Link to an Email Address

Create a link that opens the user's email program with your email address as the recipient:

<a href="mailto:[email protected]">Send Email</a>

Button as a Link

Use a button to link to another page by combining the <button> element with JavaScript:

<button onclick="location.href='https://www.example.com';">Visit Page</button>