ok.. so putting the icon as a background image is the right and best option. I am still wondering why youtube guys did like that.
they are not using the image directly. instead they load a 1x1 spacer image there and with css , they define the height, width and load an icon from a css sprite to the spacer with background property. I know its some extra code to do this.. but any idea what is the reason behind that? naveen From: Jason Grant Sent: Tuesday, May 11, 2010 4:03 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] semantic structure for icon and text Shrikant, Under all circumstances you ought to use a background image. There will be no issues with clicking the icon, as it will be part of the link still and it will be clickable. The reasons for using a background image: a.. More semantic in context (as other pointed out) b.. Easier to maintain and change in future c.. Decreases the size of HTML file so should be better in terms of performance d.. Use one CSS sprites for all your icons, as opposed to separate images within the <img /> tag - this has a major benefit on performance in terms of minimising number of HTTP requests, which is especially important in context of mobile browsing e.. Via the CSS you can change the way things display in different contexts (e.g mobile browsers such as BlackBerry pretty much hate CSS sprites and do not really tolerate these inline icon images that well and you will be able to tweak this via CSS with couple of lines of @media type code. Hope this helps. Best regards, Jason On Tue, May 11, 2010 at 11:22 AM, Shrikant Sharat <shrikantshara...@gmail.com> wrote: > > I think some people (like me) might click on the icon as opposed to the link > text itself. This might not work if the background image technique is used, > but I am not sure about this. > > This point too, boils down to what your icon signifies in the link's context. > > 2010/5/11 st...@stevegibbings.co.uk <st...@stevegibbings.co.uk> >> >> Easy answer- use a background image. >> Less easy answer - is the image content or just a visual representation of >> existing content? >> I would say the link is the real content and you are adding to that visually >> with an icon image. >> Steve >> >> Sent from my iPhone >> On 11 May 2010, at 10:48, "Naveen Bhaskar - live" <naveenbhas...@live.in> >> wrote: >> >> Hi, >> >> what is the correct semantic structure for putting an icon in the website. >> when I checked youtube , I see the icons loaded with css to a spacer which >> is 1x1 size. Is that a good approach? >> I want to show an email id with an email icon with that. can anyone suggest >> me the right semantic structure . >> >> <span class="email"> >> <img src="spacer.gif" alt="'> >> <a href=mailto:a...@gmail.com>some_email_id</a> >> </span> >> >> or >> just <a href=mailto:a...@gmail.com>some_email_id</a> and attach the icon >> with css background property for the anchor tag? >> >> thanks a lot in advance. >> >> .naveen_bhaskar >> { >> email : naveenbhaskar...@gmail.com; >> yahoo : naveenbhas...@ymail.com; >> } >> >> ******************************************************************* >> 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 >> ******************************************************************* > > > -- > Shrikant Sharat KANDULA > > ******************************************************************* > List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm > Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm > Help: memberh...@webstandardsgroup.org > ******************************************************************* -- Jason Grant BSc, MSc CEO, Flexewebs Ltd. www.flexewebs.com ja...@flexewebs.com +44 (0)7748 591 770 Company no.: 5587469 www.flexewebs.com/semantix www.twitter.com/flexewebs www.linkedin.com/in/flexewebs ******************************************************************* 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 *******************************************************************
