Для чего используют возможность оформления текста стилями заголовок различных уровней кратко

Обновлено: 06.07.2024

Если Вы много работаете с MS Office Word, то наверняка сталкивались со стилями в документе. Стиль - это набор параметров форматирования (объединенных в одну общую именованную группу), который применяется к тексту документа, абзацам, таблицам или спискам, и позволяет мгновенно изменить сразу несколько настроек форматирования. Работа со стилями обычно происходит в правой части ленты на вкладке Главная.

Применение стилей даёт следующие преимущества:

мгновенное редактирование фрагментов текста, путем изменения их формата в один клик;
обеспечение единообразия оформления документа;
создание удобной структуры документа, что упрощает дальнейшую навигацию по нему;
создание автоматического оглавления (собирается из фрагментов текста, оформленных стилями "Заголовок" различных уровней);
мгновенное редактирование множества фрагментов, ранее оформленных одним стилем и т.д.

Типы стилей

В Word существует несколько типов стилей:

Стили абзаца. Определяют внешний вид текста в документе на уровне абзаца. Если применить к тексту стиль абзаца, он применяется ко всему абзацу;
Стили символов. Определяют внешний вид текста в документе на уровне знаков. Содержат такие параметры форматирования, как шрифт, размер, цвет, полужирное начертание, курсив, подчеркивание, границы и заливка. Они не включают атрибуты форматирование уровня абзаца, например междустрочный интервал, выравнивание текста, отступ и табуляцию;
Связанные. Содержат элементы форматирования и абзаца, и символов;
Стили таблиц. Определяют настройки внешнего вида таблиц (шрифты, заливки, границы и т.д.);
Стили списков. Определяют настройки маркированных и нумерованных списков (тип списка, настройки маркеров, уровни списка и т.д.).

Чтобы Вы могли определить тип стиля в списке, рядом с каждым из них имеется небольшая пиктограмма, характеризующая стиль. Например, на рисунке ниже есть стили абзаца (1), стили символов (2) и связанные, которые содержат и форматирование абзацев и форматирование символов (3).

Применение стилей

По умолчанию, к тексту в документе применяется стиль "Обычный", настроенный в шаблоне Normal.dot. Этот же стиль можно применить, когда бывает необходимо сбросить настройки оформления абзаца на значения по умолчанию (сочетание клавиш CTRL+SHIFT+N).

Чтобы применить к тексту другой стиль, выделите фрагмент текста (для применения стиля символов) или установите курсор внутри нужного абзаца (для применения стиля абзацев), выберите на ленте нужный стиль и кликните по нему.

К тексту можно применить одновременно и стиль абзаца, и стиль символов, и ручное форматирование. Причем приоритет их будет следующим: ручное - символы - абзацы.

Чтобы изменить стандартный набор предустановленных стилей (те, что расположены на вкладке "Главная"), можно воспользоваться следующими методами:

изменить тему документа ("Конструктор" - "Темы")
воспользоваться командой "Изменить стили" (в старых версиях Word она расположена на ленте рядом с блоком стилей, в новых - ее можно добавить на панель быстрого доступа из списка всех команд, как в этом примере ).

Чтобы увидеть больше возможных стилей, нужно открыть меню "Стили" (сочетание клавиш Alt+Ctrl+Shift+S или кликнуть на уголок со стрелкой в правом нижнем углу группы "Стили" на ленте). В появившемся меню выберите пункт "Параметры", а в открывшемся окне установите "Отображаемые стили" - "Все". После этого в меню "Стили" станут отображаться все доступные варианты.

Если нужно выделить в документе все фрагменты, оформленные определенным стилем, найдите этот стиль на ленте, кликните правой кнопкой мыши и выберите "Выделить все вхождения".

Изменение стилей

Существующие в документе стили можно изменять. Существует два способа внесения изменений в стиль:

кликнуть правой кнопкой мыши на нужном стиле и выбрать команду "Изменить стиль". В результате откроется окно "Изменение стиля", в котором можно задать соответствующие настройки, большая часть из которых доступна при выборе команды "Формат" в левом нижнем углу окна.

оформить абзац или фрагмент текста так, как должен выглядеть измененый стиль, найти нужный стиль на ленте, кликнуть на нем правой кнопкой мыши и выбрать пункт "Обновить "Стиль" в соответствии с выделенным фрагментом".

Чтобы измененные стили были доступны в других документах, в окне "Изменение стиля" выберите пункт "В новых документах, использующих этот шаблон".

