Элементы верстки. Работаем с заголовками

Дата: 06.03.2009 | Автор: Игорь Квентор | Рубрика: Верстка |

Заголовки суть — бирки, размером и тяжестью своею знаменующие важность той или иной вещи. Можно поместить кусок текста в угол газеты, но набрать заголовок к нему аршинными буквами. И можно поклясться собственными штиблетами, что внимание читателя будет не в шапке и не в центре газеты, а именно в том углу.

Размерность заголовков безусловно имеет свою строгую иерархию. Самый важный — номер 1-й. В нашем случае это h1 или H1, если угодно. Для любого сайта этим номером логичнее всего прописывать название самого сайта. Часто можно увидеть, что этим тэгом оформляют заголовки отдельных страниц или разделов. Тем самым нарушается логическая цепочка: Главная страница – Страница 2-го уровня – Страница 3-го уровня и т.д. Если сделать несколько страниц 2-го уровня с заголовком 1-го уровня, то какой уровень имеет главная страница? Нулевой?

Еще интереснее получается в шаблонах Вордпресс, когда заголовки постов оформляются тэгом h1. Обычно ведь на главной странице блога выводится подряд несколько постов. Выходит, что на одной странице у нас собирается несколько заголовков h1. Так какой из них важнее? Вопрос вовсе не праздный, ибо поисковые машины ориентируются на эти тэги и выдают страницы в соответствии с их весом.

Другой, не менее диковинной, штуковиной в шаблонах можно встретить оформление таких незначительных данных как: дата, время или количество комментариев тэгами 4-го или 5-го уровней. Зачем? Что такого важного в этих служебных данных? Достаточно взять их в обычные тэги <p></p> и задать любое нужное отображение в листе стилей CSS.

Окей! С этим разобрались. Теперь поговорим за оформление заголовков и их расположение на странице.

Во-первых, заголовок любого уровня — это единоличник. На строке он всегда располагается один. Нельзя без дополнительных условий разместить в одной строке два разных заголовка. То есть, по своему характеру заголовок похож на блочный элемент div. По этой же причине нельзя расположить в одну линию заголовок и начальную строку абзаца. Абзац всегда будет под заголовком.

Чтобы обойти это правило, нужно заголовку, как обычному блочному элементу, задать обтекание float. Так, например, реализовано во многих шаблонах ВП размещение в одной строке заголовка и даты. Заголовку задали обтекание 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;

Вот, в общем-то, и все на сегодня. Немного, но полезно.

Подпишитесь на RSS

Комментарии (10) на запись “Элементы верстки. Работаем с заголовками”

Светлана 06.03.2009 18:44

Игорь, каждая Ваша статья открывает мне что-то новое и обнаруживает, как много надо привести в порядок. Заголовки 4 и 5 уровня есть, и много.

О том, что можно заменить их абзацами даже не предполагала.

“О сколько нам открытий чудных
Готовит просвещенья дух…”
Игорь Квентор 06.03.2009 18:48

Светлана, спасибо на добром слове! :)
Ольга 13.03.2009 07:15

Здравствуйте, Игорь. А есть ли у заголовков иерархия? Принципиально ли использование в коде заголовки уровня от h2 без учитывания кто из них главнее.
к примеру:
заголовок
элемент меню
заголовок страницы
Заранее спасибо за ответ :)
Ольга 13.03.2009 07:16

ой, не отображается код
Игорь Квентор 13.03.2009 12:49

Здравствуйте, Ольга! Безусловно, иерархия заголовков - это ключевая фраза данного поста :) Принцип разделения ролей у заголовков довольно прост: по функциям. Общее название сайта - это явно заголовок первого уровня h1. Названий не может быть много, оно одно единственное. Наименование основных страниц - это уже следующий уровень h2. Их может быть несколько. И т.д. Хорошим ориентиром здесь может послужить вложенность страниц. То есть, уровень заголовка присваивается в зависимости от количества кликов, требуемых для перехода к этой странице с главной.

ПС: чтобы в комментах отображался код, нужно угловые скобки заменять их кодовым эквивалентом:

< <
> >
Ольга 16.03.2009 13:43

Спасибо за ответ. а код был такой:
<h2> заголовок страницы <h2>
<h4> элемент меню <h4>
<h4> элемент меню <h4>
<h4> элемент меню <h4>
<h3> подзаголовок <h3>

+ сразу вопрос - несемантично испльзовать тэги заголовка для меню? А, к примеру, название новости в спике новостей тоже тегом заголовка сделано…

типа:
<h5> новость часа - пингвины наши родственники!<h5>
текст текст текст лорем ипсум…
Игорь Квентор 16.03.2009 21:18

Да, Оль, тэги заголовков в меню - это как из пушки по воробьям :) Заголовок - это название темы или подтемы странице, а пункты меню - это просто ссылки. Им не стоит придавать вес.
Ольга 17.03.2009 07:33

Понятно. Спасибо :)
Vladimir Shelukhin 23.10.2009 00:07

Эх, заголовки… А вот помогите разобраться наивному чукотскому юноше в такой хитрости: как обеспечить в заголовках смещение линии шрифта, чтобы от этого не поехала приводность строк в основном тексте? Курил-курил CSS 3.1, но чёртов недоброй памяти Netscape 3 так спутал все карты своим взаимопоглощением отбивок в смежных абзацах, что уверенно разобраться так и не смог. Верно ли, что значение padding не затрагивается правилом взаимного поглощения межабзацных отбивок?
Иными словами, если я наращу у заголовка ступени ниже h1 верхнюю отбивку в свойстве margin-top на некую некратную вертикальному шагу модульной сетки величину и задам такое же, только отрицательное значение для свойства padding-bittom (что вроде как должно обеспечить смещение линии шрифта для этого заголовка), то сохранится ли приводность строк к модульной сетке сайта в целом даже в случае, когда два заголовка следуют один за другим?
Игорь Квентор 23.10.2009 11:48

А вы попробуйте и посмотрите, что получится.