I don't know about "best practice" in this use case; however - depending on the number of words involved - you may find the overheads of setting up many separate controls are excessive... if only in terms of page size.
I'd probably approach this by wrapping each word in a simple
tag, no need for any additional attributes. On page load, run a simple script (using JQuery in this example)
$('#parentelement span').click(function() {
$('#hiddenfield').val($(this).text());
$('#hiddenbutton').click();
});
where #hiddenfield is just that, and #hiddenbutton is a standard button but styled to be display:none
. Your server event simply checks the value passed back in the hidden field to identify which word has been clicked. Use CSS to style each span on mouseover / mousedown.
#parentelement span:hover {
text-decoration:underline;
}