HTML Link | HTML a Tag

HTML Link Tag

HTML Link tag is used to insert link or hyperlink in any HTML web page document. The a tag is a paired tag, means it is having content and as well as opening and closing tag. When user click on the contents of the HTML a element the browser opens the new linked web page, which is specified with href attribute in the opening >a< tag.

It is also known as navigation element because, when user clicks on the HTML Link element, the browser open the new web page.

When user hover (Move mouse) over the HTML Link element, the mouse pointer will be change to hand icon so that user understand that it is clickable element.

HTML A tag Syntax

HTML a element having common syntax as paired tag. But this tag have a special attributes called href, which is used to specify the target web page url.

Example 1 – <a> tag used to link other HTML web page. The below syntax is used to provide the target address in the link tag.

	<a href="https://www.elextutorial.com">Please Click Here</a>

Using the href attribute we will specify the address of target web page, which is https://www.elextutorial.com. When user click on this text (Please Click Here) the browser will load new web page.

Caution: The browser will display only the content (Please Click Here) which is clickable text. When user click on the link text the browser jump to other web page.

HTML Link href Types (Internal / Local URL or absolute URL)

There are two types of url, Absolute and Relative URL. If the target web page on the different web site than you have to specify the complete url (http://www.xyz.com/pagename.html).

If the target web page is in the same web site than you can use relative URL syntax to specify the web page name. Suppose the target web page is on the same folder in the website than you can just write the HTML file name like (file_name.html).

Example 2 – <a> tag href attribute is used to specify target HTML web page.

	<a href="file_name.html">Please Click Here</a>

In this example we have specified the href attribute to a web page, which is local or on the same web site.

Warning: Make sure the the target file exist in the same folder as of the source web page.

HTML Link href with Local URL in Other Folder

If the target file is inside other folder than the current web page in that case in the href attribute you have to specify the file name with folder structure.

Example 3 – In this example we are assuming that the target file is in the folder called tutorial in the current folder.

	<a href="tutorial/file_name.html">Please Click Here</a>

In this example we are assuming that tutorial folder is in the current folder, and target web page is in the tutorial folder.

HTML Link and target Attribute

This HTML tag have an attribute called target, which is used to specify where to open the target web page.

By default browser open the target web page in the same window or tab, suppose you want to open the target web page in the new tab, the below example shows how you can do this.

Example 4 – Specify the target attribute as _blank to open the new web page in the new tab.

	<a href="https://www.elextutorial.com" target="_blank">Please Click Here</a>

In this example when user click on the link text the browser will open the elextutorial site home page in the new tab.

Caution: The target attribute can have other values options as well like (_self, _parent, _top).

HTML Link and title Attribute

HTML a tag have a attribute called title, which is used to specify the title of the HTML Link, which is a text string.

When user hover the Link element with the mouse the browser display the title text as tool tip.

Example 5 – Specify the title attribute as My Link Title to display as tool tip.

	<a href="https://www.elextutorial.com" title="My Link Title">Please Click Here</a>

In this example when user hover on the link text the browser will display tool tip (My Link Title).

You can leave a response, or trackback from your own site.
Leave a Reply to the article

Learning & Certifications
Follow Us
Facebook Icon   Linked In Icon   Twitter Icon  
Validation and Recognition

Valid CSS! Valid HTML5!          Protected by Copyscape