Learn how to build and design websites with our tutorials.

HTML and HTML5 Links Tutorial

View Tutorial Contents


HTML Links

HTML links are defined with the anchor (<a>) tag. The anchor tag has an opening tag <a> and a closing </a> tag.

The href attribute defines the document or application to which the link leads to. The document may be another document in the same directory, within the same page, a document that is somewhere else on the same server or the document can be on another server.

The link in the code example below links to another document in the same directory.



<a href="aboutUs.html">About Us</a>


The link in the code example below links to another document on the same server but in a different directory.



<a href="../apps/contactForm.html">Contact Us</a>


The link in the code example below links to another website.



<a href="http://learnwebsitedesign.com/">LearnWebsiteDesign.com</a>



Using An Image As A Link

You can turn an image into a link just by enclosing it within a link (<a>) tag as shown below.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

</head>
<body>

<a href="http://learnwebsitedesign.com/"><img src="dog.jpg" alt="This is a dog" /></a>

</body>
</html> 


block-level Elements In <a> Tags

HTML5 allows you to place block-level elements within anchor (<a>) tags. This will make all of the elements within the <a> tag clickable.

The code example below shows you how to place block-level elements within an <a> tag. In the example below, the level 2 heading and the paragraph (and everything inside) is clickable.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

</head>
<body>

<a href="http://learnwebsitedesign.com/">

<h2>
All About Dogs
</h2>

<p>
<img src="dog.jpg" alt="This is a dog" /> This text is all about dogs.
</p>

</a>


</body>
</html>