HTML LINKS
HTML LINKS
This is the lesson 7 of 10 in the course HTML - Beginner to Advance

HTML Links allows us to connect multiple pages on a website. HTML Links are used to navigating other pages or other website pages as well.

Here You will learn all about the HTML Links!

Table of Contents

HTML Links are hyperlinks. Link is a connection between two web pages. The link where it is placed is known as “source” and where it will navigate is known as “destination”.

The HTML Anchor ( <a> ) tag defines a link. Syntex below:

<a href="loationOfDestination">Link Text</a>
  • It improves the indexing of website.
  • It reduces the bounce rate.
  • It guides trafic to older posts.
  • It saves the time of searching.

These three types of links are in HTML. HTML allows us to connect another website, other pages, or navigation on the same pages.

HTML link allows us to connect another website to our website through a link. This is helpful when we want to give credit to others or want to show related details on other sites.
When we want to show our social media accounts on our website, these types of links are used.

<body>
    <h3>Link to Google</h3>
    <a href="https://www.google.com">Google Link!</a>
</body>

Here in this example, you can create a visit to google link on your website.

The navigation bar/menu is the best example of a link to other pages on the same website. We can use these links to connect other pages of our website or images, videos, mp3, or other files.

<body>
    <h3>Link to Google</h3>
    <a href="/blog">Link to blogs</a>
</body>

This type of link is used to navigate on the same page, When a file is too large to read, it shows the specific links to visit a part of the page. as you can we have also created this type of link at the top as “TOC” (Table of content) this navigates us to every heading of this page. For creating this type of link we need to create a source link and another destination link.

Destination Link
To create a destination link, create an anchor tag then write an attribute name and its value like this.

<a name="GoToTop" >


or you can use an id attribute to create the destination link.

<div id="GoToTop">

</div>


Source Link
To create a source link, create an anchor tag then write a href attribute and its value to the name or id with a # hash sign.

<a href="#GoToTop" >Go to Top!</a>

Html has many types of attributes, Let’s discuss them!

The href Attribute

The href attribute is used to write the link of a destination page or any document. Without a href attribute, the link will not work. You can use href=”#top” or href=”#” to link to the top of the current page!

The Target Attribute

The target attribute specifies where to open the link. The target attribute has five values we can use one of them at a time.
The Target Attribute Values:

_blankIt will open the page in a new tab.
_topOpens the page in the full body of the window.
_selfOpens the link in the same frame.
_parentOpens the link in the parent window.
frameNameOpens the link in an iframe.

Absolute vs Relative url

Absolute URL

When we use a URL with “https://www” is known as an Absolute URL. Absolute URL is used to connect other websites.

<a href="https://www.google.com">Google Link!</a>

Relative URL

A relative URL is used to connect images from the same website database. It starts with a “/” or a file name.

<a href="/blog">Blog Page</a>

HTML link color can be defined in three stages. Defined below!

A link when it is not pressed. the color of the link will be blue and it will be underlined by default.

When the user presses the link it changes its color to red.

When a user visits the link it changes its color to purple.

We can create a button using the <button > element and pass the onclick attribute value to the window.location.href = “Address of page”. It will redirect to that link when the user clicks the button.

<button 
    onclick="window.location.href = 'https://www.google.com';"
>
Visit Google!
</button>

We can use an Image as a link in HTML, create an anchor tag and write the destination in href attribute, In between opening <a> and closing </a> tag write the img tag and add an image. It will work like a link.

<a href="https://www.google.com">
  <img src= "https://pbs.twimg.com/profile_images/1455185376876826625/s1AjSxph_400x400.jpg"
alt="Google Logo icn"
/>
</a>

To create an email link create a basic structure of anchor tag, Create anchor tag, then write href attribute and set its value to mailto: and the email address. As shown below.

<a href = "mailto: [email protected]">Send Email</a>

Download shows the file to be downloaded. You can use a download attribute to specify the file to be downloaded when the user clicks on it.

<a href="https://pbs.twimg.com/profile_images/1455185376876826625/s1AjSxph_400x400.jpg" download>
  <img src="https://pbs.twimg.com/profile_images/1455185376876826625/s1AjSxph_400x400.jpg" alt="W3Schools">
</a>

Hope you learned the HTML Links, Here we have provided an online editor you can practice on it. Click Here!

Thank you for reading this article!


You Might Like This:

Our Courses:

HTML – Beginner to Advance

CSS – Beginner to Advance

Course Navigation<< HTML ImagesHTML Table >>
Click to rate this post!
[Total: 0 Average: 0]

Oh, hi there 👋 It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply