Skip to main content

Які основні секції входять в HTML-документ?

HTMLJunior~1 хв читання
Запропонувати правку

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). Браузер читає їх згори вниз і на основі цього будує візуальну сторінку.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку