Html Link With Examples

HTML Links

Hello Students Welcome to our new blog in this blog you will learn about Html Link With Examples. So must check the full blog.

HTML links or hyperlinks connect one resource on the web to another. The resource may be an image, a web page, a program, a video clip, an audio clip, an element within a web page, etc, or anything that can be hosted on the internet.

We use the HTML <a> tag to create hyperlinks. The syntax for the <a> tag is

<a href=”URL”> Text </a>

Here,

  • URL- the destination of the link
  • Text- the part that will be visible as a link

Clicking on the text will navigate you to the resource in the URL. For example,

<a href=”https://careersknowledge.in/introduction-to-html-head-body> HTML Notes </a>

Browser Output

HTML Notes

 Image Links

You can insert almost any content inside a <a> tag to make it a link. Hence, we can also use images as a link.

<a href=”https://careersknowledge.in/“>

          <img src=”logo.png” alt=”careersknowledge Logo”>

</a>

 

target Attribute

By default, any link clicked will open in the same browser window. This may lead to a bad user experience. This is where the target attribute becomes useful. For example,

<a href=”https://careersknowledge.in/ ” target=”_blank”>Programiz</a>

Here, target= “_blank” opens the link in a new browser tab.

We use the target attribute to specify where the link is opened. The target attribute has 4 values.

Target Description
_self (Default) Opens the link in the same browser tab.
_blank Opens the link in a new browser tab.
_parent Opens the link in the parent frame.
_top Opens the link in the current tab window (topmost parent).

download Attribute

When linking to a web resource, we can specify that the resource is to be downloaded by using the download attribute. For example,

<a href=”/files/logo.png” download> Download Image </a>

Browser Output

Download Image

When the link is clicked, the file from /files/logo.png will be downloaded.

We can also provide an optional value to the download attribute. This value will be set as the filename of the downloaded resource. For example,

<a href=”/files/logo.png” download=”Programiz”>Download Image</a>

Here, the link is the same as the previous example, however, when downloading, the file will have the name Programiz.png rather than the previous original name logo.png.

Linking to an HTML element

As previously mentioned, along with linking to web sources, an <a> tag can also link to a respecific element within the web page. We use that by adding # to the URL followed by the id of the specific element. For example,

Link to an element in the same webpage:

<a href=”#title”>Go to Title</a>

Here, clicking on this link will scroll the web page to the element with the id of title

Link to an element in another webpage:

 

Email and Call links

We can also use HTML links as email links and call links to help users contact us or someone else using their email client or call app.

Email links:

The email link opens the user’s default mail client to make it easier for the user to send mail to a specific address. For example,

<a href=”mailto:name@domain.com” > Send Mail </a>

Call links:

Similar to email links, we can create call links to trigger the user’s call app with a phone number. For example,

<a href=”tel:+919898989896″> Call Us </a>

Thanks For Reading the Article. I hope you will understand the topic Html Link With Examples Well.

For Live Class Subscribe Our Youtube Channel link is given below

https://www.youtube.com/@olevelguruji

Also Check out Latest Uploads

HTML Formatting Tags With Examples

Introduction To Html head body tag with attribute

 

 

1 thought on “Html Link With Examples”

  1. Incredible! This blog looks exactly like my old one!
    It’s on a completely different subject but it has pretty much the same page layout
    and design. Excellent choice of colors!

    Reply

Leave a Comment