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:
In hyperlink href attribute used to specifies the destination address.
Example:
<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:
<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):
<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 ):
<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 ):
<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:
<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>
About Author
bestonetechnologies
I am a software developer.
