Difference Between <div Id> And <div Class>

[sunicani]

what's the difference between <div id="productsContainer"> <div class="productsContent"> I really baffled by them.

[Ingolme]

id and class can be used on basically all elements, not only <div>id is an identifier. This means that only a single element can have one with a specific value.A class is an attribute that applies a style to an element. It can also be used to identify several elements that belong to the same "class".In CSS, you access a class with . and an id with #:

#element { somestyle }.className { somestyle }

In Javascript, you can access elements by their ID:

alert(document.getElementById("ID"));

You can access elements by their class name, but you need to look through them:

var i, x = document.getElementsByTagName("*"),str = "";for (i =0; i < x.length; i++) {  if(x[i].className == "className") {	str += x[i].toString();  }}alert(str);

[sunicani]

id and class can be used on basically all elements, not only <div>id is an identifier. This means that only a single element can have one with a specific value.A class is an attribute that applies a style to an element. It can also be used to identify several elements that belong to the same "class".In CSS, you access a class with . and an id with #:

#element { somestyle }.className { somestyle }

In Javascript, you can access elements by their ID:

alert(document.getElementById("ID"));

You can access elements by their class name, but you need to look through them:

var i, x = document.getElementsByTagName("*"),str = "";for (i =0; i < x.length; i++) {  if(x[i].className == "className") {	str += x[i].toString();  }}alert(str);

Yeah! wonderful, thanks, mate!by the way, when it comes to page speed optimization, experts suggested CSS tips herein below,

Use CSS IDs for main elements that show once on the page (header, content, footer, etc).Use classes for everything else.

is that reasonable?

[Ingolme]

Yes. I use IDs for general layout elements, like header, footer, menu, content and navbar.Use classes for things that repeat often in your document:

<div class="news">  <h3>Title</h3>  <p>Content</p></div>

By the way, try to use as little classes and ids as possible and use descendent selectors instead. Here's an example of something that can be fixed up:

<ul class="menu">  <li class="item"><a class="link"></a></li>  <li class="item"></li>  <li class="item"></li></ul>.menu { padding: 0; }.item { list-style-type: none; }.link { display: block; }.link:hover { background-color: red; }

It would be much better like this:

<ul class="menu">  <li class="item"><a class="link"></a></li>  <li class="item"></li>  <li class="item"></li></ul>.menu { padding: 0; }.menu li { list-style-type: none; }.menu li a { display: block; }.menu li a:hover { background-color: red; }

And then there's the other thing: Don't abuse <div> elements.Look at this:

<div id="content">  <div class="header">About Us</div>  <div class="subheader">The company</div>  <div class="text">Some text</div>  <div class="subheader">Other details</div>  <div class="text">Some text</div>  <div class="contact">Contact us at email@domain.com</div></div>

It would be much better like this:

<div id="content">  <h1>About Us</h1>  <h2>The company</h2>  <p>Some text</p>  <h2>Other details</h2>  <p>Some text</p>  <address>Contact us at email@domain.com</address></div>