How to Use HTML Links

To use HTML links we first need to understand what HTML links are.

HTML Links
Html Links are used to go from one page to another. They are also called Hyperlinks. It allows the user to click and then redirect to another page. It is a text or an image you can click on, and jump to another document.

Syntax:

Example:

  • href: is the destination or URL of the going page.
  • Link Name: is the name or visible text.

Links are of two types:

  • Absolute Link
  • Relative Link

Absolute Link

Absolute links are the complete web address of the destination page.

Relative Link

Relative link have (link to a same website) relative address of the destination page.

while working on your own website, relative links are used, as to move within the directories. we use

to go into the directory
directoryName/URL

Suppose that you have HTML page within a folder named aboutAuthers and HTML page about.html is placed in that folder. and you are working in index.html. To access about.html in folder

access html page in folder
access html page in folder

HTML Links Colors

When you move the mouse over a link, two things will normally happen:

  • The mouse arrow will turn into a little hand
  • The color of the link element will change.

By default, a link will appear (in all browsers):

  • An unvisited link is underlined and blue
  • A visited link is underlined and purple
  • An active link is underlined and red

Target: it specifies where to open the linked document.

Target Attribute Values

  1. _blank: it opens the linked document in new window or in new tab.
  2. _self: it opens the linked document in same frame.
  3. _parent: it opens the linked document in parent frame.
  4. _top: it opens the linked document in full body of the window.
  5. Frame name: it opens the linked document in that frame.

Image as Link:

Click the image to open link place behind the image.

Other Attributes:

Link attribute can also have an id or a class. It is an inline element that is used within html body.