Имейте в виду, что некоторые стили основаны на других (например, на стиле "Обычный"). Таким образом, при изменении родительского соответствующим образом изменятся и все основанные на нем стили.

Создание стиля

Чтобы создать новый стиль выберите команду "Создать стиль" на вкладке "Главная".

После выбора команды откроется окно, аналогичное окну "Изменение стиля", однако, в отличие от предыдущего окна, в этом можно изменить тип стиля (второе поле сверху).

При создании обращайте внимание на то, на основе какого стиля создается новый (можно создать с нуля, не опираясь на какой-то другой стиль). Еще один важный пункт - стиль следующего абзаца. Эта настройка определяет, какой стиль будет применен к новому абзацу (при завершении работы в текущем нажатием Enter). Для стилей заголовков лучше всего указать в этом пункте "Обычный", так как заголовки содержат только один абзац. Также рекомендуется давать максимально понятные и осмысленные названия, что в будущем упростит Вам работу с документами.

Чтобы удалить стиль из коллекции кликните на нем правой кнопкой мыши и выберите "Удалить из коллекции стилей". Пользовательские стили можно удалить из документа в окне "Стили" (Alt+Ctrl+Shift+S).

Копирование стилей между документами

Чтобы созданные стили были доступны во всех новых документах, их нужно сохранить в шаблон, на котором основываются новые файлы (пункт "В новых документах, использующих этот шаблон" окна "Изменение стиля").

Спецификация HTML описывает шесть видов заголовков:

. Число в названии элемента отражает его приоритет. При этом

наиболее специфичный.

Это важно знать! WebAIM провела в 2017 году опрос пользователей скринридеров, и он показал, что навигация по заголовкам — это самый важный способ навигации для людей, которые пользуются вспомогательными технологиями для поиска информации. Именно поэтому так важно правильно организовать заголовки на вашем сайте.

Прежде чем мы подробно рассмотрим как работают вспомогательные технологии, надо понять причины, по которым СМИ используют главы, разделы, подразделы и параграфы. Дробление контента на отдельные части облегчает его понимание, усвоение, запоминание и работу со ссылками.

Несмотря на то, что интернет не печатное издание, он заимствует у типографики все хорошие практики. Заголовки в HTML аналогичны соглашениям в типографике. Это одна из тех вещей, которую каждый считает чем-то очевидным, но она на самом деле помогают огромному количеству людей. Когнитивные нарушения широко распространены и перевешивают другие виды нарушений. Группировка контента на логические части помогает всем: от людей с патологическим состоянием организма, например, деменцией, до людей с временными ограничениями, такими как бессонница или осваивающими новые навыки.

Некоторые виды вспомогательных технологий (не только скринридеры) позволяют людям перескакивать от одного заголовка к другому. Это похоже на опыт людей, которые не пользуются вспомогательными технологиями, а прокручивают страницы, чтобы понять общий смысл, и останавливаются, когда находят нужную информацию.

Создание списков заголовков

Какие-то вспомогательные технологии могут обрабатывать заголовки и представлять их в виде упорядоченного списка. Такой список помогает быстро понять общий смысл страницы.

Если вы не соблюдаете логическую последовательность, скажем, переходите от заголовка первого уровня сразу к третьему и пропускаете заголовок второго уровня, это может сбить с толку и вызвать раздражение у человека, которому они необходимы для навигации. Этот пробел в логической последовательности создаст трудности для пользователей и вынудит их использовать другие способы навигации, которые отнимут больше времени и сил на то, чтобы понять общую структуру страницы (если она есть) и определить, есть ли тут нужная информация в принципе.

Заголовки первого уровня

Ещё одна важная вещь, которую мы можем сделать, это убедиться, что на странице только один заголовок первого уровня. Такой заголовок должен описывать основную идею содержания страницы. Например, у страницы об истории французской выпечки может быть такой заголовок первого уровня:

Алгоритм структуры документа (несуществующий)

Другие заголовки

Заголовки от второго до шестого уровней должны последовательно размещаться за первым и описывать основные моменты содержимого страницы.

Например, вот структура этой статьи:

Посмотрев на этот список, вы быстро поняли про что статья. Неплохо, да?

Ещё нужно отметить, что заголовки, подобно иерархическим форматам вроде JSON, могут содержать внутри другие заголовки, при условии, что они логически связаны. Внутри заголовка второго уровня вы можете использовать несколько заголовков третьего уровня. Каждый из этих подзаголовков может, в свою очередь, иметь внутри подзаголовки четвёртого уровня.

Избыточная описательность

