Personally I'd structure it like so:
<div class="bigLink">
<h2><a href="someplace.html">Link text</a></h2>
<p>lorem ipsum</p>
</div>
Then use JavaScript to make the whole div clickable:
var bigLinks = function(){
/* Make a block elements (div) clickable (to first and only
link).
author: mike foskett -
http://websemantics.co.uk
version 1 - 23/06/2009
parameters:
initClass:
pass in the element name to search,
followed by a list of class names.
Each block has the hoverClass
added on mouse over.
*/
var hoverClass='hover'; // class added to container on mouseover
/* author: Simon Willisons -
http://simonwillison.net/2004/May/26/addLoadEvent/ */
function addLoadEvent(f){var o=window.onload;if(typeof
window.onload!='function'){window.onload=f;}else{window.onload=function(){if(o){o();}f();};}}
function
blockClicked(){window.location=this.getElementsByTagName('a')[0].href;}
function hoverOn(){this.className+=this.className?'
'+hoverClass:hoverClass;}
function hoverOff(){this.className=this.className.replace('
'+hoverClass,'').replace(hoverClass,'');}
function attachActions(o){
// add events only if there's a single
contained link
if (o.getElementsByTagName('a')[0] &&
!o.getElementsByTagName('a')[1]){
o.onclick=blockClicked;
o.onmouseover=hoverOn;
o.onmouseout=hoverOff;
} }
function initClass(){
if (arguments.length>1){ // must be at least 2
arguments
for(var
i=arguments.length-1;i>-0;i--){
var
objs=document.getElementsByTagName(arguments[0]); // 1st argument is the
elements to search
// cycle
through elements using a 'fast' loop
for(var
j=objs.length-1;j>-1;j--){
if (objs[j].className.match(arguments[i])){ // 2+ arguments are class name(s)
to match
attachActions(objs[j]);
} } } } }
return{
addLoadEvent:addLoadEvent,
initClass:initClass
};
}();
bigLinks.addLoadEvent(function(){
bigLinks.initClass('div','bigLink');
});
Regards
Mike Foskett
From: [email protected] [mailto:[email protected]] On
Behalf Of Ben Buchanan
Sent: 04 November 2009 13:41
To: [email protected]
Subject: Re: [WSG] Including a DIV element inside an HREF tag
2009/11/4 dionisis karampinis
<[email protected]<mailto:[email protected]>>
I would like your comments regarding the inclusion of a DIV, inside a Link tag.
I need to make the following div element - 'linkable' , as such when the user
hovers on it, to be able to follow a link to another page.
Do you think this is a semantic way of structuring these elements or not ? And
if not do you know if there are any other alternatives so i could perform the
same functionality?
Well... your example won't validate as XHTML1; and you have something noted as
a heading so semantically it would seem logical to use a heading tag. So I'd
suggest something more like this:
<div id="service1">
<h2 class="servicep"><a
href="http://www.impelmedia.co.uk/index.php/services/design/";>My
Heading</a></h2>
<p class="summary"><a
href="http://www.impelmedia.co.uk/index.php/services/design/";>Lorem ipsum text
lorem ipsum text lorem ipsum text orem ipsum text lorem ipsum text orem ipsum
text lorem ipsum text</a></p>
</div>
...obviously pick the appropriate heading level. I've just assumed this
wouldn't be the top level heading.
This way everything's clickable, valid and semantically logical.
cheers,
Ben
--
--- <http://weblog.200ok.com.au/>
--- The future has arrived; it's just not
--- evenly distributed. - William Gibson
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [email protected]
*******************************************************************
________________________________
This is a confidential email. Tesco may monitor and record all emails. The
views expressed in this email are those of the sender and not Tesco.
Tesco Stores Limited
Company Number: 519500
Registered in England
Registered Office: Tesco House, Delamare Road, Cheshunt, Hertfordshire EN8 9SL
VAT Registration Number: GB 220 4302 31
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [email protected]
*******************************************************************
