[whatwg] rating markup (was Re: ALT and equivalent representation)

Edward O'Connor hober0 at gmail.com
Sat Apr 19 14:26:38 PDT 2008

> For instance it would be reasonable to use two images -- a filled star
> and an unfilled star -- to represent a rating of something:
>    <p>Rating: <img src=1><img src=1><img src=1><img src=0><img src=0></p>
> You'd want the text version to be:
>    Rating: 3/5

HTML5 provides the <meter> element for this use case.

    <p>Rating: <meter>3/5</meter></p>

You could then style it appropriately:

    meter[value="0"] { background-image: url(0-out-of-5.png); }
    meter[value="1"] { background-image: url(1-out-of-5.png); }
    meter[value="5"] { background-image: url(5-out-of-5.png); }


More information about the whatwg mailing list