Урок 6 із 239
3%
← Назад

Основна структура HTML-сторінки

Вивчіть базову структуру HTML-документа та призначення основних тегів.

Основна структура HTML-сторінки

Сторінка сайту — це звичайний текстовий файл із розширенням .html. Усередині цього файлу знаходиться HTML-код разом із тегами, які браузер використовує для створення сторінки.

Кожен HTML-документ повинен мати основні теги: html, head та body. Вони створюють правильну структуру сторінки.

<!DOCTYPE html>
<html>
  <head>
    Службова інформація
  </head>

  <body>
    Вміст сторінки
  </body>
</html>

Тег html

Тег html є головним контейнером усього документа. У ньому знаходиться весь код сторінки. Усе, що написано поза тегом html, браузер не буде враховувати.

Тег head

Тег head містить службову інформацію про сторінку. Ця інформація зазвичай не відображається безпосередньо у вікні браузера.

ТегПризначення
titleНазва сторінки у вкладці браузера
meta charsetВказує кодування сторінки
linkПідключення CSS-файлів
<head>
  <meta charset="utf-8">
  <title>Мій сайт</title>
</head>

Тег body

Тег body містить основний вміст сторінки: текст, заголовки, картинки, кнопки та інші елементи, які бачить користувач у браузері.

DOCTYPE

Перед тегом html зазвичай пишеться конструкція DOCTYPE. Вона повідомляє браузеру, що використовується сучасна версія HTML5.

<!DOCTYPE html>

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>This is the title</title>
  </head>

  <body>
    This is the main content of the page.
  </body>
</html>
❗ Важливо:

Кожен сучасний HTML-документ повинен починатися з <!DOCTYPE html>. Без правильної структури браузер може неправильно обробити сторінку.

📌 Завдання:
  1. Створіть файл index.html.
  2. Додайте в нього структуру HTML5-документа.
  3. Змініть текст у тегу title.
  4. Додайте будь-який текст у тег body та відкрийте файл у браузері.
💡 Показати підказку

Файл із розширенням .html можна відкрити просто подвійним кліком. Браузер автоматично покаже його як вебсторінку.

✅ Показати відповідь
Приклад готового файлу:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Мій перший сайт</title>
  </head>

  <body>
    Привіт, HTML!
  </body>
</html>