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