Youn

Posted on Sep 30

HTML id Attribute – Proper Understanding and Usage

#html #id #attribute

😄 This post is based on the content from coding.courses.

Definition and Usage

The id attribute specifies a unique identifier (ID) for an element.
The value of this attribute must be unique and distinct within the document (web page).

Basic Example

<a href="#section2">Go to Section 2</a>

<!-- Click the link above to scroll down to this element -->
<div id="section2">
  <h2>Section 2 Content</h2>
</div>

Practical Uses

The id attribute is a global attribute.
The unique identifier assigned to an element through this attribute can be used for various purposes.

1. Using a Unique CSS Selector to Style an Element

---- CSS ----
#css-selector { /* Select by id attribute value: #id-value selector */
    background-color: yellowgreen;
}

---- HTML ----
<p>Paragraph element.</p>
<p id="css-selector">Paragraph element.</p>
<p>Paragraph element.</p>
<p>Paragraph element.</p>

CSS can apply styles by selecting HTML elements in various ways.

Among these methods, you can also select an element using the value specified in the id attribute. As shown in the example above, enter the ID value after the hash symbol (#) (#css-selector).

This allows you to apply styles specifically to the element whose ID value is css-selector. In the actual result, the background color of the element is styled with yellowgreen.

2. Identifying an Element with JavaScript

<p id="txt">Welcome.</p>
<button type="button" id="btn">Click to change the text</button>

<script>
    const txt = document.getElementById("txt"); // Identify id="txt"
    const btn = document.getElementById("btn"); // Identify id="btn"

    btn.addEventListener("click", () => {
        txt.innerHTML = "Nice to meet you.";
    });
</script>

In the code example above, clicking the element with id="btn" changes the text of the element with id="txt" from "Welcome." to "Nice to meet you.".

At this point, when JavaScript identifies the

element with id="btn" or the element with id="txt", both elements are identified using the values specified in their id attributes.

3. Identifying an Element with a URL Fragment

First, let's look at what a fragment in a URL (or URI) is. A URL consists of parts such as a domain and the path commonly used to access a web page. Here is an example of a URL that includes a hash symbol (#) at the end of a typical URL.

https://www.example.com#example

Here, it refers to the #example portion highlighted in red. This is called a fragment or a hash URL.

In a URL, the fragment is the string that follows the hash symbol (#), and it corresponds to the value specified in the id attribute within the web page of that URL. When a web page with a fragment in its URL is loaded, the browser finds the element whose id attribute value matches the fragment and scrolls the page so that the element appears at the top of the visible area of the screen (called the viewport).

<a href="#section2">Go to Section 2</a>

<!-- Click the link above to scroll down to this element -->
<div id="section2">
  <h2>Section 2 Content</h2>
</div>

Naming Rules for the id Attribute Value

The value of this attribute must be unique and distinct within the document (web page).
The id attribute value must contain one or more characters with no whitespace characters (such as spaces or tabs).
It can consist entirely of numbers, start with a number, start with an underscore (_), or consist solely of punctuation marks (.). There are no other specific restrictions.
It is case-sensitive.

Things to Keep in Mind

It must be unique and distinct within the document (web page).
If there are duplicate id attribute values, unexpected errors may occur across all CSS, JavaScript, and other applications built on the assumption that the id attribute value is a unique identifier, such as when using it as a unique CSS selector to style the element, identifying it via JavaScript, or targeting it as a URL fragment identifier.

References