In this original stock-location list, staff can rename a location without changing its identifier:
<ul id="locations">
<li><data value="LOC-014">North store</data></li>
<li><data value="LOC-027">Workshop cage</data></li>
</ul>
The reader sees North store and Workshop cage. The IDs remain available in the DOM. The MDN data element reference, checked October 24, 2026, describes this relationship. For dates and times, it directs authors to use <time> instead.
Read the value without depending on the wording
const records = [...document.querySelectorAll('#locations data')]
.map(location => ({
id: location.value,
label: location.textContent.trim()
}));
console.log(records);
// [{id: 'LOC-014', label: 'North store'},
// {id: 'LOC-027', label: 'Workshop cage'}]
If the first location becomes “North equipment store,” change its text while retaining value="LOC-014". Any matching operation should use the ID. Matching the English label breaks when someone corrects a spelling, expands an abbreviation or translates the page.
The value is a string. A code such as 0014 stays distinct from 14 unless your application deliberately normalizes it. Do not convert identifiers to numbers just because they contain digits.
data is different from data-* and an input
<data value="LOC-014">North store</data> says that this displayed piece of content has a machine-readable equivalent. A custom attribute such as data-location-id="LOC-014" can attach application metadata to a row, button or other element. The data attributes guide covers dataset for that second job.
Neither makes a selectable form control. If staff must choose a location to submit, use an appropriately labeled select or radio group with stable values. If the page needs a clickable action, place a real button nearby rather than adding a click listener to the data element and expecting it to behave like a keyboard-accessible button.
Do not put a secret access token in value. The attribute is part of the delivered page and can be read by anyone who can inspect that document.
Check the rendered text and the machine value
const first = document.querySelector('#locations data');
first.textContent = 'North equipment store';
console.log(first.value); // LOC-014
console.log(first.textContent); // North equipment store
The two values now differ deliberately. That is useful only while they identify the same real location. Review label changes against the underlying location register; changing text is not a record migration.
Keep the name visible even if you also show the code to staff. A row that contains only an opaque ID may be machine-readable while becoming harder for a person to use. The semantic HTML guide provides the broader structure; this element supplies one precise label-to-value relationship inside it.