Как правильно верстать в HTML5?

Question

[Nikolay]

Начал изучать HTML5 и прочитав кучу статей в конец запутался.

Подскажите как правильнее и когда что использовать:

1. <main>
2. <main role="main">
3. <main id="main">
4. <main class="main">

а может есть ещё варианты? (я не имею ввиду div)

Атрибут <main> я взял чисто для примера так же не ясно и с другими:

<header>,
<nav>,
<section>,
<article>,
<aside>.

Answer 1

[Родион Мещеряков]

Выскажу исключительно свое мнение, т.к. тут в любом случае нет единственно верного ответа.

Я так понимаю, что тут два вопроса в одном. Первый - в каких случаях использовать новые теги, введенные с HTML5? Второй - в каких случаях использовать атрибуты role, id и class?

Мой ответ на первый вопрос:
Новые тэги, появившиеся в HTML5, служат для семантических целей. Т.е. с их помощью можно показать всевозможным поисковым роботам и прочим машинам, а также сторонним кодерам для чего нужен тот или иной блок разметки. По сути, это обычные блочные тэги div, только с более выраженной целью. Про цели каждого тэга можно почитать здесь или сразу в спецификации HTML5. Использовать их или продолжать использовать div - дело твое. Большой ошибки не будет.

Ответ на второй вопрос:
Атрибуты class и id обычно используются для стилизации элементов при помощи CSS и привязки JS-кода к конкретным элементам. Есть мнение, что id для этого использовать не стоит. В-основном, потому что никогда не знаешь будет ли элемент действительно уникальным или через какое-то время появится его копия.

Атрибут role я никогда не использовал в своей разметке. Отчасти, этот атрибут похож по своей идее на новые тэги HTML5. Можешь прочитать по него тут :) или в спецификации.

Использовать "голый" тэг в верстке стоит только если ты вообще не собираешься его как-то стилизовать (или же собираешься применять к тэгу только очень, ОЧЕНЬ общие стили).

Answer 2

[Артур]

htmlbook.ru

Answer 3

[Денис Букреев]

ничего не понял я, что за бредня в коде
потому что ничего не понял автор

main с классом main, с id main
div с классом div, p c классом p

Answer 4

[Dmitry Pavlov]

роль думается надо использовать, id и class - если вам нужны - тоже
html5doctor.com/the-main-element