HTML Links

❮ Prev Next ❯

As you already know, links. are a vital part of Web pages. Links allow you to move smoothly from one page to another. It allows you to navigate from page to page. It also enables you to get more information about a certain topic.

As such, there are a lot of different types of links that you should know when learning HTML. Let us first concentrate on the body of your HTML document. What are these link types that you should know about?

  • Regular or text links
  • Image links
  • Placeholder or anchor Links

Regular or Text Links

The most common type of link is the text link. These are text that are usually rendered underlined and in blue, and allows you to visit a linked resource. To create a simple text link, use the <a> tag by following this syntax: anchor tag, is used to create hypertext links in HTML documents.

The link tag, also known as the anchor tag, is used to create hypertext links in HTML documents. Here's an example of the basic syntax: 

<a href="URL of page you want to link to">link text here</a>

What does this syntax mean?

  • The <a> tag opens the link element.
  • The href attribute will tell you the destination of the link.
  • The "link text" could be anything from a simple description of the linked page to something like "click here" or "visit the page."
  • The <a> tag closes the element.

For example: 

<a href="http://www.google.com/">>Google It!</a>

Would show as:

Google It!

Clicking on that link will take you to http://www.google.com. Take note that the destination URL does not have to be an HTML page or a Web page. Links could take you to an image file, a Word document, a PDF file, or even audio, video and other multimedia files.

Example 

<!DOCTYPE HTML>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
      <h1>HTML Link</h1>
      <a href="http://www.google.com">Google it!</a>
    </body>
</html>

Image Links

Sometimes, you would want to use an image instead of a text link. That is possible too. To use an image as your link, use the following syntax: 

<a href="URL">
  <img src="image.jpg"  alt=""alt text of image" />
</a>

On your page, the picture called image.jpg will be linked to any URL you have.

Example 

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title of the Document</title>
  </head>
  <body>
    <h1>Image Links</h1>
    <a href="http://codingkoleji.com/">
    <img src="../../images/logo/logo.png"  alt="Logo of Coding Koleji"/>
    </a>
  </body>
</html>

Link in Button and More:

The link tag can also be used to create links on other HTML elements such as buttons and images. Here's an example of a link on a button:

Example 

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title of the Document</title>
  </head>
  <body>
    <h1>Link in Button</h1>
    <a href="http://codingkoleji.com/">
      <button>Click Here!</button>
    </a>
  </body>
</html>

the link tag is a fundamental part of HTML that allows you to create hypertext links between documents and web pages. By using attributes and different types of URLs, you can customize the link behavior and appearance to fit your needs.

Link Color and Hover:

The default color of links in HTML is blue, but you can customize this color using CSS. You can change this behaviour by using CSS, in this example below we will going to use inline style to change the color of the link.

Example 

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title of the Document</title>
  </head>
  <body>
    <h1>HTML Link</h1>
    <p>Move the curso on the link</p>
    <a href="http://codingkoleji.com/" style="color: blue; text-decoration: none;" onmouseover="this.style.color='red';" onmouseout="this.style.color='blue';">Link</a>
  </body>
</html>

In this example, we're using inline styles to set the initial link color to blue and remove the default underline using the "text-decoration" property. We're also using the "onmouseover" and "onmouseout events to change the link color to red when the user hovers over it and back to blue when they move the mouse away.

Link :Visited:

To set the link color for visited links, we can add the "visited" pseudo-class to the inline style, like this:

Example 

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title of the Document</title>
  </head>
  <body>
    <h1>HTML Link</h1>
    <p>Move the curso on the link</p>
    <a href="http://codingkoleji.com/" style="color: blue; text-decoration: none;" onmouseover="this.style.color='red';" onmouseout="this.style.color='blue';" :visited="{color: purple;}">Link</a>
  </body>
</html>

In this example, we're adding the ":visited" pseudo-class to the inline style and setting the color to purple using CSS. This will change the color of the link to purple once the user has visited the page.

