Anchors and Hyperlinks tags
Anchors and Hyperlinks tags overview and example of the tags
|href||Specifies the destination address. It can be an absolute or relative URL or the name of an anchor. An
absolute URL is the complete URL of a website like http://atutorialhub.com/. A relative URL points to
another directory and/or document inside the same website, e.g. /about-us/ points to the directory
“about-us” inside the root directory (/). When pointing to another directory without explicitly specifying
the document, web servers typically return the document “index.html” inside that directory.
|hreflang||Specifies the language of the resource linked by the href attribute (which must be present with this
one). Use language values from BCP 47 for HTML5 and RFC 1766 for HTML 4.
|rel||Specifies the relationship between the current document and the linked document. For HTML5, the
values must be defined in the specification or registered in the Microformats wiki.
|target||Specifies where to open the link, e.g. in a new tab or window. Possible values are _blank, _self,
_parent, _top, and frame name (deprecated). Forcing such behavior is not recommended since it
violates the control of the user over a website.
|title||Specifies extra information about a link. The information is most often shown as a tooltip text when
the cursor moves over the link. This attribute is not restricted to links, it can be used on almost all
|download||Specifies that the target will be downloaded when a user clicks on the hyperlink. The value of the
attribute will be the name of the downloaded file. There are no restrictions on allowed values, and the
browser will automatically detect the correct file extension and add it to the file (.img, .pdf, etc.). If the
value is omitted, the original filename is used.
Anchor tags are commonly used to link separate web pages, but they can also be used to link between different places in a single document, often within the table of contents or even launch external applications. This topic explains the implementation and application of HTML anchor tags in various roles.
Link to another site
This is the basic use of the <a> (anchor element) element:
It creates a hyperlink, to the URL http://atutorialhub.com/ as specified by the href (hypertext reference) attribute, with the anchor text "Link to atutorialhub.com". It would look something like the following:
To denote that this link leads to an external website, you can use the external link type:
You can link to a site that uses a protocol other than HTTP. For example, to link to an FTP site, you can do,
In this case, the difference is that this anchor tag is requesting that the user's browser connect to atutorialhub.com using the File Transfer Protocol (FTP) rather than the Hypertext Transfer Protocol (HTTP).
Link to an anchor
Anchors can be used to jump to specific tags on an HTML page. The <a> tag can point to any element that has an id attribute. To learn more about IDs, visit the documentation about Classes and IDs. Anchors are mostly used to jump to a subsection of a page and are used in conjunction with header tags.
Suppose you've created a page (page1.html) on many topics:
Once you have several sections, you may want to create a Table of Contents at the top of the page with quick links (or bookmarks) to specific sections.
If you gave an id attribute to your topics, you could then link to them:
Now you can use the anchor in your table of contents:
These anchors are also attached to the web page they're on (page1.html). So you can link across the site from one page to the other by referencing the page and anchor name.
Link to a page on the same site
You can use a relative path to link to pages on the same website.
The above example would go to the file example at the root directory (/) of the server.
If this link was on http://atutorialhub.com, the following two links would bring the user to the same location
Both of the above would go to the page file at the root directory of atutorialhub.com.
The link that dials a number
If the value of the href-attribute begins with tel: your device will dial the number when you click it. This works on mobile devices or on computers/tablets running software – like Skype or FaceTime – that can make phone calls.
Most devices and programs will prompt the user in some way to confirm the number they are about to dial.
Open link in new tab/window
The target attribute specifies where to open the link. By setting it to _blank, you tell the browser to open it in a new tab or window (per user preference).
You can also achieve the same thing using the onclick attribute:
The return false; is necessary to prevent your page from scrolling to the top when the link to # is clicked. Make sure to include all code you'd like to run before it, as returning will stop the execution of further code. Also noteworthy, you can include an exclamation mark ! after the hashtag in order to prevent the page from scrolling to the top.
This works because any invalid slug will cause the link to not scroll anywhere on the page, because it couldn't locate the element it references (an element with id="!"). You could also just use any invalid slug (such as #scrollsNowhere) to achieve the same effect. In this case, return false; is not required.
The link that runs email client
If the value of the href-attribute begins with mailto: it will try to open an email client on click:
This will put the email address [email protected] as the recipient for the newly created email.
Cc and Bcc
You can also add addresses for cc- or bcc-recipients using the following syntax:
Subject and body text
You can populate the subject and body for the new email as well:
Those values must be URL encoded. Clicking on a link with mailto: will try to open the default email client specified by your operating system or it will ask you to choose what client you want to use. Not all options specified after the recipient's address are supported in all email clients.
ATutorialHub Related Guide
HTML Tutorials Comments (8)
panduranga gupta2021-07-05 07:03:13
good website for learning and help me a lot
The awsome website i am looking like for a long time, good work atutorialhub team keep doing
Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience
It is very helpful to students and easy to learn the concepts
Great job Tutorials are easy to understand Please make use of it
Zain Khan2021-09-18 15:07:23
Great content and customized courses.
Rudrakshi Bhatt2021-09-09 15:08:10
Well structured coursed and explained really well!
Pavana Somashekar2021-09-11 15:09:08
Good platform for beginners and learn a lot on this website