Заголовки распространены на большинстве веб-страниц. На самом деле, практически любой текстовый документ имеет как минимум один заголовок, чтобы вы знали название того, что вы читаете. Эти заголовки кодируются с использованием элементов заголовков 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. Придерживайтесь только семейства шрифтов и размера / веса. Например, это может быть предварительная таблица стилей для нового сайта (это только некоторые примеры стилей, которые можно использовать):
Вы можете изменить шрифты вашего заголовка или изменить стиль текста или даже цвет текста . Все это превратит ваш «уродливый» заголовок в нечто более яркое и соответствующее вашему дизайну.
Границы могут наряжать заголовки
Границы — отличный способ улучшить заголовки и их легко добавить. Но не забудьте поэкспериментировать с границами — вам не нужна граница с каждой стороны вашего заголовка. И вы можете использовать больше, чем просто скучные границы.
Мы добавили верхнюю и нижнюю границу к нашему образцу заголовка, чтобы представить некоторые интересные визуальные стили. Вы можете добавить границы любым способом, каким захотите, для достижения желаемого стиля дизайна.
Добавить фоновые изображения в заголовки для еще более Pizazz
У многих веб-сайтов есть верхний раздел в верхней части страницы, который включает заголовок — обычно заголовок сайта и изображение. Большинство дизайнеров думают об этом как о двух отдельных элементах, но это не обязательно. Если изображение предназначено только для украшения заголовка, то почему бы не добавить его в стили заголовков?
Хитрость этого заголовка в том, что мы знаем, что наше изображение имеет высоту 90 пикселей. Таким образом, мы добавили отступ к нижней части заголовка в 90px (отступ: 0,5 0 90px 0p;). Вы можете поиграть с полями, высотой строки и отступами, чтобы текст заголовка отображался именно там, где вы хотите.
При использовании изображений следует помнить одну вещь: если у вас есть адаптивный веб-сайт (который вам следует) с макетом, который изменяется в зависимости от размеров экрана и устройств, ваш заголовок не всегда будет одного размера. Если вам нужен точный размер заголовка, это может вызвать проблемы. Это одна из причин, по которой мы обычно избегаем фоновых изображений в заголовке, какими бы крутыми они ни казались.
Замена изображения в заголовках
Это еще один популярный метод для веб-дизайнеров, поскольку он позволяет создавать графический заголовок и заменять текст тега заголовка этим изображением. По правде говоря, это устаревшая практика веб-дизайнеров, которые имели доступ к очень небольшому количеству шрифтов и хотели использовать более экзотические шрифты в своей работе. Появление веб-шрифтов действительно изменило подход дизайнеров к сайтам. Заголовки теперь могут быть установлены в широком разнообразии шрифтов, и изображения со встроенными шрифтами больше не нужны. Таким образом, вы найдете замену изображений CSS только для заголовков на старых сайтах, которые еще не были обновлены до более современных методов.
Под редакцией Джереми Жирара