Currently, I am developing a web application using HTML 5, CSS, and JQuery. One of the features I am working on involves displaying page links in an unordered list (ul), where each li element contains the page link. The list is generated dynamically using jQuery.
I would like to show only the page name in the link elements while still retaining the full link path. For example, "http://www.foo.com/xyz/contactus" should be displayed as "contactus," but the li element should have access to the full link path. Ideally, I could accomplish this with the value attribute of the li element, setting it up as follows:
var ul = $('<ul/>').attr('id', 'linkList');
for (var i = 0; i < linksOnPage.length; i++)
{
var pgName = linksOnPage[i].toString().slice(steps[i].toString().lastIndexOf('/') + 1);
// Create list element and append content
var li = $('<li/>').text(pgName);
li.attr('value', linksOnPage[i].toString());
ul.append(li);
}
This code snippet would result in a list similar to:
<ul>
<li value="http://www.foo.com/xyz/contactus">contactus</li>
...
</ul>
Unfortunately, the value attribute of li has been deprecated since HTML 4.01. This raises questions about why this decision was made, considering its usefulness.
Considering this dilemma, I seek advice on how to proceed. One option is to overlook the deprecation and utilize the value attribute anyway since most major browsers still support it. However, I am hesitant to use a deprecated feature and find it somewhat unsettling.
Do you have any suggestions on how I should tackle this issue?