Вивчайте Пояснення Структури HTML-Документа

Свайпніть щоб показати меню

HTML-документ має послідовну структуру, що складається з кількох ключових елементів.

Тег `<html>`

Кореневий елемент кожної сторінки. Весь вміст розміщується між відкриваючим тегом <html> і закриваючим тегом </html>.

<html>
  <!-- Other elements go here -->
</html>

Тег `<head>`

Містить інформацію про сторінку, яка не відображається користувачу. Сюди входять заголовок, метадані, посилання на таблиці стилів або скрипти.

<head>
  <title>Title of the Document</title>
  <meta charset="UTF-8" />
  <!-- Other meta tags, links, and scripts go here -->
</head>

Поширені елементи у <head>:

<title>: текст, що відображається на вкладці браузера;
<meta charset="UTF-8">: встановлює кодування тексту;
<meta name="description">: короткий опис сторінки;
<meta name="viewport">: необхідний для адаптивного дизайну.

Тег `<body>`

Містить усе, що видно на сторінці: текст, зображення, посилання, форми тощо.

<body>
  <h1>Hello, World!</h1>
  <p>This is a paragraph of text.</p>
  <!-- Other content goes here -->
</body>

Оголошення типу документа

Вказує браузеру використовувати стандарт HTML5 для відображення сторінки.

<!DOCTYPE html>

Приклад повної структури

Для підсумку зберемо всі розглянуті елементи та об'єднаємо їх в один HTML-документ.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Document</title>
    <meta charset="UTF-8" />
    <!-- Other meta tags, links, and scripts go here -->
  </head>

  <body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph of text.</p>
    <!-- Other content goes here -->
  </body>
</html>

Нижче ви можете побачити, як HTML-документ виглядає у веббраузері.