Hello,
<a href="blah.html">
<div><p></p><img></div>
</a>
I was wondering if it was ok to proceed that way, or if it was a risky practice as, from what I gathered, this is only acceptable in html5?
HTML 4 states that only inline elements may be placed inside an “a”, a “div” is a block element therefore it may not be placed there. But you could style an inline element such that it would appear to be a block.
If you really want to do this, HTML5 gives you full liberty to.
You could make the <a> a block-level element and forgo the use of the <div>
How? <a> is an inline element, regardless of what display properties you give it, and so it can never contain block-level elements such as <p>.
My preferred solution is to wrap an <a> round the most obvious bit of the <div> to be clickable, and style it accordingly. You can then slap [COLOR="DimGray"]onClick="window.open( '/file.htm','_top' ); return false;"[/COLOR] on the <div> to make the whole lot clickable for people with Javascript (those without can still click on the <a>. This is a perfectly accessible solution, as well as being semantically and structurally valid.
I don’t understand why you would want to do this…
So that a user can click anywhere inside the div (instead of just the link, or the image, or a bit of text).
I’m going the html5 way. Is there a polyfill to use for older browsers, or it going to be ok?
No older browsers will not understand and have no reason to since Fred is still non-normative.
Provide a simple text link at the bottom. When JavaScript is enabled hide the link and handle the click with JavaScript.
There are a number of ways to do this besides putting a div inside a link. Your HTML 5 way is one.
are the DIV and P even neccessary? What’s the CONTENT?
I mean, if you want it as a block, put the P around the whole thing, lose the DIV (or keep the div and lose the P if the text isn’t an actual grammatical paragraph), moving the anchor INSIDE your block-level container, set the anchor to display:block, the image to display:block… and if you need an extra styling hook toss a span or two in there.
Though that’s guessing wildly as we don’t know what the content is – so telling you what the proper HTML is… well… I mean, is that actually a paragraph of text? Is that actually a content image? Why does it need a DIV? (you can style the anchor as block even if it remains inline-level)…
… Oh, and skip the bloated HTML 5 nonsense, unless you REALLY feel the need to go back to 1997 on coding practices.
Hello,
The html without elements added for styling purpose would be that:
<h1>Title</h1>
<img src="sky.jpg">
<p>This is some text.</p>
<p>And This is some more text.</p>
<p>And there may be more, I can't say for sure.</p>
<h1> is above <img>, both on the left. All the paragraphs are on the right. And the whole would actually be a link.
I can’t come with something better than:
<a href="#">
<div id="main">
<div id="intro">
<h1>Title</h1>
<img src="sky.jpg">
</div>
<div id="content">
<p>This is some text.</p>
<p>And This is some more text.</p>
<p>And there may be more, I can't say for sure.</p>
</div>
</div>
</a>
And I float around various elements to reach what I want.
Doesn’t look good to me.
I managed to get rid of some divs by using multiple <a>. Didn’t seem like a good option either.
If someone can come up with a 2011 coding practice to do this, I’d be grateful.
Here’s how to do it way back to IE6 (although Ie6 doesn’t get the hover effect.)
Basically the anchor is absolutely positioned over the content and makes the whole link area active. if you don’t want the link text to show then just position the span offscreen.
A similar technique was used in an old css quiz and in this [URL=“http://www.sitepoint.com/forums/css-53/css-test-your-css-skills-number-20-a-610506.html”]transparent overlay quiz.
I’d have to see it rendering or the entire page, but…
-
I suspect sky.png is presentational, so it doesn’t even BELONG in the HTML.
-
as paul mentioned, absolute positioning an anchor over the entire area would easily handle it.
-
I very much doubt your div#header is necessary, or div#main for that matter… You’ve got four perfectly good block level containers in the form of H1 and three P, what’s with all the DIV? I can understand the last one to group the P together if they’re related, but apart from that? Not so much.
@Paul: Thanks a lot, Paul. Works like a charm.
@d60: I could get rid of all my divs thanks to your harshness. Now, how should I recognize a presentational image from a… what, non-presentational image (what would be the terminolgy?). I’m working on a page where different types of skies (I know it sounds weird) are commented. Images of skies accompany the commentary. Would that qualify as presentational or not? Anyway, I’m left with few options: the skyies/comments are generated through php a loop, and there’s no way to know how many skies will be added by users in the future. I doubt I can handle dynamic images names through css.
Two questions, guys:
-
(maybe a bit of a challenge?), is it possible to have links within that overlapping link that are actually clickable, leading to another target than the overlapping one?
-
If I don’t have a “more” type of text to put whithin the <span> in Paul’s example, which part of the text should be used as anchor? There’s no bit of text that really stands out, or that could exist as a “conclusion” that you’d be likely to put whithin the <a>. So, I feel like I’m back to square one. The whole text should be the anchor.
My rule of thumb is: does the page still work and make sense without the image there? If it does then the image is presentational, and so should ideally be called by CSS. (Sometimes that doesn’t work so well, such as where you’re floating an image in amongst text - I wouldn’t generally add an empty element just to put a background-image on it, so in some cases you’re OK to add it in the HTML).
If the page doesn’t all work or make sense without the image then it should be in the HTML. Examples might include illustrations to accompany an article, a photo gallery, icons that aren’t listed in the text.
Yes you could have links in the prose but you would have to stack your elements carefully and adjust z-indexes to match. The text should have no z-index or stacking context and that would allow the absolutely positioned anchor to go on top. Then you can give inner links position:relative and a higher z-index than the absolute one.
Of course the question would be why?
Either the whole thing is one destination or its not. It would be confusing for it to be both at the same time.
The same goes for not having a clearly defined link and users will be wondering whether its just a hover effect (as many block seem to be these days). Once you start making your visitors think then you’ve dropped the ball.