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

Зміст курсу

Основи HTML

Основи HTML

1. Розуміння Вебу та HTML
2. Основи HTML
3. Зображення та Медіа
4. Таблиці та Форми
5. Розширений HTML

bookСтруктура HTML Документа

По-перше, ми досліджуємо структуру HTML-документа.

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

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

тег html

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

тег head

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

Пояснення:

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

тег body

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

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

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

Результуюча структура

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

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

Відео-урок

1. Який тег є кореневим елементом HTML-документа?
2. Що містить тег `<head>`?
3. Що визначає тег `<title>`?
4. Яка мета тега `<body>`?
Який тег є кореневим елементом HTML-документа?

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

Виберіть правильну відповідь

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

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

Виберіть правильну відповідь

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

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

Виберіть правильну відповідь

Яка мета тега `<body>`?

Яка мета тега <body>?

Виберіть правильну відповідь

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

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

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

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