Урок №25. HTML. Голова веб-сторінки - HEAD

Курс по основам HTML | CSS. W3Schools українською. Уроки для початківців



HTML елемент <head>

Елемент <head> є контейнером для метаданих (службових даних) і розміщується між тегом <html> і тегом <body>.

Метадані HTML - це службові дані про HTML документ. Метадані не відображаються на веб-сторінці і їх не видно користувачам. Метадані зазвичай визначають назву документа, набір символів, стилі, посилання, скрипти та іншу мета-інформацію.

Наступні теги описують метадані: <title>, <style>, <meta>, <link>, <script> і <base>.


HTML елемент <title>

Елемент <title> визначає назву документа і є обов'язковим для всіх HTML/XHTML документів згідно специфікації HTML5.

Елемент <title>:

Простий документ HTML:

Приклад:

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>
The content of the document......
</body>

</html>
Спробуйте самі! »

HTML елемент <style>

Елемент <style> використовується для визначення інформації про стиль для однієї HTML сторінки:

Приклад:

<style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>
Спробуйте самі! »

HTML елемент <link>

HTML елемент <link> використовується для посилання на зовнішні таблиці стилів - CSS файли:

Приклад:

<link rel="stylesheet" href="mystyle.css">
Спробуйте самі! »

Примітка: Щоб дізнатися більше про CSS, відвідайте Підручник по CSS.


HTML елемент <meta>

Елемент <meta> використовується для визначення того, який набір символів використовується, опис сторінки, ключові слова, автора та інші метадані. Метадані використовуються браузерами (як відображати вміст), пошуковими системами (ключовими словами) та іншими веб-службами.

Визначте набір символів, що використовується на веб-сторінці (кодування):

<meta charset="UTF-8">

Визначте опис веб-сторінки:

<meta name="description" content="Free Web tutorials">

Визначте ключові слова для пошукових систем:

<meta name="keywords" content="HTML, CSS, XML, JavaScript">

Визначте автора сторінки:

<meta name="author" content="John Doe">

Оновити документ кожні 30 секунд:

<meta http-equiv="refresh" content="30">

Приклад <meta> тегів :

Приклад:

<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
Спробуйте самі! »

Встановлення вікна перегляду - Viewport

HTML5 представив метод, який дозволяє веб-дизайнерам керувати екраном через тег <meta>. Вікно перегляду (viewport) - видима область користувача веб-сторінки. Вона змінюється залежно від пристрою і буде менше на мобільному телефоні, ніж на екрані комп'ютера.

Ви повинні включити наступний елемент viewport <meta> у всіх веб-сторінках:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Елемент viewport <meta> надає інструкціям браузера, як контролювати розміри та масштабування сторінки. Частина width=device-width встановлює ширину сторінки, щоб вона відповідала ширині екрана пристрою (яка залежить від пристрою). Частина initial-scale=1.0 встановлює початковий рівень масштабування, коли сторінка завантажується браузером.

Нижче наведено приклад веб-сторінки без метатега viewport та тієї ж веб-сторінки з метатегом viewport:

Примітка: Якщо ви переглядаєте цю сторінку за допомогою телефону або планшету, можна натиснути два посилання нижче, щоб побачити різницю (в іншому вікні).


HTML елемент <script>

Елемент <script> використовується для визначення JavaScript на стороні клієнта.

Цей JavaScript пише "Hello JavaScript!" в HTML елементі з id = "demo":

Приклад:

<script>
function myFunction {
  document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
Спробуйте самі! »

Примітка: Щоб дізнатися більше про JavaScript, перейдіть до Підручника з JavaScript.


HTML елемент <base>

Елемент <base> вказує базову URL-адресу та базову ціль для всіх відносних URL-адрес сторінки:

Приклад:

<base href="https://www.w3schools.com/images/" target="_blank">
Спробуйте самі! »

Чи опускати <html>, <head> і <body>?

Відповідно до стандарту HTML5 теги <html>, <body> і <head> можна опустити.

Наступний код пройде валідацію як HTML5:

Приклад:

<!DOCTYPE html>
<title>Page Title</title>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Спробуйте самі! »

Примітка: W3Schools не рекомендує опускати теги <html> і <body>. Нехтування цими тегами може призвести до збою програмного забезпечення DOM або XML і виникнення помилок у старих браузерах (IE9). Проте, опускати тег <head> - це була поширена практика протягом досить тривалого часу.


HTML елементи голови веб-сторінки - Head

Тег Опис
<head> Визначає інформацію про документ
<title> Визначає назву документа
<base> Визначає адресу за замовчуванням або типову ціль для всіх посилань на сторінці
<link> Визначає взаємозв'язок між документом і зовнішнім ресурсом
<meta> Визначає метадані про документ HTML
<script> Визначає скрипт на стороні клієнта
<style> Визначає інформацію про стиль для документа

Примітка: Для отримання повного списку всіх доступних HTML тегів, відвідайте довідник HTML тегів.



warning

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.