programminghead Logo

a in HTML - AKA <a> Anchor elements Uses with Example

A in HTML AKA <a>:

A <a> tag in HTML used for creating hypertext Links to another page or another page in the same page. We can redirect our users to another web-pages using A / anchor tags in HTML.
We can't only redirect users to another page, we can also Redirect users to a particular Division, Element or to a particular Section on the same page also on External / Other page using A / anchor tag.

A Tag's Syntax in HTML :

A <a> tag syntax is some like HTML's other Tags. We have to write our tag's name inside these angle brackets <tagname> and like other HTML tags we have starting <a> and closing tag </a> of a Element/Tag in HTML.
in A tag's syntax we have to write or Declare our Anchor tag (a tags) inside Body tags (<body>.......</body>) and between the a tag's starting <a> and closing </a> tags we have to write texts like Click here, Next page or declare HTML elements like Images between Anchor/a Tag's starting <a> and closing </a> tags so that Text or HTML Element can be Click-able, Otherwise you left with Empty Anchor / a tag's Output.

HTML A / anchor tag's Syntax : example


   <a href="path"> Click Here </a>

HTML a tag's Attributes :

There are many HTML a tag's attributes like :

href
download
target
name
type
rel

href Attribute in a Tag : (<a href="">)

Anchor / a tag's href attribute specifies path to External page where we want our users to redirect to. So inside the double quotes "" of href attribute (href="") we have to write our External file's path.
So if the external file is in the same Directory/Folder/Location where our Current file is, then we only have to give our File name with the file Extension (.html/.php/.xml etc).
And if our file is in the Another Directory/Folder/Location then we have to give Full file's path like :
C:/user/Desktop/myHTML/link.html

href attribute Example :


   <a href="http://programminghead.com/test.html"> Visit Test File </a>

Output


download Attribute in a Tag:

Download attribute Tells browser to download a Specified file in the Anchor / a tag.
So to make this Attribute work we have to use href attribute to specify the file we want to Download.
So the file Specified inside a / anchor tag will be downloaded if there is Download attribute inside a tag. and Browser will search file from path specified inside href="" attribute and if file exist browser will download it.

download attribute Example :


 <html>
  <body>

    <a href="http://programminghead.com/sounds/audio.mp3" download>
    Download Audio
    </a>

  </body>
 </html>

Output


target attribute in A / anchor tag :

target attribute specifies where to open Linked Document/File. Where we have to Choose between
_blank
_parent
_self
_top
framename
Where _blank will load liked file in New Blank Page in your Browser,
_parent Sorry- we are working on it .
_self Sorry- we are working on it .
_top Sorry- we are working on it .
and framename Sorry- we are working on it .

target attribute Example :


 <html>
  <body>

    <a href="test.html" target="_blank">Blank</a><br/>
    <a href="test.html" target="_parent">parent</a><br/>
    <a href="test.html" target="_self">Self</a><br/>
    <a href="test.html" target="_top">top</a>

  </body>
 </html>

Output :


name attribute in a Tag :

Specifies name of an Anchor / a Tag. But unfortunately name isn't supported by HTML5 but you still can use it in Older Browser who Supports There Attributes.
or you can use other Attributes like ID or class to gave a Unique identity to your HTML ELement like Anchor.

name attribute Example :


 <html>
  <body>

    <a href="test.html" name="mylink">Click here</a><br/>

  </body>
 </html>

type attribute in HTML

Specifies the media type of Liked page. SO browser can Easily detect the Liked file's Media type. like HTML file (.html), audio file (.mp3), video file (.mp4) ETC

Type attribute Example :


 <html>
  <body>

    <a href="test.html" type="text/html">Test File</a><br/>

  </body>
 </html>

rel attribute in a / anchor Tag:

rel attribute in a Tag specifies Relationship between current document with Linked External Document. We have many rel value to define Liked document relation with current document like:

bookmark
author
alternate external
help
license
next
nofollow
noreferrer
noopener
prev
search
tag

Comments

Write to Us

Captcha