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

Є шість видів заголовків, починаючи з <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 з этого урока. Створіть порожню сторінку, додайте в неї кілька абзаців тексту, назва і розділіть їх за допомогою заголовків. успіхів :)

Засновник і керівник видання Tokar.ua. Програміст, адміністратор української Вікіпедії.

Підтримайте Токар
50 грн.

10% середньостатистичної статті,
або ж пів дня роботи нашого сервера

Підтримати
Ось вона, нагода стати причетним до розвитку незалежних медіа!
Коменти
светлана

слишком простая статья.

Назар Токарь

Занадто простий коментар.