When to use ID?

S

shapper

Hello,

I always give an id to all my form elements ...

But what about div's?

When should I give an ID to a div?
I have many div's with a CSS class but no id ... Is there a problem
about it?

Thanks,.
Miguel
 
J

Jukka K. Korpela

Ben said:
Only when you need to-- usually so you can style it with an id
selector or get hold of it from JavaScript with
document.getElementById.

Or you can refer to the with a link, in the same document or in another
document.

Or someone else can. This is the reason why it may make a lot of sense to
use "redundant" id attributes. In fact, assigning an id attribute to _every_
element would allow maximal access to the components in other people's style
sheets or www documents.

Maybe I'm right now just frustrated when I have had to style HTML documents
with no (well, virtually no) way to affect the HTML markup even in the
smallest details - and facing the problem of all too many elements that need
styling but have no id or class attribute (or share class with other
elements that should be styled differently).

If all elements, or at least all the important elements, have an id
attribute, I could also - as a user - open the page and throw in a user
style sheet to have just that element printed, or shown in a particular way,
or whatever - instead of trying to construct a complicated selector to pick
it up.
 
S

shapper

Or you can refer to the with a link, in the same document or in another
document.

Or someone else can. This is the reason why it may make a lot of sense to
use "redundant" id attributes. In fact, assigning an id attribute to _every_
element would allow maximal access to the components in other people's style
sheets or www documents.

Maybe I'm right now just frustrated when I have had to style HTML documents
with no (well, virtually no) way to affect the HTML markup even in the
smallest details - and facing the problem of all too many elements that need
styling but have no id or class attribute (or share class with other
elements that should be styled differently).

If all elements, or at least all the important elements, have an id
attribute, I could also - as a user - open the page and throw in a user
style sheet to have just that element printed, or shown in a particular way,
or whatever - instead of trying to construct a complicated selector to pick
it up.

Consider the following markup:

<div id="SiteHead" class="SiteHead">
<div class="Center">
<div>
<div>

<div id="SiteBody" class="SiteBody">
<div class="Center">
<div>
<div>

Then I have the following styles:

div.SiteHead {}
div.SiteHead div.Center {}

div.SiteBody {}
div.SiteBody div.Center {}

But if I give id's to Center div's then I would need to do something
as SiteHeadCenter and SiteBodyCenter so they don't have the same id's.

But this seems redundant as the only thing I am trying to do is
styling both center div's ...

This is what I am trying to figure out so I follow a common procedure.

Thanks,
Miguel
 
J

Jukka K. Korpela

shapper said:
Consider the following markup:

After the usual cluelessness indicator, a fullquote that quotes even the
sig, you can hardly expect your message to be considered very seriously. But
this is Usenet, and often you get much better responses than you deserve.
<div id="SiteHead" class="SiteHead">
<div class="Center">
<div>
<div>

<div id="SiteBody" class="SiteBody">
<div class="Center">
<div>
<div>

You did not bother posting valid (or even "well-formed") markup or markup
that makes sense. Why would you use extra <div> with a presentation-oriented
class name ("Center"), instead of just assigning styles to the "SiteHead"
and "SiteBody" elements?
Then I have the following styles:

div.SiteHead {}
div.SiteHead div.Center {}

div.SiteBody {}
div.SiteBody div.Center {}

Rather dummy, aren't they? Do you have a _real_ page with a real URL that
demonstrates what you are really doing and what your real problem is,
really?
But if I give id's to Center div's then I would need to do something
as SiteHeadCenter and SiteBodyCenter so they don't have the same id's.

If you assign an id attribute to an element, you must make sure it's
distinct from the id attribute of any other element in the document. Is this
what you are saying? Well, that's more or less the whole point, the idea,
and the heart of the matter in using an id attribute.
But this seems redundant as the only thing I am trying to do is
styling both center div's ...

So what are you complaining about? If you think you won't need id
attributes, and you don't care about anyone else needing them on your pages,
why would you use them? If there is a need for them, the need, if real,
implies need for uniqueness.
This is what I am trying to figure out so I follow a common procedure.

Sense your statement does not make. Great confusion in your mind is. Explain
your real situation you need.
 
