A simple question: why should we add the id
into our HTML tags if they work perfectly well without them? I know that one of their uses is being able to navigate though the page via hashtags (#
), but is there any other use for them?
9 Answers
Uses of id
attributes in HTML
- As a target for a fragment identifier on a URL.
- As a target on form controls for the
for
attribute on<label>
and<output>
elements. - As a target on
<form>
elements for theform
attribute on form associated elements. - As a target for element references via the microdata
itemref
attribute. - As a target for element references via some ARIA attributes including
aria-describedby
,aria-labelledby
and 4 others. - As a target on
<th>
elements for theheaders
attribute on<td>
and<th>
elements. - As a target on
<menu>
elements for thecontextmenu
attribute. - As a target on
<datalist>
elements for thelist
attribute on<input>
elements. - As part of a hash-name reference to
<map>
elements for theusemap
attribute on the<img>
and<object>
elements. - As an identifier of an element in a CSS selector
- As an identifier of an element for JavaScript processing
They're most often used to uniquely identify elements for styling (CSS) and scripting (JavaScript et al) purposes.
But if you're asking about HTML and only HTML, then one example where declarative IDs are useful is associating a <label>
with its <input>
, <button>
or <textarea>
control via its for
attribute:
<label for="ex">Example field:</label>
<input type="text" name="ex" id="ex">
Without assigning this attribute, activating the label does nothing, but when you pair both elements together using for
and id
, activating the label causes its control to gain focus.
The other way to associate a form label with its control is to contain it within the label:
<label>
Example field:
<input type="text" name="ex">
</label>
But this doesn't always suit the structure of a form or a page, so an ID reference is offered as an alternative.
Other circumstances where an id
attribute serves a function are covered extensively in Alohci's answer.
You can use IDs to acces your divs from javascript, CSS and jquery. If you don't use IDs it will be very difficult for you to interact with your HTML page from JS.
AFAIK, they are used to uniquely refer to a tag.And makes it easier for you to refer to the tag.
IDs are used for accessing your elements in CSS and JavaScript. Strictly speaking IDs should uniquely identify an element. You can also use class attributes to identify groups of elements.
The id attribute provides a unique identifier for an element within the document. It may be used by an a element to create a hyperlink to this particular element.
This identifier may also be used in CSS code as a hook that can be used for styling purposes, or by JavaScript code (via the Document Object Model, or DOM) to make changes or add behavior to the element by referencing its unique id.
see http://reference.sitepoint.com/html/core-attributes/id
for more info on class see here: http://reference.sitepoint.com/html/core-attributes/class
it is there to help you identify your element in java-script code.the getElementByID function in java-script give the handle of an element with specific ID for you.like this.
var someElement = document.getelementById("someID");
// do whatever with someElement;
I myself also prefer class
for styling through CSS but sometimes you need an element to be unique. For accessibility reasons you use id
to input elements to "connect" its label
to it by using for
attribute. And for Javascript it's much simpler to select an element if it has got id
attribute.
The main reason I use ids for my HTML elements is the fact that their selection is faster, in Javascript with getElementById
and in CSS as well, using the #id
class.
Of course, I'm not saying this is always a good idea, especially in CSS, where having classes based on ids can cause a lot of redundancy, it's just one of the reasons
First, only add ID when you will need to use them. In most cases id is used to do other things like:
- A reference for scripts,Selecting elements to apply scripts to,
- A style sheet selector, selecting elements for styling
- Named anchors for linking to, which is what u called page navigation
So simply because in most cases you will want to do something to or with your content in any tag, its good to put an identifier, that is the id attribute.
:P
IDs are needed to select the unique elements of a web-page.class
for styling. ;)