HTML Links

HTML links, also known as hyperlinks, are used to navigate from one web page to another. They are an essential part of the web, allowing users to move between different pages and resources. Links can be text, images, or other HTML elements.

Basic Syntax

The basic syntax for creating a link in HTML is:

<a href="URL">link text</a>
  • <a>: The anchor tag used to define the link.
  • href: The attribute that specifies the URL of the page the link goes to.
  • link text: The clickable text that users see.

Examples

1. Text Link

<!DOCTYPE html>
<html>
<head>
    <title>Text Link Example</title>
</head>
<body>
    <p>Visit <a href="https://www.example.com">Example.com</a> for more information.</p>
</body>
</html>

In this example, clicking on “Example.com” will take the user to https://www.example.com.

2. Image Link

You can also use an image as a link by placing an <img> tag inside an <a> tag.

<!DOCTYPE html>
<html>
<head>
    <title>Image Link Example</title>
</head>
<body>
    <a href="https://www.example.com">
        <img src="example.jpg" alt="Example Image">
    </a>
</body>
</html>

In this example, clicking on the image will take the user to https://www.example.com.

3. Email Link

To create a link that opens the user’s email client with a pre-filled recipient address, use the mailto: scheme.

<!DOCTYPE html>
<html>
<head>
    <title>Email Link Example</title>
</head>
<body>
    <a href="mailto:someone@example.com">Send an Email</a>
</body>
</html>

In this example, clicking on “Send an Email” will open the user’s default email client with the recipient address set to someone@example.com.

4. Target Attribute

The target attribute specifies where to open the linked document. For example, _blank opens the link in a new tab or window.

<!DOCTYPE html>
<html>
<head>
    <title>Target Attribute Example</title>
</head>
<body>
    <a href="https://www.example.com" target="_blank">Open Example.com in a new tab</a>
</body>
</html>

In this example, clicking on the link will open https://www.example.com in a new tab.

5. Relative URLs

Relative URLs link to pages within the same website. They are useful for internal navigation.

<!DOCTYPE html>
<html>
<head>
    <title>Relative URL Example</title>
</head>
<body>
    <a href="about.html">About Us</a>
</body>
</html>

In this example, clicking on “About Us” will take the user to the about.html page within the same website.

Conclusion

HTML links are a fundamental part of web navigation, allowing users to move between different pages and resources. By using text links, image links, email links, and the target attribute, you can create a variety of navigation options for your website. Experiment with these examples to see how they work and enhance your web pages!

Share this Tutorials

HTML Links

Or copy link

CONTENTS
Scroll to Top