Many times I see where use this kind of recording

<main id="main" class="site-main" role="main">

When I asked specialists, they all say in one voice that it is better not to use id and role also not needed.

In this example, all involved. Why authors of such records do not use only class ?

When will this format be correct or more convenient?

  • Applicability of the role attribute : accessibility, device adaptation, server-side processing, and complex data description. - Grundy
  • it all depends on the context of the particular element. for example, id can be used for an anchor, and role migrated from xhtml in order to improve the semantics of the code. - lexxl
  • if the html5 tag is specified - why would you still have to set the role for this tag, can in this case not use the role - soledar10
  • css-live.ru/articles/default-implicit-aria-semantics.html - soledar10

1 answer 1

Each attribute has its own purpose, so you cannot confidently say whether to use them or not.

The element with the id attribute is unique on the page.
id are used to work with js.
For example, you should not specify id = "header" if in the future JS manipulations will not be performed with the element.

The class attribute is intended to describe the element styles. You can also access an element using JS by class selector, but in most cases it is desirable to use the data-role attribute for these purposes, thereby isolating the JS operation from the classes and increasing the readability of the code. Using the data-role, you can specify the behavior / purpose of the element, for example, data-role = "slider", data-role = "modal", data-role = "button", etc.

The role attribute is initially semantic.
Possible values ​​are described in the specification.