Naveen, It's because the YouTube guys have no clue about semantics.
Sometimes answers are very simple. ;-) Cheers, Jason On Tue, May 11, 2010 at 11:55 AM, Naveen Bhaskar - live < naveenbhas...@live.in> wrote: > 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 <ja...@flexewebs.com> > *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: > > - More semantic in context (as other pointed out) > - Easier to maintain and change in future > - Decreases the size of HTML file so should be better in terms of > performance > - 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 > - 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 > ******************************************************************* > -- 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 *******************************************************************
