What are the best practices for handling IDs between HTML links and JavaScript functions?

When passing IDs between HTML links and JavaScript functions, it's best practice to use data attributes to store the ID value in the HTML element and then retrieve it in the JavaScript function. This helps keep the HTML clean and separates the data from the presentation. Here's an example of how to implement this: ```html <!-- HTML link with data-id attribute --> <a href="#" class="link" data-id="123">Click me</a> <!-- JavaScript function to handle the ID --> <script> document.querySelectorAll('.link').forEach(link => { link.addEventListener('click', function() { const id = this.dataset.id; // Use the ID value in your JavaScript logic console.log('ID:', id); }); }); </script> ```