HTML Links

HTML links are used to connect one web page to another web page or specific parts of a page. These HTML links are known as hyperlinks.

Syntax:

<a href=’your_url’>Link Text Here</a>

In hyperlink href attribute used to specifies the destination address.

Example:

<html>
<head>
<title>HTML Link</title>
</head>
<body>
<a href=’http://www.bestonetechnologies.com’> Visit our website </a>
</body>
</html>

Local Links

In the above example we have given absolute URL (full web address of the bestonetechnologies) to the href attribute.

We can also provide local link (link within a website) to the href attribute, this type of link are also known as relative URL (without http://www).

Example:

<html>
<head>
<title>HTML Link (relative path) </title>
</head>
<body>
<a href=’../blog/html-list.html’> Local Link </a>
</body>
</html>

Links – Target Attribute

In html links target attribute specifies where to open the linked document.

We can assign following values to the target attribute:

  • _self – this is the default value of target attribute, that opens the linked document in the same window OR tab on which it was clicked.
  • _blank – _blank attribute opens the linked document in new window OR tab.
  • _parent – _parent attribute opens the linked document in parent frame.
  • _top – _top attribute opens the linked document in full window.

Example (_blank):

<html>
<head>
<title>HTML Link – target blank</title>
</head>
<body>
<a target=’_blank’ href=’../blog/html-list.html’> Local Link with target blank </a>
</body>
</html>



Example ( _parent ):

<html>
<head>
<title>HTML Link – target _parent </title>
</head>
<body>
<a target=’_parent’ href=’../blog/html-list.html’> Local Link with target blank </a>
</body>
</html>

Example ( _top ):

<html>
<head>
<title>HTML Link – target _top </title>
</head>
<body>
<a target=’_top’ href=’../blog/html-list.html’> Local Link with target blank </a>
</body>
</html>

Links – Create bookmark

Bookmarks are used to jump to specific parts of web page. It’s useful when we have a very long webpage.

To create a bookmark, first we have to define bookmark with “id” attribute and then add a link to it.

Example:

<html>
<head>
<title>HTML Link – Bookmark </title>
</head>
<body>
<h3 id=”top”>Top</h3>
<a href=’#bottom’> Go Bottom </a>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ‘Content here, content here’, making it look like readable English.</p>
<p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for ‘lorem ipsum’ will uncover many web sites still in their infancy.</p>
<p>Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
<p>Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
<p>Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
<h3 id=”bottom”>Bottom</h3>
<a href=’#top’> Go to top </a>
</body>
</html>

Leave a Reply