НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ

HTML5 Підручник

HTML СТАРТ HTML Вступ HTML Редактори HTML Основні приклади HTML Елементи HTML Атрибути HTML Заголовки HTML Параграфи HTML Стилі HTML Форматування HTML Цитати HTML Коментарі HTML Кольори HTML CSS HTML Посилання HTML Зображення HTML Таблиці HTML Списки HTML Блоки HTML Класи HTML Ідентифікатори HTML Фрейми HTML JavaScript HTML Шляхи файлів HTML Голова веб-сторінки HTML Макети HTML Адаптивність HTML Комп'ютерний код HTML Символьні об'єкти HTML Символи HTML Кодування HTML URL кодування HTML XHTML

HTML Форми

HTML Форми HTML Елементи форми HTML Типи вводу HTML Атрибути вводу

HTML5

HTML5 Вступ HTML5 Підтримка HTML5 Нові елементи HTML5 Семантичні елементи HTML5 Перехід з HTML4 HTML5 Гід по стилю

HTML Графіка

HTML Canvas HTML SVG

HTML Медіа

HTML Медіа HTML Відео HTML Аудіо HTML Плагіни HTML YouTube

HTML API

HTML Геолокація HTML Drag/Drop HTML Web сховище HTML Web робітники HTML SSE

HTML Приклади

HTML Приклади HTML Вікторина HTML Вправи HTML Сертифікат HTML Резюме HTML Доступність

HTML Довідники

HTML Список тегів HTML Атрибути HTML Глобальні атрибути HTML Події HTML Кольори HTML Canvas HTML Аудіо/Відео HTML Діючі Doctype HTML Набори символів HTML URL кодування HTML Кодування мови HTTP Повідомлення HTTP Методи PX в EM Конвертер Гарячі клавіши

HTML5. Уроки для початківців

HTML Заголовки



Заголовки

Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5
Заголовок 6
Попробуйте сами »

HTML Заголовки

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

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

Приклад

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

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


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

Пошукові системи використовують заголовки для індексації структури і змісту веб-сторінок.

Користувачі часто переглядають сторінку по її заголовкам. Важливо використовувати заголовки, щоб показати структуру документа.

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

Примітка: Використовуйте HTML-заголовки тільки для заголовків. Не використовуйте заголовки, щоб зробити текст БІЛЬШИМ або жирним.


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

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

Приклад

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

HTML Горизонтальний роздільник

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

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

Приклад

<h1>Це заголовок 1</h1>
<p>Це якийсь текст.</p>
<hr>
<h2>Це заголовок 2</h2>
<p>Це якийсь інший текст.</p>
<hr>
Спробуйте самі »

HTML елемент <head>

HTML елемент <head> (голова) - це контейнер для метаданих. Метадані HTML - це дані про документ HTML. Метадані не відображаються на сторінці, вони потрібні для службових цілей (пошукових роботів і веб-додатків).

Елемент <head> знаходиться між тегом <html> і тегом <body>:

Приклад

<!DOCTYPE html>
<html>

<head>
  <title>Мій перший HTML</title>
  <meta charset="UTF-8">
</head>

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

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


Як переглянути вихідний код HTML?

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

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

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

Дослідити HTML елемент:

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


HTML Вправи

Перевірте себе за допомогою вправ

Вправа:

Використовуйте коректний HTML тег, щоб додати заголовок з текстом "London".



<p>Лондон - столиця Англії. Це найнаселеніше місто Великобританії, з мегаполісом понад 13 мільйонів жителів.</p>

Почати вправу


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

Довідник тегів містить додаткову інформацію про ці теги та їх атрибути.

Детальніше про теги та атрибути HTML ви дізнаєтеся в наступних розділах цього підручника.

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

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