In this HTML tutorial, you will learn all about the Anchor in HTML. We will also discuss the different uses of Anchor Tags in HTML.
A link, often known as a hyperlink, is a link that connects one web source to another. Users may navigate from one webpage to another on any server in the globe by using links. A connection has two endpoints known as anchors. A link begins at the source anchor and ends at the destination anchor, which can be an image, an audio or video clip, a PDF file, an HTML page, or an element inside the document itself, and so on.
In most browsers, links will show as follows by default:
Syntax
In HTML, links are specified using the <a>
tag. The link or hyperlink could be a word, a group of words, or an image. The part of the link the user sees and clicks in a browser is always between the opening <a>
tag and the closing </a>
tag.
<a href="url">Link text</a>
<a href="https://www.google.com/">Google Search</a>
<a href="https://www.learnetutorials.com/"> Learn E Tutorials </a>
<a href="images/smile.jpg">
<img src="smile.jpg" alt="kites">
</a>
The target attribute directs the browser to the location of the referenced content. There are four distinct targets, each with its own name that begins with an underscore (_) character:
<a href="/about-us.php" target="_top">About Us</a>
<a href="https://www.google.com/" target="_blank">Google</a>
<a href="images/sky.jpg" target="_parent">
<img src="sky-thumb.jpg" alt="Cloudy Sky">
</a>
You can also utilize bookmark anchors to direct people to a specific area of the current webpage. Bookmarks are extremely useful if you have a lengthy website. Creating a bookmark using the anchor tag involves only two steps: Add the id attribute to the element where you wish to hop, then use the value of the <a>
tag's href attribute.
<a href="#sectionA">Jump to Section A</a>
<h2 id="sectionA">Section A</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
Attributes | Values | Description |
---|---|---|
charset | charset | The character encoding of the referenced resource is specified. |
cords | x,y coordinates | The placement of the link on the screen is specified. |
download | filename | When the user clicks on the link, this property specifies whether to download the associated resource instead of going to it. |
href | URL | Specifies the target document's or online resource's location (such as an image, PDF, or any other media file). |
hreflang | language-code | The language of the referenced document is specified. This attribute may only be utilised when the href attribute is given. |
media | media-query | Specifies the kind of media for which the linked resource was created. |
name | text | The name of an anchor is specified. Instead, use the global attribute id. |
rel | alternate author bookmark help license next nofollow noreferrer prefetch prev search tag | Describes the connection between the hyperlinked document and the referenced resource. Only use this attribute if the href attribute is present. |
rev | rev | Describes the linked document's connection to the original document (the opposite of the rel attribute). |
shape | rect circle poly default | The form of the hotspot area, i.e. the selectable region for hyperlinks, is specified. |
target | _blank _parent _self _top framename | Defines the target that will be used to open the linked resource supplied in the href property. |
type | content-type | Specifies the content type (MIME type) of the connected material, such as "image/jpeg", "text/html", and so on. |