[WSG] Including a DIV element inside an HREF tag
Hello to all! 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. e.g. a href=http://www.impelmedia.co.uk/index.php/services/design/; *div id=service1 p class=servicepMy Heading/p p class=summaryLorem ipsum text lorem ipsum text lorem ipsum text orem ipsum text lorem ipsum text orem ipsum text lorem ipsum text/p /div* /a 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? Thanks in advance Regards Dionisis K *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Including a DIV element inside an HREF tag
One alternative is perhaps to replace all block elements inside the a element into inline ones... Or the other would be to use javascript, and bind an onclick event onto the div. On Wed, Nov 4, 2009 at 11:51 PM, James O'Neill freexe...@gmail.com wrote: If you are worried about validation an anchor tag cannot have block elements in it, if I remember correctly, which is a little annoying. I think HTML2 and HTML5 correct this. Barring validation, it seems like the way to do it. I am not sure, but you may want to check how IE6 handles this too. On Wed, Nov 4, 2009 at 06:39, dionisis karampinis dkarampi...@gmail.comwrote: Hello to all! 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. e.g. a href=http://www.impelmedia.co.uk/index.php/services/design/; *div id=service1 p class=servicepMy Heading/p p class=summaryLorem ipsum text lorem ipsum text lorem ipsum text orem ipsum text lorem ipsum text orem ipsum text lorem ipsum text/p /div* /a 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? Thanks in advance Regards Dionisis K *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Including a DIV element inside an HREF tag
2009/11/4 dionisis karampinis dkarampi...@gmail.com 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=servicepa href= http://www.impelmedia.co.uk/index.php/services/design/;My Heading/a/h2 p class=summarya 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: memberh...@webstandardsgroup.org ***
Re: [WSG] Including a DIV element inside an HREF tag
Thanks a lot for the input, i wouldnt like to avoid validation, and IE6 allows the block element to be clickable but with no sign that you can do that (change of the mouse cursor), other than just showing the location of the link in the browser's status bar.. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Including a DIV element inside an HREF tag
Personally I'd structure it like so:
div class=bigLink
h2a href=someplace.htmlLink text/a/h2
plorem 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.length1){ // 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: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On
Behalf Of Ben Buchanan
Sent: 04 November 2009 13:41
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Including a DIV element inside an HREF tag
2009/11/4 dionisis karampinis
dkarampi...@gmail.commailto:dkarampi...@gmail.com
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=servicepa
href=http://www.impelmedia.co.uk/index.php/services/design/;My
Heading/a/h2
p class=summarya
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: memberh...@webstandardsgroup.org
Re: [WSG] Including a DIV element inside an HREF tag
On 4 Nov 2009, at 14:03, Foskett, Mike wrote: Personally I’d structure it like so: Then use JavaScript to make the whole div clickable Likewise. This has the advantage of not having hugely long link texts for software which generates lists of links (e.g. lynx, or most screen reader packages) -- David Dorward http://dorward.me.uk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Including a DIV element inside an HREF tag
Since links are inline elements, they shouldn't contain block elements, such as div and p. Why not use span (native) inline elements? You should then be able to use CSS to display them as you wish (including display: block if you want) using the classes you have ascribed. On Wed, November 4, 2009 12:39 pm, dionisis karampinis wrote: Hello to all! 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. e.g. a href=http://www.impelmedia.co.uk/index.php/services/design/; *div id=service1 p class=servicepMy Heading/p p class=summaryLorem ipsum text lorem ipsum text lorem ipsum text orem ipsum text lorem ipsum text orem ipsum text lorem ipsum text/p /div* /a 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? Thanks in advance Regards Dionisis K *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Including a DIV element inside an HREF tag
On 4 Nov 2009, at 15:18, Stuart Foulstone wrote: Since links are inline elements, they shouldn't contain block elements, such as div and p. Why not use span (native) inline elements? Because it screws up the semantics. -- David Dorward http://dorward.me.uk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Including a DIV element inside an HREF tag
Since links are inline elements, they shouldn't contain block elements, such as div and p. Why not use span (native) inline elements? Because it screws up the semantics. I thought span and div were semantically neutral (no inherent meaning). Also the javascript approach to apply the link is ignoring the group of users who don't have javascript or have it disabled. From a practical perspective I would think that having a functional link would be more important than the wrapping tag used. Best regards, Kepler Gelotte Neighbor Webmaster, Inc. 156 Normandy Dr., Piscataway, NJ 08854 www.neighborwebmaster.com phone/fax: (732) 302-0904 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Including a DIV element inside an HREF tag
On 4 Nov 2009, at 16:12, Kepler Gelotte wrote: Because it screws up the semantics. I thought span and div were semantically neutral (no inherent meaning). They are. The content is a heading and a paragraph. Now compare: span div : with h4 p : This is a heading and a paragraph See also the CSS specification: Note. CSS gives so much power to the class attribute, that authors could conceivably design their own document language based on elements with almost no associated presentation (such as DIV and SPAN in HTML) and assigning style information through the class attribute. Authors should avoid this practice since the structural elements of a document language often have recognized and accepted meanings and author-defined classes may not. — http://www.w3.org/TR/CSS21/selector.html#class-html Also the javascript approach to apply the link is ignoring the group of users who don't have javascript or have it disabled. No, it doesn't. The link is still accessible with mouse, keyboard and any other input device — it just doesn't fill the entire box. -- David Dorward http://dorward.me.uk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Including a DIV element inside an HREF tag
No, it doesn't. The link is still accessible with mouse, keyboard and any other input device - it just doesn't fill the entire box. I missed the link in Mike's example. You are correct. Thanks for the expanded explanation on what you meant when referring to semantics. Very informative. Best regards, Kepler Gelotte Neighbor Webmaster, Inc. 156 Normandy Dr., Piscataway, NJ 08854 www.neighborwebmaster.com phone/fax: (732) 302-0904 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
