HTML5: Wrap Block-Level Elements with A’s

HTML5 presents a simpler line of thought with HTML than XHTML. And quite honestly, it's a much needed simplification. One of those simplifications is the ability to wrap block-level elements like DIV s, H-tags, and P 's with basic A elements. You read that correctly: wrap block-level elements with A tags.

HTML5 Code

<body> <a href="/about-page.php"> <div class="article"> <h1>About David Walsh</h1> <p> I'm a 27 year old Web Developer and jQuery & MooTools Consultant working from Madison, Wisconsin. I am Founder and Lead Developer for Wynq Web Labs. I don't design the websites, I just make them work. </p> </div> </a> </body>

There you have it. A simple A element wrapping DIV s, H1 's, and P 's. Note that you may not wrap A elements with larger A elements.

What Do You Think?

I have mixed feelings about wrapping block-level elements with A tags. Taking a quick look at the HTML makes me feel as though the code is dirty or wrong. On the flip side, we've been using JavaScript to skirt around doing this for a long time. My Clickables class aims to accomplish this task. Using HTML to make something clickable is more natural and doesn't require JavaScript. I guess my question is: how do you feel about this practice? Will you use it right away? Please share!