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

Відео-урок

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

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

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