Вопрос по семантическим тегам в HTML5?

Question

[Denis9999]

Есть опыт в верстке. Начал изучать HTML5. Вот какие доводы в книге приводятся в пользу семантических тегов:
- они улучшают читабельность кода
- плюс в плане seo продвижения
Разве из названия id и class не понятно что это header, footer, либо блок menu. По seo я вообще промолчу. Вопрос, зачем нужна эта мастурбация с семантическими тегами?

Comments

[sergey]

посмеялся...

Answer 1

[Алексей A]

Парень в далёком 2013 развеивал мифы по поводу того, как люди со слабым зрением (слепые) используют интернет. Он завязал себе глаза и пытался лазить по сайтам.
Так вот, иногда скринридеры (программы для чтения текста на экране) пропускали важную информацию из-за неправильного использования тегов (например, когда вместо <aside> или <nav> делают <div id="nav"></div>) или неправильного использования заголовков.
Ссылка.

Comments

[zooks]

И это лишь один из примеров использования семантических тегов.

[HamSter]

на сколько я знаю в html5 существуют атрибуты aria (role) для скринридеров, а семантичность дополняет.

Answer 2

[IceJOKER]

<div id="header"></div>
versus
<header></header>

div#footer
versus
footer

как вы думаете, что лучше? приятнее? и логичнее?

Не хотите - не используйте, вас же никто не заставляет ими пользоваться, не?

Answer 3

[HamSter]

Семантическая верстка - это верстка с "правильным" использованием html тегов, так как их задумывали web разработчики языка html и вебстандартов!!!
А классы и id созданы лишь для того чтобы задавать стили тегам, селекторы и не белее!

Comments

[Denis9999]

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

[zooks]

Denis9999: я тебе открою секрет, что веб-страницы отображаются не только в браузерах на десктопах. Вот для остальных устройств нужна либо микроразметка, либо семантическая верстка. Выбирай.

[HamSter]

Denis9999: =)))) "правильная верста - это кроссбраузерность и адаптивность", простите, но Вы глубоко заблуждаетесь имхо я написала "так как их задумывали web разработчики языка html и вебстандартов". Т.е. тег хеадер - это шапка страницы, а тег футер - подвал и т.д.
А если судить по Вашей логике, то я могу задать класс header тегу футер и пройду валидатор!!! Но суть от этого не изменится. Тег footer как был подвалом страницы или артикла, так им и останется!!!
И сео как раз воспринимает семантику, а не ваши классы и id )
А вообще правильно Вам написали, как хотите так и пользуйтесь!!! Это Ваше право!

[HamSter]

Denis9999: и кстати "правильная верста - это кроссбраузерность и адаптивность" - это к чеклисту по верстке, но не к разработчикам html5

[Denis9999]

zooks: прогуглил, везде пишется что семантическая верстка позволяет менять отображение сайта в поисковике, ты это имел в виду или отображение на мобильных устройствах или планшетах?

[zooks]

Denis9999: хорошо, поясню на примерах: <div id="main" role="main"> - старая разметка для различных устройств, <main> - новая. Как видите проще, не говоря о плохой практике использовать селекторы по ID в CSS. Она нужна как для поисковиков, так и для сторонних приложений, которые не знают где у вас в каше из <div> начинается основной контент, подлежащий индексации или выводу на экран.

Answer 4

[hscode]

Все же стоит развивать в перед и начинать использовать семантику. Это ведь реально улучшает чтения страницы.