classes vs IDs

I have been told that while a class is intended to be used 1 or more times,
an ID is intended to be used only once.

My question is, what is the advantage to ever using an ID over a class? Or
do I misunderstand their differences?

Joshua Beall

"Joshua Beall" <> wrote:

>I have been told that while a class is intended to be used 1 or more times,
>an ID is intended to be used only once.

.... within a document. You can use the same id multiple times across
different documents.

>My question is, what is the advantage to ever using an ID over a class? Or
>do I misunderstand their differences?

An id has greater specificity. This means that div#foo {color: red;}
will take precedence over div.bar {color: green;} which can be useful
sometimes.

id is also used as a link target (i.e. <div id="foo"> is the target
anchor for <a href="#foo">). And id is used to uniquely identify
elements for manipulation with via the DOM.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <> <http://steve.pugh.net/>

"Joshua Beall" <> wrote in message
news:nb1dc.10986$...
> I have been told that while a class is intended to be used 1 or more
times,
> an ID is intended to be used only once.
>
> My question is, what is the advantage to ever using an ID over a class?
Or
> do I misunderstand their differences?
>

My personal view is that if we were given the choice, we can use either as
often as desired.
I have seen many very professionally designed web sites use ID as freely as
classes.

Richard wrote:

> "Joshua Beall" <> wrote
>>I have been told that while a class is intended to be used 1 or more
> times, an ID is intended to be used only once.
>>My question is, what is the advantage to ever using an ID over a class?
>
> Or
>
>>do I misunderstand their differences?
>
> My personal view is that if we were given the choice, we can use either as
> often as desired.
> I have seen many very professionally designed web sites use ID as freely as
> classes.

http://www.w3.org/TR/REC-html40/stru...l.html#h-7.5.2

7 The global structure of an HTML document - w3c recommendation

7.5.2 Element identifiers: the id and class attributes

Attribute definitions

id = name [CS]

This attribute assigns a name to an element. This name must be unique in
a document.

class = cdata-list [CS]

This attribute assigns a class name or set of class names to an element.
Any number of elements may be assigned the same class name or names.
Multiple class names must be separated by white space characters.

The id attribute assigns a unique identifier to an element (which may be
verified by an SGML parser). For example, the following paragraphs are
distinguished by their id values:

<P id="myparagraph"> This is a uniquely named paragraph.</P>
<P id="yourparagraph"> This is also a uniquely named paragraph.</P>

The id attribute has several roles in HTML:
* As a style sheet selector.
* As a target anchor for hypertext links.
* As a means to reference a particular element from a script.
* As the name of a declared OBJECT element.
* For general purpose processing by user agents (e.g. for
identifying fields when extracting data from HTML pages into a database,
translating HTML documents into other formats, etc.).

The class attribute, on the other hand, assigns one or more class names
to an element; the element may be said to belong to these classes. A
class name may be shared by several element instances. The class
attribute has several roles in HTML:

* As a style sheet selector (when an author wishes to assign style
information to a set of elements).
* For general purpose processing by user agents.

In the following example, the SPAN element is used in conjunction with
the id and class attributes to markup document messages. Messages appear
in both English and French versions.

<!-- English messages -->
<P><SPAN id="msg1" class="info" lang="en">Variable declared twice</SPAN>
<P><SPAN id="msg2" class="warning" lang="en">Undeclared variable</SPAN>
<P><SPAN id="msg3" class="error" lang="en">Bad syntax for variable
name</SPAN>

<!-- French messages -->
<P><SPAN id="msg1" class="info" lang="fr">Variable
d&eacute;clar&eacute;e deux fois</SPAN>
<P><SPAN id="msg2" class="warning" lang="fr">Variable
ind&eacute;finie</SPAN>
<P><SPAN id="msg3" class="error" lang="fr">Erreur de syntaxe pour
variable</SPAN>

The following CSS style rules would tell visual user agents to display
informational messages in green, warning messages in yellow, and error
messages in red:

SPAN.info { color: green }
SPAN.warning { color: yellow }
SPAN.error { color: red }

Note that the French "msg1" and the English "msg1" may not appear in the
same document since they share the same id value. Authors may make
further use of the id attribute to refine the presentation of individual
messages, make them target anchors, etc.

