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 having <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
:hovereffect on the parent div, not the link. Downside: more markupuse only inline elements inside a single link, using CSS to change them into
display: blockelements if necessary. Downside: potentially less semanticuse an HTML5 doctype, as [X]HTML5 allows this construction. Downside: the less easy-to-validate current moving-target nature of HTML5.