Why should one add ID to their HTML tags?

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

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