Post
Ask Question

HTML5 anchor Tag

Introduction 

 
The <a> tag defines an anchor. The HTML <a> tag is used for creating a hyperlink to another web page. The <a> tag is supported in all major browsers. All HTML links are created with the <a> tag. You can also use JavaScript to create links, but you'd only do this if you're trying to do something more complicated than HTML can handle.
 
An anchor can be used in two ways:
 
1. To create a link to another document, by using the href attribute.
2. To create a bookmark inside a document, by using the name attribute.
 

Attributes

 
HTML tags can contain one or more attributes. Attributes are added to a tag to provide the browser with more information about how the tag should appear or behave. Attributes consist of a name and a value separated by an equals (=) sign, with the value surrounded by double-quotes.
 
There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes. The attributes that you can add to this tag are listed below.
 

Element-Specific Attributes

 
The following table shows the attributes that are specific to this tag/element.
 
Attributes Introduced by HTML5
 
Attributes Description             
href Specifies the destination of the target URL.
target Specifies where to open the target URL.
Possible values:
 
 
* _blank
 
* _self
 
* _top
 
* _parent
 
 
rel Specifies the relationship between the current document and the target URL.
media Specifies what media/device the target URL is optimized for. Default value: all
hreflang Specifies the language of the target URL.
type (New) Specifies the MIME type of the linked resource. Only to be used when the href attribute is present.
 
Attributes not Introduced by HTML5
 
Attributes Description             
rev Not supported in HTML5.
shape Not supported in HTML5.
name Not supported in HTML5.
charset Not supported in HTML5.
coords Not supported in HTML5.
 

Global Attributes

 
The following attributes are standard across all HTML 5 tags.
 
HTML5 Global Attributes
accesskey draggable style
class hidden tabindex
dir spellcheck  
contenteditable id title
contextmenu lang  

 
Event Handler Content Attributes

 
Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.
 
Here are the standard HTML 5 event handler content attributes.
 
onabort onerror* onmousewheel
onblur* onfocus* onpause
oncanplay onformchange onplay
oncanplaythrough onforminput onplaying
onchange oninput onprogress
onclick oninvalid onratechange
oncontextmenu onkeydown onreadystatechange
ondblclick onkeypress onscroll
ondrag onkeyup onseeked
ondragend onload* onseeking
ondragenter onloadeddata onselect
ondragleave onloadedmetadata onshow
ondragover onloadstart onstalled
ondragstart onmousedown onsubmit
ondrop onmousemove onsuspend
ondurationchange onmouseout ontimeupdate
onemptied onmouseover onvolumechange
onended onmouseup onwaiting
 

Creating a Basic HTML Link

 
Href- Specifies the destination of the target URL.
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <body>  
  4.         <a href="http://www.c-sharpcorner.com/">Visit c-sharpcorner.com!</a>  
  5.     </body>  
  6. </html>  
Internet Explorer
 
a1.gif
 
FireFox 
 
a2.gif
 

Open link in new window

 
target - Specifies where to open the target URL.
 
Possible values:
 
_blank- _blank opens the URL in a new browser window
 
_self- _selfLoads the URL in the current browser window.
 
_top- _top loads the URL into the parent frame (still within the current browser window). This is only applicable when using frames.
 
_parent- _parent loads the URL in the current browser window, but canceling out any frames. Therefore, if frames were being used, they aren't any longer.
 
_blank- If you set the target attribute to "_blank", the link will open in a new browser window or a new tab.
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <body>  
  4.         <a href="http://www.c-sharpcorner.com/" target ="_blank">Visit c-sharpcorner.com!</a>  
  5.         <p>If you set the target attribute to "_blank", the link will open in a new browser window or a new tab.</p>  
  6.     </body>  
  7. </html>  
Internet Explorer
 
a3.gif
 

Creating image link

 
The below html code defines how to create a image link.
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <body>  
  4.         <a href="http://www.c-sharpcorner.com/" target ="_blank">  
  5.             <img src="Water%20lilies.jpg" width="368" height="247" border="2"  
  6.         style="border:2px solid black;" alt="Photo of Milford Sound in New Zealand!" />  
  7.         </a>  
  8.     </a>  
  9.     <p>If you set the target attribute to "_blank", the link will open in a new browser window or a new tab.</p>  
  10. </body>undefined</html>  
Now click on the image.
 
Internet Explorer
 
a4.gif
 

Creating Email Link

 
The following code creates an email link - when your users click on the link, the browser should open the default email client with the "to" and "subject" fields already populated.
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <body>  
  4.         <a href="mailto:[email protected]?subject=mail!">Email Link</a>  
  5.     </body>  
  6. </html>  
Now click on the link.
 
Internet Explorer
 
a8.gif
 

Creating CSS Hyperlinks

 
Hyperlinks with no underline
  1. a:link { text-decoration: none }  
It can confuse your users if your hyperlinks aren't underlined. A more usable solution would be only to apply this behavior to hyperlinks only when users hover over them.
 
Text rollovers
  1. a:hover { text-decoration: none }  
Use the a:hover selector
  1. Cursor effects  
  2. a:hover { cursor:help }  
For example
 
In this example we will see that hyperlink will be display green when we move mouse over link color will be orange and we click on the hyperlink color will be red.
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <head>  
  4.         <style type="text/css">  
  5. a {font-family:Verdana, "Times New Roman", Times, serif;font-size:large;cursor: auto}  
  6. a:link {color:Green;}  
  7. a:visited {color:Orange;}  
  8. a:hover {text-decoration: none; color: #ff9900; font-weight:bold;}  
  9. a:active {color: #ff0000;text-decoration: none}  
  10. </style>  
  11.     </head>  
  12.     <body>  
  13.         <p>  
  14.             <a href="http://www.c-sharpcorner.com/" target="_blank">CSS Hyperlinks</a>  
  15.         </p>  
  16.     </body>  
  17. </html>  
Internet Explorer
 
a6.gif


Similar Articles