Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Пояснення Структури HTML-Документа | Основи HTML
Основи HTML

bookПояснення Структури HTML-Документа

Спочатку розглянемо структуру HTML-документа.

Структура HTML-документа

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

html тег

Тег <html> є кореневим елементом HTML-документа. Усі інші елементи розміщуються всередині нього. Відкриваючий тег <html> позначає початок HTML-документа, а закриваючий тег </html> — його завершення.
Example:

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

тег head

Тег <head> містить метаінформацію про HTML-документ, таку як заголовок, кодування символів і зовнішні ресурси, наприклад таблиці стилів і скрипти. Він не містить контенту, який безпосередньо відображається користувачу на веб-сторінці.
Приклад:

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

Пояснення:

  • Тег <title> визначає заголовок веб-сторінки. Він відображається у заголовку вікна браузера або на вкладці браузера. Заголовок сторінки дає короткий огляд її вмісту, що полегшує користувачам розуміння призначення сторінки та ефективну навігацію між кількома вкладками;
  • <meta charset="UTF-8"> відповідає за вказівку кодування символів, що використовується в HTML-документі. Це кодування визначає, як веб-браузери інтерпретують і відображають текст;
  • Деякі поширені мета-теги включають:
    • <meta name="description" content="Brief description of the page">: Надає короткий опис вмісту сторінки, який може відображатися у результатах пошукових систем;
    • <meta name="keywords" content="keyword1, keyword2, ...">: Вказує ключові слова, що стосуються вмісту сторінки, допомагаючи покращити пошукову оптимізацію (SEO);
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Визначає налаштування області перегляду для адаптивного дизайну, забезпечуючи коректне масштабування на різних пристроях.

тег body

Тег <body> містить основний контент, видимий користувачам на веб-сторінці. Цей контент складається з тексту, зображень, посилань, форм та інших елементів, з якими користувачі можуть взаємодіяти під час відвідування сайту. Фактично, тег <body> містить усе, що користувачі бачать і з чим взаємодіють під час перегляду вебсайту.
Приклад:

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

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

Оголошення типу документа інформує веб-браузер про версію HTML, що використовується в документі. Це оголошення гарантує, що веб-браузер правильно відображає документ відповідно до вказаного стандарту HTML. Для документів HTML5 оголошення типу документа має вигляд <!DOCTYPE html>.
Приклад:

<!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-документ виглядає у веббраузері.

Відеоурок

1. Який тег є кореневим елементом HTML-документа?

2. Що містить тег <head>?

3. Що визначає тег <title>?

4. Яке призначення тега <body>?

question mark

Який тег є кореневим елементом HTML-документа?

Select the correct answer

question mark

Що містить тег <head>?

Select the correct answer

question mark

Що визначає тег <title>?

Select the correct answer

question mark

Яке призначення тега <body>?

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 2. Розділ 1

Запитати АІ

expand

Запитати АІ

ChatGPT

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Awesome!

Completion rate improved to 3.13

bookПояснення Структури HTML-Документа

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

Спочатку розглянемо структуру HTML-документа.

Структура HTML-документа

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

html тег

Тег <html> є кореневим елементом HTML-документа. Усі інші елементи розміщуються всередині нього. Відкриваючий тег <html> позначає початок HTML-документа, а закриваючий тег </html> — його завершення.
Example:

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

тег head

Тег <head> містить метаінформацію про HTML-документ, таку як заголовок, кодування символів і зовнішні ресурси, наприклад таблиці стилів і скрипти. Він не містить контенту, який безпосередньо відображається користувачу на веб-сторінці.
Приклад:

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

Пояснення:

  • Тег <title> визначає заголовок веб-сторінки. Він відображається у заголовку вікна браузера або на вкладці браузера. Заголовок сторінки дає короткий огляд її вмісту, що полегшує користувачам розуміння призначення сторінки та ефективну навігацію між кількома вкладками;
  • <meta charset="UTF-8"> відповідає за вказівку кодування символів, що використовується в HTML-документі. Це кодування визначає, як веб-браузери інтерпретують і відображають текст;
  • Деякі поширені мета-теги включають:
    • <meta name="description" content="Brief description of the page">: Надає короткий опис вмісту сторінки, який може відображатися у результатах пошукових систем;
    • <meta name="keywords" content="keyword1, keyword2, ...">: Вказує ключові слова, що стосуються вмісту сторінки, допомагаючи покращити пошукову оптимізацію (SEO);
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Визначає налаштування області перегляду для адаптивного дизайну, забезпечуючи коректне масштабування на різних пристроях.

тег body

Тег <body> містить основний контент, видимий користувачам на веб-сторінці. Цей контент складається з тексту, зображень, посилань, форм та інших елементів, з якими користувачі можуть взаємодіяти під час відвідування сайту. Фактично, тег <body> містить усе, що користувачі бачать і з чим взаємодіють під час перегляду вебсайту.
Приклад:

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

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

Оголошення типу документа інформує веб-браузер про версію HTML, що використовується в документі. Це оголошення гарантує, що веб-браузер правильно відображає документ відповідно до вказаного стандарту HTML. Для документів HTML5 оголошення типу документа має вигляд <!DOCTYPE html>.
Приклад:

<!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-документ виглядає у веббраузері.

Відеоурок

1. Який тег є кореневим елементом HTML-документа?

2. Що містить тег <head>?

3. Що визначає тег <title>?

4. Яке призначення тега <body>?

question mark

Який тег є кореневим елементом HTML-документа?

Select the correct answer

question mark

Що містить тег <head>?

Select the correct answer

question mark

Що визначає тег <title>?

Select the correct answer

question mark

Яке призначення тега <body>?

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 2. Розділ 1
some-alt