In HTML, the Anchor tag is used to insert hyperlinks that links on one page to another page. It can create a hyperlink to other webpage. You can click on a link and easily jump to another document.
This tag support both text and image as a hyperlink. By default, the HTML links appear as underlined blue text. You can change the color and font using the CSS style codes.
Estimated reading time: 7 minutes
Syntax:
The HTML anchor tag contains both an opening tag and closing tag. It always comes in pairs.
<a href="link of the page">Link Name</a>
Attributes:
An Anchor tag is defined with three main attributes. They are:
- href Attribute
- target Attribute
- rel Attribute
href Attribute:
The term href stands for H ypertext Ref erence. It is the most important attribute of the tag that defines a link on another web page or a place on the same web page. When the user clicks on the lint it will directly go to the linked page.
The value of this attribute is either an anchor text or URL. An anchor text is ideally concise, informative, and relevant to the landing page. Before the Anchor point ID, we put a hash symbol (#). Let’s see them below.
<a href="url">the link text</a>
<a href="#a">the link text</a>
Sample of the HTML tag with the href Attribute:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.sharepointanchor.com/">Share Point Anchor</a>
</body>
</html>
Result:
From this example, we have explained how to insert a link in the anchor tag with the href attribute. Click on the link, and you will be redirected to the home page of our website.
You can use the href attribute with the tag to make a linked image.
Example of HTML tag with ![]()
tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.sharepointanchor.com/">
<img src="https://sharepointanchor.com/wp-content/uploads/2021/01/SPA-LOGO.png">
</a>
</body>
</html>
Result:
target Attribute:
The target attribute is used to tell the browser where to open the linked document. By default, the linked document will open in the current window. You can change it by using the following values:
- _blank – It will open the link in a new window or new tab.
- _self – Default. It helps to open the link in the current window.
- _parent – It opens the document in the parent frame.
- _top – Helps to open the document in the full body of the window.
Example of the HTML tag with the Target attribute:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.sharepointanchor.com/" target="_blank">Share Point Anchor</a>
</body>
</html>
Result:
From the above example, we will use the _blank (target) attribute. If you click on the link it will open the document in the new window.
rel Attribute:
The rel attribute helps to specify the relationship between the current document and the linked document. you can set by using the following values:
- alternate – It specifies an alternative version of the document
- author – This attribute value contains the reference to the author of the linked document.
- bookmark – A permanent link to be used for bookmark
- nofollow – It will link to an unendorsed document that instructs the search engine to not follow that link.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.sharepointanchor.com/" rel="bookmark" target="_blank">Share Point Anchor</a>
</body>
</html>
Result:
Attributes:
The following table shows the attributes that are specific to the HTML anchor tag.
th, td{ padding: 20px; }
| Attributes | Value | Description |
|---|---|---|
| charset | char_encoding | It will define the character-set of a linked document (not used in HTML5) |
| coords | coordinates | This attribute defines the coordinates of a link (not used in HTML5) |
| download | filename | It specifies that the target will be downloaded when a user clicks on the link |
| href | URL | This attribute helps to open the URL of the linked page |
| hreflang | language_code | It defines the language of the linked document |
| media | media_query | Specifies what media or device the linked document is optimized for |
| name | section_name | This attribute will help to define the name of an anchor (not used in HTML 5) |
| ping | list_of_URLs | It specifies a space-separated list of URLs to which, when the link is followed, post requests with the body ping will be sent by the browser (in the backgrounds |
| rel | alternate |
author
bookmark
external
help
license
next
nofollow
noreferrer
noopener
prev
search
tag | The rel attribute specifies the relationship between the current document and the linked document. |
| rev | text | Specifies the reverse link, it is the inverse relationship of the “rel” attribute (Not used in HTML 5) |
| shape | default
rect
circle
poly | It defines the shape of the hyperlink now it is not used in HTML 5 |
| target | _blank
_parent
_self
_top | This attribute specifies ** where the linked document should be opened** |
| type | media_type | It specifies the media type of the attached document |
Tag Styling Methods:
The <a> tag supports the global attributes and the event attributes. You can use the following properties to style an HTML anchor tag.
Try Yourself Online
Properties to style the visual weight/emphasis/size of the text in tag:
- CSS font-style – This CSS property helps to set the font style of the text such as normal, italic, oblique, initial, inherit.
- CSS font-family – This CSS property specifies a prioritized list of one or more font family names or generic family names for the selected element.
- CSS font-size – This CSS property will help to set the size of the font.
- CSS font-weight – This CSS property used to define whether the font should be bold or thick.
- CSS text-transform – This CSS property will control the text case and capitalization.
- CSS test-decoration – This CSS property specifies the decoration added to text such as text-decoration-line , text-decoration-color , text-decoration- style.
Styles to coloring the text in Tag:
- CSS color – This CSS property will specify the color of the text content and decorations.
- CSS background-color – This CSS property helps to set the background color of an element.
Text layout styles for Tag:
- CSS text-indent – This CSS property is used to specify the indentation of the first line in a text block.
- *CSS text-overflow * – This CSS property helps to describe how overflowed content that is not displayed should be signaled to the user.
- CSS white-space – This CSS property describes how white-space inside an element is handled.
- CSS word-break – This CSS property decides where the lines should be broken.
Other Properties for Tag:
- CSS text-shadow – This CSS property helps to add the shadow to text.
- CSS text-align-last – This CSS property will set the alignment of the last line of the text.
- CSS line-height – This CSS property defines the height of a line.
- CSS letter-spacing – This CSS property helps to decide the spaces between letters/characters in a text.
- CSS word-spacing – This CSS property specifies the spacing between every word.
Browser Support:
Read Also:
The post HTML Anchor Tag appeared first on Share Point Anchor.
Top comments (0)