Урок №7. HTML. Заголовки

Курс по основам HTML | CSS. W3Schools українською. Уроки для початківців



Заголовки HTML. Для чого потрібні заголовки на веб-сторінках?

Заголовки

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Спробуйте самі! »

Заголовки HTML

Заголовки визначаються тегами <h1> до <h6>.

<h1> визначає найважливіший заголовок. <h6> визначає найменш важливий заголовок.

Приклад:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Спробуйте самі! »

Примітка: Браузери автоматично додають відступ (margin) до і після заголовка.


Заголовки важливі

Пошукові системи (наприклад, Google, Bing, Baidu, Yahoo!, Yandex, DuckDuckGo, Meta та ін.) використовують заголовки для індексування структури та вмісту веб-сторінок. Користувачі переглядають веб-сторінки за заголовками. Важливо використовувати заголовки, щоб показати структуру документа.

<h1> заголовки слід використовувати для основних заголовків, а потім заголовки <h2>, потім менш важливі <h3> і так далі.

Примітка: Використовуйте HTML заголовки лише для заголовків. Не використовуйте заголовки, щоб зробити текст просто великим або напівжирним. Для стилізації елементів на веб-сторінці використовуйте лише CSS.


Величина заголовків

Кожен заголовок HTML має розмір за замовчуванням. Тим не менш, ви можете вказати розмір для будь-якого заголовка з атрибутом style, використовуючи властивість font-size в CSS:

Приклад:

<h1 style="font-size:60px;">Heading 1</h1>
Спробуйте самі! »

Горизонтальна розділова лінія <hr> в HTML

Тег <hr> визначає тематичну перерву в HTML-сторінці і найчастіше відображається як горизонтальна лінія. Елемент <hr> використовується для розділення вмісту (або визначення зміни) у HTML-сторінці:

Приклад:

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
Спробуйте самі! »

Елемент <head> в HTML

Елемент HTML <head> (head - голова) не має нічого спільного з заголовками HTML. Елемент <head> є контейнером для метаданих. Метадані HTML - це дані про документ HTML. Метадані не відображаються на веб-сторінці і потрібні лише для службових цілей. Елемент <head> розміщений між тегом <html> і тегом <body>:

Приклад:

<!DOCTYPE html>
<html>

<head>
  <title>My First HTML</title>
  <meta charset="UTF-8">
</head>

<body>
...
Спробуйте самі! »

Примітка: Метадані зазвичай визначають назву документа, набір символів, стилі, посилання, скрипти та іншу мета-інформацію.


Як переглянути HTML код веб-сторінки?

Ви коли-небудь бачили веб-сторінку і дивувалися: "Як вони це зробили?"

Переглянути вихідний код HTML:

Кликніть правою кнопкою миші на сторінці HTML і виберіть "Переглянути джерело сторінки" (у Chrome) або "Переглянути джерело" (у Internet Explorer), або «Програмний код сторінки» (в Firefox), або подібні в інших веб-браузерах. Це відкриє вікно, що містить вихідний код HTML сторінки.


Як перевірити HTML код елемента на веб-сторінці:

Кликніть правою кнопкою миші по виділеному елементу (або порожньому місці) і виберіть "Перевірити" або "Перевірити елемент", щоб побачити, з яких елементів він складається (ви побачите HTML і CSS). Ви також можете редагувати HTML або CSS на льоту на панелі "Елементи" або "Стилі", яка відкривається в браузері.


Перевірте себе вправами!


Довідник HTML тегів

Довідник HTML тегів W3Schools містить додаткову інформацію про ці HTML теги та їх атрибути. Ви дізнаєтеся більше про HTML-теги та атрибути в наступних розділах цього посібника.

Тег Опис
<html> Визначає початок завантаження HTML документа
<body> Визначає тіло (body) HTML документа
<head> Контейнер для всіх елементів голови (head) веб-сторінки (назва документа, скрипти, стилі, мета-інформація та багато іншого)
<h1> - <h6> Визначає заголовки HTML документу
<hr> Визначає тематичну зміну вмісту HTML документу

Довідник HTML тегів

Примітка: Для отримання повного списку всіх доступних HTML тегів, відвідайте довідник HTML тегів.



warning

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.