Элементы верстки сайта. Работаем с заголовками
Заголовки на сайте — это бирки, размером и тяжестью своею знаменующие важность той или иной вещи. Можно поместить кусок текста в угол газеты, но набрать заголовок к нему аршинными буквами. И можно поклясться собственными штиблетами, что внимание читателя будет не в шапке и не в центре газеты, а именно в том углу.
Размерность заголовков на сайте, безусловно, имеет свою строгую иерархию. Самый важный — номер 1-й. В нашем случае это h1 или H1, если угодно. Для любого сайта этим номером логичнее всего прописывать название самого сайта.
Часто можно увидеть, что этим тэгом оформляют заголовки отдельных страниц или разделов. Тем самым нарушается логическая цепочка: Главная страница – Страница 2-го уровня – Страница 3-го уровня и т.д. Если сделать несколько страниц 2-го уровня с заголовком 1-го уровня, то какой уровень имеет главная страница? Нулевой?
Еще интереснее получается в шаблонах WordPress, когда заголовки постов оформляются тэгом h1. Обычно ведь на главной странице блога выводится подряд несколько постов. Выходит, что на одной странице у нас собирается несколько заголовков h1. Так какой из них важнее? Вопрос вовсе не праздный, ибо поисковые машины ориентируются на эти тэги и выдают страницы в соответствии с их весом.
Другой, не менее диковинной, штуковиной в шаблонах можно встретить оформление таких незначительных данных как: дата, время или количество комментариев тэгами 4-го или 5-го уровней. Зачем? Что такого важного в этих служебных данных? Достаточно взять их в обычные тэги <p></p> и задать любое нужное отображение в листе стилей CSS.
Окей! С этим разобрались. Теперь поговорим за оформление заголовков и их расположение на странице.
Оформление заголовков и их расположение на странице сайта
Во-первых, заголовок любого уровня — это блочный элемент. На строке он всегда располагается один. Нельзя без дополнительных условий разместить в одной строке два разных заголовка. По этой же причине нельзя расположить в одну линию заголовок и начальную строку абзаца. Абзац всегда будет под заголовком.
Чтобы обойти это правило, нужно заголовку, как обычному блочному элементу, задать обтекание float.
Так, например, реализовано во многих шаблонах WordPress размещение в одной строке заголовка и даты. Заголовку задали обтекание float: left; а дате — float: right; И всем радостно и удобно.
Останется лишь после них выполнить очистку clear: both;, потому как, если заголовок короткий, буквально в одно слово, то между ним и датой может влезть кусок нижележащего текста из абзаца. Ведь абзац тоже не дурак занять пустующее пространство.
Выглядеть в коде страницы это может так:
<h1>Заголовок</h1>
<span class="date">Дата</span>
<div class="clearfloat"></div>
Соответственно и стили:
h1 {float: left;}
.date {float: right;}
.clearfloat {clear: both;}
Во-вторых, заголовок имеет и чисто строковые характеристики, как и любая строчка текста. То есть, у него есть определенно-заданная высота строки пропорциональная размеру выбранного шрифта. Например, если вы наберете достаточно длинный заголовок, то у вас расстояние между его строчками буду вовсе не такими, как у абзаца:
Понятное дело, что не всегда это выглядит красиво и аккуратно. Да и места занимает изрядно. Чтобы побороть данную данность, применяют простое правило, позволяющее произвольно задать размер высоты строки:
line-height: 1em;
Значение можно задавать как в относительных единицах (как показано выше), так и в процентах и даже в пикселях. После применения этого правила, получим такой заголовок:
Если же пойти еще дальше, и сделать высоту строки заведомо очень низкой, то получим наложение строк друг на друга. Необычный и довольно привлекательный эффект.
Другой, не менее полезной фишкой, является изменение расстояния между буквами заголовка. В некоторых шрифтах эти промежутки довольно большие и выглядят некрасиво. И, опять же, занимают довольно много лишнего места. Чтобы сократить их, используют следующее правило:
letter-spacing: -1pt;
Здесь мы задали расстояние между буквами в минус один пункт. тут надо заметить, что данное расстояние можно менять только в пределах целых чисел, в отличие от высоты строки, например, где можно задавать произвольные числа.
Такую же роль играет и правило для изменения расстояния между словами в строке:
word-spacing: -2pt;
Вот, в общем-то, и все на сегодня. Немного, но полезно.
