Categories
CSS HTML Web development

How do you add a link to a whole div?

How to make a whole div clickable?

To make the entire div clickable follow the steps below and watch the video tutorial.

Demo:

Step1.

Add HTML

Create the div element:

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="example">
  <h3>What is a Web Developer?</h3>
  <p>A Web Developer is a kind of programmer who takes a web design, which has been created by a client or design team and turns it into a website or distributed network applications...</p>
  </div>

</body>
</html>

Step2.

Add CSS

Style the div element:

<!DOCTYPE html>
<html>
<head>

<style>
.example {
  padding:20px;
  width:200px;
  background-color: lightblue;
}
</style>

</head>
<body>

<div class="example">
  <h3>What is a Web Developer?</h3>
  <p>A Web Developer is a kind of programmer who takes a web design, which has been created by a client or design team and turns it into a website or distributed network applications...</p>
  </div>

</body>
</html>

Output:

What is a Web Developer?

A Web Developer is a kind of programmer who takes a web design, which has been created by a client or design team and turns it into a website or distributed network applications…

Step3.

Add a link

Open an <a> element at the beginning of the div and close at the end. Add the href attribute with the link.

Optional: Add the target attribute to open the link in a new tab.

<!DOCTYPE html>
<html>
<head>

<style>
.example {
  padding:20px;
  width:200px;
  background-color: lightblue;
}
</style>

</head>
<body>
<a href="https://lenadesign.org/2019/12/22/what-is-a-web-developer/" target="_blank">
<div class="example">
  <h3>What is a Web Developer?</h3>
  <p>A Web Developer is a kind of programmer who takes a web design, which has been created by a client or design team and turns it into a website or distributed network applications...</p>
  </div>
     </a>
</body>
</html>

Output:

Step4.

To remove the line under the link use the CSS text-decoration Property:

<!DOCTYPE html>
<html>
<head>

<style>
.example {
  padding:20px;
  width:200px;
  background-color: lightblue;
}

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

</head>
<body>
<a href="https://lenadesign.org/2019/12/22/what-is-a-web-developer/" target="_blank">
<div class="example">
  <h3>What is a Web Developer?</h3>
  <p>A Web Developer is a kind of programmer who takes a web design, which has been created by a client or design team and turns it into a website or distributed network applications...</p>
  </div>
     </a>
</body>
</html>

Output:

Enjoy coding!

Watch also the video tutorial:

Read also:

CSS Styling Links

How to put an image into HTML code?

How to change the text on Hover?