Links only to the parent div - html

Question

I wanted to make a card (which has an image and text) clickable. I applied the link to the parent div only. See the link added to the first card. Then I added the code to the HTML widget in our tool. When I added it to the HTML widget, it applied that link to all the nested divs and the whole card was not clickable. Either the image or text was clickable instead of the whole card.
Here's the code in which I added the hyperlink to card 1. I am wondering why it is automatically adding the link to the parent div to all the div inside the parent div. Because of this, I am not able to make the whole card clickable.
.tcolumn {
float: left;
width: 18.68%;
margin-bottom: 16px;
padding: 0 8px;
}
#media screen and (max-width: 650px) {
.tcolumn {
width: 100%;
display: block;
}
}
.tcard {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
border: 2px solid #1e5b67;
}
.tcontainer {
padding: 0 16px;
text-align: center;
background: #ffffff;
margin-top: -25px;
}
.tcontainer::after,
.row::after {
content: "";
clear: both;
display: table;
}
.ttitle {
color: grey;
}
.tbutton {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
}
<div class="row">
<div class="tcolumn">
<a style="display: inline-block;" href="https://picsum.photos/images">
<div class="tcard"><img src="https://picsum.photos/id/1/222/148" alt="John" />
<div class="tcontainer">
<div style="padding-top:30px;height:175px;font-family:Arial;">
<p style="font-size:15px;font-weight:600;color:#1e5b67;margin-top:33%;">Content 1</p>
</div>
</div>
</div>
</div>
</a>
<div class="tcolumn">
<div class="tcard"><img src="https://picsum.photos/id/1/222/148" alt="Mike" />
<div class="tcontainer">
<div style="padding-top:30px;height:175px;font-family:Arial;">
<p style="font-size:15px;font-weight:600;color:#1e5b67;margin-top:33%;">Content 2</p>
</div>
</div>
</div>
</div>
<div class="tcolumn">
<div class="tcard"><img src="https://picsum.photos/id/1/222/148" alt="John" />
<div class="tcontainer">
<div style="padding-top:30px;height:175px;font-family:Arial;">
<p style="font-size:15px;font-weight:600;color:#1e5b67;margin-top:33%;">Content 3</p>
</div>
</div>
</div>
</div>
<div class="tcolumn">
<div class="tcard"><img src="https://picsum.photos/id/1/222/148" alt="John" />
<div class="tcontainer">
<div style="padding-top:30px;height:175px;font-family:Arial;">
<p style="font-size:15px;font-weight:600;color:#1e5b67;margin-top:33%;">Content 4</p>
</div>
</div>
</div>
</div>
<div class="tcolumn">
<div class="tcard"><img src="https://picsum.photos/id/1/222/148" alt="John" />
<div class="tcontainer">
<div style="padding-top:30px;height:175px;font-family:Arial;">
<p style="font-size:15px;font-weight:600;color:#1e5b67;margin-top:33%;">Content 5</p>
</div>
</div>
</div>
</div>
</div>
<!-- Here's how the system changed my above code in the HTML Widget: -->
<div class="row">
<div class="tcolumn">
<a style="display:inline-block;" href="https://picsum.photos/images">
</a>
<div class="tcard">
<a style="display:inline-block;" href="https://picsum.photos/images"><img src="https://picsum.photos/id/1/222/148" alt="John" /></a>
<div class="tcontainer">
<a style="display:inline-block;" href="https://picsum.photos/images">
</a>
<div style="padding-top:30px;height:175px;font-family:Arial;">
<a style="display:inline-block;" href="https://picsum.photos/images">
</a>
<p style="font-size:15px;font-weight:600;color:#1e5b67;margin-top:33%;"><a style="display:inline-block;" href="https://picsum.photos/images">Content 1</a></p>
<a style="display:inline-block;" href="https://picsum.photos/images">
</a>
</div>
<a style="display:inline-block;" href="https://picsum.photos/images">
</a>
</div>
<a style="display:inline-block;" href="https://picsum.photos/images">
</a>
</div>
<a style="display:inline-block;" href="https://picsum.photos/images">
</a>
</div>
<div class="tcolumn">
<div class="tcard"><img src="https://picsum.photos/id/1/222/148" alt="Mike" />
<div class="tcontainer">
<div style="padding-top:30px;height:175px;font-family:Arial;">
<p style="font-size:15px;font-weight:600;color:#1e5b67;margin-top:33%;">Content 2</p>
</div>
</div>
</div>
</div>
<div class="tcolumn">
<div class="tcard"><img src="https://picsum.photos/id/1/222/148" alt="John" />
<div class="tcontainer">
<div style="padding-top:30px;height:175px;font-family:Arial;">
<p style="font-size:15px;font-weight:600;color:#1e5b67;margin-top:33%;">Content 3</p>
</div>
</div>
</div>
</div>
<div class="tcolumn">
<div class="tcard"><img src="https://picsum.photos/id/1/222/148" alt="John" />
<div class="tcontainer">
<div style="padding-top:30px;height:175px;font-family:Arial;">
<p style="font-size:15px;font-weight:600;color:#1e5b67;margin-top:33%;">Content 4</p>
</div>
</div>
</div>
</div>
<div class="tcolumn">
<div class="tcard"><img src="https://picsum.photos/id/1/222/148" alt="John" />
<div class="tcontainer">
<div style="padding-top:30px;height:175px;font-family:Arial;">
<p style="font-size:15px;font-weight:600;color:#1e5b67;margin-top:33%;">Content 5</p>
</div>
</div>
</div>
</div>
</div>

