Summary -

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

Syntax -

<a href=" ">.. text/image here.. </a>

Optional Attributes -

AttributeDescriptionValues
charsetSpecifies the character set of a linked document.Not supported in HTML5.Char_encoding
coordsSpecifies the coordinates of a link.Not supported in HTML5.Coordinates
downloadSpecifies the target should be downloaded instead of navigated to.HTML5 Attribute.None.
hrefSpecifies the target destination of a link.URL.
hreflangSpecifies the language of the target link. This attribute can be used if href is used.HTML5 Attribute.Language code ( ex: en, es)
MediaSpecifies media/device the linked document is optimized.HTML5 Attribute.media_query
NameSpecifies the name of the anchor.Not supported in HTML5.name
relSpecifies 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.
ShapeSpecifies the shape of the link.Not supported in HTML5.defaultrectcirclepoly
targetSpecifies in which the target destination should open._self: Opens link in current window / tab.
_blank: Opens link in a new window / tab.
typeSpecifies type of the linked resource.Text.
Note! Download, hreflang, media, rel, target, and type cannot be specified if the href attribute is not present.
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>

Output -

Home Page

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>

Output -

TutorialsCampus