Welcome to HTML5-Tutorials

Our site offers a lot of HTML5 learning from absolutely beginning to advanced level. If you want to make a website with HTML, this site will completely guide you a lot. So learn HTML5 syntax and form of coding easily with this website. If you have any doubt, leave a message on us. We will return you so soon. This site includes innumerable number of references you need to do after studying their corresponding elements.

In this page, we will learn about HTML Links.

HTML links may be either texts or images or even button. All website pages have links. It is used to jump from the active page to the another page.

1. Text as an HTML links

Text(s) can be used as a link by using href attribute with the target url to the <a> tag to jump into another page.

Syntax

<a href="url">

Full Code Example

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Learning </title>
</head>
<body>
<a href= "http://myhtml5tutorials.com/index.html"> Click Here </a> , to learn HTML Tutorials.
</body>
</html>

Output

Click Here , to learn HTML Tutorials.

If you click on the "Click Here", you will redirect to the website page that you have written ( http://www.myhtml5tutorials.com/index.html ).
By Default:
The standard link (which you see on the screen) will be underlined and blue in color.
The active link (when you click the link text) will also underlined and red in color.

2. Image as an HTML links

Apart from texts, image can be used as a link by using href attribute with the target url to the <a> tag to jump into another page.

Syntax

<a href="url">

Full Code Example

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Learning </title>
</head>
<body>
<a href= "http://myhtml5tutorials.com/index.html">
<img src= "bala.jpg" alt="Bala">
</a>
</body>
</html>

Output

Bala

Note: The above HTML file and Image file should be contained within the same folder for the above example. We will study more about the HTML Images in the coming page.

3. Button as an HTML links

Apart from texts and images, button can be used as a link by using onclick attribute of JS.

Full Code Example

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Learning </title>
</head>
<body>
<input type="button" value= "Button Link" onclick= "window.location.href='http://myhtml5tutorials.com/'" />
</body>
</html>

Output

More Reference about Texts Link

You can change the color of texts link color either by using HTML attribute or CSS property

By using HTML attribute

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Learning </title>
</head>
<body LINK="red" VLINK="blue" ALINK="black">
<a href= "/html_css.html"> Click Here </a>, to learn HTML CSS.
</body>
</html>

By using CSS Property

<!DOCTYPE html>
<html>
<head>
<style>
a {color:blue;}
a:hover {color:red;}
a:active {color:black;}
</style>
<meta charset="UTF-8">
<title> HTML Learning </title>
</head>
<body>
<a href= "/html_css.html"> Click Here </a>, to learn HTML CSS.
</body>
</html>

Output

Click Here , to learn HTML CSS.

Types of Giving HyperLinks

1. Internal Link
2. External Link

1: Internal Hyper Link

If you have two HTML files within the same directory (same folder) on your pc, namely page1.html and page2.html, you can link from page1.html to page2.html through a link text by giving url as page2.html

Example of Internal Link

Suppose the below code is named as page1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Learning </title>
</head>
<body>
<a href= "page2.html"> Click Here </a>, to go page2.html
</body>
</html>

Output

Click Here , to go page2.html

When you click on the link texts (Click Here), you will be redirect to page2.html. Such form of giving link is called internal hyper link.

If the page2.html is contained in another folder (must be on the same folder with page1.html), then the page1.html and page2.html can be link as
<a href= "FolderName/page2.html"> Click Here </a>

2: External Hyper Link

If you want to jump from your HTML page to another website, you have to use external hyper link.

Example

<a href= "http://somewhere.com/"> Click here </a>

Form of Giving Hyper Links

HTML Hyper Links can be given into the following forms forms by using target attribute.

1. _blank - It opens the linked document in a new window or tab.

<a href= "URL" target= "_blank"> Click Link </a>

2. _self - It opens the linked document in the same window or tab.
It is default value of target attribute.

<a href= "URL" target= "_self"> Click Link </a>

3. _parent - It opens the linked document in the active frame of a window.

<a href= "URL" target= "__parent"> Click Link </a>

4. _top - It opens the linked document in full size of the window.

<a href= "URL" target= "_top"> Click Link </a>

More Reference about image as link

Images have also external and internal Hyper Links like the case in the text links. We will study more about the HTML Images in the coming page.
Inorder to find a class or id in a large website makes you consume a little time. So to prevent from this, we can create HTML bookmarks. When you click the bookmark link the page automatically scroll down the bookmark that you have set.

Summary

1. HTML Links can be images or texts or button.
2. The href attribute is used to give HTML Links.
3. Not sure to add <a> tag if used </a> tag.
4. Texts links can have three colors: before click, when hover, when click.
5. Inorder to use external Link embed, you need to use a website url.
6. HTML Hyper Links can be given into different forms by using target attribute.
7. The default HTML Target Link is _self.



Some important questions of this page

1. Which HTML tag can give the address or any useful info of author?

See Answer

<address> tag

2. Which HTML tag defines the title of a project or work?

See Answer

<cite> tag

3. Which HTML tag can defines a short quotation?

See Answer

<q> tag.

4. Which HTML tag defines a section covered from another sources?

See Answer

<blockquote> tag.

5. Which HTML tag can change the direction of texts?

See Answer

<bdo> tag.