Структура HTML Документа
По-перше, ми досліджуємо структуру HTML-документа.
Структура HTML-документа
Кожен HTML-документ повинен дотримуватися послідовної структури. Елементи, описані тут, встановлюють основу для організації контенту, визначення структури сторінки та покращення користувацького досвіду в інтернеті.
тег html
Тег <html> є кореневим елементом HTML-документа. Всі інші елементи будуть записані всередині нього. Відкриваючий тег <html> позначає початок HTML-документа, а закриваючий </html> позначає кінець.
Приклад:
<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="Короткий опис сторінки">: Надає короткий опис змісту сторінки, який може з'явитися в результатах пошукових систем;<meta name="keywords" content="ключове слово1, ключове слово2, ...">: Вказує ключові слова, що стосуються змісту сторінки, допомагаючи покращити оптимізацію для пошукових систем (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>?
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Запитайте мені питання про цей предмет
Сумаризуйте цей розділ
Покажіть реальні приклади
Awesome!
Completion rate improved to 3.13Структура HTML Документа
Свайпніть щоб показати меню
По-перше, ми досліджуємо структуру HTML-документа.
Структура HTML-документа
Кожен HTML-документ повинен дотримуватися послідовної структури. Елементи, описані тут, встановлюють основу для організації контенту, визначення структури сторінки та покращення користувацького досвіду в інтернеті.
тег html
Тег <html> є кореневим елементом HTML-документа. Всі інші елементи будуть записані всередині нього. Відкриваючий тег <html> позначає початок HTML-документа, а закриваючий </html> позначає кінець.
Приклад:
<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="Короткий опис сторінки">: Надає короткий опис змісту сторінки, який може з'явитися в результатах пошукових систем;<meta name="keywords" content="ключове слово1, ключове слово2, ...">: Вказує ключові слова, що стосуються змісту сторінки, допомагаючи покращити оптимізацію для пошукових систем (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>?
Дякуємо за ваш відгук!