Almost every HTML element may be assigned identifier and class information.

Suppose, for example, that we are writing a document about a programming
language. The document is to include a number of preformatted examples.
We use the PRE element to format the examples. We also assign a
background color (green) to all instances of the PRE element belonging
to the class "example".

<HEAD>
<TITLE>... document title ...</TITLE>
<STYLE type="text/css">
PRE.example { background : green }
</STYLE>
</HEAD>
<BODY>
<PRE class="example" id="example-1">
....example code here...
</PRE>
</BODY>

By setting the id attribute for this example, we can (1) create a
hyperlink to it and (2) override class style information with instance
style information.

Note. The id attribute shares the same name space as the name attribute
when used for anchor names. Please consult the section on anchors with
id for more information.

"mscir" <> wrote in message
news:...
> Richard wrote:
>
> > "Joshua Beall" <> wrote
> >>I have been told that while a class is intended to be used 1 or more
> > times, an ID is intended to be used only once.
> >>My question is, what is the advantage to ever using an ID over a class?
> >
> > Or
> >
> >>do I misunderstand their differences?
> >
> > My personal view is that if we were given the choice, we can use either
as
> > often as desired.
> > I have seen many very professionally designed web sites use ID as freely
as
> > classes.
>
> http://www.w3.org/TR/REC-html40/stru...l.html#h-7.5.2
>
> 7 The global structure of an HTML document - w3c recommendation
>
> 7.5.2 Element identifiers: the id and class attributes
>
> Attribute definitions
>
> id = name [CS]
>
> This attribute assigns a name to an element. This name must be unique in
> a document.
>

I know what all that garbage says.
"Must be unique" does not mean "you may use only one ID".
What is unique is the NAME of the ID.
That is, you can not use #mymenu along with .mymenu.
Not that I've tested it, but I also believe this means you should not use
tag names as the ID name.
Actually, you should never use tag names in either.

If you use two ID's, the page validates, and it works, where is the problem?

"Richard" wrote:
> I know what all that garbage says.
> "Must be unique" does not mean "you may use only one ID".
> What is unique is the NAME of the ID.
> That is, you can not use #mymenu along with .mymenu.
> Not that I've tested it, but I also believe this means you should not use
> tag names as the ID name.
> Actually, you should never use tag names in either.
>
> If you use two ID's, the page validates, and it works, where is the
problem?
>
It may work, but it certainly doesn't validate. I tried with HTML 4.01
strict/transitional and XHMTL 1.0 strict/transitional.

Regards, Jim Roberts.

Richard wrote:

> If you use two ID's, the page validates, and it works, where is the
> problem?

Everytime this topic comes up, your contribution confuses me. Do you mean
two different ID's, or the same ID twice?

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>

Jim Roberts wrote:


> "Richard" wrote:
>> I know what all that garbage says.
>> "Must be unique" does not mean "you may use only one ID".
>> What is unique is the NAME of the ID.
>> That is, you can not use #mymenu along with .mymenu.
>> Not that I've tested it, but I also believe this means you should not
>> use tag names as the ID name. Actually, you should never use tag names
>>in either. If you use two ID's, the page validates, and it works, where
>>is the
> problem?
>>
> It may work, but it certainly doesn't validate. I tried with HTML 4.01
> strict/transitional and XHMTL 1.0 strict/transitional.

Probably due to the "strict" xhtml stuff.
I'll have to play around with it and see what happens.

"David Dorward" wrote...
> Richard wrote...
>
> > If you use two ID's, the page validates, and it works, where is the
> > problem?
>
> Everytime this topic comes up, your contribution confuses me. Do you mean
> two different ID's, or the same ID twice?

Although what he said is ambiguous, taken in the context of this thread, he
obviously means the same ID twice. Like I said, it may work, but it won't
make it past the w3c validation.

Jim Roberts.

David Dorward <> wrote:

> Richard wrote:
>
>> If you use two ID's, the page validates, and it works, where is the
>> problem?
>
> Everytime this topic comes up, your contribution confuses me. Do you
> mean two different ID's, or the same ID twice?

What contribution?

The address Anonymous@127.001 should ring a bell.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html