Announcement

Collapse
No announcement yet.

id?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • id?

    I was noticeing in vBulletin the tables for the drop down menus both have id next to them. Where is that defined and how does it affect the table?
    Surrix.net: Computer help forums/articles

    The person in my avatar is Elisha Cuthbert she plays on Fox's 24

  • #2
    an id="" attribute to any HTML element has no direct effect on the rendering of your page. However, it can be used for many purposes.

    id's can only be used uniquely, i.e. you can't have two HTML tags with the same id="foo" attribute.

    Having an id on an element will let you do 3 things with it, directly:
    (the name of the id is colored for explanatory purposes only, to indicate that it must stay consistant)


    1. it works as an anchor, so www.site.com/page.php#idname will instantly take you to the containing element (which could be <div id="idname"> for instance);
    2. You can style it in CSS via:







      HTML Code:
      #[color=Teal]idname[/color] {
        
        
        
        
        
        
        
             color: #F00;
        
        
        
        
        
        
        
          }






      (and then, of course, use whatever styling you prefer).
    3. You can use Javascript to apply behaviour to/from that particular HTML element: document.getElementById("idname");
    Moreover, using id="" attributes will make your markup more meaningful (semantic would be the word for HTML 4.01, but we've moved to XHTML now which is no longer a semantic language). For instance, imagine these two examples:

    Example A:
    HTML Code:
        <div class="topmenu">
        (... menu stuff ...)
        </div>
        <div class="leftpanel">
        (... left panel stuff ...)
        </div>
        <div class="contents">
        (... contents ...)
        </div>
    Example B: (the better choice)
    HTML Code:
         <div id="topmenu">
         (... menu stuff ...)
         </div>
         <div id="leftpanel">
         (... left panel stuff ...)
         </div>
         <div id="contents">
         (... contents ...)
         </div>
    Not only can you access each section via #name now, but your markup makes more sense to non-standard browsers (ie. screenreaders, pocketpc's, wap-phones, textbrowsers, etc.) and is more accessible. You can give them just as much styling, but with the benefit of accessibility and logical markup (structure).


    And as for your question: vB3 uses the id's for 2 of those 3 reasons: javascript and meaningful (and directly accessible, ie. no need for <a name="foo"></a> tags anymore) markup.
    Last edited by Faruk; Mon 8th Dec '03, 1:40am. Reason: answering the question more directly ^_^

    Comment

    Loading...
    Working...
    X