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.
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
- How to add a link in HTML?
- How to open a link in a new tab in HTML?
- How to create an HTML download link?
- What is the difference between a link & button?
- How to create an HTML button that works like a link?
- How to make a div clickable link?
- How to create HTML anchor links that jump to another section?
- How to create an HTML mailto link (including email subject)?
- How to center a link in HTML & CSS?
- How to deactivate links using CSS?
- How to remove the underline from a link?
Build HTML CSS projects
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).