Answer 1

You should move the closing anchor tag </a> before its previous </div>. It's a problem with the tags order.
.tcolumn {
float: left;
width: 18.68%;
margin-bottom: 16px;
padding: 0 8px;
}
#media screen and (max-width: 650px) {
.tcolumn {
width: 100%;
display: block;
}
}
.tcard {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
border: 2px solid #1e5b67;
}
.tcontainer {
padding: 0 16px;
text-align: center;
background: #ffffff;
margin-top: -25px;
}
.tcontainer::after,
.row::after {
content: "";
clear: both;
display: table;
}
.ttitle {
color: grey;
}
.tbutton {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
}
<div class="row">
<div class="tcolumn">
<a style="display:inline-block;" href="https://picsum.photos/images">
<div class="tcard">
<img src="https://picsum.photos/id/1/222/148" alt="John" />
<div class="tcontainer">
<div style="padding-top:30px;height:175px;font-family:Arial;">
<p style="font-size:15px;font-weight:600;color:#1e5b67;margin-top:33%;">Content 1</p>
</div>
</div>
</div>
</a>
</div>
<div class="tcolumn">
<div class="tcard"><img src="https://picsum.photos/id/1/222/148" alt="Mike" />
<div class="tcontainer">
<div style="padding-top:30px;height:175px;font-family:Arial;">
<p style="font-size:15px;font-weight:600;color:#1e5b67;margin-top:33%;">Content 2</p>
</div>
</div>
</div>
</div>
<div class="tcolumn">
<div class="tcard"><img src="https://picsum.photos/id/1/222/148" alt="John" />
<div class="tcontainer">
<div style="padding-top:30px;height:175px;font-family:Arial;">
<p style="font-size:15px;font-weight:600;color:#1e5b67;margin-top:33%;">Content 3</p>
</div>
</div>
</div>
</div>
<div class="tcolumn">
<div class="tcard"><img src="https://picsum.photos/id/1/222/148" alt="John" />
<div class="tcontainer">
<div style="padding-top:30px;height:175px;font-family:Arial;">
<p style="font-size:15px;font-weight:600;color:#1e5b67;margin-top:33%;">Content 4</p>
</div>
</div>
</div>
</div>
<div class="tcolumn">
<div class="tcard"><img src="https://picsum.photos/id/1/222/148" alt="John" />
<div class="tcontainer">
<div style="padding-top:30px;height:175px;font-family:Arial;">
<p style="font-size:15px;font-weight:600;color:#1e5b67;margin-top:33%;">Content 5</p>
</div>
</div>
</div>
</div>
</div>