Question

Ok, I have read a lot of times that inline elements should never contain block elements. I agree, there are problems with that and it can get messy after. But I find it the only solution to do the following:

I’m trying to create an HTML template that imitates the Metro UI “tiles” (yeah, the one that is in windows 8). The tiles are made using <li> elements. Now, the problem is that I want the tiles (the whole <li> tag) clickable, but proper HTML tells me you can’t surround a block element with an inline element. Besides, you can’t surround an <li> with an <a>. Is there any method of doing this without going against the rules of html?

Answer 1

A legal and clean way of accomplishing this is to use a style of inline-block for the A tags and let them fill the complete LI.

LI > A
{
    display: inline-block;
}

OR

LI > A
{
    display: block;
}

This will work in IE7+, and all recent versions of Firefox, Chrome, Safari, Opera, etc.

Note that in the current draft of HTML 5, it is legal to put a greater variety of elements inside an anchor tag than was previously allowed (see “permitted content” and examples): http://dev.w3.org/html5/markup/a.html

Additional article: http://html5doctor.com/block-level-links-in-html-5/