Переклад не закінчено. Будь ласка, допоможіть перекласти цю статтю з англійської.

Елемент head документа HTML - це частина, яка не відображається у веб-браузері під час завантаження сторінки. Він містить таку інформацію, як назва сторінки <title>, посилання на файл стилів CSS (якщо ви хочете стилізувати ваш HTML контент за допомогою CSS), посилання на  власні іконки та інші метадані (дані про HTML, наприклад, хто його написав, та важливі ключові слова, які описують документ.) У цій статті ми розглянемо все перераховане вище та інше, щоб дати вам гарну основу для роботи з розміткою та іншим кодом, який повинен бути в заголовку (head) сторінки.

Передумови: Знання основ HTML, як описано в Getting started with HTML.
Мета: Дізнатись про заголовок (head) в HTML, які в нього задачі, найважливіші елементи, які він може містити, і який вплив він може мати на HTML-документ.

Що таке заголовок (head) HTML?

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

Заголовок HTML (head) - це вміст елементу <head>на відміну від вмісту елемента <body> (яке відображається на сторінці при завантаженні в браузері), вміст head не відображається на сторінці. Головним завданням заголовку є містити метадані про документ. У наведеному вище прикладі заголовок досить малий:

<head>
  <meta charset="utf-8">
  <title>My test page</title>
</head>

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

Додавання назви сторінки

Ми вже бачили елемент елемент <title> в дії — він може бути використаний для додавання назви (title) документа. Однак його можна зплутати з елементом <h1>, який використовується для додавання заголовка верхнього рівня до вашого вмісту body - його також іноді називають заголовком сторінки. Але це різні речі!

  • Елемент <h1> з'являється на сторінці, коли завантажується в браузері - зазвичай його слід використовувати лише один раз на сторінці, щоб позначити заголовок вмісту сторінки (заголовок статті, заголовок новин або все, що підходить для змісту).
  • Елемент <title> - це метадані, які являють собою заголовок (назву) всього документа HTML (а не змісту документа).

Активне навчання: перевірка простого прикладу

  1. Щоб розпочати це активне навчання, ми хотіли б, щоб ви перейшли на наш GitHub репозиторій та завантажили копію нашої title-example.html сторінки. Для цього також
    1. Скопіюйте та вставте код із сторінки в новий текстовий файл у редакторі коду, а потім збережіть його в зручному місці.
    2. Натисніть кнопку "Raw" на сторінці, яка призведе до появи вихідного коду на новій вкладці веб-браузера. Потім виберіть у меню вашого браузера  Файл > Зберегти як... а потім виберіть місце для збереження файлу.
  2. Тепер відкрийте файл у своєму веб-браузері. Ви повинні побачити щось подібне:

    A simple web page with the title set to <title> element, and the <h1> set to <h1> element. Тепер повинно бути абсолютно зрозуміло, в чому різниця між <h1> та <title>!

  3. Ви також маєте спробувати відкрити код в редакторі коду, відредагувати вміст цих елементів, а потім оновити сторінку у своєму веб-браузері. Поекспериментуйте з кодом, змінюючи його!

Зміст елементу <title> також використовується в інший спосіб. Наприклад, якщо ви спробуєте закласти сторінку (Закладки > Закласти цю сторінку або значок зірки в адресному рядку в Firefox), ви побачите зміст <title> заповнений як назва закладки.

A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element

Вміст <title> також використовується в результатах пошуку, як ви побачите нижче.

Метадані: елемент <meta>

Метадані - це дані, які описують дані, і HTML має "офіційний" спосіб додавання метаданих до документа - елемент <meta>. Звичайно, інші речі, про які ми говоримо в цій статті, також можуть розглядатися як метадані. Існує багато різних типів елементів <meta> які можуть бути включені в <head> вашої сторінки, але не будемо намагатись пояснити їх усі на даному етапі, оскільки це може вас заплутати. Замість цього ми пояснимо декілька речей, які ви, можливо, зазвичай бачите, щоб розібратись, що до чого.

Визначення кодування символів документа

У прикладі, показаному вище, цей рядок також включений:

<meta charset="utf-8">

Цей елемент просто вказує кодування символів документа - набір символів, який документ може використовувати. utf-8 - це універсальний набір символів, що включає практично будь-які символи з будь-якої людської мови. Це означає, що ваша веб-сторінка зможе обробляти будь-яку мову; тому правильно встановити це кодування на кожній веб-сторінці, яку ви створюєте! Наприклад, ваша сторінка може чудово відображатись англійською та японською мовами:

a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine, Якщо ви встановите кодування символів, наприклад, ISO-8859-1,  (набір символів для латинського алфавіту), виведенний текст сторінок буде зіпсованим:

a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly

Активне навчання: експеримент із кодуванням символів

