Заголовки часто встречаются на большинстве веб-страниц. Фактически, практически любой текстовый документ имеет как минимум один заголовок, чтобы вы знали заголовок того, что читаете. Эти заголовки закодированы с помощью HTML элементы заголовка - h1, h2, h3, h4, h5 и h6.
На некоторых сайтах вы можете обнаружить, что заголовки кодируются без использования этих элементов. Вместо этого в заголовках могут использоваться абзацы с добавленными к ним определенными атрибутами класса или разделы с элементами класса. Причина, по которой мы часто слышим об этой неправильной практике, заключается в том, что дизайнеру «не нравится, как выглядят заголовки». По умолчанию заголовки отображаются полужирным шрифтом и имеют больший размер, особенно элементы h1 и h2, которые отображаются с гораздо большим размером шрифта, чем остальной текст страницы. Имейте в виду, что это только внешний вид этих элементов по умолчанию! С участием CSS, вы можете сделать заголовок как хотите! Вы можете изменить размер шрифта, удалить жирный шрифт и многое другое. Заголовки - это правильный способ закодировать заголовки страницы. Вот несколько причин, почему.
Зачем использовать теги заголовков вместо разделов
Это лучшая причина использовать заголовки и использовать их в правильном порядке (т. Е. h1, затем h2, затем h3 и т. д.). Поисковые системы придают наибольший вес тексту, включенному в теги заголовков, потому что у этого текста есть семантическое значение. Другими словами, помечая заголовок своей страницы H1, вы сообщаете пауку поисковой системы, что это фокус №1 на странице. Заголовки H2 имеют акцент №2 и так далее.
Вам не нужно помнить, какие классы вы использовали для определения заголовков
Когда вы знаете, что все ваши веб-страницы будут иметь H1, выделенный жирным шрифтом, 2em и желтым, вы можете определить его один раз в своей таблице стилей и готово. Через 6 месяцев, когда вы добавляете еще одну страницу, вы просто добавляете тег H1 вверху страницы, у вас нет чтобы вернуться на другие страницы, чтобы узнать, какой идентификатор стиля или класс вы использовали для определения основного заголовка и подзаголовков.
Обеспечьте четкую структуру страницы
Контуры облегчают чтение текста. Вот почему большинство школ США учили студентов писать план перед написанием статьи. Когда вы используете теги заголовков в формате структуры, ваш текст имеет четкую структуру, которая становится очевидной очень быстро. Кроме того, есть инструменты, которые могут просматривать структуру страницы, чтобы предоставить синопсис, и они полагаются на теги заголовков для структуры структуры.
Ваша страница будет иметь смысл даже с выключенными стилями
Не все могут просматривать или использовать таблицы стилей (и это возвращается к пункту № 1 - поисковые системы просматривают содержимое (текст) вашей страницы, а не таблицы стилей). Если вы используете теги заголовков, вы делаете свои страницы более доступными, потому что заголовки содержат информацию, которую Тег DIV не стал бы.
Это полезно для программ чтения с экрана и доступности веб-сайтов
Правильное использование заголовков создает логическую структуру документа. Это то, что программы чтения с экрана будут использовать, чтобы «читать» сайт пользователю с нарушением зрения, делая ваш сайт доступным для людей с ограниченными возможностями.
Стиль текста и шрифта заголовков
Самый простой способ уйти от проблемы «большого, жирного и уродливого» тегов заголовков - это оформить текст так, как вы хотите, чтобы он выглядел. Фактически, при работе над новым веб-сайтом лучше всего сначала написать стили абзаца, h1, h2 и h3. Придерживайтесь только семейства шрифтов и размера / веса. Например, это может быть предварительная таблица стилей для нового сайта (это всего лишь несколько примеров стилей, которые можно использовать):
Вы можете изменить шрифты заголовка или измените стиль текста или даже цвет текста. Все это превратит ваш "уродливый" заголовок в нечто более яркое и соответствующее вашему дизайну.
Границы могут украшать заголовки
Границы - отличный способ улучшить заголовки, и их легко добавить. Но не забудьте поэкспериментировать с границами - вам не нужны границы с каждой стороны заголовка. И вы можете использовать больше, чем просто скучные рамки.
Мы добавили верхнюю и нижнюю границу к нашему образцу заголовка, чтобы представить несколько интересных визуальных стилей. Вы можете добавлять границы любым способом, который вам нужен, для достижения желаемого стиля дизайна.
Добавьте фоновые изображения в заголовки, чтобы получить еще больше удовольствия
Многие веб-сайты имеют раздел заголовка вверху страницы, который включает заголовок - обычно заголовок сайта и изображение. Большинство дизайнеров думают об этом как о двух отдельных элементах, но это не обязательно. Если изображение предназначено только для украшения заголовка, почему бы не добавить его в стили заголовка?
Уловка с этим заголовком заключается в том, что мы знаем, что наше изображение имеет высоту 90 пикселей. Поэтому мы добавили отступ в нижнюю часть заголовка размером 90 пикселей (отступ: 0,5 0 90 пикселей 0p;). Вы можете поиграть с полями, высотой строки и отступом, чтобы текст заголовка отображался именно там, где вы хотите.
При использовании изображений следует помнить, что если у вас есть отзывчивый веб-сайт (что вам следует) с макетом, который меняется в зависимости от размеров экрана и устройств, ваш заголовок не всегда будет одинакового размера. Если вам нужен заголовок точного размера, это может вызвать проблемы. Это одна из причин, по которой мы обычно избегаем фоновых изображений в заголовке, какими бы крутыми они ни казались.
Замена изображения в заголовках
Это еще один популярный метод для веб-дизайнеров, поскольку он позволяет создать графический заголовок и заменить текст тега заголовка этим изображением. Это действительно устаревшая практика веб-дизайнеров, которые имели доступ к очень небольшому количеству шрифтов и хотели использовать в своей работе более экзотические шрифты. Распространение веб-шрифтов действительно изменило подход дизайнеров к сайтам. Теперь для заголовков можно использовать самые разные шрифты, и изображения со встроенными шрифтами больше не нужны. Таким образом, вы найдете только замену изображений CSS для заголовков на старых сайтах, которые еще не были обновлены до более современных методов.
Под редакцией Джереми Жирара