HTML a tag OR HTML anchor tag is used to create a hyperlink. Which used to link one page to another page or another location within the same webpage.
The <a> element is used to create a link, and its most important attribute is the href attribute, which indicates the link’s destination (target).
Anchor Tag example
HTML anchor tag is created by using <a> open tag and </a> closing tag. In the href attribute, you have to add the target (web URL) website. On click html, the anchor text will open that webpage.
For this example link to an anchor on another page, you just need to change href web URL.
<!DOCTYPE html>
<html>
<body>
<a href="https://eyehunts.com/">Visit EyeHunts.com website</a>
</body>
</html>Most Important Anchor Attributes
There are three anchor hreftargetdownload
- href – A Hypertext Reference attribute is used to specify a target or destination for the anchor element. It most commonly used to HTML a link.
- target – This attribute specifies behavior and where to open the linked document or webpage etc.
- download – It is used when needed a file download onclick, instead of navigating to the website or webpage.
See below example code of used all attributes. When you click on the html a href download link, it will download or open this file depends on the browser’s.
<!DOCTYPE html>
<html>
<body>
<a href="https://eyehunts.com/">Visit EyeHunts.com website</a> <br>
<a href="https://eyehunts.com/" target="_blank" rel="noopener noreferrer">Open website in new tab</a><br>
<a href="https://tutorial.eyehunts.com//wp-content/uploads/2019/04/HTML-a-tag-html-anchor-tag.png" download>Download image</a>
</body>
</html>More about Target attribute:
<link target=”_blank|_self|_parent|_top|framename“>
| Value | Description |
|---|---|
| _blank | Open and l |
| _self | Load in the same clicked tab window. |
| _parent | Load in the parent frameset |
| _top | open and l |
| framename | Load in a named frame |
HTML a name Attribute | Jump
The name attribute specifies the name of an anchor tag in html.
Syntax: <a name=”value”>
The name attribute is used in Anchor Tag to “jump” to a specific point on a web page. It is very useful and specially used in large pages or subdivisions.
See the below HTML code looks like this.
<a name="to top"></a>
<a name="Content"></a>ContentHow to change HTML a tag color?
Answer: Basic hyperlink color is blue with an underline. But you can change it using a CSS.
<a style="color:red" href="https://eyehunts.com/">Visit EyeHunts.com website</a>Output:
How to html a tag open in a new tab?
Answer: Just add a target=”_blank” attribute to your links (anchor tags). When you click on an html anchor link, it will open in a new tab. See below code.
<a href="https://eyehunts.com/" target="_blank" rel="noopener noreferrer">Open website in new tab</a><a> TAG | Default CSS Settings
When you create a link. Most of the browsers display the <a> element with the following default CSS values.
a:link, a:visited {
color: (internal value);
text-decoration: underline;
cursor: auto;
}
a:link:active, a:visited:active {
color: (internal value);
}Link to anchor on same page
<a href="#example">Example headline</a>HTML tag <a> want to add both href and onclick?
Answer: HTML a onclick possible with href attribute.
<!DOCTYPE html>
<html>
<body>
<a href="www.eyehunts.com" onclick="return theFunction();">Website</a>
<script type="text/javascript">
function theFunction () {
// return true or false, depending on whether you want to allow the `href` property to follow through or not
alert("hello");
}
</script>
</body>
</html>Output:
HTML a href download Link code
Used “download” attribute in <a> tag. In modern browsers that support HTML5, the follow below codes.
Note: that file types an to the browser (e.g. JPG, PNG or GIF images) will usually be opened within the browser.
<a href="https://tutorial.eyehunts.com//wp-content/uploads/2019/04/HTML-a-tag-html-anchor-tag.png" download="">
</a>Do comment if you have any doubt and suggestions on this tutorial.
Note: The All Examples HTML a/anchor tag are tested on Safari browser (Version 12.0.2).
OS: macOS 10.14 Mojave
Code: HTML 5 Version