Is wrapping a div inside an anchor tag valid code?


Yes, according to HTML5 Specifications, we can place a div inside an anchor tag, for example −

<a href="#" target="_blank">
   <div class="demo"></div>
</a>

Another example −

<a href= www.tutorialspoint.com>
   <div> this now becomes a link </div>
</a>

The HTML5 allows <a> tag to be wrapped around a <div> element. Therefore, the <div> will be visible inside the <anchor> tag.

Example

Let us see an example for div inside the <anchor> tag −

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         position: relative;
         background-color: orange;
         width: 200px;
         height: 200px;
      }
      .container a {
         position: absolute;
         top: 0;
         bottom: 0;
         left: 0;
         right: 0;
         z-index: 999;
      }
   </style>
</head>
<body>
<h1>Demo Heading</h1>
<div class="container">
  <div class="div__one">
    div one
  </div>
  <div class="div__two">
    div two
  </div>
  <a href="https://tutorialspoint.com"></a>
</div>

</body>
</html>

Output

Click on the orange colored div and the link will open −

Updated on: 05-Dec-2022

5K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements