CODEWITHSUNDEEP
html
cavill
cavill

Reputation: 610

Semantic star-rating

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?

Upvotes: 13

Views: 3142

Answers (3)

amigolargo
amigolargo

Reputation: 830

Additionally, for a static representation of a star rating the <meter> element should be suitable.

The meter element represents a scalar measurement within a known range, or a fractional value; for example disk usage, the relevance of a query result, or the fraction of a voting population to have selected a particular candidate.

Upvotes: 3

Kornel
Kornel

Reputation: 100170

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).

Upvotes: 4

alexantd
alexantd

Reputation: 3605

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.

Upvotes: 3

Related Questions