Can I use a UUID for a HTML tag ID without any issues?

Question

I have dynamic content which is accessible via a index on a side pane, when the user selects a side pane element, I use the id as a mechanism to figure out what data they're referring to, so I can dynamically generate the appropriate data for the main pane.

I was just using a pre-formatted id appended with a number, where the number was the index in an array, thus making unique ids for the html tags. However in certain scenarios I will have conflicts with the numbers, so I've been thinking that using UUIDs would be a way to solve my problem.

However I do not know if there are any issues with using a UUID for a html tag id.

I believe the immediate and quick answer is it should work, based on my knowledge of valid characters and length limitations. Version 4 uses characters 0-9, a-z and - which, afaict are valid characters for a HTML tag id. Also the length doesn't appear to be an issue.

My main concern is are there browser issues that limit the effective size of ids? It's fine running a test and creating a single id with a value of 2d1b8447-e37a-43d8-9f7c-075eac7d9bcc, or even creating a test with multiple. But I cannot test all browsers that will be using the app and it's difficult to test performance over time. My content is very dynamic and tags with these id's can be removed and added over time

I've tried searching for reported issues with large tag ids and found nothing, but absence of issues via Google is not evidence of the absence of any issues.

So... has anyone used UIID's for ids on html tags and if so, are there any issues I need to avoid that you experienced?

I should note that there is evidence that UUIDs have performance issues with indexing (InnoDB) and my concern is that DOM manipulation and using jQuery with id's that are UUIDs may suffer similar issues.

Cheers.

Answer 1

Can accomplish same thing using a data- attribute.

Example:

<a href="#" data-UUID="2d1b8447-e37a-43d8-9f7c-075eac7d9bcc" class="product_link">Some product</a>

Read data- attribute with jQuery:

$('.product_link').click(function(){
     var UUID=$(this).data('UUID');
    /* do something with UUID*/
})

Answer 2

I was using a UUID as an element ID and the CSS selector would failed for me as it seems that IDs must start with a letter not a number in order to be able to perform a valid CSS id-selector based query on them.

document.querySelectorAll('#fd759ae2-c0ed-4de5-80fd-932c814a53c7 > div') # works
document.querySelectorAll('#81ea82f5-9a6f-4ae3-93e3-a5ef3579c554 > div') # fails