7 Грудень 2015
1 873
Рубрика: уроки

Уроки по верстке сайтов: заголовки H1-H6

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

Есть шесть видов заголовков, начиная от <h1> и заканчивая <h6>, первый — самый важный, а шестой соответственно наименее приоритетный.

Пример

<h1>Цитаты</h1>
<h2>О снах</h2>
Я крайне редко вижу сны. А если вижу, то на удивление примитивные. Зигмунду Фрейду тут абсолютно нечего делать.
<h2>О правописании</h2>
Знаешь, он из тех, кто пишет "вообще" через дефис...
<h2>О девушках</h2>
В трамвае красивую женщину не встретишь. В полумраке такси, откинувшись на цитрусовые сиденья, мчатся длинноногие и бессердечные — их всюду ждут. А дурнушек в забрызганных грязью чулках укачивает трамвайное море. И стекла при этом гнусно дребезжат.

Вот что получится в результате:

Цитаты

О снах

Я крайне редко вижу сны. А если вижу, то на удивление примитивные. Зигмунду Фрейду тут абсолютно нечего делать.

О правописании

Знаешь, он из тех, кто пишет “вообще” через дефис…

О девушках

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

По умолчанию браузер и любой известный мне фреймворк выделяет важный заголовок большим размером букв, чем менее важный. Так, <h1> будет самым большим, а <h6> (несложно догадаться) — самым мелким.

Это визуально помогает разобраться, где на странице заканчивается очередной абзац, а где — более важная часть (за ней идёт больший по размеру заголовок).

Отличия между HTML4.01 и HTML5

В HTML версии 4.01 для заголовков можно было назначать атрибут align для равнения текста (leftcenterright или justify):

<h1 align="center">Заголовок первого уровня</h1>

В HTML версии 5 такой подход не поддерживается и любые стилизации текста должны производиться только в CSS. Как это делать, мы обсудим в следующих уроках.

Также нужно запомнить, что заголовок <h1> определяет название статьи или страницы, поэтому использовать его можно только один раз на страницу. Заголовки h1...h6 поддерживают все те же атрибуты, что и остальные html-элементы.

В большинстве фреймворков для тегов заголовков есть дублирующие классы, которые можно использовать с любым текстовым элементом, чтобы он выглядел, как заголовок. Например, в Bootstrap есть классы .h1, ..., .h6.

Подробно о них можно почитать в уроке об оформлении текста.

Домашнее задание

Возьмите код html из этого урока. Создайте пустую страницу, добавьте в нее несколько абзацев текста, название и разделите их при помощи заголовков. Успехов :)

Тепер я хочу бачити коментарі 2