HTML Valid method to implement this following

Running the Ubuntu cloud page http://www.ubuntu.com/business/cloud/overview through http://validator.w3.org/ gives several errors, the majority of which are centred around not ha开发者_JAVA技巧ving <divs> and <h>s etc. within an <a> tag.

The implementation I'm interested in is the four boxes with arrows, which change colour as you hover over them (as they are <a> links). What is the valid method to implement this?

Valid ways to implement this:

• separate links inside each block. Put the :hover effect on the parent div, not the link. Downside: more markup

• use only inline elements inside a single link, using CSS to change them into display: block elements if necessary. Downside: potentially less semantic

• use an HTML5 doctype, as [X]HTML5 allows this construction. Downside: the less easy-to-validate current moving-target nature of HTML5.

Each one of those can be a (with a :hover effect to change the background color/image), and the , which sits inside, just covers the entire div with a height and a width in your CSS.