HTML anchor <a> tag


The <a> (anchor) tag in HTML is used to create hyperlinks, which allow users to navigate from one web page to another or to different parts of the same page. It can link to external websites, internal pages, email addresses, or files.

Syntax:

<a href="URL">Link Text</a>

Attributes of the <a> Tag:

  1. href (Hypertext Reference): Specifies the destination of the link. This can be:

    • An absolute URL (e.g., "https://www.example.com").
    • A relative URL (e.g., "about.html").
    • An anchor within the same page (e.g., "#section1").
    • An email address (e.g., "mailto:someone@example.com").

    Example:

    <a href="https://www.example.com">Visit Example</a>
  2. target: Specifies where to open the linked document.

    • _self: Opens the link in the same tab (default).
    • _blank: Opens the link in a new tab or window.
    • _parent: Opens the link in the parent frame.
    • _top: Opens the link in the full body of the window (useful for breaking out of frames).

    Example:

    <a href="https://www.example.com" target="_blank">Open in New Tab</a>
  3. title: Provides additional information about the link. This text appears as a tooltip when the user hovers over the link.

    Example:

    <a href="https://www.example.com" title="Go to Example Website">Visit Example</a>
  4. rel: Defines the relationship between the current document and the linked document. For example:

    • nofollow: Tells search engines not to follow the link.
    • noopener: Prevents the new page from having access to the original page (for security).

    Example:

    <a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Secure Link</a>
  5. download: If included, the link allows the user to download a file, rather than navigate to it.

    Example:

    <a href="/files/document.pdf" download>Download PDF</a>

Linking to Page Sections

You can use an anchor to link to a specific section within the same page by using an ID.

Example:

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

In this example, clicking the link will scroll the page to the element with the id="section1".

Example:

<a href="https://www.example.com" target="_blank" title="Example Website">Visit Example</a>

This link will open in a new tab, with "Example Website" as a tooltip when you hover over it.