Сегодня мы посвятим довольно большой блок поста именно секционным элементам. По какой же причине? Дело в том, что когда я впервые сел за разметку макета (было это совсем недавно), я просто не знал с чего начать. Глаза разбегались от обилия ещё не устоявшейся в голове информации. Но ведь что- то нужно делать...Урок всё ближе...Дедлайн был 5 минут назад...
Чтобы не было такой паники, мы с тобой пойдем от Большого к малому и сперва разобьем страницу на блоки, которые в свою очередь и будем заполнять. В этом нам поможет статья за авторством Matt West. Точнее её перевод, который выложили на хабрхабре ещё в далеком 2014 году. Ниже я выложу ссылки на все ресурсы, информацию которых я почерпнул для написания данного поста.
И так.
Секционные элементы необходимы для смысловой или семантической нагрузки страницы, что позволяет в дальнейшем компьютерным программам лучше понимать их содержание. Тут у меня возникает вопрос: "Зачем? Разве не легче каждый раз просто использовать < div> ?" Попробуем разобраться. Поиски привели меня к довольно короткому, но исчерпывающему ответу в блоге компании Makeasite:
"Слово «секционные» в названии элементов говорит о том, что они используются для выделения в структуре страницы отдельных секций или блоков. Как мы знаем, раньше эту задачу приходилось решать элементу div. В чем же заключается основной недостаток div-а? Почему же разработчики HTML5 решили внедрить целый ряд новых элементов, которые в теории должны вытеснить его? Виной всему малая информативность стандартного блока div. Да, у него есть атрибут title, внутрь которого можно засунуть релевантное название, однако этого все равно недостаточно.
Секционные элементы, если можно так выразиться, являются более узкопрофильными и специализированными (у каждого из них есть какое-то определенное предназначение)."
Думаю, этого вполне достаточно. Идем дальше.
Элемент main
Элемент должен содержать главный контент вашей веб страницы. Причем, все содержимое должно быть уникально на странице и не должно отображаться где-либо еще на сайте.
Повторяющийся на нескольких страницах контент (логотип, окно поиска, ссылки в футере и т.д.) не следует помещать внутри элемента .
Ниже приводится пример представления главного содержимого страницы.
Примечание: Мы использовали атрибут роли ARIA role=”main”, здесь он указывает на важность этого элемента тем программам, которые еще не поддерживают элемент (например, некоторые скринридеры).
Продолжение статьи в моем блоге