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

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.