Щоб спробувати це, перегляньте простий шаблон HTML, який ви отримали в попередньому розділі <title> (the title-example.html page), спробуйте змінити значення мета-кодування на ISO-8859-1, і додайте японську мову на свою сторінку. Це текст, який ми використовували (до речі, там написано "рис гарячий"):

<p>Japanese example: ご飯が熱い。</p>

Додавання автора та опису

Багато елементів <meta> містять атрибути name та content:

  • name вказує тип мета-елемента; який тип інформації він містить.
  • content вказує актуальний мета контент.

Два таких мета-елемента, які корисні для включення в сторінку, визначають автора сторінки та надають стислий опис сторінки. Давайте подивимось на приклад:

<meta name="author" content="Chris Mills">
<meta name="description" content="Учбовий центр MDN спрямований на те, 
щоб надати всім новачкам в Інтернеті все, що їм необхідно знати, 
щоб приступити до розробки веб-сайтів і додатків.">

Вказівка імені автора корисна по кількох причинах: корисно вміти розібратися, хто написав сторінку, якщо ви захочете зв'язатися з ним з питаннями про вміст. Деякі системи керування вмістом (CMS) мають можливості для автоматичного виявлення інформації про автора сторінок та надання доступу до них.

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

Активне навчання: використання опису в пошукових системах

