HTML a tag | html anchor tag | name, link, href, target, onClick

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).

HTML a tag html anchor tag

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 attributes href, target, and download in anchor tag.

  • 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“>

ValueDescription
_blankOpen and load in a new window
_selfLoad in the same clicked tab window.
_parentLoad in the parent frameset
_topopen and load in the full body of the window
framenameLoad 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>Content

How 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:

Change HTML a tag color 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 onclick 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


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.