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