Newest Visitor Badge Earned!
Click to create an account and start competing today!
After Hours Programming
Show Tutorials


You (Level 0)
0/25
Last Badge Earned
Newest Visitor

HTML Hyperlink Tag Tutorial

HTML Hyperlink

The HTML Hyperlink tutorial explains how to use HTML links to create easy navigation from your website to other web pages.

In itself, an HTML hyperlink is one of the most useful distinctions between the internet and a standard text file. Linking is the foundation of the internet and this is the little tag that got a majority of the ball rolling. You can employ links to provide navigation to other content, which allows fantastic organization and eliminates the fear of the user becoming claustrophobic with too much content on one page. Before we go any farther, hyperlinks are often referred to as anchor tags. However, some people talk about anchor tags in their use as a table of contents where you click the link and it navigates you further down the page. Technically, it is a hyperlink that links the certain content of the same page. Finally, the last important note about hyperlinks is that they contain urls, which can be relative and absolute.

Relative and Absolute Links

Absolute links are generally used for navigation outside your website. For example, http://www.afterhoursprogramming.com/index.php is an absolute link. However let's say I have an HTML document called index.php and it is in my root directory (www.afterhoursprogramming.com/) I can link to that same index.php file by using a link has a reference to "index.php". That is all you would need to put in the href attribute, no http://www.afterhoursprogramming.com/ because you are in that same directory. That my friend is a relative link.

Example <a href="http://www.afterhoursprogramming.com/index.php"> Absolute Link from index.php</a>
<a href="index.php"> Relative Link from index.php</a>
Result Absolute Link from index.php Relative Link from index.php

The href is actually an attribute of the <a> tag. Well will discuss attributes later because almost all HTML tags have attributes and there are numerous amount of them.

Now, if my index.php file moved to another folder, let's say it moved to http://www.afterhoursprogramming.com/newFolder/. If I were to use a relative link from that index.php, I would use a reference or source of newFolder/index.php because I am still in the root folder, but I need to get to the newFolder to access the index.php.

Internal Anchor Tags

Quite often, people love to create massive pages with a table of contents. While I strongly argue against this, I will explain how to create internal page linking. Almost every HTML element has a id attribute, which is a unique identifier. All that is required to have this collection of internal anchor tags is to simply link to this element on the page. Then add a # sign plus the id of the element. While it is somewhat confusing to explain with words, it is easier to show with an example.

Example <a href='pageName.html#sampleId'>Go to element with id of sampleId</a>
<p id='sampleId'>Some text</p>

Whenever a user clicks the top link in the example, the browser scrolls to the bottom link no matter how much content is in between the two links. So, if we wanted to link to a few lines of text, we could place a container element (like the paragraph tag) around the lines of text with a unique id that we could link to using hyperlinks. Like the example above, we can place our text in the paragraph tag with an id of sampleId and then link to it with a hyperlink pointing to #sampleId using the hyperlink's href attribute.

References

Try testing your code with the code simulator!

Let's move on to some more tutorials or the next section!



Previous Tutorial

Paragraph Tag

Next Tutorial

Attributes







If you enjoyed this resource, support me by sharing this page with others.

Stumbleupon Facebook Twitter GooglePlus Reddit Delicious Digg


Comment or Suggestion?

Comments are a way to tell me about corrections or suggestions, what you thought about the resource, or providing additional information. Help feed the discussion!


Yes




Comments on HTML Hyperlink

user
Sami Khan
425
April 2, 2014 11:47AM
<a href="http://www.afterhoursprogramming.com/index.php"> Absolute Link from index.php</a>
<a href="index.php"> Relative Link from index.php</a>
in this example the paragraph id not executable or mybe i dont understand 


user
SAMI KHAN
April 2, 2014 11:41AM
<a href='pageName.html#sampleId'>Go to element with id of sampleId</a>
<p id='sampleId'>Some text</p>
in this example the paragraph id not executing or my be i cant understand 


user
Morten
250
March 9, 2014 12:02PM
<html>
	<head>
	</head>
	<body>
		<a href= "http://www.afterhoursprogramming.com/" #sampleId> click here </a>
		<p Id= 'Comment or Suggestion?' >some text</p>
	</body>
</html>	

When I execute this code, it goes to the site when i click the hyperlink but not to the paragraph head Comment or Suggestion? does anyone know why? and what I should change.


user
Ryan Reus
175
February 5, 2014 01:39PM
I am a little confused on the code simulator. Can I create internal anchor tags in the simulator?


user
Ryan Reus
175
February 5, 2014 01:35PM
Good info. I know a tiny bit of html and css, but I never did learn how to do internal page linking.


user
CarlG
125
January 20, 2014 02:04PM
Very good start.
Regarding large pages with lots of info, I tend to like them better than lots of linked pages with little info on each.
Why?
On a large page, I know I can read ALL of the info without missing out anything because I missed a little link somewhere. I can also very quickly search through all the text with the browser Find tool, and finally I get a good view of how MUCH information there actually is. I guess it is a matter of taste. :)


user
Abhinav Abinz
50
January 19, 2014 12:05AM
Nice..........


user
Chillerpron0
75
December 12, 2013 01:30PM
I love this website! I have always wanted to learn code and now it's really easy!


user
Doug Kirkland
200
November 19, 2013 10:39AM
This is great


user
Ms.Attitude
100
October 19, 2013 12:41AM
It's alot that we have to remember its good


user
Joy Hurlburt
225
June 27, 2013 04:00PM
After reading this I still don't know how I can remember the exact syntax for adding in links. This tutorial still leaves me a little confused.