Простий посібник з елементів HTML
<head>
- Рекомендований мінімум
- Елементи
- Мета-теги
- Посилання
- Іконки
- Соціальні мережі
- Браузери / Платформи
- Браузери (Китайські)
- Посилання на додатки
- Інші ресурси
- Пов'язані проекти
- Інші формати
- Переклади
- Внесок
- Автори
- Ліцензія
Нижче наведені основні елементи для будь-якого веб-документа (веб-сайти/додатки):
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
Два мета-теги вище ПОВИННІ йти першими в розділі <head>
щоб послідовно забезпечити правильне відтворення документа.
Будь-які інші елементи head повинні йти ПІСЛЯ цих тегів.
-->
<title>Назва сторінки</title>meta charset - визначає кодування веб-сайту, utf-8 є стандартом
meta name="viewport" - налаштування viewport, пов'язані з мобільною адаптивністю
width=device-width - використання фізичної ширини пристрою (чудово для мобільних!)
initial-scale=1 - початковий масштаб, 1 означає без масштабування
Дійсні елементи <head> включають meta, link, title, style, script, noscript та base.
Ці елементи надають інформацію про те, як документ повинен сприйматися та відтворюватися веб-технологіями, наприклад, браузерами, пошуковими системами, ботами тощо.
<!--
Встановіть кодування символів для цього документа,
щоб усі символи в просторі UTF-8 (як-от емодзі)
відображалися правильно.
-->
<meta charset="utf-8">
<!-- Встановіть назву документа -->
<title>Назва сторінки</title>
<!-- Встановіть базову URL-адресу для всіх відносних URL-адрес у документі -->
<base href="https://example.com/page.html">
<!-- Посилання на зовнішній CSS-файл -->
<link rel="stylesheet" href="styles.css">
<!-- Використовується для додавання CSS безпосередньо в документ -->
<style>
/* ... */
</style>
<!-- Теги JavaScript та No-JavaScript -->
<script src="script.js"></script>
<script>
// функція(ї) розміщується тут
</script>
<noscript>
<!-- Альтернатива без JavaScript -->
</noscript><!--
Наступні 2 мета-теги ПОВИННІ йти першими в розділі <head>
щоб послідовно забезпечити правильне відтворення документа.
Будь-які інші елементи head повинні йти ПІСЛЯ цих тегів.
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
Дозволяє контролювати звідки завантажуються ресурси.
Розмістіть якомога раніше в розділі <head>, оскільки тег
застосовується лише до ресурсів, оголошених після нього.
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<!-- Назва веб-додатку (використовується лише якщо веб-сайт використовується як додаток) -->
<meta name="application-name" content="Назва Додатку">
<!-- Колір теми для Chrome, Firefox OS та Opera -->
<meta name="theme-color" content="#4285f4">
<!-- Короткий опис документа (обмеження до 150 символів) -->
<!-- Цей вміст МОЖЕ бути використаний як частина результатів пошуку. -->
<meta name="description" content="Опис сторінки">
<!-- Контроль поведінки пошукових павуків при індексації -->
<meta name="robots" content="index,follow"><!-- Всі пошукові системи -->
<meta name="googlebot" content="index,follow"><!-- Специфічно для Google -->
<!-- Вказує Google не показувати поле пошуку сайтлінків -->
<meta name="google" content="nositelinkssearchbox">
<!-- Вказує Google не надавати переклад для цього документа -->
<meta name="google" content="notranslate">
<!-- Перевірка власності веб-сайту -->
<meta name="google-site-verification" content="verification_token"><!-- Google Search Console -->
<meta name="yandex-verification" content="verification_token"><!-- Яндекс Вебмайстер -->
<meta name="msvalidate.01" content="verification_token"><!-- Bing Webmaster Center -->
<meta name="alexaVerifyID" content="verification_token"><!-- Консоль Alexa -->
<meta name="p:domain_verify" content="code_from_pinterest"><!-- Консоль Pinterest -->
<meta name="norton-safeweb-site-verification" content="norton_code"><!-- Norton Safe Web -->
<!-- Визначення програмного забезпечення, використаного для створення документа (наприклад, WordPress, Dreamweaver) -->
<meta name="generator" content="program">
<!-- Короткий опис теми вашого документа -->
<meta name="subject" content="тема вашого документа">
<!-- Надає загальну вікову категорію на основі вмісту документа -->
<meta name="rating" content="General">
<!-- Дозволяє контролювати передачу інформації про реферера -->
<meta name="referrer" content="no-referrer">
<!-- Вимкнення автоматичного виявлення та форматування можливих номерів телефонів -->
<meta name="format-detection" content="telephone=no">
<!-- Повністю відмовитися від префетчингу DNS, встановивши значення "off" -->
<meta http-equiv="x-dns-prefetch-control" content="off">
<!-- Вказує документ для відображення у певному фреймі -->
<meta http-equiv="Window-Target" content="_value">
<!-- Гео-теги -->
<meta name="ICBM" content="широта, довгота">
<meta name="geo.position" content="широта;довгота">
<meta name="geo.region" content="країна[-область]"><!-- Код країни (ISO 3166-1): обов'язковий, код області (ISO 3166-2): необов'язковий; наприклад, content="UA" / content="UA-KY" -->
<meta name="geo.placename" content="місто"><!-- наприклад, content="Київ" -->
<!-- Монетизація Веб (Web Monetization) https://webmonetization.org/docs/getting-started -->
<meta name="monetization" content="$paymentpointer.example">- 📖 Мета-теги, які розуміє Google
- 📖 WHATWG Wiki: Розширення мета-тегів
- 📖 ICBM у Вікіпедії
- 📖 Геотегування у Вікіпедії
<!-- Посилання на зовнішню таблицю стилів -->
<link rel="stylesheet" href="https://example.com/styles.css">
<!-- Допомагає запобігти проблемам з дубльованим контентом -->
<link rel="canonical" href="https://example.com/article/?page=2">
<!-- Посилання на AMP HTML-версію поточного документа -->
<link rel="amphtml" href="https://example.com/path/to/amp-version.html">
<!-- Посилання на JSON-файл, що вказує облікові дані "інсталяції" для веб-додатків -->
<link rel="manifest" href="manifest.json">
<!-- Посилання на інформацію про автора(ів) документа -->
<link rel="author" href="humans.txt">
<!-- Посилається на заяву про авторські права, що застосовується до контексту посилання -->
<link rel="license" href="copyright.html">
<!-- Надає посилання на місце в документі, яке може бути іншою мовою -->
<link rel="alternate" href="https://es.example.com/" hreflang="es">
<!-- Надає інформацію про автора чи іншу особу -->
<link rel="me" href="https://google.com/profiles/thenextweb" type="text/html">
<link rel="me" href="mailto:name@example.com">
<link rel="me" href="sms:+15035550125">
<!-- Посилання на документ, що описує збірку записів, документів чи інших матеріалів історичного інтересу -->
<link rel="archives" href="https://example.com/archives/">
<!-- Посилання на ресурс верхнього рівня в ієрархічній структурі -->
<link rel="index" href="https://example.com/article/">
<!-- Надає самопосилання - корисно, коли документ має кілька можливих посилань -->
<link rel="self" type="application/atom+xml" href="https://example.com/atom.xml">
<!-- Перший, останній, попередній і наступний документи в серії документів, відповідно -->
<link rel="first" href="https://example.com/article/">
<link rel="last" href="https://example.com/article/?page=42">
<link rel="prev" href="https://example.com/article/?page=1">
<link rel="next" href="https://example.com/article/?page=3">
<!-- Використовується, коли використовується стороння служба для ведення блогу -->
<link rel="EditURI" href="https://example.com/xmlrpc.php?rsd" type="application/rsd+xml" title="RSD">
<!-- Формує автоматичний коментар, коли інший блог WordPress посилається на ваш блог або пост -->
<link rel="pingback" href="https://example.com/xmlrpc.php">
<!-- Сповіщає URL, коли ви посилаєтеся на нього у вашому документі -->
<link rel="webmention" href="https://example.com/webmention">
<!-- Дозволяє публікувати на власному домені за допомогою клієнта Micropub -->
<link rel="micropub" href="https://example.com/micropub">
<!-- Відкритий пошук -->
<link rel="search" href="/open-search.xml" type="application/opensearchdescription+xml" title="Назва пошуку">
<!-- Стрічки -->
<link rel="alternate" href="https://feeds.feedburner.com/example" type="application/rss+xml" title="RSS">
<link rel="alternate" href="https://example.com/feed.atom" type="application/atom+xml" title="Atom 0.3">
<!-- Префетчинг, попереднє завантаження, попереднє перегортання -->
<!-- Більше інформації: https://css-tricks.com/prefetching-preloading-prebrowsing/ -->
<link rel="dns-prefetch" href="//example.com/">
<link rel="preconnect" href="https://www.example.com/">
<link rel="prefetch" href="https://www.example.com/">
<link rel="prerender" href="https://example.com/">
<link rel="preload" href="image.png" as="image"><!-- Для IE 10 та нижче -->
<!-- Розмістіть favicon.ico в кореневому каталозі - додатковий тег не потрібен -->
<!-- Іконка в найвищій роздільній здатності, яка нам потрібна -->
<link rel="icon" sizes="192x192" href="/path/to/icon.png">
<!-- Apple Touch Icon (повторне використання іконки 192px) -->
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">
<!-- Іконка закріпленої вкладки Safari -->
<link rel="mask-icon" href="/path/to/icon.svg" color="blue">- 📖 Все про Favicon (і сенсорні іконки)
- 📖 Створення іконок закріплених вкладок
- 📖 Шпаргалка з Favicon
- 📖 Іконки та кольори браузера
Більшість контенту діляться на Facebook як URL, тому важливо позначити ваш веб-сайт тегами Open Graph, щоб мати контроль над тим, як виглядає ваш контент на Facebook. Детальніше про розмітку Facebook Open Graph
<meta property="fb:app_id" content="123456789">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:type" content="website">
<meta property="og:title" content="Назва Контенту">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:image:alt" content="Опис того, що зображено на зображенні (не підпис)">
<meta property="og:description" content="Опис тут">
<meta property="og:site_name" content="Назва Сайту">
<meta property="og:locale" content="uk_UA">
<meta property="article:author" content="">- 📖 Протокол Open Graph
- 🛠 Перевірте свою сторінку за допомогою Facebook Sharing Debugger
За допомогою Twitter Cards ви можете додавати до твітів багаті фото, відео та медіа-контент, допомагаючи збільшити трафік на ваш веб-сайт. Детальніше про Twitter Cards
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@обліковий_запис_сайту">
<meta name="twitter:creator" content="@індивідуальний_обліковий_запис">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Назва Контенту">
<meta name="twitter:description" content="Опис контенту менше 200 символів">
<meta name="twitter:image" content="https://example.com/image.jpg">
<meta name="twitter:image:alt" content="Текстовий опис зображення, що передає його основну суть для користувачів з вадами зору. Максимум 420 символів.">- 📖 Початок роботи з картками — Twitter Розробникам
- 🛠 Перевірте свою сторінку за допомогою Twitter Card Validator
Якщо ви вбудовуєте твіти на свій веб-сайт, Twitter може використовувати інформацію з вашого сайту для налаштування контенту та пропозицій для користувачів Twitter. Детальніше про параметри конфіденційності Twitter.
<!-- заборонити Twitter використовувати інформацію вашого сайту для персоналізації -->
<meta name="twitter:dnt" content="on"><html lang="" itemscope itemtype="https://schema.org/Article">
<head>
<link rel="author" href="">
<link rel="publisher" href="">
<meta itemprop="name" content="Назва Контенту">
<meta itemprop="description" content="Опис контенту менше 200 символів">
<meta itemprop="image" content="https://example.com/image.jpg">Примітка: Ці мета-теги вимагають додавання атрибутів itemscope та itemtype до тегу <html>.
- 📖 Початок роботи - schema.org
- 🛠 Перевірте свою сторінку за допомогою Rich Results Test
Pinterest дозволяє запобігти збереженню вмісту з вашого веб-сайту, відповідно до їхнього центру допомоги. description є необов'язковим.
<meta name="pinterest" content="nopin" description="Вибачте, ви не можете зберігати вміст з мого веб-сайту!"><meta charset="utf-8">
<meta property="op:markup_version" content="v1.0">
<!-- URL веб-версії вашої статті -->
<link rel="canonical" href="https://example.com/article.html">
<!-- Стиль, який буде використано для цієї статті -->
<meta property="fb:article_style" content="myarticlestyle"><link rel="alternate" type="application/json+oembed"
href="https://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&format=json"
title="Профіль oEmbed: JSON">
<link rel="alternate" type="text/xml+oembed"
href="https://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&format=xml"
title="Профіль oEmbed: XML">Користувачі діляться веб-сторінками в qq wechat з форматованим повідомленням
<meta itemprop="name" content="назва для спільного використання">
<meta itemprop="image" content="http://imgcache.qq.com/qqshow/ac/v4/global/logo.png">
<meta name="description" itemprop="description" content="вміст для спільного використання"><!-- Розумний App Banner -->
<meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">
<!-- Вимкнення автоматичного виявлення та форматування можливих номерів телефонів -->
<meta name="format-detection" content="telephone=no">
<!-- Іконка запуску (180x180px або більше) -->
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">
<!-- Зображення екрану запуску -->
<link rel="apple-touch-startup-image" href="/path/to/launch.png">
<!-- Назва іконки запуску -->
<meta name="apple-mobile-web-app-title" content="Назва Додатку">
<!-- Увімкнення автономного (повноекранного) режиму -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Вигляд панелі статусу (не має ефекту, якщо не увімкнено автономний режим) -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Deep linking для iOS додатків -->
<meta name="apple-itunes-app" content="app-id=APP-ID, app-argument=http/url-sample.com">
<link rel="alternate" href="ios-app://APP-ID/http/url-sample.com"><meta name="theme-color" content="#E64545">
<!-- Додати на головний екран -->
<meta name="mobile-web-app-capable" content="yes">
<!-- Більше інформації: https://developer.chrome.com/multidevice/android/installtohomescreen -->
<!-- Deep linking для Android додатків -->
<meta name="google-play-app" content="app-id=package-name">
<link rel="alternate" href="android-app://package-name/http/url-sample.com"><link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/APP_ID">
<!-- Вимкнення запиту на переклад -->
<meta name="google" content="notranslate"><!-- Примусити IE 8/9/10 використовувати найновішу версію рушія рендерингу -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Вимкнення автоматичного виявлення та форматування можливих номерів телефонів розширенням браузера Skype Toolbar -->
<meta name="skype_toolbar" content="skype_toolbar_parser_compatible">
<!-- Плитки Windows -->
<meta name="msapplication-config" content="/browserconfig.xml">Мінімально необхідна XML розмітка для browserconfig.xml:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="small.png"/>
<square150x150logo src="medium.png"/>
<wide310x150logo src="wide.png"/>
<square310x310logo src="large.png"/>
</tile>
</msapplication>
</browserconfig><!-- Вибір порядку рушіїв рендерингу -->
<meta name="renderer" content="webkit|ie-comp|ie-stand">I'll translate the document to Ukrainian:
<!-- Блокує екран у вказаній орієнтації -->
<meta name="x5-orientation" content="landscape/portrait">
<!-- Показати цей документ у повноекранному режимі -->
<meta name="x5-fullscreen" content="true">
<!-- Документ буде відображатися в "режимі додатку" (повноекранний тощо) -->
<meta name="x5-page-mode" content="app"><!-- Блокує екран у вказаній орієнтації -->
<meta name="screen-orientation" content="landscape/portrait">
<!-- Показати цей документ у повноекранному режимі -->
<meta name="full-screen" content="yes">
<!-- UC браузер буде показувати зображення навіть в "текстовому режимі" -->
<meta name="imagemode" content="force">
<!-- Документ буде відображатися в "режимі додатку" (повноекранний, забороняючи жести тощо) -->
<meta name="browsermode" content="application">
<!-- Вимкнено "нічний режим" UC браузера для цього документа -->
<meta name="nightmode" content="disable">
<!-- Спростити документ для зменшення передачі даних -->
<meta name="layoutmode" content="fitscreen">
<!-- Вимкнути функцію UC браузера "масштабування шрифту, коли в документі багато тексту" -->
<meta name="wap-font-scale" content="no"><!-- iOS -->
<meta property="al:ios:url" content="applinks://docs">
<meta property="al:ios:app_store_id" content="12345">
<meta property="al:ios:app_name" content="App Links">
<!-- Android -->
<meta property="al:android:url" content="applinks://docs">
<meta property="al:android:app_name" content="App Links">
<meta property="al:android:package" content="org.applinks">
<!-- Резервний веб-варіант -->
<meta property="al:web:url" content="https://applinks.org/documentation">- Atom HTML Head Snippets - Пакет Atom для фрагментів
HEAD - Sublime Text HTML Head Snippets - Пакет Sublime Text для фрагментів
HEAD - head-it - CLI-інтерфейс для фрагментів
HEAD - vue-head - Маніпуляція метаінформацією тегу
HEADдля Vue.js
- 🇮🇩 Індонезійська
- 🇧🇷 Бразильська portuguese
- 🇨🇳 Китайська (спрощена)
- 🇩🇪 Німецька
- 🇮🇹 Італійська
- 🇯🇵 Японська
- 🇰🇷 Корейська
- 🇷🇺 Російська
- 🇪🇸 Іспанська
- 🇹🇷 Турецька
- 🇺🇦 Українська
Відкрийте issue або pull request для пропозиції змін або доповнень.
Репозиторій HEAD складається з двох гілок:
Ця гілка складається з файлу README.md, який відображається на веб-сайті htmlhead.dev. Усі зміни до вмісту посібника мають бути зроблені в цьому файлі.
Дотримуйтесь цих кроків для pull requests:
{:.list-style-default}
- Змінюйте лише один тег або один пов'язаний набір тегів за раз
- Використовуйте подвійні лапки для атрибутів
- Не включайте кінцевий слеш у самозакриваючих елементах — специфікація HTML5 каже, що вони необов'язкові
- Розгляньте можливість включення посилання на документацію, яка підтримує вашу зміну
Ця гілка відповідає за веб-сайт htmlhead.dev. Ми використовуємо Jekyll для розгортання файлу README.md markdown на GitHub Pages. Усі модифікації, пов'язані з веб-сайтом, мають бути зроблені в цій гілці.
Вам може бути корисно переглянути Документацію Jekyll та зрозуміти, як працює Jekyll, перш ніж працювати в цій гілці.
Перевірте всіх неймовірних учасників 🤩
Джош Бучеа
- GitHub: @joshbuchea
- Mastodon: @joshbuchea@hachyderm.io
Serhii Shramko
- GitHub: @Shramkoweb
Якщо цей проект був корисним для вас або вашої організації, будь ласка, розгляньте можливість підтримки моєї роботи безпосередньо:
- 💛 Спонсоруйте мене на GitHub
- ⭐️ Поставте зірочку цьому проекту на GitHub
- 🐙 Підписатися на мене на GitHub
- 🐘 Підписатися на мене в Mastodon
Дякую! 🙏
