ansaurus

Question

An "a" element around a "div"

Answer 1

+7 A:

Use CSS to make the a display as a block.

http://www.w3schools.com/css/pr_class_display.asp

Lucero 2010-10-03 10:45:39

Hi, thanks. The point is about (X)HTML semantics. Styling has nothing to but with it. It's not a rendering issue.

Stanley Cortez 2010-10-03 10:47:17

The point is that you use the "a" element as your box. That way you have a box that is clickable and you can put your other inline elements within the "a" as normal. Think of the "a" as the box, not the "div".

Blair McMillan 2010-10-03 10:50:36

The semantically correct way is put your `<a>` inside (or instead of) the block element and apply the correct styling.

kemp 2010-10-03 10:51:42

@Stanley, comments cannot be accepted as answers. However, Blair actually explained my answer (thanks for that!), it's not a different approach.

Lucero 2010-10-03 11:02:20

Thanks Blair, your answer perfectly makes sense (so long as we don't need several divs in the a). I wasn't being minimalistic enough. (How can I vote for your answer if it's a comment?)

Stanley Cortez 2010-10-03 11:03:50

Sorry, Lucero. I didn't get the implication that you use the a instead of the div.

Stanley Cortez 2010-10-03 11:04:59

@Stanley, my answer was a little bit short, sorry for that. What I really meant is to replace the requirement which you use the `div` for with the CSS style, therefore rendering the `div` superfluous. Note that you can use the same technique to have "several divs" in the `a`: make `a` and for instance `span` display as block, and you've got yourself multiple nested blocks, while keeping the (X)HTML semantically correct.

Lucero 2010-10-03 11:17:46

Answer 2

A:

Add a Javascript onclick event handler on the div element

<div onclick="window.location='http://www.google.com';" > </div>

Or what if you make the div an inline element

   <div style="display:inline;"></div>

or make the a display as block

<a style="display: block;" > </a>

oddi 2010-10-03 10:48:09

Thanks. OK with the javascript idea, but you drop the anchor in the markup so you alter the meaning.

Stanley Cortez 2010-10-03 10:52:00

-1 for javascript

kemp 2010-10-03 10:53:38

I think the downvote is inappropriate here. If the schema says you can't wrap a block-level element with a inline element, you have two options: treat the problem as one of layout and style it; or treat the problem as one of behavior and script it. I think the real question is why the OP feels he has to use a `<div>` when, unlike `<p>` or `<ol>`, `<div>` has no intrinsic meaning. When you need to use a block-element, use `<div>`. When you can't, use `<span>`. Then you style it to get the layout you want and you apply scripting to get the behaviors.

Andrew 2010-10-03 11:10:03

In fact, using spans rather than divs and display them as block elements may well be the solution (in case the <a> can't be used directly as a block).

Stanley Cortez 2010-10-03 12:13:45

Answer 3

A:

I'll note that

<a href=""><div>...</div></a>

is perfectly valid HTML5.

Ms2ger 2010-10-03 11:45:08

ansaurus

tags:

views:

answers:

An "a" element around a "div"

related questions