Семантический звездный рейтинг

Question

Я внедряю систему звездного рейтинга на странице продукта. Текущий раздут и не может считаться семантическим.

Есть ли лучший способ приблизиться к рейтингам в HTML5 (например, для ввода <range>)? Или, если это не так, как правильно написать разметку для системы звездного рейтинга?

Answer 1

Для голосования это семантически форма (не набор ссылок, потому что у этого действия есть побочные эффекты, поэтому он должен использовать метод POST). Звезды могут быть переключателями (с <label>!) Или кнопками отправки (к сожалению, это будет сложно для стиля).

<input type=range> было бы более уместно, если бы у вас был рейтинг в % или в более крупном масштабе. Для типичной оценки 1-5 это может быть не лучшим решением:

Элемент input представляет элемент управления для установки значения элемента в строку, представляющую число, но с оговоркой, что точное значение не имеет значения , позволяя UA предоставлять более простой интерфейс, чем они делают для Номер гос.

Для представления рейтингов HTML не имеет каких-либо определенных элементов, но вы можете использовать hReview или hReview-aggregate микроформаты или эквивалентные микроданные ( Google любит их ).

Answer 2

Я думаю, что диапазон ввода выглядит идеально для этой работы. В HTML <5 я думаю, что наиболее семантический способ сделать это - через серию переключателей. Их можно оформить так, чтобы они выглядели как звезды, а сценарии должны вести себя так, как можно было бы ожидать, чтобы рейтинговые звезды вели себя. </p>

Answer 3

Кроме того, для статического представления рейтинга звезды должен подходить элемент <meter>.

Элемент измерителя представляет скалярное измерение в известном диапазоне, илидробное значение;например, использование диска, релевантность результата запроса или доля населения, принявшего участие в голосовании, для выбора конкретного кандидата.