Эта верстка устарела?

Question

[Sakhalinex]

Верстка с помощью элементов <main>, <article>, <aside> устарела? Ни разу не видел, чтобы их использовали в верстке.

Comments

[Rustam Bainazarov]

Вы не видели современные сайты? :))

Ничего из этого не устарело. Это просто-напросто семантика.

Answer 1

[Дима Паутов]

Почему стандарт html5 вдруг устарел?

Ни разу не видел, чтобы их использовали в верстке.

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

Comments

[Dima Polos]

Семантика не нужна? я не совсем понял к чему Вы

[Дима Паутов]

Dima Polos, а чё не понятного то? Эти теги тоже самое, что и обычный div. Тогда встаёт резонный вопрос, а накой эти новые теги нужны? Нужны для семантики. Но это всё не обязательно и всё можно верстать сплошными div.

Нужна ли она? Да, это делает код чище и более читабельнее
Обязательна ли она? Нет, кроме определённых моментов, от чего нельзя например в тег p вставить div. Даже простую таблицу можно верстать через div

[Dima Polos]

Дима Турков, ой нет, Вы серьезно заблуждаетесь. Семантика не для красивого кода. Семантика - это про смысл. Да, звучит непонятно, сейчас объясню.

Вот как Вы думаете, как та же Siri или Алиса может найти информацию в интернете и озвучить ее? Для таких технологий важна не визуальная разметка и не структура блоков, а важна семантика. Роботы благодаря, например, тегу main могут быстро найти главный контент на странице, найти на странице статьи, выделив их из всех других элементов, и таким образом если верстка не разрушает семантику различные роботы и современные технологии могут проникать в веб и находить там информацию, вплоть до заказать пиццу Вам, если Вы вежливо попросите.

Есть еще одна ситуация, которая нуждается в семантике - доступность. У многих тегов из набора html5 есть еще и свои роли на странице, Вам уже не надо самому эти роли настраивать, а достаточно просто подобрать правильный тег. Роли нужны людям, которые не видят экран, а слушают его через экранный диктор или screen reader. У таких людей есть горячие клавиши, которые могут помочь быстро переключится с чтения статьи на панель навигации и перейти на другую страницу, или быстро найти кнопку "купить" или "пауза" в видеоплеере, если есть правильная разметка. Например, теги header, footer, nav - являются еще и ориентирами, по которым можно быстро переключатся с клавиатуры или еще как-то. Попробуйте сами включить скринридер, закрыть глаза, и написать на Тостере ответ на какой-то вопрос, не смотря в монитор, да сначала сложно, но потом поймете, что благодаря html5 Вы легко можете переключатся по блокам, частям сайта и интерактивным элементам. Справедливости ради, есть aria спецификация, и можно из div сделать ориентир, но это надо отдельно этим интересоваться. тогда как просто семантический тег даст результат сразу.

Доступность это не всегда про инвалидов, да и если бы была про инвалидов, разве они не люди, или кто застрахован от несчастного случая или старения?

[Дима Паутов]

Dima Polos, да знаю я, распинаться было не обязательно. Я просто коротко написал и раздувать так сильно ответ как вы, не хотел.

[Dima Polos]

Дима Турков, ну для других написал. Если знаете, но пишите, что зачем они, вот и написал. Есть смысл в html5 семантике)

Answer 2

[Владимир]

Нет, не устарела, читайте.
https://developer.mozilla.org/en-US/docs/Learn/Acc...
А не используют, потому что люди ленивы и не думают о других

Answer 3

[Тарас Шульга]

Да вроде html6 пока не вышел, с чего им утереть?)
Это обычная семантика и все.
А на вопрос почему ее не видишь:
1) Ленивый верстальщик
2) Верстальщик с каких нить курсов где его научили 3 тегам и 2 css свойствам.
3) Похеризм верстальщика (почти, что и первый пункт)
4) Смотришь какие-то древние сайты (как вариант)