Re: [WSG] semantic structure for icon and text

[Jason Grant]

And Google, being the special company that it is breaks that rule also by
having the very first ever page they coded for Google searches also being
the crap that they are today. :-) Some things never change.

On Wed, May 12, 2010 at 12:48 AM, l-user  wrote:

> Jason wrote:
>
> >It's because the YouTube guys have no clue about semantics.
>
> Clark's Law: The bigger the company, the worse the code.
>
> http://blog.fawny.org/2007/11/28/googletags/
>
> It's the same at google. Actually, it's more like they do know about it,
> they just don't care. People like that are extremely dismissive about html.
> It can be written very sloppily and still display correctly, so why bother?
> html is for amateurs, they write with real code, stuff that matters. They
> think it hysterically funny that we go to any trouble to write clean,
> semantic html.
>
> l-u.
>
>
> ***
> 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
***

Re: [WSG] semantic structure for icon and text

[l-user]

Jason wrote:

>It's because the YouTube guys have no clue about semantics.

Clark's Law: The bigger the company, the worse the code.

http://blog.fawny.org/2007/11/28/googletags/

It's the same at google. Actually, it's more like they do know about it,
they just don't care. People like that are extremely dismissive about html.
It can be written very sloppily and still display correctly, so why bother?
html is for amateurs, they write with real code, stuff that matters. They
think it hysterically funny that we go to any trouble to write clean,
semantic html.

l-u.


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

RE: [WSG] semantic structure for icon and text

[Harish Chouhan]

Hello Naveen,

 

Your second method was best. People as semantics mean reducing code and
whatever is there should be readable and accessible properly by disabled
people as well as others. Your second method where the image is set as a
background in the link anchor style is best, due to less code.

 

 

 

Regards,

Harish Chouhan

 

Dreams Media 
  www.dreamsmedia.in |
 www.dreamsonline.net |
 www.webtions.com

Phone: +91-9833661410 | Fax: 91-22-66459490
Email:   har...@dreamsmedia.in

Address: B/501, Mansi Apt, Opp. Amber Plaza, Mira Road (East), Mumbai 401
107, Maharashtra, India.

 

From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On
Behalf Of Naveen Bhaskar - live
Sent: 11 May 2010 5:14 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] semantic structure for icon and text

 

I know how to do it.. there are various methods.. MY question was  whether
that approach is the best or not... 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 
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 

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" 
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 .

 



mailto:a...@gmail.com>some_email_id



 

or 

just  mailto:a...@gmail.com>some_email_id 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
*** 


***
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
***<>

Re: [WSG] semantic structure for icon and text

[Nuno Jardim]

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 

>  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 
> 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 .
>>
>> 
>> mailto:a...@gmail.com
>> >some_email_id
>> 
>>
>> or
>> just   
>> mailto:a...@gmail.com>some_email_id
>> 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
> ***
>
>
> ***
> 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
***<>

Re: [WSG] semantic structure for icon and text

[Naveen Bhaskar - live]

I know how to do it.. there are various methods.. MY question was  whether that 
approach is the best or not... 





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  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 

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"  
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 .

  
  mailto:a...@gmail.com>some_email_id
  

  or 
  just  mailto:a...@gmail.com>some_email_id 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
  *** 

***
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] semantic structure for icon and text

[Naveen Bhaskar - live]

ha ha ha  


From: Jason Grant 
Sent: Tuesday, May 11, 2010 4:32 PM
To: wsg@webstandardsgroup.org 
Subject: Re: [WSG] semantic structure for icon and text


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  
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 
  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  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 
 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 
  >>
  >> 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"  
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 .
  >>  
  >> 
  >> mailto:a...@gmail.com>some_email_id
  >> 
  >>  
  >> or
  >> just  mailto:a...@gmail.com>some_email_id 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
  *** 

 

Re: [WSG] semantic structure for icon and text

[st...@stevegibbings.co.uk]

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   
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 
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" > 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 .



mailto:a...@gmail.com>some_email_id


or
just  mailto:a...@gmail.com>some_email_id 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
***



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] semantic structure for icon and text

[Jason Grant]

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 
> *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  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 
> >>
> >> 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 .
> >>
> >> 
> >> mailto:a...@gmail.com>some_email_id
> >> 
> >>
> >> or
> >> just  mailto:a...@gmail.com>some_email_id 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
> ***
>
> *

Re: [WSG] semantic structure for icon and text

[Naveen Bhaskar - live]

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  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  
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 
>>
>> 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"  
>> 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 .
>>  
>> 
>> mailto:a...@gmail.com>some_email_id
>> 
>>  
>> or
>> just  mailto:a...@gmail.com>some_email_id 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
***

Re: [WSG] semantic structure for icon and text

[Jason Grant]

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  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 
>>
>> 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" 
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 .
>>
>> 
>> mailto:a...@gmail.com>some_email_id
>> 
>>
>> or
>> just  mailto:a...@gmail.com>some_email_id 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
***

Re: [WSG] semantic structure for icon and text

[Shrikant Sharat]

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 

> 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" 
> 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 .
>
> 
> mailto:a...@gmail.com 
> >some_email_id
> 
>
> or
> just  mailto:a...@gmail.com 
> >some_email_id
> 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
***

Re: [WSG] semantic structure for icon and text

[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"  
 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 .



mailto:a...@gmail.com>some_email_id


or
just  mailto:a...@gmail.com>some_email_id 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
***

Re: [WSG] semantic structure for icon and text

[Christian Snodgrass]

I would recommend option 2, for two main reasons:
1) An icon is more of a decoration. It does serve a function purpose, 
but without that icon that original context is still intact.

2) It's cleaner code. =p

Just my two cents. However, I can see the argument for putting it 
directly in an image, though I wouldn't go with the spacer method. 
That's a bit antiquated.


- Christian

On 5/11/2010 5:48 AM, Naveen Bhaskar - live 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 .


mailto:a...@gmail.com>some_email_id

or
just mailto:a...@gmail.com>some_email_id 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
***

[WSG] semantic structure for icon and text

[Naveen Bhaskar - live]

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 .


mailto:a...@gmail.com>some_email_id


or 
just  mailto:a...@gmail.com>some_email_id 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
***