Why add an identifier to your HTML tags?

A simple question: why do we need to add id to our HTML tags if they work fine without them? I know that one of their uses can navigate the page through hashtags ( # ), but do they have another use?

0
html
source share
9 answers

They are most often used to uniquely identify elements for styling (CSS) and scripts (JavaScript, etc.).

But if you ask about HTML and only HTML, then one example where declarative identifiers are useful is associated with <label> using the <input> , <button> or <textarea> control through 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 connect both elements together with for and id , activating the label causes its control to get focus.

Another way to associate a form label with its control is to keep it inside the label:

 <label> Example field: <input type="text" name="ex"> </label> 

But this does not always correspond to the structure of the form or page, therefore, as an alternative, a link to the identifier is offered.

Other circumstances in which the id attribute serves as a function are widely discussed in Alocci's answer .

+2
source share

Using id attributes in HTML

  • As the target identifier of the URL fragment.
  • As the target form control for the for attribute on the <label> and <output> elements.
  • As the <form> target for the form attribute for the associated form elements.
  • As a target, links to items through the microdata itemref attribute.
  • As a goal, links to elements through some ARIA attributes, including aria-describedby , aria-labelledby and 4 more.
  • As the target <th> for the headers attribute on the <td> and <th> elements.
  • As the target <menu> for the contextmenu attribute.
  • As the <datalist> target for the list attribute on the <input> elements.
  • As a reference to the hash name for the <map> elements for the usemap attribute for the <img> and <object> elements.
  • As an element identifier in a CSS selector
  • As an element identifier for JavaScript processing
+2
source share

You can use identifiers to access your divs from javascript, CSS and jquery. If you do not use identifiers, it will be very difficult for you to interact with your HTML page from JS.

+1
source share

AFAIK, they are used to uniquely refer to a tag. And makes it easy for you to access the tag.

+1
source share

Identifiers are used to access your elements in CSS and JavaScript. Strictly speaking, identifiers must 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 a document. It can be used by the a element to create a hyperlink to this specific element.

This identifier can also be used in CSS code as a hook that can be used for styling purposes, or JavaScript code (through the document object model or DOM) to make changes or add behavior to an element, referencing its unique identifier.

see http://reference.sitepoint.com/html/core-attributes/id

for more information about the class see here: http://reference.sitepoint.com/html/core-attributes/class

+1
source share

it will help you identify your element in java-script code.the getElementByID function in java-script provides an element descriptor with a specific identifier for you.

 var someElement = document.getelementById("someID"); // do whatever with someElement; 
+1
source share

I also prefer the class for styling through CSS, but sometimes you need a unique element. For accessibility reasons, you use id to enter elements to “connect” to the label with the for attribute. And for Javascript it is much easier to select an element if it has an id attribute.

+1
source share

The main reason I use identifiers for my HTML elements is because they are faster to select in Javascript using getElementById and in CSS using the #id class.

Of course, I’m not saying that this is always a good idea, especially in CSS, where identifier-based classes can cause a lot of redundancy, this is just one of the reasons

+1
source share

Well, in most cases, the identifier is used for other things when navigating the side page, which is very common. Some of the nice uses for the id attribute include

  • Link to scripts, selection of elements for applying scripts,
  • Stylesheet selector, selection of elements for styling
  • Named anchors for communication, which is called called page navigation.

It’s so simple, because in most cases you will need to do something with your content or with it in any tag, it’s useful to place an identifier, that is, an id attribute.

0
source share

All Articles