A clickable
using an tag - no JS to be used. Is it legal HTML?

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?

do you mind sharing the code ? – Prashant Bhate Nov 23 '11 at 02:16 — Prashant Bhate, Nov 23 '11 at 02:16

Tim M. · Accepted Answer · 2011-11-23T15:01:28.367

15

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/

edited Nov 23 '11 at 15:01

answered Nov 23 '11 at 02:24

Tim M.

53,671
14
120
163

it it legal to place block elements in the tag if i do it this way? is an inline element. – Joseph Nov 23 '11 at 14:20
1

@fskreuz - see my updated answer. In a word, yes, it is legal in HTML 5. Test carefully in older browsers. – Tim M. Nov 23 '11 at 15:02
seeing that it is legal in HTML5. Any suggestions for older browsers? – Joseph Nov 23 '11 at 19:20
@fskreuz - I've used block content inside an anchor in IE7 and IE8 with no problem. However, I have noticed issues using the HTML 5 doctype in IE7. I would suggest trying it out, and opening another question with your specific code if you run into problems. – Tim M. Nov 23 '11 at 22:15
it works! although validation will disallow (i'm using xhtml strict). im not using the `>` for IE6 compatibility and instead, im using classes. to finish up, the `` should have the `overflow:hidden` fix to fill up the whole container. – Joseph Nov 26 '11 at 00:39

score 1 · Answer 2 · answered Nov 23 '11 at 02:27

1

If you have a look at the stackoverflow menu you will see it is quite easy. You put a <a> inside a <li>, put it to display block and give it the padding you want to achieve the block feel.

answered Nov 23 '11 at 02:27

Ben

13,297
4
47
68

the difference with stack's menu is that it only contains text which is in an `` in an `
` which is perfectly legal. however, in my case, the `` will not only contain text. it could contain paragraphs for example, which is a block element. still, block in inline scenario.

Joseph

Nov 23 '11 at 14:23

A clickable
using an tag - no JS to be used. Is it legal HTML?

2 Answers2

Linked

A clickable using an tag - no JS to be used. Is it legal HTML?

2 Answers2

Linked

A clickable
using an tag - no JS to be used. Is it legal HTML?