HTML Links Code | HTML Tutorial


HTML Links – Hyperlinks

HTML links are known as hyperlinks.

It allows users to jump from one page to another page.

You can connect one page to another relevant page. It may be in the same website or another website.

A HTML links can be created in various ways. You can display any text as a link or you can also use image as a clickable link.

How can you understand that this is a link?

When you take your cursor over a link, your mouse arrow will change to a little hand sign.


HTML Links – Syntax

HTML links are specified with <a> tag. This is also known as anchor tag.

HTML link tag is an inline level element.

Anything in between <a>…</a> tag becomes a clickable link. A user can click on this part and go to another page that is linked.

How can you add a URL in an html link?

This anchor tag <a> can contain some attributes. The most important one is href attribute.

This attribute contains the URL or the path that you want to link with the page.

<a href="https://worldtechis.com/html/html-introduction/">
   Visit our HTML tutorial
</a>

The output shows in a web browser:

This is the basic structure of an HTML link. We will discuss more about other attributes in the later part of this tutorial.


HTML Link Colors

You can use CSS to give style to your HTML links.

All browser display a link with a default style. By the way, you can override this default style very easily.

  • An unvisited link contains underlined and shows up in blue color.
  • A visited link contains underlined and shows up in purple color.
  • An active link contains underlined and shows up in red color.

You will see active link color when you click on the link. It appears for very short time.E

<style>
a {
  color: green; 
  text-decoration: none;
}

a:visited {
  color: pink;
  text-decoration: none;
}

a:hover {
  color: red;
  text-decoration: underline;
}

a:active {
  color: yellow;
  text-decoration: underline;
}
</style>

Here the hover is a stage that activate when we take our cursor over a link. That time, this hover style shows up.

To learn more about basic CSS, visit our tutorial – HTML Style

OUTPUT


HTML Links – target Attribute

We already discussed about href attribute in <a> tag. There is another important attribute for this tag.

The target attribute specifies location where the linked document will open.

This attribute has different values. Each value works in different ways.

  • _blank – Opens the linked document in a new window or tab
  • _self – Opens the linked document in the same window/tab (this is default)
  • _parent – Opens the linked document in the parent frame
  • _top – Opens the linked document in the full body of the window

OUTPUT

There are some other attributes for this tag i.e. rel, media.

The rel attribute specifies the relationship between the current document and the linked document.

The media attribute specifies on what device the linked document will be displayed


Link Titles

You can add extra information about the link by using title attribute.

This will be the title of that link. This title will hint to the user what the link is about.

The text in title attribute will appear as a pop up when someone hover over the link.

<a href="https://worldtechis.com/html/html-introduction/" title="Go to WorldTechis HTML section">
   Visit our HTML Tutorial
</a>

The output shows in a web browser:


Local Links

In our above examples, we used full website address/ URL in the link.

However, you can create HTML links without adding full URL.

A local link is specified with a relative URL without https://www in <a> tag.

This kind of links always indicate the pages in the same website.

<a href="front-page.php">WorldTechis</a>

The output shows in a web browser:


HTML Links – Image as Link

You are able to use image as a link just by adding <img> tag inside the <a> tag.

This will convert the full image into a link.

<a href="default.asp">
   <img src="https://worldtechis.com/wp-content/uploads/2019/02/web-development.jpg" alt="HTML tutorial" style="width:200px;height:150px;">
</a>

The output shows in a web browser:


HTML Links – Create a Bookmark

HTML bookmark allows a user to jump from one part to another specific part of a Webpage.

This is really useful in case of long content. Bookmark will help user to scroll the page very quickly.

When you click the link, the page scrolls to the specific location.

We believe you already have seen scroll to top button in different website.

If you click that button, it will take you to the top of that page. This is one kind of HTML bookmark link.

To create a bookmark link, first you have to use an id attribute in the specific element where you want to go after clicking the bookmark.

<h2 id="bookmark">HTML Link Tutorial</h2>

Now, create the link using that id that you have added to the element.

<a href="#bookmark">Jump to Link Tutorial</a>

If you click in the link, this will scroll to the specific heading.

<a href="#html_links">Jump to HTML Links Tutorial</a>

The output shows in a web browser:


Download Links

You can create text link to download PDF, or DOC or ZIP files.

This is very simple process; you just need to give complete URL of the downloadable file.

<a href = "https://worldtechis.com/wp-content/uploads/2019/02/download-link.zip">Download File</a>

The output shows in a web browser: