HTML ID: what are these HTML attributes?

The attribute id in HTML is used to be able to identify unequivocally specific elements in an HTML document. It is thus possible to access and manipulate them in CSS or JavaScript.

What are HTML IDs?

The HTML ID is a HTML attribute used to uniquely identify an HTML element. This identifier must be unique throughout the HTML document; An HTML document in which two elements share the same ID is not syntactically correct. The attribute id is often used in combination with CSS or JavaScript to apply specific styles or perform actions on a particular element.

Why do we use an HTML ID?

HTML ID can be very useful. It is always used whenan action must only concern one element. Important cases for using the attribute id are for example:

• Website Styling with CSS: with an identifier you can apply CSS rules to a single HTML element. This is particularly useful if you want to highlight a particular element.
• Interaction with JavaScript: In JavaScript, IDs can be used to access specific HTML elements and modify their properties or content. This is a fundamental part of dynamic web development.
• Hyperlinks and anchors: IDs can be used to create anchor points within a page. These allow you to jump directly to a specific section of the page when clicking on a link with the corresponding identifier.

Attribute Syntax id

To define an ID in HTML, you need to add the attribute id to the corresponding element and specify the desired identifier name. To do this, follow the following code example:

L’ID « IDTest » est attribué à ce paragraphe.

Thanks to the attribute idthe ID “IDTest” has been assigned to the HTML paragraph. The usefulness of this attribute can be illustrated in a slightly more detailed example:

    



L’en-tête est un exemple d’utilisation d’un identifiant HTML.

The “header” ID is assigned to the HTML header. As CSS has been integrated into the HTML code, the CSS rules corresponding to the “header” ID are applied to the header.

HTML id vs. class

The attribute id and the attribute class are both used to identify and style HTML elements, but they have different properties and areas of application.

• Uniqueness: each ID must be unique within an HTML document, which means that the same identifier cannot be assigned to several elements in the same document. An HTML class, on the other hand, can be applied to multiple elements, allowing a group of elements to be manipulated simultaneously.
• Specificity: IDs have higher specificity than classes. When both are applied to the same HTML element with conflicting styles, the styles defined with the ID will take precedence over those defined with the class.
• SEO in CSS: To refer to IDs in CSS, you must use the hash mark (#) preceding the ID name. To reference classes you need the dot (.) preceding the class name.