When to use ID?

Discussion in 'HTML' started by shapper, Nov 28, 2008.

  1. shapper

    shapper Guest

    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
     
    shapper, Nov 28, 2008
    #1
    1. Advertising

  2. Ben C wrote:

    > On 2008-11-28, shapper <> wrote:
    >> 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?

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

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Nov 28, 2008
    #2
    1. Advertising

  3. shapper

    shapper Guest

    On Nov 28, 9:02 pm, "Jukka K. Korpela" <> wrote:
    > Ben C wrote:
    > > On 2008-11-28, shapper <> wrote:
    > >> 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?

    >
    > > 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.
    >
    > --
    > Yucca,http://www.cs.tut.fi/~jkorpela/


    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
     
    shapper, Nov 29, 2008
    #3
  4. shapper wrote:

    >> --
    >> Yucca,http://www.cs.tut.fi/~jkorpela/

    >
    > 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, http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Nov 29, 2008
    #4
  5. shapper

    shapper Guest

    On Nov 29, 3:27 pm, "Jukka K. Korpela" <> wrote:
    > shapper wrote:
    > >> --
    > >> Yucca,http://www.cs.tut.fi/~jkorpela/

    >
    > > 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,http://www.cs.tut.fi/~jkorpela/


    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
     
    shapper, Nov 29, 2008
    #5
  6. shapper

    Guest

    On Nov 29, 4:40 pm, shapper wrote:
    > 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.
     
    , Nov 29, 2008
    #6
  7. shapper

    shapper Guest

    On Nov 29, 6:40 pm, wrote:
    > On Nov 29, 4:40 pm, shapper wrote:
    >
    > > 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.


    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
     
    shapper, Nov 29, 2008
    #7
  8. shapper

    Neredbojias Guest

    On 29 Nov 2008, shapper <> wrote:

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

    --
    Neredbojias
    http://www.neredbojias.org/
    http://www.neredbojias.net/
     
    Neredbojias, Nov 29, 2008
    #8
  9. shapper

    dorayme Guest

    In article
    <>,
    shapper <> wrote:

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

    --
    dorayme
     
    dorayme, Nov 29, 2008
    #9
  10. shapper

    Guest

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


    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.
     
    , Nov 29, 2008
    #10
  11. shapper

    Chaddy2222 Guest

    On Nov 30, 7:31 am, Neredbojias <> wrote:
    > On 29 Nov 2008, shapper <> wrote:
    >
    > > 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.
    >

    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.
    --
    Regards Chad. http://freewebdesignonline.org
     
    Chaddy2222, Nov 30, 2008
    #11
  12. shapper

    Neredbojias Guest

    On 29 Nov 2008, Chaddy2222 <>
    wrote:

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

    >> Putting ids on _all_ tags would be overkill.  I believe Jukka's
    >> point t

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

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


    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?

    --
    Neredbojias
    http://www.neredbojias.org/
    http://www.neredbojias.net/
     
    Neredbojias, Dec 1, 2008
    #12
  13. shapper

    richard Guest

    On Fri, 28 Nov 2008 10:34:28 -0800 (PST), shapper <>
    wrote:

    >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.
     
    richard, Dec 1, 2008
    #13
  14. On 01 Dec 2008, richard <> wrote:

    > On Fri, 28 Nov 2008 10:34:28 -0800 (PST), shapper <>
    > wrote:
    >
    >>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.
    >
    >


    It must mean brain.

    --
    Awful Dog Autry
     
    Awful Dog Autry, Dec 1, 2008
    #14
  15. shapper

    Bergamot Guest

    Awful Dog Autry wrote:
    > On 01 Dec 2008, richard <> wrote:
    >
    >> What's an ID? I rarely use one.

    >
    > It must mean brain.


    LOL

    --
    Berg
     
    Bergamot, Dec 1, 2008
    #15
  16. shapper

    dorayme Guest

    In article <>,
    richard <> wrote:

    > On Fri, 28 Nov 2008 10:34:28 -0800 (PST), shapper <>
    > wrote:
    >
    > >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.


    It's your truck driver's license. Don't tell me you drive without it
    sometimes?

    --
    dorayme
     
    dorayme, Dec 1, 2008
    #16
  17. shapper

    Andy Dingley Guest

    On 28 Nov, 18:34, shapper <> wrote:

    > 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.
     
    Andy Dingley, Dec 2, 2008
    #17
  18. Gazing into my crystal ball I observed Andy Dingley
    <> writing in news:8228853a-5253-4c9c-a982-
    :

    > On 28 Nov, 18:34, shapper <> wrote:
    >
    >> 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.


    Or if you want to give the ability to link to a fragment - eg.
    mypets.html#cats - <h2 id="cats">Cats</h2>

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

    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
     
    Adrienne Boswell, Dec 2, 2008
    #18
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    6
    Views:
    7,121
  2. M K
    Replies:
    11
    Views:
    7,055
    woods_jemmy
    Apr 9, 2008
  3. Simon
    Replies:
    1
    Views:
    451
    Henri
    Nov 9, 2004
  4. =?Utf-8?B?S2hhaXJvbA==?=
    Replies:
    0
    Views:
    357
    =?Utf-8?B?S2hhaXJvbA==?=
    Dec 10, 2004
  5. =?Utf-8?B?SmVmZiBLZXNpbmdlcg==?=

    Common Web functions dll (Used to use MTS, what do I use in .NET

    =?Utf-8?B?SmVmZiBLZXNpbmdlcg==?=, Dec 28, 2004, in forum: ASP .Net
    Replies:
    4
    Views:
    463
    charlie
    Apr 30, 2005
Loading...

Share This Page