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

Question

Why do we use id in html. I think we can use a class as an id. If class can select one or more elements then there is no point of using any id. My Question is quite clear.I just wanted to know why do we use id ? Is class is not enough for the purpose?

Answer 1

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?

Answer 2

In HTML, every element on your web page can be assigned a unique id attribute. This can be any text you like, but it has to be unique (only one item can have this label). It's a good practice to assign labels that describe the function of the element. For example, a <ul> that's used to markup a navigation menu might have id="navigation" or id="menu"

So far you have added style to various elements in your portfolio page, but the styles you've added have affected all elements of a particular type. For example, when you added style to the div element that affected all div elements equally. What if you want to stylize some div elements one way, and other div elements a different way?

more about *div and class*

Answer 3

Woah there. This is a rather sweeping generalisation.

Have a read of this post, it is quite informative.

It also saves me re-stating his points.

This answer is also good at looking from a Javascript point of view.

Answer 4

What if you want to select a specific element in JavaScript? You would need to use a

var x=document.getElementById("myHeader");

http://www.w3schools.com/jsref/met_doc_getelementbyid.asp

Also, check this out:

http://css-tricks.com/why-use-classes-or-ids-on-the-html-element/

If you want to use one CSS doc on multiple pages, you may want things to be different on pages. Use id tags.

Answer 5

just wanted to know why do we use id ? Is class is not enough for the purpose?

Its very simple, for performance concern. Here I have created test scripts to check their performance for the below code in jsperf.com

See the below example

<ul>
  <li class="sheep">WHITE SHEEP</li>
  <li class="sheep">WHITE SHEEP</li>
  <li id="black" class="sheep">BlACK SHEEP</li>
  <li class="sheep">WHITE SHEEP</li>
  <li class="sheep">WHITE SHEEP</li>
</ul>

Now I need to get the li element of BLACK SHEEP.

If you go for class, then you will write the code as

var list = document.getElementsByClassName("sheep");

the is returns an array of all elements with class name sheep, so to find the BLACK SHEEP you need to loop through

for (var i=0; i<list.length; i++) {
  if (list[i].innerHTML === "BLACK SHEEP") {
    // Here you will get the black sheep
  }
}

To reduce the burden, they introduced the id selector.

var black = document.getElementById("black").innerHTML;  //so simple right

Know you understand the term UNIQUENESS right?