What is the correct html for creating a hyperlink?


Hyperlinks are a key component of the web, that allows users to navigate between various web pages, move to different sections of the same page, or even trigger actions like launching an email client. In HTML, hyperlinks are defined using the anchor tag(<a> tag). This blog will explain how to properly create hyperlinks in HTML, including the syntax, implementation, and examples.

Introduction

The <a> tag creates a hyperlink that allows users to navigate from one page to another. The key component of the <a> element is the href attribute, which specifies where the link will navigate.

The default appearance of the HTML anchor tag is as follows:

  • A visited link appears in purple.
  • An unvisited link is displayed in blue, which is the standard color for hyperlinks.
  • An active link is shown in red.

The basic syntax for creating a hyperlink is as follows:

<a href="https://intellipaat.com/blog/what-is-the-correct-html-for-creating-a-hyperlink/URL" target="_blank"> Content </a>

The linked page will open, by default, in the same browser window. The target attribute determines where the linked document will be displayed. To manipulate default behavior, the target attribute must be specified with different values.

Attributes

  • href: Specifies the destination URL or link.
  • target: This attribute specifies where to open the link, and it can take one of the following values:
    • _self: This is the default option, which will open the document in the same window or tab where it was clicked.
    • _blank: This option opens the document in a new window or tab.
    • _parent: This option opens the document in the parent frame.
    • _top: This option opens the document in the full body of the window.

The <a> tag supports both the Global and the Event Attributes.

Example:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://intellipaat.com/blog/what-is-the-correct-html-for-creating-a-hyperlink/styles.css">
    <title> Anchor Tag</title>
</head>

<body>
    <h1>
        Illustration for Anchor Tag
    </h1>
    <a href="https://www.google.com"> Google</a>

    <!-- Example 2: Linking to Relative URLs -->

    <a href="https://intellipaat.com/home.html">Home</a>
    <a href="https://intellipaat.com/blog/what-is-the-correct-html-for-creating-a-hyperlink/./contact.html">Contact Us</a>

    <!-- Example 3: Linking to an Element on the Same Page -->

    <a href="#section1">Go to Home</a>
    <h2 id="section1">Home</h2>

    <!-- Example 4: Linking to an Email Address -->

    <a href="https://intellipaat.com/blog/what-is-the-correct-html-for-creating-a-hyperlink/mailto:[email protected]">Send Email</a>

    <!-- Example 5: Linking to Telephone Numbers -->

    <a href="https://intellipaat.com/blog/what-is-the-correct-html-for-creating-a-hyperlink/tel:+1234567890">Call Us</a>

    <!-- Example 6: Use an Image as a Link -->

    <a href="https://www.google.com">
        <img src="https://intellipaat.com/blog/what-is-the-correct-html-for-creating-a-hyperlink/google.jpg" alt="Example Image" style="width:100px; height:auto;">
    </a>

    <!-- Example 7: Open a Link in a New Browser Window -->

    <a href="https://www.google.com" target="_blank">Visit Example in New Tab</a>

    <!-- Example 8: Link to Another Section on the Same Page -->

    <a href="#footer">Go to Footer</a>
    <div id="footer">
        <p>This is the footer section.</p>
    </div>

    <!-- Example 9: Link to a JavaScript Function -->
    <a href="javascript:alert('Hello World from JavaScript!')">Click Me</a>

</body>

</html>

Output:

What is the correct html for creating a hyperlink?

Conclusion

The HTML anchor tag is a useful tag that allows users to create hyperlinks, and navigate to different sections of the website. By implementing the different attributes of the anchor tag, developers can develop links that are user-friendly and accessible for a range of purposes, including linking to external websites, internal sections, emails, or phone calls. If you want to learn more about these techniques in detail, you should check out our Full Stack Web Development Course.

FAQ’s

What is the default behavior of a hyperlink?

The hyperlink, by default, opens the linked web page in the same browser tab or window.

How to open a link to a new tab?

Use target=”_blank” attribute inside the <a> tag.

Is it possible to style hyperlinks?

Yes, use CSS Properties to style the hyperlinks, changing their color, font, hover effects, etc.

What does the rel attribute do?

The rel attribute defines the relationship between the current page and the linked page.

Is it possible to link the specific section of a page?

Yes, use an anchor link by pointing the href attribute to the id of the target element.



Leave a Reply

Your email address will not be published. Required fields are marked *