S

shapper

Consider the following markup:

After the usual cluelessness indicator, a fullquote that quotes even the
sig, you can hardly expect your message to be considered very seriously. But
this is Usenet, and often you get much better responses than you deserve.
<div id="SiteHead" class="SiteHead">
   <div class="Center">
  <div>
<div>
<div id="SiteBody" class="SiteBody">
   <div class="Center">
  <div>
<div>

You did not bother posting valid (or even "well-formed") markup or markup
that makes sense. Why would you use extra <div> with a presentation-oriented
class name ("Center"), instead of just assigning styles to the "SiteHead"
and "SiteBody" elements?
Then I have the following styles:
   div.SiteHead {}
   div.SiteHead div.Center {}
   div.SiteBody {}
   div.SiteBody div.Center {}

Rather dummy, aren't they? Do you have a _real_ page with a real URL that
demonstrates what you are really doing and what your real problem is,
really?
But if I give id's to Center div's then I would need to do something
as SiteHeadCenter and SiteBodyCenter so they don't have the same id's.

If you assign an id attribute to an element, you must make sure it's
distinct from the id attribute of any other element in the document. Is this
what you are saying? Well, that's more or less the whole point, the idea,
and the heart of the matter in using an id attribute.
But this seems redundant as the only thing I am trying to do is
styling both center div's ...

So what are you complaining about? If you think you won't need id
attributes, and you don't care about anyone else needing them on your pages,
why would you use them? If there is a need for them, the need, if real,
implies need for uniqueness.
This is what I am trying to figure out so I follow a common procedure.

Sense your statement does not make. Great confusion in your mind is. Explain
your real situation you need.

Yucca, sorry it was a typing mistake ... calm down.

<div id="SiteHead" class="SiteHead">
<div class="Center">
</div>
</div>

<div id="SiteBody" class="SiteBody">
<div class="Center">
</div>
</div>

Yes, I don't need unique id on the divs that have class Center. They
are only for layout purpose.

That was the initial question:
Should I have id's on all my tags (even if not needed for reference
using selectors or Javascript code)?

If yes, then I would rename Center divs to SiteHeadCenter and
SiteBodyCenter for uniqueness id.

I have my code working fine ... In fact I had this done in the two
ways I mentioned.

I just wanted an advice.

Thank You,
Miguel
 
M

mynameisnobodyodyssea

Yes, I don't need unique id on the divs that have class Center. They
are only for layout purpose.

That was the initial question:
Should I have id's on all my tags (even if not needed for reference
using selectors or Javascript code)?

If you do not need id attributes for some (X)HTML elements,
then I think you answered your question,
you simply do not need them.

Validate your pages (X)HTML and CSS, and
view your pages in as many browsers as you can.
If you have a complicated nested (X)HTML structure,
different browsers might not be able to apply
the same styling cascading order.

There is a Firefox add-on, called Web developer,
that you can use to display anchors (the tags with
id attribute). Check if important components of
your pages have anchors, in case you or somebody
else might want to link to them.

The W3C (X)HTML validator shows
if there are duplicate id errors
(different elements with the same value
for the id attribute). It is a good idea to check that.
 
S

shapper

If you do not need id attributes for some (X)HTML elements,
then I think you answered your question,
you simply do not need them.

Validate your pages (X)HTML and CSS, and
view your pages in as many browsers as you can.
If you have a complicated nested (X)HTML structure,
different browsers might not be able to apply
the same styling cascading order.

There is a Firefox add-on, called Web developer,
that you can use to display anchors (the tags with
id attribute). Check if important components of
your pages have anchors, in case you or somebody
else might want to link to them.

The W3C (X)HTML validator shows
if there are duplicate id errors
(different elements with the same value
for the id attribute). It is a good idea to check that.

Yes, the web site I work on fully validates HTML and CSS. I always
check my code ...

The reason of this post was more knowing if when an id is redundant if
people put it anyway or if only add id's when needed for selectors or
javascript.

I needed a second opinion because I was getting a lot of redundant
id's and because of it I needed to have many long CSS styles names ...

Thanks,
Miguel
 
N

Neredbojias

Yes, the web site I work on fully validates HTML and CSS. I always
check my code ...

