HtmlCssMonk

Anchor in HTML | Learn Basic HTML

student, notebook, female

DESCRIPTION

HTML <a> tag is used to create hyperlinks to connect one page to another page , url or any location on the same page.

The “href” attribute links current page to destination page or url.

<a> tag

This is how to use <a> tag .

Example –

<!DOCTYPE html> 
<html> 

     <head> 
             <title>HTML a Tag</title> 
      </head> 

      <body> 
             <p>This is a link to <a href = "https://htmlcssmonk.com">
                    HtmlCssMonk.com</a></p> 
      </body>      
 
</html>

This Code will produce the following result on your webpage –

This is a link to HtmlCssMonk.com

Default appearance of HTML anchor tag links

By Default , different state of hyperlinks have different colors . We can always change these colors using CSS .

An unvisited link is displayed underlined and blue.

visited link displayed underlined and purple.

An active link is underlined and red.


Some basic attributes of <a> tag

There are some very important attributes of <a> tag . You can manipulate <a> tag in many ways .

Some attributes are –

AttributeValueDescription
charsetcharacter_encodingDefines the character encoding of the linked document.
hrefURLSpecifies the URL of a page or the name of the anchor that the link goes to.
download filenameThis downloads the target when user clicks on the hyperlink.
shaperect
rectangle
circ
circle
poly
polygon
Specifies the shape of the image map
target_blank
_parent
_self
_top
Where to open the target URL.
_blank – the target URL will open in a new window.
_self – the target URL will open in the same frame as it was clicked.
_parent – the target URL will open in the parent frameset.
_top – the target URL will open in the full body of the window.
media html-5media_queryIt specifies what media the linked document is optimized for
namesection nameMarks an area of the page that a link jumps to.

Target attribute

Target attribute is an important <a> tag attribute . It specifies whether you want target url to open in same page or another page.

<!DOCTYPE html>  
<html>  

     <head>  
           <title>Target attribute</title>  
      </head> 
 
      <body>  
            <p>Click on <a href="https://htmlcssmonk.com/" target="_blank"> this-link </a>to go on home page of HtmlCssMonk.</p>  
       </body>  

</html> 

This Code will produce the following result on your webpage –

NOTE –

  • The target attribute can only use with href attribute in anchor tag.
  • If we will not use target attribute then link will open in same page.

Next topic – Introduction to CSS

Previous topic – Forms in HTML


Leave a Comment

Your email address will not be published. Required fields are marked *