Если мы используем слишком много заголовков, то перегружаем пользователей вспомогательных технологий информацией. Вы можете подумать, что я противоречу себе, ведь я только что говорил о том, как важны заголовки для навигации.

Подумайте об этом так: так же как и слишком большое количество элементов навигации на странице рассеивает внимание пользователей, так и большое количество заголовков создаёт фоновый шум, который запутывает их и отвлекает от идеи, которую вы пытаетесь донести.

Нет чётких правил о количестве заголовков, которое считается избыточным. Это напрямую зависит от того, какой это контент и в каком объёме нужно раскрыть его содержание. Например, для рецепта достаточно указать название блюда, его ингредиенты и дать инструкцию по приготовлению. Для научной статьи нужна большая детализация.

Другие сервисы

Хорошая структура заголовков нужна не только людям, которые пользуются вспомогательными технологиями. Так как заголовки имеют семантическое значение, другие сервисы могут взаимодействовать с описанием элементов, интерпретировать его и представлять в удобном виде для пользователей. Например, вот что делает поисковая система Bing со странницами с хорошей структурой:

Как и скринридеры, сервисы вроде Google Docs и Dropbox Paper могут автоматически создавать перечни заголовков, чтобы помочь вам быстрое понять содержание документа и перемещаться по нему. Многие текстовые редакторы тоже умеют быстро формировать из заголовков динамически обновляемые оглавления, что делать вручную очень утомительно и трудоёмко. И, благодаря совместимости HTML, мы даже можем воссоздать такую навигацию с помощью расширения для браузера!

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

Семантика

