Заголовки в верстці сайтів використовуються для відділення блоків контенту один від одного, з їх допомогою можна розбивати великі сторінки з текстом на більш зручні частини, які простіше читати вашим користувачам.
Є шість видів заголовків, починаючи з <h1>
і закінчуючи <h6>
, перший — найважливіший, а шостий відповідно найменш пріоритетний.
Приклад
<h1>Цитаты</h1> <h2>О снах</h2> Я дуже рідко бачу сни. А якщо бачу, то на диво примітивні. Зиґмунду Фройду тут абсолютно нічого робити. <h2>Про правопис</h2> Знаєш, він з тих, хто пише "взагалі" через «о»... <h2>Про дівчат</h2> В трамваї гарну жінку не зустрінеш. В присмерку такси, відкинувшись на цитрусові сидіння, їдуть довгоногі й безсердечні — на них всюди чекають. А дурненьких у заляпаних брудом панчохах поволі качає трамвайне море. І скло при цому мерзотно дзвенить.
Вот что получится в результате:
Цитати
О снах
Я дуже рідко бачу сни. А якщо бачу, то на диво примітивні. Зиґмунду Фройду тут абсолютно нічого робити.
Про правопис
Знаєш, він з тих, хто пише “взагалі” через «о»…
Про дівчат
В трамваї гарну жінку не зустрінеш. В присмерку такси, відкинувшись на цитрусові сидіння, їдуть довгоногі й безсердечні — на них всюди чекають. А дурненьких у заляпаних брудом панчохах поволі качає трамвайне море. І скло при цому мерзотно дзвенить.
За замовчуванням браузер і будь-який відомий мені фреймворк виділяє важливий заголовок великим розміром літер, ніж менш важливий. Так, <h1>
буде найбільшим, а <h6>
(нескладно здогадатися) — найменшим.
Це візуально допомагає розібратися, де на сторінці закінчується черговий абзац, а де – більш важлива частина (за нею йде більший за розміром заголовок).
Відмінності між HTML4.01 та HTML5
В HTML версії 4.01 для заголовків можна було призначати атрибут align
для рівняння тексту (left
, center
, right
або justify
):
<h1 align="center">Заголовок першого рівня</h1>
В HTML версії 5 такий підхід не підтримується й будь-які стилізації тексту повинні проводитися тільки в CSS. Як це робити, ми обговоримо в наступних уроках.
Також потрібно запам’ятати, що заголовок <h1>
визначає назву статті або сторінки, тому використовувати його можна тільки один раз на сторінку. Заголовки h1...h6
підтримують все ті ж атрибути, що й останні html-елементи.
У більшості фреймворків для тегів заголовків є класи-дублікатори, які можна використовувати з будь-яким текстовим елементом, щоб він мав вигляд, як заголовок. Наприклад, в Bootstrap є класи .h1, ..., .h6
.
Докладно про них можна почитати в уроці про оформлення тексту.
Домашнє завдання
Візьміть код html з этого урока. Створіть порожню сторінку, додайте в неї кілька абзаців тексту, назва і розділіть їх за допомогою заголовків. успіхів :)
слишком простая статья.
Занадто простий коментар.