role html

Ответ от Александр Ермилов[гуру]
что значит "техническая разница"?
атрибут role предназначен для улучшения семантики. он описывает значение элемента в документе.
по умолчанию никакой разницы в представлении - т. е. в том, как выглядят элементы с атрибутом role и без него, нет.
<a href="#">test</a>
<a href="#" role="button">test</a>
- Будут выглядеть одинаково.
но сам атрибут можно использовать как селектор в CSS, например:
a[role=button] { display:inline-block; padding:10px; vertical-align:middle; background:#CCC; -moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; -o-border-radius:10px; border-radius:10px; }
Правда, IE6 и ранее, таких селекторов не поймет.
Можно использовать как селектор и для скриптов - например, jQuery (теперь часто так поступают) :
$('a[role=button]').css('display','block');
или:
$('a').each(function(){ if($(this).attr('role')==='button') { /* Делаем тут что-то */ } });
В отличие от класса, - это семантический атрибут, так что использовать его в какой-то мере правильнее, чем класс - в разумных пределах, естественно. - Описан в спецификации HTML5 и планируется в XHTML2 (ежели такой будет, конечно) - там он еще важнее. В дальнейшем, с развитием семантики (в HTML5 это предусмотрено) , возможно что появится дополнительная функциональность у элементов с какими-то конкретными role.
Впрочем, для скриптов можно передавать целевую информацию с помощью атрибутов
jQuery.Mobile юзает data-role, к примеру.