HTML5 Hyperlink Tag (Anchor Tag) with Examples: Without hyperlinks, there would be no internet. Hyperlinks are what connect HTML and other resources on the internet. They are simple links that enable the users on your website to travel from one page to another on the same site or to another site. Your web page or website will be disconnected from the rest of the internet if it hasn’t got any links.
You need the following to create a link:
- A Uniform Resource Locator (URL), commonly known as a web address. The web address usually starts with http://
- An anchor tag <a> with an href attribute to make your link alive. The href attribute enables you to specify the URL you want your users to visit via the hyperlink.
- A piece of text or content on the web page to link to.
You can use links to direct your users to any web page you want. For example, you may want the link to take your visitors to W3 Schools if you plan to refer to something about HTML 5 standards.
Types of Links
There are two main types of links, absolute and relative, which are explained as follows.
Absolute Links
Links that need the complete URL of the web page are called absolute links. They provide a standalone and complete path to the target web page. You can use an absolute link when you are linking to another website.
Relative Links
Relatives link to use a shortened URL or web address to point to the desired resource. For instance, the links used to point to a web page within the same domain are relative links.
Creating a Link
In the following example, you will specify the URL https://tutorials.freshersnow.com in the href attribute of the anchor element. Similarly, the text between the tags <a></a> will specify the link.
HTML 5 Link Example
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Creating Links</title> </head> <body> <h1>How to Create Hyperlinks in HTML 5</h1> <p><a href="https://tutorials.freshersnow.com">tutorials.freshersnow</a> is a good reference website for HTML5.</p> </body> </html>
HTML 5 Link Example Output
In the above figure, Tutorials.Freshersnow is colored differently and underlined, which indicates that this is a hyperlink.
What if you want the link to open in a new tab or window? It’s very simple. Just add the target=_blank attribute to the target URL.
Html5 Link to Open New Tab Example
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Creating Links</title> </head> <body> <h1>How to Create Hyperlinks in HTML 5</h1> <p><a href=https://tutorials.freshersnow.com target="_blank">tutorials.freshersnow</a> is a good reference website for HTML 5.</p> </body> </html>
With this slight modification, the same link will open in the new tab.
Navigation to Internal Pages of the Same Website.
As mentioned above, relative links can be used to point to a web page on the same website. Take a look at the following example:
Navigation to Internal Pages of the Same Website Example
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Creating Links</title> </head> <body> <h1>How to Create Hyperlinks in HTML 5</h1> <p>This is an <a href="about.html"> about us </a>page of same website</p> </body> </html>
Now, if you click on “about us,” it will take you to the About Us page of the same website.
However, this method of inserting links will only work if all of your web pages are saved in the same directory. Sometimes pages reside in different directories. In that case, you will have to add additional information to the relative URL, as shown in the following example.
Adding Information to URL
To add Additional information to the particular path, use the following code.
Adding Information to URL Example
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Creating Links</title> </head> <body> <h1>How to Create Hyperlinks in HTML 5</h1> <p>This is an<a href="../docs/about.html"> about us </a>page of same website</p> </body> </html>
As you can see, we have added the address of the folder in which the about.html file resides. Notations in the example instruct the browser to take the following steps.
- Move up one folder from the folder in which the linking file resides.
- Find the folder named “docs.”
- Find the file named “about.html inside docs.”
Adding Information on the Same Page
It is very easy to point to information on the same page. For instance, there are Go to Top tabs at the bottoms of some web pages which, once clicked, take you back to the top of the page. In that case, you will add an anchor element with a name attribute of “top.” Then, at the end of the page, you will use the following URL to link back to the top.
<a href="#top">Back to Top</a>
The hash sign (#) indicates that you’re pointing to a location on the same page.
Example of Adding Information on the Same Page(Back to Top)
<!DOCTYPE HTML> <html> <head> <title> Facts About United States</title> <meta charset="utf-8"/> </head> <body> <a name="top"/> <h1>Hello, United States<h1> <h2>Facts about a Beautiful Country <br /> Called the United States of America</h2> <p>1. The United States gained independence from British rule on July 4, 1776. <br /> That was the day the United States of America emerged as an independent nation <br /> on the map.<br /> 2. The United States has the largest economy in the world, followed by China and Japan.<br /> 3. The American flag's official colors are "Old Glory Red," "White," and "Old Glory Blue."</p> <hr /> <h3>About the United States</h3> <ul> <li><strong>Founder:</Strong><a href="http://en.wikipedia.org/wiki/George_Washington">Gegeorge Washington</a></li> <li><strong>Area:</Strong>9,857,306 km2</li> <li><strong>Population:</Strong>318.9 Million</li> </ul> <hr /> <h3>Top Three Facts</h3> <ol> <li><strong>Total Number of States:</Strong>50</li> <li><strong>Primary Language:</Strong>English</li> <li><strong>National Sport:</Strong>Base-ball</li> </ol> <hr /> <h3>The United States Neighbours</h3> <table> <tr><th>Name</th><th> Area</th><th>Where</th></tr> <tr><td>Canada</td><td>9,984,670 km2</td><td>North</td> <tr><td>Mexico</td><td>1,972,550 km2</td><td>South</td> <tr><td>Pacific Ocean</td><td>165.25 million square kilometers</td><td>West</td> <tr><td>Atlantic Ocean</td><td>41,105,000 square miles</td><td>East</td> </table> <hr /> <form action="http://en.wikipedia.org/wiki/George Washington" target="_blank"> <input type="submit" value="Click Here!"/> </form> <a href="#top"> Back to Top</a> </body> </html>
Example of Adding Information on Same Page Output
Now, if you click on the Back to Top tab, you will go straight back to the top of the page.
Exercise
Task:
Write a one-line description of Washington DC and link the city name to a corresponding page on Wikipedia. Also, add an image to your web page, make it a hyperlink, and open the link in a new tab.
Solution:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Exercise</title> </head> <body> <h1>Exercise 6</h1> <p><a href="https://en.wikipedia.org/wiki/Washington, D.C.">Washington, D.C.</a> is the capital of United States of America</p> <br /> <a href="http://www.history.com/topics/us-states/washington-dc" target="_blank"><img src="Washington.jpg" /></a> </body> </html>