you can use inline styles in HTML to set link color, hover, and visited styles using CSS properties and events. By setting the "color" property and using "onmouseover" and "onmouseout events, you can change the link color when the user hovers over it. Adding the ":visited" pseudo-class to the inline style and setting the color using CSS will change the link color for visited links.

Links to e­Mail Addresses

Instead of an URL, image or video and other similar files, you could create an email link . An e­mail link would open the user's default e­mail client (Gmail, Outlook, Apple Mail, etc) and start a new message with the specified e­mail addresses already filled into the TO: field. If you have also specified a subject, the subject line will also be filled in automatically.

How do you do this? Use the following syntax: 

<a href="mailto:you@yourdomain.com" Subject="Creating an email link ">email me!</a>

On your page, this will show up as

"email me!"

When you click on that link, it will open your e­mail client to compose a new message window. On the TO field, you will see you@yourdomain.com already entered and the subject line will read as "Creating an e­mail link!" .

Example 

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title of the Document</title>
  </head>
  <body>
    <h1>HTML Link</h1>
    <a href="mailto:info@codingkoleji.com" Subject="I want to learn coding in person ">Send us an email!</a>
  </body>
</html>

Bookmarks Link:

Bookmarks are used in HTML to create links to specific sections of a web page. You can create a bookmark by adding an A good way to "id" attribute to an HTML element, like this:

Example 

<!DOCTYPE HTML>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
      <h1>HTML Bookmarks</h1>
      <h2 id="section-1">Section 1</h2>
      <p>This is the first section of the page.</p>
      <a href="#section-1">Go to Section 1</a>
    </body>
</html>

In this example, the "h2" element has an "id" attribute with the value "section-1". This creates a bookmark that can be linked to using the "a" tag.

When the user clicks this link, the browser will scroll to the "h2" element with the "id" attribute of "section-1".

You can also create a bookmark link that opens in a new window or tab by adding the "target" attribute to the "a"tag.

Link Attributes:

The link tag can also be used with a variety of attributes to customize the link behavior and appearance. Here are some common attributes:

  • target: specifies where to open the link (e.g. "_blank" for a new tab/window, more examples: "_self, _parent, _top")
  • title: adds a tooltip to the link when hovered over
  • rel: specifies the relationship between the current document and the linked document (e.g. "nofollow" for search engine optimization)

Example 

<!DOCTYPE HTML>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
      <h1>HTML Link Attributes</h1>
      <a href="http://codingkoleji.com/"  target="_blank"  title="Go to Coding Koleji"  rel="nofollow">Coding Koleji</a>
    </body>
</html>

Absolute and Relative URL:

The "href" attribute can be set to an absolute or relative URL. An absolute URL includes the full path to the destination document, including the protocol (http or https). A relative URL specifies the path to the destination document relative to the current document.

Example 

<!DOCTYPE HTML>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
      <h1>Absolute and Relative Path</h1>
      <h3>Here's an example of an absolute URL:</h3>
      <a href="http://codingkoleji.com/">Coding Koleji</a>
      <h3>Here's an example of an relative URL:</h3>
      <a href="/contact-us">Contact Us</a>
    </body>
</html>

An absolute URL is a complete URL that includes the protocol, domain name, and path to a specific page or resource on the web. An example of an absolute URL is.

In this example, "https://" is the protocol, "www.codingkoleji.com" is the domain name, and "../contact.html" is the path to the specific page.

A relative URL is a URL that is relative to the current page's URL. It only includes the path to the specific page or resource on the same website. An example of a relative URL is.

In this example, ".." in "../contact.html" indicates that the page is located one level above the current page in the directory structure. The "about.html" is the name of the specific page.

The main difference between absolute and relative URLs is that absolute URLs always point to the same location, regardless of where they are used. In contrast, relative URLs are flexible and can be used on different pages within the same website, as long as the file or resource being linked to is located in the same relative location.

Now that you have just learn the most valuable lesson about "Link" and understand how to use it, lets see Images in the next chapter.

❮ Prev Next ❯