Home » HTML » Links In HTML

Links In HTML

Link found in all website. links are used to go from one page to another page.

HTML Links – Hyperlinks

HTML links are hyperlinks. You can click on a link and jump to another document. When you move the mouse over a link, the mouse arrow will turn into a little hand.

Note: A link does not have to be text. It can be an image or any other HTML element.

Syntax Of links

Links are define with <a> tag. syntax of links are as follows.

<a href=”page url”>Link text goes here</a>

For Example

<a href=”https://www.s1school.net”>Visit our Site For Web Designing or Developing</a>

  • The href attribute specifies the destination address (https://www.s1school.net) of the link.
  • The Link text goes here is the visible part (Visit our Site For Web Designing or Developing).
  • Clicking on the link text will send you to the specified address.

Without a forward slash on subfolder addresses, you might generate two requests to the server. Many servers will automatically add a forward slash to the address, and then create a new request.

Local Links

The example above used an absolute URL (A full web address). A local link (link to the same web site) is specified with a relative URL (without http://www….).

<a href=”html_images.jpg”>HTML Images</a>

HTML Link Colors

By default, a link will appear like this (in all browsers):

  • An unvisited link is underlined and blue
  • A visited link is underlined and purple
  • An active link is underlined and red

You can change the default colors, by using styles:-

a:link {
    color: green; 
    background-color: transparent; 
    text-decoration: none;

a:visited {
    color: pink;
    background-color: transparent;
    text-decoration: none;

a:hover {
    color: blue;
    background-color: transparent;
    text-decoration: underline;

a:active {
    color: gray;
    background-color: transparent;
    text-decoration: underline;

HTML Links – The target Attribute

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

  • _blank – Opens the linked document in a new window or tab
  • _self – Opens the linked document in the same window/tab as it was clicked (this is default)
  • _parent – Opens the linked document in the parent frame
  • _top – Opens the linked document in the full body of the window
  • framename – Opens the linked document in a named frame

This example will open the linked document in a new browser window/tab:-

<a href=”https://www.s1school.net/” target=”_blank”>Visit s1school</a>

If your webpage is locked in a frame, you can use target=”_top” to break out of the frame:-

<a href=”http://www.s1school.net/category/html/” target=”_top”>Visit HTML tutorials</a>

HTML Links – Image as Link

It is common to use images as links:-

<a href=”http://www.s1school.net/”>
  <img src=”sitelogo.jpg” alt=”HTML tutorial” style=”width:42px; height:42px; border:0;”>

border:0; is added to prevent IE9 (and earlier) from displaying a border around the image (when the image is a link).

HTML Links – Create a Bookmark

HTML bookmarks are used to allow readers to jump to specific parts of a Web page. Bookmarks can be useful if your webpage is very long. To make a bookmark, you must first create the bookmark, and then add a link to it. When the link is clicked, the page will scroll to the location with the bookmark.


First, create a bookmark with the id attribute:

<h2 id=”C4″>Chapter 4</h2>

, ,

Leave a Reply

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


error: Sorry You Have Not Permission To Copy!