RWSmith Designs.

Extraordinary Web Design

HTML 5: Nest Any Element Inside Anchor Tags

Something that used to be considered bad practice in the days when we were all coding in XHTML days, and also would not validate is nesting block level elements inside of anchor tags.
HTML 5 now allows anything to be nested inside anchor tags so the following would indeed validate and still allows us to write semantic code

It’s even possible to nest divs inside anchor tags!

Why would we want to nest elements inside an anchor tag? How would a huge clickable anchor area be beneficial?
Well, here’s one example of a very useful place to have big clickable blocks – Mobile.
It’s also nice to keep things semantic too, say the title of a blog post was a link – It would make semantic sense for that to be a heading. a tiny snippet from the post should be in paragraph tags. The ability to nest block elements inside anchor tags is, in my opinion a very useful thing.

What are your thoughts?

Is this something you will use in your designs? Does it feel a bit dirty to nest in these block elements, knowing for so long that it was once bad practice? Please share!


Leave a comment

Your email address will not be published. Required fields are marked *

RWSmith designs Extraordinary Web Design

Do you have a project in mind?

I’m currently available for freelance and accepting new project requests.

Contact meSee my process