make a whole div a link

There is no href attribute for the div. So to make an entire div a link, you have to wrap it inside an anchor tag.

See the example HTML below.

<a href="link-to-another-page">
  <div>
    <h2>This is a heading</h2>
    <img src="./img/car-wash.jpg" alt="car wash">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  </div>
</a>

In the above code, you see that I have a couple of HTML elements such as a heading, image & paragraph. All these elements live inside a <div>. And this whole div is wrapped by an anchor tag (<a>).

This is how you can make a whole div a link. If you click anywhere in the div no matter if it’s a heading, image, paragraph, button, or something else, it will redirect you to another page (that you linked to).

With the above HTML, the output looks like the screenshot below.

I made this entire div a clickable link

You really don’t need CSS to make the clickable div work. However, you may need some basic styling for it.

For the above screenshot & the HTML, I have the following CSS.

div {
  background-color: #D4FFD1;
  max-width: 900px;
  margin: 0 auto;
  padding: 15px;
}
div a {
  text-decoration: none;
  color: initial;
}

And it brings me to the end of this post.

Learn more about HTML links

Build HTML CSS projects

About us templatePreview
Team pagePreview
Testimonial pagePreview
Testimonial sliderPreview
Contact pagePreview
Multipage websitePreview
Portfolio websitePreview
Animated portfolioPreview
Computer science portfolioPreview
Navigation bar (without JS)N/A
Create a hamburger menuPreview
Create a navigation menu in two waysN/A
Footer templatesPreview
Hero bannerPreview
Background sliderPreview
Card templates (HTML, CSS)Preview
Animated cardsPreview
Three-column layout templatePreview
Two column layoutPreview
Breadcrumb navigationN/A
Progress bar templatePreview
Thank you pagePreview
Resume templatePreview

Conclusion

Now you know how to make a div that acts like a link. And this clickable div can contain any HTML element.

After you wrap the <div> inside the <a> tag, all the heading, text, etc may have an underline & the color may turn blue. But this you can fix/override by CSS (that I showed you above).