Usage of Names and IDs of HTML Elements

In HTML, various elements on a webpage are identified by Names and IDs. It is not necessary to give name or ID to an element, but if you want to refer to an element in JavaScript code, you’ll have to give either name or ID or both to that element.

An element in a web page’s document object model (DOM) could be marked either by a name or by an id or by both. For example:

<div name="divName" id="divID">

div content

</div>

If the element is part of a FORM, name of the element is sent to server along with the value of element when the form is submitted. Therefore name attribute is important for name-value pairing in the query string that goes to the server.

ID of the element is generally used for referring to the element in client-side scripts (like JavaScript). This is accomplished by getElementById() method of the document object in the DOM model. For example:

var foo = document.getElementById('elementID').value;

When we assign names and IDs to the elements, it is quite tempting to keep them same (especially in large applications where either we run out the logical/sensible names or find it difficult to keep track of them), like:

<div name="foobar" id="foobar"></div>

This practice is mostly harmless, but I have noticed that it sometimes causes problems in context of AJAX (especially in IE). A few of my AJAX scripts which worked fine in FF; did not work in IE and Safari. Eventually the problems were solved when I made the names and IDs of the used elements different. I think this problem is application specific and will not appear in every AJAX script. However, I guess it is a good practice to keep the names and IDs different. To get around the issue of running out of the sensible names, I just suffix “ID” to the id of the element while keeping rest of the string same as that of it’s name. e.g.

<div name="foobar" id="foobarID"></div>

Please, do let me know what you think about this issue. Have you also faced the problem I mentioned with respect to Internet Explorer?

1 thought on “Usage of Names and IDs of HTML Elements”

Leave a Comment

Your email address will not be published. Required fields are marked *