Опис також використовується на сторінках результатів пошуку. Давайте пройдемо вправу, щоб вивчити це:

  1. Перейдіть на головну сторінку Mozilla Developer Network.
  2. Перегляньте джерело сторінки (клікніть правою кнопкою миші на сторінці, виберіть Програмний код сторінки (View Page Source) із контекстного меню.
  3. Знайдіть опис метатегів. Він буде виглядати так:
    <meta name="description" content="The Mozilla Developer Network (MDN) provides
    information about Open Web technologies including HTML, CSS, and APIs for both
    Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
  4. Тепер знайдіть "Mozilla Developer Network" у вашій улюбленій пошуковій системі (Ми використовуємо Yahoo.) Ви помітите опис елементів вмісту <meta> та <title>, що використовуються в результатах пошуку — безумовно їх варто вказувати!

    A Yahoo search result for "Mozilla Developer Network"

Примітка: В Google ви побачите деякі важливі субсторінки MDN під посиланням на головну сторінку MDN - вони називаються посилання на сайт (sitelinks) і налаштовуються в інструментах Google для веб-майстрів Google's webmaster toolsце спосіб зробити результати пошуку вашого сайту кращими в пошуковій системі Google.

Примітка: Багато функцій <meta> більше не використовуються. Наприклад, ключове слово <meta> елемента (<meta name="keywords" content="заповнити, в, ваші, ключові, слова, тут">) — який повинен забезпечити ключові слова для пошукових систем, щоб визначити релевантність цієї сторінки для різних пошукових термінів - нині ігноруються пошуковими системами, оскільки спамери просто заповнювали список ключових слів на сторінці сотнями ключових слів, щоб їх сайти з'являлись в результатах пошуку якомога вище.

Інші типи метаданих

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

Наприклад, Open Graph Data є протоколом метаданих, який Facebook винайшов для надання більш багатих метаданих для веб-сайтів. У коді MDN ви знайдете це:

<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both Web sites
and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
<meta property="og:title" content="Mozilla Developer Network">

Одним з ефектів цього є те, що, коли ви посилаєтеся на MDN на Facebook, посилання з'являється разом із зображенням та описом: більш зручно для користувачів.

Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.Twitter також має власні аналогічні запатентовані метадані, що мають подібний ефект, коли URL-адреса сайту відображається на twitter.com. Наприклад:

<meta name="twitter:title" content="Mozilla Developer Network">

Додавання власних іконок на сайт

Щоб ще більше збагатити дизайн сайту, ви можете в метадані додавати посилання на власні іконки, і вони будуть відображатися у певних контекстах.

Цей скромний значок, який існує протягом багатьох років, був першою піктограмою такого типу, значок 16 x 16 пікселів, який використовується в багатьох місцях. Ви побачите значки, які відображатимуться на вкладці веб-переглядача, що містять кожна відкрита сторінка, а також поруч зі сторінками, закладеними на панелі закладок.

Іконка може бути додана на сторінку за допомогою:

  1. Зберігаючи її в тому самому каталозі, що й індексна сторінка сайту (index), збережена у форматі .ico (більшість браузерів підтримуватиме функцію favicons у більш поширених форматах, наприклад .gif або .png, але за допомогою формату ICO це гарантує, що він буде працювати ще в Internet Explorer 6).
  2. Додайте наступний рядок в <head> HTML документу, щоб вказати іконку:
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

Ось приклад піктограми на панелі закладок:

The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.

Також існує безліч інших типів іконок. Наприклад, ви знайдете їх в вихідному коді домашньої сторінки MDN:

<!-- third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
<!-- iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
<!-- basic favicon -->
<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">

У коментарях пояснюється, для чого використовується кожна іконка, наприклад, при додаванні сторінки на головний екран iPad буде використана іконка високої роздільної здатності.

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

Застосування CSS та JavaScript в HTML

Практично всі веб-сайти, якими ви користуєтесь на сьогоднішній день, використовують CSS щоб виглядати класно та JavaScript для роботи інтерактивних функцій, таких як відеоплеєри , карти, ігри тощо. Зазвичай пов'язані стилі додають на сторінку за допомогою елементу <link>, а скрипти за допомогою елементу <script> відповідно.

  • Елемент <link> завжди розміщується в середині голови (head) веб-документу. Цей елемент має два атрибути, rel="stylesheet", який вказує, що це таблиця стилів документа, а також href, що вказує шлях до файлу стилів (до файлу з розширенням css):

    <link rel="stylesheet" href="my-css-file.css">
  • Елемент <script> не обов'язково має бути в голові сторінки (head); насправді,  краще скрипт розміщувати в нижній частині тіла документа (body) (перед закриваючим тегом </body>), щоб переконатися, що весь вміст HTML сторінки був прочитаний браузером, перш ніж він намагатиметься застосувати JavaScript на сторінці (якщо JavaScript намагається отримати доступ до елемента, який ще не існує, браузер видає помилку).

    <script src="my-js-file.js"></script>

    Примітка: Елемент <script> може виглядати як порожній елемент, але це не так, і тому потрібен закриваючий тег. Замість того, щоб вказувати на зовнішній файл сценарію, ви також можете додати ваш сценарій в елемент <script>.

Активне навчання: застосування CSS та JavaScript на сторінці

  1. Щоб розпочати це активне навчання, візьміть копії наших meta-example.html, script.js та style.css файлів, і збережіть їх на своєму комп'ютері в тій же директорії. Переконайтеся, що вони збережені з правильними іменами та розширеннями файлів.
  2. Відкрийте файл HTML у вашому браузері та текстовий редактор.
  3. Виконавши ці кроки, додайте до вашого HTML документу елементи <link> та <script>, щоб CSS та JavaScript застосувались до HTML-документу.

Якщо все правильно зроблено, коли ви збережете свій HTML-код і оновите свій браузер, то побачите, що на сторінці все змінилося:

Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page.

  • JavaScript додав порожній список на сторінку. Тепер, коли ви натиснете де-небудь у списку, з'явиться діалогове вікно з проханням ввести якийсь текст для нового елемента списку. Коли ви натиснете кнопку ОК, новий елемент списку буде додано до списку, що містить текст. Коли ви натискаєте існуючий елемент списку, з'явиться діалогове вікно, що дозволить вам змінити текст об'єкта.
  • CSS змусив фон змінитись зеленим кольором, а текст став більшим. Він також стилізовав деякий вміст, який JavaScript додав на сторінку (червона смужка з чорною рамкою - це стиль, який CSS додав до списку, створений JS).

Примітка: Якщо ви застрягли в цій вправі і не можете застосувати CSS/JS на сторінці, то перегляньте нашу сторінку css-and-js.html з прикладом.

Встановлення основної мови документа

Нарешті, варто зазначити, що ви можете (і це необхідно) встановити мову своєї сторінки. Це можна зробити, додавши lang attribute (атрибут мови) до відкриваючого HTML-тегу (як показано в прикладі meta-example.html і показано нижче).

<html lang="en-US">

Це корисно в багатьох випадках. Ваш HTML-документ буде більш ефективно індексований пошуковими системами, які використовують це, щоб ефективніше індексувати сторінки — наприклад, показувати їх користувачам, які використовують відповідну мову (дозволяючи їй відображатися належним чином), і це корисно для людей з порушеннями зору, що використовують програми зчитування з екрана - скрінрідери (наприклад, слово "динозавр" говорять як українською, так й іншими мовами, але воно вимовляється по-різному).

Ви також можете встановити підрозділи вашого документа, щоб вони розпізнавались різними мовами. В нашому прикладі з фрагментом японською мовою правильно вказати мову так:

<p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p>

Ці коди визначаються стандартом ISO 639-1. Ви можете дізнатись більше про них в Language tags in HTML and XML.

Підсумок

На цьому закінчим наш короткий огляд заголовку HTML — там ще багато всього корисного, але зараз повний перелік буде нудним і заплутає вас. Ви вже маєте загальне уявлення про найпоширеніші і використовуваніші елементи. У наступній статті ми розглянемо основи розмітки тексту в HTML.

Мітки документа й учасники

 Зробили внесок у цю сторінку: websunsey
 Востаннє оновлена: websunsey,