Пошук уроків, статей та іншого контенту
Познайомитеся з базовою будовою HTML-документа: DOCTYPE, html, head і body.
HTML-документ має визначену структуру. Вона допомагає браузеру правильно зрозуміти, де міститься службова інформація, а де — вміст сторінки для користувача.
Базова структура складається з таких частин:
<!DOCTYPE html> — повідомляє браузеру, що документ використовує сучасний HTML;
<html> — кореневий елемент усього документа;
<head> — службова інформація про сторінку;
<body> — видимий вміст сторінки.
Найпростіший HTML-документ має такий вигляд:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Моя вебсторінка</title>
</head>
<body>
<h1>Вітаю!</h1>
<p>Це моя перша вебсторінка.</p>
</body>
</html>Збережіть цей код у файлі з розширенням .html, наприклад index.html, а потім відкрийте файл у браузері.
Рядок:
<!DOCTYPE html>називається оголошенням типу документа.
Він повідомляє браузеру, що сторінку потрібно обробляти як документ HTML5 — актуальної версії HTML.
DOCTYPE:
не є звичайним HTML-тегом;
пишеться на самому початку документа;
не має парного закривального тегу;
впливає на режим відображення сторінки браузером.
Запис потрібно використовувати саме так:
<!DOCTYPE html>Регістр літер у цьому оголошенні не має значення, але рекомендований варіант — написання великими літерами.
htmlПісля DOCTYPE розташовується кореневий елемент:
<html>
...
</html>Усередині html містяться всі інші елементи документа: head і body.
Часто до відкривального тегу html додають атрибут lang, який указує мову сторінки:
<html lang="uk">
...
</html>Значення uk означає українську мову.
Повний початок документа може виглядати так:
<!DOCTYPE html>
<html lang="uk">
...
</html>Атрибут lang допомагає браузерам та іншим програмам визначати мову вмісту сторінки.
headЕлемент head містить службову інформацію про документ:
<head>
...
</head>Інформація всередині head зазвичай не відображається безпосередньо на сторінці. Вона потрібна браузеру для правильного опрацювання документа.
Для українського тексту важливо вказати кодування UTF-8:
<meta charset="UTF-8">Це допомагає браузеру правильно відображати українські літери та інші символи.
Цей елемент не має закривального тегу.
Назва сторінки задається елементом title:
<title>Моя вебсторінка</title>Текст із title відображається:
на вкладці браузера;
у назві вікна браузера;
у деяких результатах пошуку.
title розташовується всередині head:
<head>
<meta charset="UTF-8">
<title>Про компанію</title>
</head>Назва в title не є заголовком, який відображається в основному вмісті сторінки. Для видимого заголовка використовують, наприклад, елемент h1 у body.
bodyЕлемент body містить увесь вміст сторінки, який бачить користувач:
<body>
<h1>Заголовок сторінки</h1>
<p>Текст сторінки.</p>
</body>У body розміщують:
заголовки;
абзаци;
зображення;
посилання;
списки;
кнопки;
інші елементи інтерфейсу.
Наприклад:
<body>
<h1>Мій сайт</h1>
<p>Ласкаво просимо на мою вебсторінку!</p>
<button>Натиснути</button>
</body>Ці елементи браузер відобразить у вікні сторінки.
Розглянемо всі основні частини разом:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Моя сторінка</title>
</head>
<body>
<h1>Ласкаво просимо!</h1>
<p>Це приклад базової структури HTML-документа.</p>
</body>
</html>Структуру можна уявити як вкладені рівні:
html
├── head
│ ├── meta
│ └── title
└── body
├── h1
└── phtml містить head і body, а head та body містять свої дочірні елементи.
HTML-елементи можуть бути вкладені один в один. Для зручності читання кожен вкладений рівень записують із відступом:
<html lang="uk">
<head>
<title>Сторінка</title>
</head>
<body>
<h1>Заголовок</h1>
</body>
</html>Браузер зазвичай відобразить сторінку навіть без відступів, але правильне форматування допомагає:
бачити структуру документа;
швидше знаходити помилки;
зручніше підтримувати код;
розуміти, до якого елемента належить кожен тег.
Створіть файл index.html і додайте до нього такий код:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Мій перший сайт</title>
</head>
<body>
<h1>Мій перший сайт</h1>
<p>Я вивчаю структуру HTML-документа.</p>
</body>
</html>Після відкриття файлу в браузері ви побачите:
на вкладці браузера — Мій перший сайт;
на сторінці — заголовок Мій перший сайт;
під заголовком — абзац із текстом.
Назва вкладки походить із title, а заголовок і абзац на сторінці розташовані в body.
DOCTYPEНеправильно:
<html>
<head>
<title>Сторінка</title>
</head>
<body>
<p>Текст</p>
</body>
</html>Краще завжди починати документ із:
<!DOCTYPE html>headНеправильно:
<head>
<h1>Заголовок сторінки</h1>
</head>Видимий вміст потрібно розташовувати в body:
<body>
<h1>Заголовок сторінки</h1>
</body>title розташований у bodyНеправильно:
<body>
<title>Назва сторінки</title>
</body>title має бути всередині head:
<head>
<title>Назва сторінки</title>
</head>Якщо не вказати кодування, деякі символи можуть відображатися неправильно. Для сучасних HTML-документів додавайте:
<meta charset="UTF-8">Неправильно:
<head>
<body>
</head>
</body>Правильно:
<html>
<head>
</head>
<body>
</body>
</html>Кожен відкритий елемент потрібно закривати у правильному порядку.
<!DOCTYPE html> повідомляє браузеру, що документ використовує HTML5.
<html> є кореневим елементом усього документа.
Атрибут lang="uk" указує, що сторінка українською мовою.
<head> містить службову інформацію про сторінку.
<meta charset="UTF-8"> задає кодування символів.
<title> визначає назву сторінки у вкладці браузера.
<body> містить увесь видимий вміст сторінки.
Правильна вкладеність і відступи роблять HTML-код зрозумілим та охайним.