Everything that I know about HTML <a> anchor tags

The HTML anchor <a> tag tends to base of all links on the internet, and essentially makes the very base of SEO. A few days ago, I happened to write a small snippet that made me revisit the HTML 5 documentation. To begin with, the <a> element is used to create a hyperlink on a webpage. It allows the user ( you in this case ) to navigate from one blogpost to another and to download external files, and pretty much anything else that an url can lead to.

Jotting down the attributes sorted by how often I've had to use them -

• href - The URL that the tag points to. This may include http, tel, mailto and some other URL schemes supported by browsers.

  
  <a href = ` // Example of an absolute URL https://saransh.dev // Example of linking to a relative url /blog // Example of a telephone number tel:88008XXX82 // Example of an email address mailto:saransXXXXXXXX95@gmail.com // Example of linking to a section in the page #top`/>
  

  The href attribute can also be used to initiate a download

  <a href = "" download = "/pdfs/my-resume.pdf"/>



• target - This is used to decide where the browsing context of the linked URL. It provides the following browsing context options -

  • _self - the current browsing context (Default) - link would open in the same tab
  • _blank - this would open a new tab or a window ( depending on the browser settings ) - new tab by default
  • _parent - In a more familiar term, this allows the new browsing context to be inherited from the parent



• rel - The relation of the linked url with the current. This can have multiple space separated values.

  This can have the following values -

  • alternate - The url given is an alternate version of the current page ( for another medium (phone, desktop), in another language, another format )

  • bookmark - This indicates that the hyperlink is a permalink for the nearest<article> element. If no articles are present, it indicates the nearest<section> element instead.

    This allows the user to bookmark a single article in a page.

  • external - This indicates that the resource url is a link to an external site, i.e. it takes the user to a different domain.

  • help - Indicates that the hyperlink leads to a resource that provides help about the parent and the sibling HTML elements.

  • license - Indicates that the hyperlink leads to a resource that provides information about the licensing of the domain.

  • next - Indicates that the hyperlink leads to the next resource of the sequence the current page is in.

    Similarly, first prev last provide are used to provide sequential information.

  • nofollow - This is used to flag the linked resource as untrusted by the author. The author, generally, lacks control over the url and does not endorse it.

  • noopener - Most useful for untrusted resources, this prevents the linked url from consuming Window.opener to access the opening document.

  • noreferrer - Prevents the browser, when navigating to another page, to send this page address, or any other value, as referrer via the Referrer: HTTP header.

  • tag - Indicates that the hyperlink refers to a tagged section in this document.




• download - Used in conjunction with href to mark a downloadable hyperlink

• hreflang - Used to mark the locale that the linked url is present in.

Some CSS pseudo selectors related to the anchor tag -

• :visited - The :visited pseudo selector is used to control the appearance of a link after it has been visited by the user. It’s used to allow the user to differentiate between new links and the links that have already been visited.

• :active - The :active pseudo selector is used to control the appearance of a link while it is being clicked by the user. It’s usually only seen for a few milliseconds, and provides visual feedback that the element was successfully clicked.

• :hover - The :hover pseudo selector is common across all HTML elements and is used to provide visual feedback to the user while the cursor is positioned over the element.

• :link - This applies to all anchor tags which have a href attribute present. Essentially, the same asa[href]