HTML Links

HTML Links

 

 

Links are found in nearly all web pages. Links allow users to click their way from page to page.

HTML Links – Hyperlinks

HTML links are hyperlinks.

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a little hand.

Note: A link does not have to be text. It can be an image or any other HTML element.

 

HTML Links – Syntax

Hyperlinks are defined with the HTML <a> tag:

<a href=”url>link text</a>

<!DOCTYPE html>

<html>

<body>

 

<h2>HTML Links</h2>

<p><a href=”https://letuslearn.in/html/“>Visit our HTML tutorial</a></p>

</body>

</html>

 

The href attribute specifies the destination address (https://letuslearn.in/html/) of the link.

The link text is the visible part (Visit our HTML tutorial).

Clicking on the link text will send you to the specified address.

Note: Without a forward slash at the end of subfolder addresses, you might generate two requests to the server. Many servers will automatically add a forward slash to the end of the address, and then create a new request.

 

Local Links

The example above used an absolute URL (a full web address).

A local link (link to the same web site) is specified with a relative URL (without https://www….).

<!DOCTYPE html>

<html>

<body>

 

<h2>Local Links</h2>

 

<p><a href=”html_images.asp”>HTML Images</a> is a link to a page on this website.</p>

 

<p><a href=”https://www.w3.org/”>W3C</a> is a link to a website on the World Wide Web.</p>

 

</body>

</html>

 

Local Links

HTML Images is a link to a page on this website.

W3C is a link to a website on the World Wide Web.

HTML Links – The target Attribute

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

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

This example will open the linked document in a new browser window/tab:

<!DOCTYPE html>

<html>

<body>

 

<h2>The target Attribute</h2>

 

<a href=”https://letuslearn.in/html/” target=”_blank”>Visit our HTML tutorial!</a> 

 

<p>If you set the target attribute to “_blank”, the link will open in a new browser window or tab.</p>

 

</body>

</html>

 

The target Attribute

Visit our HTML tutorial!

If you set the target attribute to “_blank”, the link will open in a new browser window or tab.

Tip: If your webpage is locked in a frame, you can use target="_top" to break out of the frame:

<!DOCTYPE html>

<html>

<body>

 

<p>Locked in a frame? <a href=”https://letuslearn.in/html/” target=”_top”>Click here!</a></p>

 

</body>

</html>

 

Locked in a frame? Click here!

HTML Links – Image as a Link

It is common to use images as links:

<!DOCTYPE html>

<html>

<body>

 

<h2>Image Links</h2>

 

<p>The image is a link. You can click on it.</p>

 

<a href=”https://letuslearn.in/html/html-images/“>

  <img src=”smiley.gif” alt=”HTML tutorial” style=”width:42px;height:42px;border:0″>

</a>

 

<p>We have added “border:0” to prevent IE9 (and earlier) from displaying a border around the image.</p>

 

</body>

</html>

 

Image Links

The image is a link. You can click on it.

HTML tutorial

We have added “border:0” to prevent IE9 (and earlier) from displaying a border around the image.

Note: border:0; is added to prevent IE9 (and earlier) from displaying a border around the image (when the image is a link).

Button as a Link

To use an HTML button as a link, you have to add some JavaScript code.

JavaScript allows you to specify what happens at certain events, such as a click of a button:

<!DOCTYPE html>

<html>

<body>

 

<h2>Button as a Links</h2>

 

<p>Click the button to go to the default page.</p>

 

<button onclick=”document.location = ‘default.asp'”>HTML Tutorial</button>

 

</body>

</html>

 

Button as a Links

Click the button to go to the default page.

Tip: Learn more about JavaScript in our JavaScript Tutorial.

Link Titles

The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.

<!DOCTYPE html>

<html lang=”en-US”>

<body>

 

<h2>Link Titles</h2>

<p>The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.</p>

<a href=”https://letuslearn.in/html/” title=”Go to LetUsLearn HTML section”>Visit our HTML Tutorial</a>

 

</body>

</html>

 

Link Titles

The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.

Visit our HTML Tutorial

External Paths

External pages can be referenced with a full URL or with a path relative to the current web page.

This example uses a full URL to link to a web page:

<!DOCTYPE html>

<html>

<body>

 

<h2>External Paths</h2>

 

<p>This example uses a full URL to link to a web page:</p>

<p><a href=”https://letuslearn.in/html/“>HTML tutorial</a></p>

 

</body>

</html>

 

External Paths

This example uses a full URL to link to a web page:

HTML tutorial

Chapter Summary

  • Use the <a> element to define a link
  • Use the href attribute to define the link address
  • Use the target attribute to define where to open the linked document
  • Use the <img> element (inside <a>) to use an image as a link