Uses of the "id" Attribute.

The id attribute has five entirely separate uses within a web page. Each of these five uses is entirely separate from each of the others and yet the same single id attribute is able to serve all five purposes at the same time.One thing to note is that ids are required to be unique within a web page and the reason why they must be unique is obvious from most of these uses.

The first use for the id atribute (and perhaps the most important) is that it can be used to label the sections of your web page. Now this may not seem to be all that important but being able to actually label the parts of the page with meaningful names without needing to use comments for the purpose will make your web pages much easier to maintain.

The second use for id attributes is a part of the way that HTML works. You can actually set up links to within a web page rather than just to the top of a web page by adding a # to the end of the web address followed by the value of the id within the page that you want placed at the top of the browser window (or as close to it as possible if there isn't enough content below it to place it at the very top). You can also create links within a web page just by specifying the # followed by the id. So <a href="index.html#middle"> will load the home page of the site and place the tag containing the id="middle" attribute at the top of the browser window. Specifying <a href="#second"> will move the current page to place the tag containing the id="second" attribute at the top of the page.

The third use also involves HTML and involves forms. For maximum accessibility most of the fields within your form need to have a label associated with it that tells the person filling out the form which form field is supposed to contain what data. The <label for="website"> tag provides the label identifying what the form is expecting to be entered into the <input id="website"> form field. In the case of checkboxes and radio buttons this link also allows the user to click on the label to select the buttons.

The fourth use of ids is with JavaScript. JavaScript can use the DOM method getElementById() to directly reference the tag containing a particular id attribute from within the web page. This saves the JavaScript from having to scan the entire page looking for the particular tag to be processed. This is also particularly useful in connection with form fields since it allows the JavaScript to reference the form fields without needing to use the name attributes on the fields. This allows the names to be specified appropriately for how the form is to be processed on the server without needing to consider how to access names that contain characters that are invalid in JavaScript naming.

The ffifthh use of ids is with styling the web page. An id is the most specific attribute that is associated with a particular part of the web page (since it must be unique) and therefore any styling based on the id overrides any styles applied by any of the other ways of styling the page content.

The only styling information that is more specific than using an id is where you apply the style directly within the tag itself. Overriding or replacing an id with inline styles is not something that you should look at doing though. As well as an inline style not being able to provide for any of the other three purposes for which an id attribute is used, there are also a couple of things with regard to how styles work that make using an id far more flexible than using an inline style. The first of these is that an id is only required to be unique within a page and so the same id can exist on each page of the site. Any styles applied to that id from an external stylesheet will therefore apply to all of the pages of the site rather than just the current page. Also you can style a page differently for different media so that the page doesn't need to look the same when printed as it does on the screen. Specifying media specific styles is much easier to do when you are not trying to code them inline.

Overall between the many uses that the id attribute has, it is actually one of the most useful attributes that you can add to almost any tag within the body of your web page. That doesn't mean though that you should add ids to all your tags.The id needs to be serving at least one of the five purposes I have listed in order to make it worth adding into your page. Any ids not serving at least one of these purposes are not really needed in the web page and really ought to be removed in order to clean up your HTML.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow