Why Should One Add Id to Their HTML Tags

Why should one add ID to their HTML tags?

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.

Should we always specify an ID attribute in HTML?

Only put required elements or attributes in HTML.

You do not need to put ID attribute if it is not required, and you can always add ID attribute whenever required.

Keeping only required elements in html will make it easy to read, clean, low on size and hence improves performance and speed.

Is it okay to add id/class to link tag?

According to HTML 4.01 Transitional, id, class are document-wide selectors, and thus it is ok to have them in the link element.

Difference between id and name attributes in HTML

The name attribute is used when sending data in a form submission. Different controls respond differently. For example, you may have several radio buttons with different id attributes, but the same name. When submitted, there is just the one value in the response - the radio button you selected.

Of course, there's more to it than that, but it will definitely get you thinking in the right direction.

Is it okay to use an id for p tags?

I'd say it's fine as long as you know that the paragraph will only be used once on the page.

An example might be a piece of company info that you want to appear on multiple pages but be styled in a particular way. Giving that an id singles it out as unique and allows you to style it as such.

The class attribute should be used for styling a number of controls in a similar way (i.e. all those that belong to that class). For example, report totals might always need to be large and bold, so the encompassing tags would be given a reportTotals class. There might be more than one report and more than one total per page, but they should all look the same.

Why do we use id in html. I think we can use a class as an id

We can. Certainly. But...

<h1 id="jump_here">Target</h1>
> http://example.com/somepage.html#jump_here

This would not work with a class.

---

document.getElementById('jump_here'); // fully compatible
document.getElementsByClassName('jump_here')[0]; // IE9+
document.querySelector(".jump_here"); // IE8+
(function() {for(var a=document.all,l=a.length,i=0,ret=[];i<l;i++)
        if(a[i].className.match(/\bjump_here\b/))ret.push(a[i]);return ret;})();
// fully compatible

Do you really want to write all that just to get one element?

Why would you give a style tag an id

So you can reference it (just like any other element), i.e.

var styles = document.getElementById('style-id');
// do anything you want, like
styles.parentNode.removeChild(styles); // remove these styles
styles.setAttribute('href', 'alternate-styles.css'); // change the style

What do id and name do in a form?

Name

The name attribute is needed for the database or other data destination to uniquely identify that piece of data.

When the form is submitted, most scripts use the name attribute to place the form data into a database or into an email that can be read by a person. Thus, if the <input> element is for the site visitor to enter their name into, then the name attribute would be name="name" or name="first-name", etc. (source (W3C)).

A control's "control name" is given by its name attribute. The scope of the name attribute for a control within a FORM element is the FORM element. Source (W3C).

Id

The id attribute has several roles in HTML:

• As a style sheet selector.
• As a target anchor for hypertext links.
• As a means to reference a particular element from a script.
• As the name of a declared OBJECT element.
• For general purpose processing by user agents (e.g., for identifying fields when extracting data from HTML pages into a database, translating HTML documents into other formats, etc.) (Source (W3C).)

---

Related Topics