Why should one add ID to their HTML tags?

Question

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?

Answer 1

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 the form 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 the headers attribute on <td> and <th> elements.
• As a target on <menu> elements for the contextmenu attribute.
• As a target on <datalist> elements for the list attribute on <input> elements.
• As part of a hash-name reference to <map> elements for the usemap 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

Answer 2

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.

Answer 3

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.

Answer 4

AFAIK, they are used to uniquely refer to a tag.And makes it easier for you to refer to the tag.

Answer 5

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

Answer 6

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;

Answer 7

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.

Answer 8

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

Answer 9

First, only add ID when you will need to use them. In most cases id is used to do other things like:

1. A reference for scripts,Selecting elements to apply scripts to,
2. A style sheet selector, selecting elements for styling
3. 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.