The reason of this post was more knowing if when an id is redundant if
people put it anyway or if only add id's when needed for selectors or
javascript.

I needed a second opinion because I was getting a lot of redundant
id's and because of it I needed to have many long CSS styles names ...

Thanks,
Miguel

Putting ids on _all_ tags would be overkill. I believe Jukka's point that
putting them on important tags to assist users who choose to employ user
style sheets might be perinent but then you have to decide which tags are
important and which are not. The vast majority of pagemakers assign ids
only when they need to.
 
D

dorayme

shapper said:
the initial question:
Should I have id's on all my tags (even if not needed for reference
using selectors or Javascript code)?

No.

In your

<div id="SiteHead" class="SiteHead">
<div class="Center">
</div>
</div>

You can have either of the ID or the class, you do not need both
generally.

You don't even need the class in the child div, you can reference the
div by way of:

#Sitehead div {width: 400px; margin: auto;}

or

..Sitehead div {width: 400px; margin: auto;}
 
M

mynameisnobodyodyssea

Sorry to repeat, but if you do not need id attributes
for (X)HTML elements, do not use them,
especially if they create problems like
long names for them, etc.

As the others wrote, and as you already know,
you need the id attribute, for example,
when you need JavaScript to access
elements in the DOM tree,
or when you need anchors for internal links, or when
you want to simplify your stylesheet
(for example if all elements with some class style are the same,
except one, and you give an id to that one element), etc.

There are some problems with the id attribute.
Some user-agents might need for xhtml pages
the name attribute as well as the id attribute, when you rely on
the id attribute to achieve something, like
<something name="blahblah" id="blahblah">blah</something>

And sometimes internal link anchors
might not work when viewed in mobile phone browsers via
some software that breaks the page in
sub-page chunks, for obvious
reasons, because the anchors might end up
in different chunks.
 
C

Chaddy2222

Putting ids on _all_ tags would be overkill.  I believe Jukka's point that
putting them on important tags to assist users who choose to employ user
style sheets might be perinent but then you have to decide which tags are
important and which are not.  The vast majority of pagemakers assign ids
only when they need to.
I agree with this, the way I do it is to have an ID for the main parts
of the page, the header, navigation etc. Then I just use other classes
and ID's where needed. The OP in his / her code example could just
style the IDs, the extra classes would be redundent.
 
N

Neredbojias

I agree with this, the way I do it is to have an ID for the main
parts of the page, the header, navigation etc. Then I just use other
classes and ID's where needed. The OP in his / her code example could
just style the IDs, the extra classes would be redundent.

Exactly. Besides the points already mentioned, a trimmer page
undoubtedly works more expediently and there is less of a chance for
screwing something up. Wouldn't it frost you to make a, say, css
mistake in page coding you didn't really need to begin with?
 
R

richard

Hello,

I always give an id to all my form elements ...

But what about div's?

When should I give an ID to a div?
I have many div's with a CSS class but no id ... Is there a problem
about it?

Thanks,.
Miguel


What's an ID? I rarely use one.
 
A

Andy Dingley

When should I give an ID to a div?
I have many div's with a CSS class but no id ... Is there a problem
about it?

Use an id if you're planning to try and find it from JavaScript.

For CSS work, use class in preference.

You don't _need_ either, unless you know that you need them, or you
think you might need them pretty soon (if you're writing HTML first,
then trying to style it). It's certainly not a mistake or error to not
have them.
 
A

Adrienne Boswell

Gazing into my crystal ball I observed Andy Dingley
Use an id if you're planning to try and find it from JavaScript.

Or if you want to give the ability to link to a fragment - eg.
mypets.html#cats - said:
For CSS work, use class in preference.

I don't know about that. I style elements, and use ID for certain
parts, eg. #content, #nav, #header, #footer, all the "structural" parts
of a document, and then I use classes to apply "attributes" to those
ids.
You don't _need_ either, unless you know that you need them, or you
think you might need them pretty soon (if you're writing HTML first,
then trying to style it). It's certainly not a mistake or error to not
have them.

Agreed.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,906
Latest member
SkinfixSkintag

Latest Threads

Top