HTML – Hyperlinks

Introduction

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.

Creating a links:

  • Links are created on a web page by using the <A> and </A>tag.
  • Anything that returns between the <a> compared tag becomes a hyperlink or hotspot.
  • Documents to be navigated needs to be specified.
  • By using the HREF attribute of the <A>, the next navigation web page or image can be specified. <A HREF=”filename”></A>

Types of links :-

There are three types of links:

  1. Links to an external document: <A HREF=”file name”></A>
  2. Links to a specified place within the same document: <A NAME=”location”></A>
  3. Link to a particular file on a particular position:<A HREF=”URL”#”location”</A>
AttributeValueDescription
crossoriginanonymous
use-credentials
Specifies how the element handles cross-origin requests
hrefURLSpecifies the location of the linked document
hreflanglanguage_codeSpecifies the language of the text in the linked document
mediamedia_querySpecifies on what device the linked document will be displayed
relalternate
author
dns-prefetch
help
icon
license
next
pingback
preconnect
prefetch
preload
prerender
prev
search
stylesheet
Required. Specifies the relationship between the current document and the linked document
sizesHeightxWidth
any
Specifies the size of the linked resource. Only for rel=”icon”
target_blank
_self
_top
_parent
frame_name
Not supported in HTML5.
Specifies where the linked document is to be loaded
typemedia_typeSpecifies the media type of the linked document
<!DOCTYPE html>
<html>
<body>
<p>HTML Links</p>
<a href="Html1.html">Visit our HTML tutorial</a>
</body>
</html>

Output :-

HTML Links

Visit our HTML tutorial

Using the #id selector / Bookmark in HTML

In CSS, “#id” is a selector that may be used to designate an area that a link should point to, similar to anchor in HTML.

In the following example, you’ll see how to apply #id to an HTML tag, and then how to link to it. This example will link to the first paragraph at the top of this page.

<!DOCTYPE html>
<html>
<body>
<b>
<p><a href="#C4">Jump to Chapter 4</a></p>
<p>Chapter 1</p>
<p>This chapter explains Ram Raj</p>
<p>Chapter 2</p>
<p>This chapter explains Ram Raj</p>
<p>Chapter 3</p>
<p>This chapter explains Ram Raj</p>
<p id="C4">Chapter 4</p>
<p>This chapter explains Ram Raj</p>
<p>Chapter 5</p>
<p>This chapter explains Ram Raj</p>
<p>Chapter 6</p>
<p>This chapter explains Ram Raj</p>
<p>Chapter 7</p>
<p>This chapter explains Ram Raj</p>
<p>Chapter 8</p>
<p>This chapter explains Ram Raj</p>
<p>Chapter 9</p>
<p>This chapter explains Ram Raj</p>
<p>Chapter 10</p>
<p>This chapter explains Ram Raj</p>
<p>Chapter 11</p>
<p>This chapter explains Ram Raj</p>
<p>Chapter 12</p>
<p>This chapter explains Ram Raj</p>

</b>
</body>
</html>

Output :-

Jump to Chapter 4

Chapter 1

This chapter explains Ram Raj

Chapter 2

This chapter explains Ram Raj

Chapter 3

This chapter explains Ram Raj

Chapter 4

This chapter explains Ram Raj

Chapter 5

This chapter explains Ram Raj

Chapter 6

This chapter explains Ram Raj

Chapter 7

This chapter explains Ram Raj

Chapter 8

This chapter explains Ram Raj

Chapter 9

This chapter explains Ram Raj

Chapter 10

This chapter explains Ram Raj

Chapter 11

This chapter explains Ram Raj

Chapter 12

This chapter explains Ram Raj

Leave a Comment

Crypto logo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus cursus rutrum est nec suscipit. Ut et ultrices nisi. Vivamus id nisl ligula. Nulla sed iaculis ipsum.

Contact

Company Name

Address