Semantic star-rating

Question

I'm implementing a star-rating system on a product page. The current one is bloated and couldn't be considered semantic.

Is there a better way to approach ratings in HTML5 now (with for e.g. the <range> input)? Or failing that, what is the appropriate way to write the markup for a star-rating system?

Answer 1

For voting it is semantically a form (not a set of links, because this action has side effects, so must it use POST method). Stars could be radio buttons (with <label>!) or submit buttons (unfortunately this will be tricky to style).

<input type=range> would be more appropriate if you had rating in % or some larger scale. For a typical 1-5 rating it might not be the best solution:

The input element represents a control for setting the element's value to a string representing a number, but with the caveat that the exact value is not important, letting UAs provide a simpler interface than they do for the Number state.

For presenting the ratings, HTML doesn't have any specific elements, but you could use hReview or hReview-aggregate microformats or equivalent microdata (Google likes them).

Answer 2

I think the range input looks ideal for this job. In HTML <5, I think the most semantic way to do this is via a series of radio buttons. These can be styled to look like stars and scripted to behave as one would expect rating-stars to behave.