DEV Community

irishgeoff22
irishgeoff22

Posted on

The HTML a href Attribute Explained with Example

#webdev #beginners #html #learning

The anchor tag (<a>) in HTML is used to create hyperlinks. Hyperlinks are elements that allow users to navigate to another resource, which can be another web page, a file, an email address, or any other online content. Here's a detailed explanation of the anchor tag and its attributes:

<!DOCTYPE html>
<html>
<head>
  <title>Anchor Tag Example</title>
</head>
<body>

<!-- Basic Anchor Tag -->
<a href="https://veilmail.io/e/FkKh7o">Reveal My VeilMail Eamil Address</a>

<!-- Anchor Tag with Other Attributes -->
<a href="about.html" target="_blank" title="Learn About Us">About Us</a>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Explanation of the anchor tag examples:

  1. Basic Anchor Tag (<a href="https://veilmail.io/e/FkKh7o">Visit VeilMail</a>):

    • The <a> element is used to define a hyperlink.
    • The href attribute specifies the URL of the linked resource, in this case, https://veilmail.io/e/FkKh7o.
    • The content between the opening and closing <a> tags (Visit VeilMail) is the clickable text or image that serves as the hyperlink.

  2. Anchor Tag with Other Attributes (<a href="about.html" target="_blank" title="Learn About Us">About Us</a>):

    • The href attribute contains the relative path to another page within the same website (about.html).
    • The target="_blank" attribute opens the linked resource in a new browser tab or window. If omitted or set to "_self," the default behavior is to open the link in the same tab or window.
    • The title="Learn About Us" attribute provides additional information about the link that is displayed as a tooltip when the user hovers over the link.
    • The content between the opening and closing <a> tags (About Us) is the clickable text or image.

Commonly used attributes with the <a> tag:

  • href attribute: Specifies the URL of the linked resource.
  • target attribute: Specifies where to open the linked resource ("_blank" for a new tab/window, "_self" for the same tab/window).
  • title attribute: Provides additional information about the link (tooltip).

The anchor tag is versatile and widely used for creating navigation within a website or linking to external resources. It plays a crucial role in building the structure of web pages and facilitating user interaction.

Top comments (0)