Skip to main content

З чого складається HTML-документ?

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

HTML-документ складається з набору тегів, які описують структуру і вміст вебсторінки. Кожен тег повідомляє браузеру, що саме потрібно відобразити: заголовок, текст, зображення, посилання тощо.

Основна структура HTML-документа

Ось приклад базового шаблону:

html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Назва сторінки</title> </head> <body> <h1>Привіт, світе!</h1> <p>Це мій перший HTML-документ.</p> </body> </html>

Розберемо по частинах:

1. <!DOCTYPE html>

Це оголошення типу документа. Воно повідомляє браузеру, що документ написаний на HTML5 - найактуальнішій версії мови.

Без цього рядка браузер може неправильно інтерпретувати сторінку.

2. <html>...</html>

Це кореневий тег, який містить увесь HTML-код. Усе, що відображається на сторінці, знаходиться всередині нього.

Атрибут lang="en" можна додати, щоб вказати мову сторінки:

html
<html lang="en">

3. <head>...</head>

Розділ службової інформації (метаданих), яка не відображається напряму на сторінці.

Тут задаються:

  • назва вкладки (<title>);
  • кодування (<meta charset="UTF-8">);
  • підключення стилів (<link rel="stylesheet" href="style.css">);
  • підключення скриптів, шрифтів та іконок.

Приклад:

html
<head> <meta charset="UTF-8"> <title>Мій сайт</title> <link rel="stylesheet" href="style.css"> </head>

4. <body>...</body>

Це основний вміст сторінки: те, що бачить користувач.

Тут розміщуються:

  • текст (<p>),
  • заголовки (<h1>-<h6>),
  • зображення (<img>),
  • посилання (<a>),
  • списки, таблиці, форми та інші елементи.

Приклад:

html
<body> <h1>Ласкаво просимо!</h1> <p>Тут буде мій перший сайт.</p> <img src="photo.jpg" alt="Фото"> </body>

Підсумок:

ЧастинаПризначення
<!DOCTYPE html>Вказує, що використовується HTML5
<html>Кореневий елемент документа
<head>Метадані (заголовок, стилі, кодування)
<body>Основний вміст сторінки

Просто запам'ятай: HTML-документ - це каркас, що складається з трьох головних частин: оголошення, голови (head) і тіла (body). CSS і JavaScript вже «прикрашають» і «оживляють» цей каркас.

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

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

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

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