Yes, the best way is to put in the CSS to be semantic (second option). The icon is decorative, then it should not come as content.
2010/5/11 Naveen Bhaskar - live <naveenbhas...@live.in> > I know how to do it.. there are various methods.. MY question was > whether that approach is the best or not... [image: Smile emoticon] > > > > > *From:* st...@stevegibbings.co.uk > *Sent:* Tuesday, May 11, 2010 4:40 PM > *To:* wsg@webstandardsgroup.org > *Subject:* Re: [WSG] semantic structure for icon and text > > There are ways to make the icon clickable as part of the link when it's a > background. > > Are you asking what is semantic or how to do things in css? It seems the > latter to me. The how you do it is secondary to the semantics. > > Sent from my iPhone > > On 11 May 2010, at 11:22, 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 > <<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> >> 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= <a...@gmail.com> >> <a...@gmail.com>mailto:a...@gmail.com<a...@gmail.com> >> >some_email_id</a> >> </span> >> >> or >> just <a href= <a...@gmail.com> >> <a...@gmail.com>mailto:a...@gmail.com<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> <naveenbhaskar...@gmail.com> >> naveenbhaskar...@gmail.com; >> yahoo : <naveenbhas...@ymail.com> <naveenbhas...@ymail.com> >> naveenbhas...@ymail.com; >> } >> >> ******************************************************************* >> List Guidelines: >> <http://webstandardsgroup.org/mail/guidelines.cfm><http://webstandardsgroup.org/mail/guidelines.cfm> >> http://webstandardsgroup.org/mail/guidelines.cfm >> Unsubscribe: >> <http://webstandardsgroup.org/join/unsubscribe.cfm><http://webstandardsgroup.org/join/unsubscribe.cfm> >> http://webstandardsgroup.org/join/unsubscribe.cfm >> Help: <memberh...@webstandardsgroup.org><memberh...@webstandardsgroup.org> >> memberh...@webstandardsgroup.org >> ******************************************************************* >> >> >> ******************************************************************* >> List Guidelines: <http://webstandardsgroup.org/mail/guidelines.cfm> >> http://webstandardsgroup.org/mail/guidelines.cfm >> Unsubscribe: <http://webstandardsgroup.org/join/unsubscribe.cfm> >> http://webstandardsgroup.org/join/unsubscribe.cfm >> Help: <memberh...@webstandardsgroup.org>memberh...@webstandardsgroup.org >> ******************************************************************* >> > > > > -- > Shrikant Sharat KANDULA > > ******************************************************************* > List Guidelines: <http://webstandardsgroup.org/mail/guidelines.cfm> > http://webstandardsgroup.org/mail/guidelines.cfm > Unsubscribe: <http://webstandardsgroup.org/join/unsubscribe.cfm> > http://webstandardsgroup.org/join/unsubscribe.cfm > Help: <memberh...@webstandardsgroup.org>memberh...@webstandardsgroup.org > ******************************************************************* > > > ******************************************************************* > 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 > ******************************************************************* > ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *******************************************************************
<<Emoticon1.gif>>
