In this topic, we described about the Text Links with detailed example.
HTML links are defined by using <a> tag. The <a> tag adds the 'a' element to a web page. <a> tag called as Anchor. The 'a' element creates a a hypertext anchor (hyperlink) from one page to another.
To use the <a> tag, place the text in between the opening and closing <a></a> tags. Attributes used to specify more information along with <a> tag. The link destination should specify in href of <a> tag.
URL needs to provide when by using the href attribute. If attribute not included, the <a> element will be simply place holder. An anchor does not need to be defined with a tag.
Applying the id attribute to any tag will achieve anchor. By default, links will appear as below without override:
- An unvisited link is underlined and blue
- A visited link is underlined and purple
- An active link is underlined and red
<a href=” “>.. text/image here.. </a>
Optional Attributes -
|charset||Specifies the character set of a linked document.Not supported in HTML5.||Char_encoding|
|coords||Specifies the coordinates of a link.Not supported in HTML5.||Coordinates|
|download||Specifies the target should be downloaded instead of navigated to.HTML5 Attribute.||None.|
|href||Specifies the target destination of a link.||URL.|
|hreflang||Specifies the language of the target link. This attribute can be used if href is used.HTML5 Attribute.||Language code ( ex: en, es)|
|Media||Specifies media/device the linked document is optimized.HTML5 Attribute.||media_query|
|Name||Specifies the name of the anchor.Not supported in HTML5.||name|
|rel||Specifies the relationship between the link’s page and the link’s target destination.||alternate: Indicates an alternative version of the current web page.
author: Indicates author of the page / article.
bookmark: link to the current section of the page.
help: Indicates the Help specific to the context.
license: Indicates copyright license for the current document.
next: Indicates the linked next page in the sequence.
nofollow: Indicates the linked resource is not certified by the current document’s author.
noreferrer: Indicates the browser not to send an HTTP referrer header.
prefetch: Indicates the linked resource should be cached.
prev: Indicates the linked previous page in the sequence.
search: Indicates the search facility used to search the current, and related, documents.
tag: A tagging term that applies to the link.
|Shape||Specifies the shape of the link.Not supported in HTML5.||defaultrectcirclepoly|
|target||Specifies in which the target destination should open.||_self: Opens link in current window / tab.
_blank: Opens link in a new window / tab.
|type||Specifies type of the linked resource.||Text.|
A linked page is normally displayed in the current browser window, unless you specify another target.
Complete Example – Text as link:
<!DOCTYPE html> <html> <head> <title>HTML text as link example</title> </head> <body> <a href="https://www.tutorialscampus.com">Home Page Link</a> </body> </html>
Complete Example – Image as link:
<!DOCTYPE html> <html> <head> <title>HTML image as link example</title> </head> <body> <a href="https://www.tutorialscampus.com"> <img src="img/logos/footer.png" alt="Logo" style="width:250px; height:250px;"> </a> </body> </html>