Страница из div
Что делаем: смотрим на страницу, где всё собрано из div, и меняем название статьи, чтобы убедиться: для браузера заголовок — просто ещё один блок текста.
Выглядит как страница, но смысла нет
В превью «Кофейный блог» выглядит прилично: есть шапка, меню, название и подвал. Но div ничего не сообщает о содержимом. Браузер видит одинаковые блоки, а вот что в них заголовок, а что меню, придумывает только глаз.
Вся «структура» держится на классах: top, menu, title. Класс — подсказка для CSS, а не для программ.
Что от этого теряется
- Экранный диктор не умеет перейти «к заголовку» или «к навигации»: заголовков для него нет.
- Поисковик не отличает название статьи от подписи под ней.
- Режим чтения в браузере не знает, где основной текст.
- Клавиша Tab ведёт только по ссылкам: перепрыгнуть шапку нельзя.
Исправим это по шагам. Пока заметьте две вещи, которые уже сделаны правильно: язык страницы lang="ru" и осмысленный <title>.
По спецификации
- Элемент div: в стандарте прямо сказано, что у него нет никакого особого значения.
- Атрибут lang: язык документа нужен диктору для выбора произношения и переводчику.
- Элемент title: название документа, которое видят вкладка, закладка и поисковик.