H1 — H6: Заголовки и их правильное использование
В HTML существует 6 уровней заголовков: начиная h1 (наиболее важного) и заканчивая h6 (наименее значимым), об них и их разумном использовании, мы и поговорим.
Начинающему дизайнеру сложно применять заголовки: стили, используемые в браузерах по умолчанию для трех наиболее значимых уровней заголовков, задают такой громадный шрифт, что для обычного читателя работа с ними превратится в настоящую муку, равно как и управление верхними и нижними полями заголовков.
HTML и CSS оснащены хорошим дизайнерским инструментарием для решения всех проблем, возникающих у разработчика при работе с заголовками.
Когда заголовки должным образом соотносятся с разделами документа, то эти заголовки акцентируют потенциально значимые детали структуры документа при необходимости позволяют дизайнеру больше сосредоточиться на специальных заголовках, если они есть.
Оптимальное размещение заголовка
Как правило, чем выше уровень заголовка, тем больше информации для читателя содержит этот раздел.
Использование заголовков — это хорошее дополнение к применению элементов — «контейнеров». Любой адекватно использованный элемент-«контейнер» указывает на контекст отрывка и улучшает модульность контента. Во Всемирной паутине главная цель заголовка — идентификация этих модулей на уровне читабельного текста.
Если дизайнер или программист использует заголовки должным образом, то в итоге каждому div-элементу модуля будет соответствовать заголовок определенного уровня.
Поскольку вся эта разметка направлена на структурирование документа, то обычно предполагается, что первый заголовок должен быть h1-элементом, за которым следуют элементы h2, h3 и т. д., детализирующие информацию.
Заголовки верхних уровней должны применяться в правильных местах и для соответствующих разделов. Однако сильно не приветствуется пропуск уровней при использовании заголовков нижних уровней.
Кроссмедийные инструменты и программы специальных возможностей могут воспроизводить документы в соответствии со структурой документа, а при пропуске уровней заголовков эта функциональность страдает.
Даже если вы не используете div-элементы в качестве контейнеров, программное обеспечение использует расположение заголовков для определения структуры документа, что достаточно, по крайней мере, для того, чтобы сгенерировать содержание документа из заголовков.
Содержимое заголовков (особенно заголовков h1 и h2) очень влияет на поисковые результаты, что сильно варьируется в зависимости от типа поисковой машины.
Оформление элементов заголовка
В отличие от других блочных элементов у заголовков отступы оформляются довольно нетипично. Поэтому работа с заголовками представляет одну из наиболее неприятных проблем для дизайнера.
Размеры и шрифты заголовков
Практически весь высокопрофессиональный дизайн строится на выделении размеров заголовков, отличающихся от установленных по умолчанию стилей браузеров.
В немалой степени это объясняется тем, что браузерные стили делают заголовки огромными и безобразными. Первый шаг на пути создания привлекательных заголовков заключается в выборе шрифта. Нужно определить размер, высоту строки (line-height), цвет, поля и отступы для всех заголовков сайта.
По меньшей мере, для заголовков будет задана различная градация размеров, исходя из числа используемых уровней в контенте и целей дизайнера сайта.
Выделение заголовков
В заголовках сайта могут также использоваться линии произвольной длины, цвета и стиля, размещаемые вместе с блоком копии, как правило, на одном из полей, а иногда и на базовой линии заголовка. Простые сплошные линии, размещаемые в поле заголовка, задаются достаточно простым путем — установкой свойства заголовка border-bottom (или border-top), например h3 { border-bottom: 1px solid rgb(85.170,255); }.
Большая часть других способов выделения, подходящих для заголовков, регулируются путем применения фоновых изображений.
- ↑ Веб-дизайн
- ← Фиксированные и «резиновые» макеты в веб дизайне
- → Детально о работе с изображениями в веб-среде