You Are Here

HTML Links

HTML link tag is used to apply link to a word, a sentence or image. A webpage can contain different types of links that take you directly to other pages and allow you to navigate to a specific location.
In HTML links are called Hyperlinks and they are defined using <a> tag.

HTML Link Syntax:

In HTML Links are specified using the <a> tag, which is called an anchor tag. The content between <a>…</a> becomes part of the link and the user can click on that part to reach the specified location.

Syntax:

<a href = “URL”> Link Text/Sentence/Image </a>

Explanation of the syntax:

href : The href attribute specifies the destination address of the link used.
Link Text: It is the visible part of the link.

Example:

<a href = “https://flourishsoft.com/”> Flourish Software </a>
Try it

Internal Links:

An “Internal Link” is a link in your site that navigates you to another page on your website.

Example:

<a href = “http://www.w3codingschools.com/html-tutorial-html-introduction/”> W3CodingSchools </a>
Try it

External Links:

The “External Link” is a link that navigates you away from your site to another website (like http://google.com.

Example:

<a href = “https://flourishsoft.com/”> Flourish Software </a>
Try it

HTML Link Colors:

Different links will appear in different formats such as:
An unvisited link appears as underlined and blue in color by default.
A visited link appears as underlined and purple in color by default.
An active link appears as underlined and red in color by default.

Example :

You can change the appearance of links by using CSS:
a:visited {

color: green;

background-color: transparent;

}
a:hover {

color: blue;

background-color: transparent;

}
a:active {

color: yellow;

background-color: transparent;

}
a:focus {

color: red;

background-color: transparent;

}
Try it

The target Attribute in HTML Link Tag:

The target attribute specifies the location where to open the linked document.

The target attribute values:

  • _blank: It opens the linked document in a new window
  • _self: It opens the linked document in the same frame/window
  • _parent: It opens the linked document in the parent frameset
  • _top: It opens the linked document in the full body of the window
  • framename: It opens the linked document in the named frame

Example:

<p> This attribute will open link in a new browser window or tab. </p>
<a href=”https://flourishsoft.com/” target=”_blank”> Flourish Software </a>
<p> This attribute will open link in the same window or tab. </p>
<a href=”https://flourishsoft.com/” target=”_self”> Flourish Software </a>
<p>This attribute will open link in the full body of the window. </p>
<a href=”https://flourishsoft.com/” target=”_top”> Flourish Software </a>
<p> This attribute will open link in the parent frame. </p>
<a href=”https://flourishsoft.com/” target=”_parent”> Flourish Software </a>
Try it

HTML Image as Link:

You can create a hypertext link using an image, it’s simple to use an image as a hyperlink. You just need to use an image inside the hyperlink at the place of text.

Example:

<p>Click following link</p>
<a href = “https://flourishsoft.com/” target = “_self”>
<img src = “image.jpg” alt = “flourish website”>
</a>
Try it

Link Title Attribute:

The title attribute in HTML link gives extra information about an element and this information is shown as a tooltip when the mouse moves over it.

Example:

<a href=”https://flourishsoft.com/about” title=”Go to About section”> Flourish Software </a>
Try it

HTML Bookmark:

HTML Bookmark is useful if you have a long page that you want to allow the users to quickly navigate to different sections on the same web page.

Steps to create Bookmark:

Create a bookmark, using the id attribute.
<h3 id=”T5″> Topic 5 </h3>
Add the specified link of the webpage to the bookmark within the same page.

Example:

<a href=”#T5″> Jump to Topic 5 </a>
Try it

Download Links:

You can create a download link that is used to download a file from the server.
Creating a downloadable link is very simple you just need to give the URL of the file.

Example:

<a href = “http://w3codingschools.com/sample.pdf” download> Download PDF File </a>
Try it

Ask a Question

Your email address will not be published. Required fields are marked *