HTML <a> Anchor Tag
Tags: learnhtml
Published: 2021-02-09 16:16:42

---
title: HTML <a> Anchor Tag
published: true
date: 2021-02-09 15:50:31 UTC
tags: LearnHTML
canonical_url: https://sharepointanchor.com/learn-html/html-anchor-tag/
---

In [HTML](https://sharepointanchor.com/category/learn-html/ "HTML"), the **<a> 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](https://sharepointanchor.com/category/learn-html/ "HTML") links appear as **underlined blue text**. You can change the color and font using the [CSS](https://sharepointanchor.com/learn-css/) style codes.

<svg aria-hidden="true" focusable="false" data-icon="clock" width="20" height="20" fill="none" stroke="currentColor" style="display:inline-block;vertical-align:-0.1em" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>Estimated reading time: 7 minutes

## Syntax:

The [HTML](https://sharepointanchor.com/category/learn-html/ "HTML") anchor tag contains both an **opening <a> tag** and **closing </a> 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 <a> 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:

![](https://eadn-wc04-3430828.nxedge.io/cdn/wp-content/uploads/2021/02/href-result.png)<figcaption>&lt;a&gt; Tag with href attribute</figcaption>

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 **<img>** tag to make a linked image.

### Example of HTML <a> tag with <img> 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:

![](https://eadn-wc04-3430828.nxedge.io/cdn/wp-content/uploads/2021/02/Image-tag.png)<figcaption>Image Tag</figcaption>

### 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 <a> 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:

![](https://eadn-wc04-3430828.nxedge.io/cdn/wp-content/uploads/2021/02/Target-attribute.png)<figcaption>Result</figcaption>

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:

![](https://eadn-wc04-3430828.nxedge.io/cdn/wp-content/uploads/2021/02/Target-attribute.png)<figcaption>Result</figcaption>

## Attributes:

The following table shows the attributes that are specific to the **[HTML](https://sharepointanchor.com/category/learn-html/ "HTML")**  **anchor tag**.

<style> th, td{ padding: 20px; } </style>

| Attributes | Value | Description |
| --- | --- | --- |
| charset | char\_encoding | It will define the **character-set** of a linked document **(not used in [HTML](https://sharepointanchor.com/category/learn-html/ "HTML")5)** |
| 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](https://sharepointanchor.com/category/learn-html/ "HTML") 5)** |
| shape | default  
rect  
circle  
poly | It defines the **shape of the hyperlink** now it is **not used in [HTML](https://sharepointanchor.com/category/learn-html/ "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** |

<figcaption>Attributes for &lt;a&gt; tag</figcaption>
## <a> Tag Styling Methods:

The **<[a](https://en.wikipedia.org/wiki/HTML_element#Anchor)>** tag supports the **global attributes** and the **event attributes**. You can use the following properties to style an [HTML](https://sharepointanchor.com/category/learn-html/ "HTML") anchor tag.

## Try Yourself Online

<script async src="//jsfiddle.net/Share_Point_Anchor/65efwsuz/6/embed/html,result/"></script>

### Properties to style the visual weight/emphasis/size of the text in <a> tag:

- **[CSS](https://sharepointanchor.com/category/learn-css/ "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 <a> 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 <a> 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 <a> 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:

![](https://eadn-wc04-3430828.nxedge.io/cdn/wp-content/uploads/2021/02/Browser-Support-3.png)<figcaption>Browser Support</figcaption>

### Read Also:

- **[HTML <address> Address Tag](https://sharepointanchor.com/learn-html/html-address-tag/)**
- **[HTML<abbr> Abbreviation Tag](https://sharepointanchor.com/learn-html/html-abbreviation-tag/)**

The post [HTML <code><a></code> Anchor Tag](https://sharepointanchor.com/learn-html/html-anchor-tag/) appeared first on [Share Point Anchor](https://sharepointanchor.com).