Alternatives to Wrapping HTML Anchor Tag Around Div

Hi Experts,

Thanks for reading. I looking for some advice on what the best approach would be to making an entire div clickable. I read that wrapping <a> tags around <div>s isn't proper, because <a> is an inline element and <div> is a block element. So I'm looking for some solutions as to what I can do because I'm not sure what to do. Thank you.
LVL 1
SevenAteAnthonyAsked:
Who is Participating?
 
twohawksCommented:
Hi seven.  If your question was addressed to me, the only thing I was addressing was the specific focus of your original question, i.e., ...
.."making an entire div clickable".

My response essentially states, you can "emulate" that by, instead, using a span, and you are free to do with that any which way you please.
So you can make a span emulate a div, and make that clickable, kind of thing, and the code will validate.
0
 
Dave BaldwinFixer of ProblemsCommented:
First, why are you trying to make <div> clickable?  Please show us some code that demonstrates what you are trying to do.
0
 
SevenAteAnthonyAuthor Commented:
Thanks for the reply. Here's two examples:

<a href="index.php"><div id="logo"></div></a>

Open in new window


<a href="home.php"><div id="box"><span>Posted by</span> <?php echo $username; ?> | <?php echo $date; ?></div></a>

Open in new window


I don't understand how someone could not need <div> clickable. Thank you.
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
Dave BaldwinFixer of ProblemsCommented:
<div id="logo"></div> has no content so there would be nothing to click on.  ??

Often it is not a matter of not needing it but that they didn't think of it when they made up the standards in about 1996 or so.  I'm pretty sure they didn't foresee the graphic intensive pages we now have.  The web started out as text medium.

Now if it works for you, you can use it but it is up to you to check it in all the browsers you expect to use your page.  But then, it's always up to you to check your pages.
0
 
SevenAteAnthonyAuthor Commented:
<div id="logo"></div> is a logo. The logo using CSS properties of background-image and height and width specified. It works in all browsers. I just know it's not right to use, so I'm looking for advice for alternatives. Thank you!
0
 
Dave BaldwinFixer of ProblemsCommented:
If it's just an image, you could wrap the <a> around that image instead of making it a background.  I don't know of any advantage to making it a background.
0
 
SevenAteAnthonyAuthor Commented:
I suppose that is completely true. But what I don't like about that is the image can be highlighted in the browser if the mouse is clicked and dragged over it.
0
 
twohawksCommented:
This is an interesting question, and I am going to try a couple things... just to comment..
you can assign the anchor a display:block style, and then use span(s) with it, and it will validate.

What I am going to go test is if you can get away with assigning  the contained span(s) a display:block style.
0
 
SevenAteAnthonyAuthor Commented:
Interesting. So are you saying that -

<a href="index.php" style="display: block;"><img src="image.jpg" /></a>

Open in new window


- will display and not be highlighted when the mouse is clicked and dragged? What exactly would the purpose of the span tag be within the anchor tag when dealing with images?
0
 
twohawksCommented:
Any combo of Anchor and Span with either/and/or set with display:block is no problem at the w3c validator.

So the question is, can you simply wrap your anchor around a span, and if need be, wrap the whole thing in a div?
0
 
SevenAteAnthonyAuthor Commented:
So are you saying that I should make the logo as the background-image on span, display span as block with a height and width, and this would be valid? This would simply mean switching out <div> with <span> and settings span to display: block, right?
0
 
twohawksCommented:
We cross-posted, but to your comment preceding my last -the answer is yes.
0
 
twohawksCommented:
Except, I did not say what you "should" do... only what you "can" do and remain valid.
0
 
twohawksCommented:
Just remember, it is not strictly valid to float an anchor nakedly.  If you approach your solution by wrapping a span in an anchor, you do well to wrap that up in a div (obviously, but it should be noted for completeness).
0
 
SevenAteAnthonyAuthor Commented:
Thank you.
0
 
twohawksCommented:
You are welcome. And than you ;^)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.