Today, we will be covering about new HTML tag, i.e; Anchor Tag (Also known as Link Tag or Hyperlink). Anchor tag is written in a tag as <a>Any Text For Link</a>. It is used for creating a Hyperlink to allow users to jump from one page or section of web page to another page or section of web page. Almost all web pages have anchor tags to redirect user from one document to another for some reason.
On web pages, when you hover mouse over the anchor tag, the mouse cursor turns into a little hand. Hyperlinks can be defined using href attribute inside <a> tag. Href attribute specifies the destination address of the link. The only content that is visible on the web page is the text or image that is inside the <a>visible text or image here</a> tag. When href is specified to the a tag, the text or image that is appearing on web page becomes clickable. When users click on a highlighted text or image on Web Page, they are transferred or redirected to the linked document.
TYPES OF LINKS YOU WILL ENCOUNTER DAILY:
- Links from one website to another website
- Links within the website from one page to another
- Links from section of web page to other section of the same web page
- Links that invokes a new browser window and show the web page
- Links for embedding email address, contact number or skype ID
SYNTAX FOR ANCHOR TAG:
The text between the opening <a> and closing </a> tag is called LINK TEXT. This text should be clear about where the link will take the user when they click on it. Don’t user ambiguous link text like CLICK HERE or just CLICK THIS, rather use a more clear text about the page or document you want user to redirect to. The already explained anchor tag above is clear because it says OnlineITGeek which means when user will click this link, they will be redirected to the OnlineITGeek website. This will also help those who scan website text for links/anchors. The best approach to select good text for links is to think about words that user mostly search.
LINKING TO OTHER SITES:
<ul> <li><a href="http://www.onlineitgeek.com">OnlineITGeek</a></li> <li><a href="http://www.facebook.com">Facebook</a></li> <li><a href="http://www.wikipedia.com">Wikipedia</a></li> <li><a href="http://www.Yahoo.com">Yahoo</a></li> <li><a href="http://www.linkedin.com">LinkedIn</a></li> </ul>
When you link your page to another website outside of your domain, you are actually creating an ABSOLUTE URL. All absolute URLs starts with the domain name followed by a complete path to the specific page. By default, home page will be displayed.
URL stands for Uniform Resource Locator.
LINKING TO OTHER PAGES ON THE SAME SITE:
Linking pages on the same site doesn’t require you to write domain name in the URL. This shorthand URLs are known as RELATIVE URL.
If the page you want to link is placed within the same folder as the current page, you just need to write the page name with proper extension. On the other hand, if the page you want your current page to link to is placed in different folder, then you need to write the name of that folder following the slash sign “/” and then write the name of the page placed in that folder. This helps while you are working locally on your computer and you need to link to some pages by staying on your project or website.
You need to be very careful while creating a website directory structure.
BEST APPROACH FOR DIRECTORY STRUCTURE:
If you are working on larger websites with hundreds of pages, you need to organize your pages by placing them section wise into a new folder under root directory of website. Most of the time homepage of the website is named as index.html or index.php depending on what is the nature of the file. The index.html or index.php is placed in the top level folder or directory also known as ROOT DIRECTORY or ROOT FOLDER.
The basic website structure is demonstrated below for your better understanding of how to organize files and folders while working on larger websites.
STANDARD DIRECTORY STRUCTURE FOR WEBSITE:
In our case, we will be using the directory structure for website named “onlineitgeek” (Just for example)
Let’s now discuss about Relative URL types with Examples.
#1 Example: SAME FOLDER
SYNTAX: To link to contact.html from index.html page
<a href="index.html">Contact Us</a>
#2 Example: CHILD FOLDER
SYNTAX: To link to header.php from index.html page
<a href="include/header.php">Header File</a>
#3 Example: GRANDCHILD FOLDER
SYNTAX: To link to page that is inside the child folder and the page you want to link from is on the root, the syntax will be as followed;
<a href="include/anotherfolder/header.php">Header File Inside Folder In Include Folder</a>
#4 Example: PARENT FOLDER
SYNTAX: To link header.php to index.html page
#5 Example: GRANDPARENT FOLDER
SYNTAX: To link include/anotherfolder/header.php to index.html on the root folder, you need to write the link as follows;
To create a hyperlink to email which opens the user client email program installed on pc, you need to write mailto: function inside href attribute of anchor tag.
<a href="mailto:">Zubair’s Email</a>
This link will appear on the web page like all other links but this time it will not redirect to some page, but it will just open the email client application into a new message and will auto fill the email ID given inside href after mailto: function.
LINKING TO PAGE ON NEW WINDOW:
We can give the command to link to open in a new window rather than on the same window by writing an attribute called target attribute. Target attribute is written just like the href attribute but the purpose of this attribute is to open the given link inside href attribute to open in a new window. The value that will work for links to open in new window is _blank.
<a href="http://www.onlineitgeek.com" target="_blank">OnlineITGeek</a>
LINKING TO A SPECIFIC PORTION OF SAME WEB PAGE
There is always a need to link the same page to some part of the page, especially when the page is very long. It is like a Table of Contents in the book. On the top of the page listing down all the content of the page and giving them links to that section or part of web page. This will allow user to bring up the content which needs to be read. For that, id attribute must be used with the part of website.
Same is the case when you want to link to the specific part of another page. Remember that ID attribute is very essential in such cases.
SYNTAX: (Within The Same Page)
<a href=”#section1″>Section 1</a>
<a href=”#section2″>Section 2</a>
<div id=”section1″>Content of Section 1</div>
<div id=”section2″>Content of Section 2</div>
SYNTAX: (For Another Page)
<a href=”http://www.onlineitgeek.com/pagename#section1″>Section 1 of Another Page</a>
<a href=”http://www.onlineitgeek.com/pagename#section2″>Section 2 of Another Page</a>
<div id=”section1″>Content of Section 1 on Another Page</div>
<div id=”section2″>Content of Section 2 on Another Page</div>
By using anchor tags, web designers can allow users to navigate between pages and websites easily. Providing target to blank page brings additional user friendliness to the website. Try all these concepts and ask any query related to this topic.