Причина, по которой я это упомянул, заключается в том, что элементы заголовков часто используются из-за того, как они выглядят («О, мне нравится цвет и шрифт

В идеальном академическом мире мы соблюдаем материальную честность (material honesty) заголовков, определяя их размер и стиль в соответствии с тем, какой уровень иерархии они описывают.

Однако мы живём в реальном мире. Современные сайты и веб-приложения — это сложные вещи. Их разрабатывают люди с разным уровнем опыта, интересами, знаниями и возможностями при проектировании и написании кода.

Целесообразность

В реальном мире может потребоваться стилизовать заголовок четвёртого уровня как заголовок второго уровня или оформить его как совершенно другой элемент. В этом случае лучше сохранить логическую структуру страницы и изменить только внешний вид заголовка:

Это компромисс и признание того, что реальный мир сложный. Этот подход позволяет сохранить важную составляющую: интуитивную и эффективную навигацию для вспомогательных технологий.

Служебные стили

Такие методологии как Utility-First CSS помогают более гибко настраивать внешний вид заголовков:

В примере я объявляю несколько классов, которые будут изменять внешний вид заголовков до тех пор, пока я не получу желаемый результат. Вы можете столкнуться с этой методологией на крупных сайтах и в приложениях, где низкая специфичность классов помогает сохранить согласованность кода (консистентность).

Сброс

Чтобы закрепить правильный порядок и вложенность заголовков, можно сбросить их стили. Это поможет избежать использования дополнительного класса, который приводит заголовки к одному виду.

Этот небольшой пример оборонительного дизайна (defensive design) заставляет задуматься над тем, как структура документа формируется в зависимости от его внешнего вида. Эти стили объявляются после импорта CSS-сброса, так как могут переопределить стили из файла со сбросом.

Именование

Одна из сложнейших проблем информатики — это именование сущностей. Она признаёт, что вы ничего не знаете. Я не берусь утверждать, что знаю лучший способ именования классов заголовков для вашего сайта или приложения. Однако, если вы используете подход, который не основан на служебных стилях, я не рекомендую называть их .h1 , .h2 , .h3 и так далее.

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

Я также встречал случаи, когда такой подход допускал вообще не использовать для некоторых заголовков семантические теги («А, я могу сделать этот

Опрос пользователей скринридеров, который WebAIM провела в 2017 году, также показал, что пропуск или неподходящие заголовки одна из 10 наиболее распространённых проблем, с которыми сталкиваются пользователи вспомогательных технологий.

И это одна из самых распространённых проблем с доступностью, которую легко решить. Потратьте немного времени и посмотрите на свой сайт или приложение ещё раз. Структура заголовков точно описывает страницу? Соблюдается ли логический порядок? Очень просто поменять пару цифр местами!

Стоит обратить внимание и на то, что заголовки, подобно иерархическим форматам данных, таким как JSON, могут быть вложены в другие, если они логически связаны. Внутри заголовка второго уровня вы можете использовать заголовки третьего. Каждый из этих подзаголовков может, в свою очередь, иметь вложенные подзаголовки четвёртого уровня.

Некоторые документы требуют особого оформления, и для этого в арсенале MS Word содержится довольно много средств и инструментов. В числе таковых различные шрифты, стили написания и форматирования, инструменты для выравнивания и многое другое.

Как бы там ни было, но практически любой текстовый документ невозможно представить без заголовка, стиль которого, конечно же, должен отличаться от основного текста. Решение для ленивых — выделить заголовок жирным, увеличить шрифт на один-два размера и на этом остановится. Однако, есть ведь и более эффективное решение, позволяющее сделать заголовки в Word не просто заметными, а правильно оформленными, да и просто красивыми.

Создание заголовка с помощью встроенных стилей

В арсенале программы MS Word имеется большой набор встроенных стилей, которые можно и нужно использовать для оформления документов. Кроме того, в данном текстовом редакторе можно также создать и свой собственный стиль, а затем использовать его в качестве шаблона для оформления. Итак, чтобы сделать заголовок в Ворде, выполните следующие действия.

1. Выделите заголовок, который необходимо оформить должным образом.

2. Во вкладке “Главная” разверните меню группы “Стили”, нажав на небольшую стрелочку, расположенную в ее правом нижнем углу.

3. В окне, которое откроется перед вами, выберите необходимый тип заголовка. Закройте окно “Стили”.

это основной заголовок, идущий в самом начале статьи, текста;

Заголовок 1

заголовок меньшего уровня;

Заголовок 2

Подзаголовок
собственно, это и есть подзаголовок.

Примечание: Как можно заметить со скриншотов, стиль заголовка помимо изменения шрифта и его размера также изменяет и междустрочный интервал между заголовком и основным текстом.

Важно понимать, что стили заголовков и подзаголовков в MS Word являются шаблонными, в их основе лежит шрифт Calibri, а размер шрифта зависит от уровня заголовка. При этом, если у вас текст написан другим шрифтом, другого размера, вполне может быть такое, что шаблонный заголовок меньшего (первого или второго) уровня, как и подзаголовок, будут мельче, чем основной текст.

Собственно, именно так получилось в наших примерах со стилями “Заголовок 2” и “Подзаголовок”, так как основной текст у нас написан шрифтом Arial, размер — 12.

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

Создание собственного стиля и сохранение его в качестве шаблона

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

1. Откройте диалоговое окно группы “Стили”, расположенной во вкладке “Главная”.

2. В нижней части окна нажмите на первую кнопку слева “Создать стиль”.

3. В окне, которое перед вами появится, задайте необходимые параметры.

В разделе “Свойства” введите название стиля, выберите ту часть текста, для которой он будет использоваться, выберите стиль, на котором он основан, а также укажите стиль для следующего абзаца текста.

В разделе “Формат” выберите шрифт, который будет использоваться для стиля, укажите его размер, тип и цвет, положение на странице, тип выравнивания, задайте отступы и междустрочные интервалы.

Совет: Под разделом “Форматирование” находится окно “Образец”, в котором вы можете видеть то, как будет выглядеть ваш стиль в тексте.

В нижней части окна “Создание стиля” выберите необходимый пункт:

“Только в этом документе” — стиль будет применим и сохранен только для текущего документа;

“В новых документах, использующих этот шаблон” — созданный вами стиль будет сохранен и станет доступен для использования в дальнейшем в других документах.

Выполнив необходимые настройки стиля, сохранив его, нажмите кнопку “ОК”, чтобы закрыть окно “Создание стиля”.

Вот простой пример стиля заголовка (хотя, скорее, подзаголовка), созданного нами:

Примечание: После того, как вы создадите и сохраните свой собственный стиль, он будет находится в группе “Стили”, которая расположена во вкладе “Главная”. Если он не будет отображаться непосредственно на панели управления программы, разверните диалоговое окно “Стили” и найдите его там по названию, которое вы придумали.

На этом все, теперь вы знаете, как правильно сделать заголовок в MS Word, используя шаблонный стиль, доступный в программе. Также теперь вы знаете о том, как создать свой собственный стиль оформления текста. Желаем вам успехов в дальнейшем изучении возможностей этого текстового редактора.

Отблагодарите автора, поделитесь статьей в социальных сетях.

В этом материале мы продолжаем знакомится с замечательным редактором Word от Microsoft Office. Как всегда разбираемся с оглавлением и на этот раз мы будем помечать свои стили для включения их в оглавление. Поначалу в редакторе помечены только 3 основных стиля. Но если мы захотим использовать свои стили и чтобы они в дальнейшем были включены в оглавление, нам необходимо будет задать этим стилям уровень вложенности. Итак, давайте приступим!

Проверяем стили заголовков

В своем документе я для заголовков использую стили, которые не являются встроенными. Прежде чем создавать оглавление необходимо настроить в Microsoft Word распознавание этих стилей. Сначала проверим имена стилей заголовков. Для удобства у меня уже открыта область задач стилей. Щелкнем заголовок первого уровня (1), чтобы проверить его имя стиля; примененный стиль — «Название«. Щелкнув заголовок второго уровня (2), мы видим, что к нему применен стиль «Подзаголовок«. Также я создал заголовок третьего, к которому применил свой стиль и назвал его «Подзаголовок 2«.

Назначаем уровень оглавления стилям заголовков

По большей части, чтобы документ выглядел респектабельно, ему требуется качественное оформление. Microsoft word имеет весь необходимый арсенал инструментов, позволяющий вашему документу, будь это обычная статья или увесистый доклад, выглядеть красиво и лаконично. В число главный критериев качественного документа входят заголовки, о которых и пойдет речь в данной статье.

Чтобы кто не говорил, но всякий текстовый документ, не содержащий в себе правильно оформленных заголовков, обречен на предсказуемый провал. В наше время люди не обременяют себя слишком тяжким трудом и просто выделяют заголовок жирным стилем, увеличивают размер текста на 2-3 параметра, а после оканчивают свои попытки. Но стоит отметить, что существуют нормы правильных оглавлений, повышающих не только убедительность вашего документа в том, что его оформил грамотный человек, но и красоту, элегантность и простоту в восприятии.

Создание заголовка с помощью встроенных стилей

Пользователю MS Word предлагается уже изначально существующий набор стилей, позволяющих использовать их для оформления текстовых файлов. К тому же, редактор дает возможность создать свой личный стиль, который можно будет использовать в последствии как готовый шаблон для заголовков. Чтобы понять, как этого работает, нужно выполнить следующую инструкцию:

С помощью ПКМ выделите нужный отрезать текста.

Найдете раздел под названием "Главное" и выберете группу "Стили", кликнув по маленькой стрелочке, как показано на скриншоте.

У вас выскочит окно с предложенными типами заголовков. Выберете одно понравившееся именно вам и закройте окно "Стилей".

Главный заголовок, что всегда идет в начале текстового документа.

Немного меньшего размера заголовок.

Ещё меньше на один уровень.

То же самое, что и сам заголовок, только значительно меньших размеров.

Заголовки, что мы сейчас рассмотрели, называются шаблонными и используют уже заранее заготовленные параметры. Например, если вы посмотрите на скриншоты, то можете заметить, что там используется шрифт Calibri. К тому же размер текста всегда будет зависеть от выбранного вами заголовка. Здесь стоит отметить то, что если изначально напечатанный текст был написан иным шрифтом или иным размером, то вероятнее всего, шаблон заголовка, что вы выберете, будет порядком меньше, чем ваш основной текст документа.

Теперь вы видите, почему у нас "Заголовок 2" и Подзаголовок был меньше основного текста, хотя основной текст был написано шрифтом "Arial", а его размер был 12.

Создание собственного стиля и сохранение его в качестве шаблона.

Если вы ещё не забыли, то немного раньше мы говорили с вами о том, что можно создавать свои собственные стили и использовать их в качестве шаблонов для оформления заголовков в тексте. Вы сможете переключать их, если вам понадобится, а также использовать как стиль по умолчанию.

Снова перейдите в окно "Стили", что находится в разделе "Главная".

В нижнем левом углу окошка кликните на первую иконку под названием "Создать стиль", как показано на скриншоте.

У вас должно открыться окно со всевозможными параметрами. Теперь вы можете их настроить и переходить к следующему шагу.

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

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

В нижнем разделе "Создание стиля" вам необходимо выбрать один из двух пунктов:

Если выбрать "Только в этом документе", то вашим стилем можно будет пользоваться непосредственно только в данном текстовом файле.

Если выбрать пункт "В новых документах, использующих этот шаблон", то использовать вы сможете его и в данном документе и последующих созданных текстовых файлах.

После настройки нажмите на клавишу "ОК", чтобы сохранить изменения и закрыть окошко "Создание стиля".

Ниже вы можете посмотреть результат нашей работы:

Теперь с новоприобретенными знаниями вы точно сможете настроить заголовки в своем документе. При этом работая в MS Word вы сделаете это быстрее и качественнее, однако это не единственные редактор, позволяющие их правильно оформить. Все зависит о того, как и где вам удобно будет это делать, поэтому не стоит ограничиваться данным редактором, если вы чувствуете, что в нем неудобно работать.

Когда много лет назад придумали HTML, мир был совсем другим. Авторы спецификации вдохновлялись текстовыми документами, где в одном потоке подряд шли абзацы, списки, таблицы, картинки и, конечно, заголовки. Прямо как в ваших рефератах и курсовых: самый большой заголовок — название, заголовки поменьше — части или главы.

. Они озаглавливают всё, что за ними следует и образуют неявные секции. Такие логические части страницы. Неявные они потому, что закрываются только когда появляется следующий заголовок.

Но секции лучше задавать явно с помощью элемента , помните третий выпуск? Эти два фрагмента идентичны, с точки зрения семантики, но этот гораздо понятнее, хоть и многословнее.

Из-за такой системы неявных секций, спецификация настойчиво рекомендует не использовать элементы для подписей под заголовками. Это обычный параграф, а заголовок должен обозначать отдельную часть содержимого. В спецификации есть глава с примерами разметки сложных элементов: подписи, крошки, диалоги — почитайте.

Ладно! Раз у нас есть явные секции, то по вложенности легко определить отношение частей. Так может браузеры сами догадаются какого уровня заголовки нужны? А то считать:

, аш… сбился. Так было бы удобнее менять части кода местами.

Такая же идея пришла в голову авторам HTML5 и они описали в спецификации алгоритм аутлайна. Он разрешает использовать на странице только

Разработчикам идея очень понравилась, многие даже бросились её внедрять. Но вот беда: алгоритм аутлайна до сих не внедрил ни один браузер, читалка или поисковик. На таких страницах все заголовки кричат, что они №1 и самые важные. Но если важно всё, то уже ничего не важно.

Не надо так делать, об этом теперь пишет сама спецификация. За уровнем заголовков нужно следить самим. На самом деле, это не так сложно: на типичной странице вряд ли наберётся структурных частей больше, чем на 3 уровня. Так что не ленитесь.

Нет, погоди. Я ставлю класс на

и все сразу видят — это самый большой заголовок, ставлю другой класс — заголовок становится меньше, видно же. Зачем тогда эта ерунда с расчётом уровней, если есть CSS?

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

Есть две важные группы пользователей, которые читают вашу страницу по тегам разметки. Они не смотрят насколько крупный и чёрный ваш

Читалками или скринридерами пользуются люди, которые плохо или совсем не видят ваши интерфейсы, или не могут управлять браузером привычным образом. VoiceOver, NVDA, JAWS читают содержимое вслух и ориентируются только по значимым тегам. Элементы div и span не значат ни-че-го, какие бы классы и стили вы не накрутили. Такой сайт — как газета без заголовков, просто месиво текста.

Да какая газета! Очнись, 2017 на дворе, я изоморфное одностраничное приложение делаю, а не стенгазету. У меня тут стейты компонентов — нафига семантика там, где нет текста? Очень хороший вопрос.

Все читалки идут по странице тег за тегом, от первого к последнему. И читают подряд всё, что внутри. Крайне неэффективно: каждая страница начинается с шапки и пока её пройдёшь, забудешь за чем шёл. Поэтому у читалок есть специальные режимы, показывающие только важные части страницы. Структурные элементы header, nav, main и другие, все ссылки, все заголовки.

Если вывести все заголовки и прочитать их, можно составить ментальную, а не визуальную модель страницы. А потом взять и сразу перейти к нужной секции, выбрав её заголовок. Меню, поиск, каталог, настройки, логин — все эти части вашего приложения можно озаглавить, чтобы упростить доступ к ним.

Но бывает, что в дизайне нет заголовков для важных частей. Дизайнер рисует, ему всё ясно: меню с котлетой, поиск с полем и так далее. Но это не должно мешает вам делать доступные интерфейсы. Расставьте нужные заголовки, а потом доступно их спрячьте. Как? Только не display: none , его читалки игнорируют. Есть такой паттерн visually hidden, подробнее в описании к видео.

Думайте не только о том, как выглядит ваша вёрстка, но и о том, насколько логично организована разметка. Не забывайте о заголовках: пусть стили показывают, а заголовки рассказывают о ваших страницах или приложениях.

Читайте также: