Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Які основні секції входять в HTML-документ?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**HTML-документ** складається з трьох основних секцій, які формують його логічну і технічну структуру: оголошення `<!DOCTYPE html>`, коренева секція `<html>` і всередині неї `<head>` (метадані) та `<body>` (вміст). **Ключове:** браузер читає їх згори вниз і на основі цього будує візуальну сторінку.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняHTML-документ складається з **трьох основних секцій**, які формують його логічну і технічну структуру. Кожна з них виконує свою роль при відображенні сторінки в браузері: --- ### 1. `<!DOCTYPE html>` - оголошення типу документа Це **службовий рядок**, який стоїть **найпершим** у файлі. Він повідомляє браузеру, що документ написаний на **HTML5** (актуальний стандарт). Приклад: ```html <!DOCTYPE html> ``` Без цього оголошення браузер може перейти в "режим сумісності" і неправильно відобразити сторінку. --- ### 2. `<html>...</html>` - коренева секція Увесь вміст HTML-документа знаходиться **всередині цього тегу**. Це **корінь** сторінки: саме з нього починається ієрархія елементів (DOM-дерево). Приклад: ```html <html lang="en"> ... </html> ``` Атрибут `lang` вказує мову сторінки (важливо для пошукових систем і екранних читачів). --- ### 3. `<head>...</head>` - службова частина (метадані) Ця секція **не відображається на сторінці**, але містить важливу інформацію для браузера і пошукових систем: - кодування сторінки (`<meta charset="UTF-8">`); - назва вкладки (`<title>`); - підключення CSS-файлів (`<link rel="stylesheet" href="style.css">`); - підключення іконок, шрифтів, метатегів для SEO і соцмереж. Приклад: ```html <head> <meta charset="UTF-8"> <title>Мій сайт</title> <link rel="stylesheet" href="style.css"> </head> ``` --- ### 4. `<body>...</body>` - основна частина (контент) Це **головна секція**, де знаходиться все, що **бачить користувач**: - текст (`<p>`, `<h1>` та ін.), - зображення (`<img>`), - посилання (`<a>`), - таблиці (`<table>`), - форми, відео, кнопки тощо. Приклад: ```html <body> <h1>Ласкаво просимо!</h1> <p>Це мій перший сайт.</p> <img src="photo.jpg" alt="Фото"> </body> ``` --- ### Підсумок: | Секція | Призначення | |---|---| | `<!DOCTYPE html>` | Вказує, що документ - HTML5 | | `<html>` | Кореневий контейнер усієї сторінки | | `<head>` | Метадані (заголовок, кодування, стилі, скрипти) | | `<body>` | Основний вміст, видимий користувачу | --- **Простими словами:** HTML-документ - це **каркас із трьох рівнів**: оголошення (`DOCTYPE`), налаштування (`head`), вміст (`body`). Браузер читає їх згори вниз і на основі цього **будує візуальну сторінку**.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.