HTML/Элемент meta
Синтаксис
HTML
XHTML
<head> ... <meta content="..."> ... </head>
Описание
Элемент meta
определяет метаданные (технические данные) HTML-документа. К подобным данным относят краткое описание страницы, ключевые слова, данные об авторе документа, о последнем изменении документа и прочее. Данный элемент создан для предоставления информации о документе поисковым машинам и браузерам.
Метаданные документа выражаются в виде пар «имя-значение» («свойство-значение»), где «name
» («http-equiv
») атрибут указывает имя (свойство), а «content
» атрибут этого же элемента указывает значение.
Поддержка браузерами
Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.
Спецификация
Верс. | Раздел | |
---|---|---|
HTML | ||
2.0 | Associated Meta-information: META | Перевод |
3.2 | META | |
4.01 | The META element DTD: Transitional
Strict
Frameset | |
5.0 | 4.2.5 The meta element | |
5.1 | 4.2.5. The meta element | |
XHTML | ||
1.0 | Extensible HyperText Markup Language DTD: Transitional
Strict
Frameset | |
1.![]() | Extensible HyperText Markup Language |
Атрибуты
- charset
- Указывает кодировку HTML-документа.
- content
- Указывает значение метаданных.
- http-equiv
- Указывает прагма директиву. (Конвертирует метаданные в HTTP заголовок.)
- name
- Указывает название метаданных.
- scheme
- Указывает схему интерпретации значения атрибута «
content
». - Глобальные атрибуты
- accesskey, class, contenteditable, contextmenu, data-*, dir, draggable, dropzone, hidden, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang
Пример использования
Листинг кода
<!DOCTYPE html>
<html>
<head>
<!— указываем кодировку документа —>
<meta charset=»utf-8″>
<!— ~~~ —>
<title>Элемент meta</title>
</head>
<body>
<h2>Пример использования элемента «meta»</h2>
<p>Данный документ имеет кодировку «utf-8». </p>
</body>
</html>
Элемент meta
HTML тег
onplay | Скрипт викликається коли медіа дані готові почати відтворення. |
onafterprint | Скрипт виконується тільки після як документ надрукований. |
onbeforeprint | Скрипт виконується перед тим, як документ надрукований. |
onbeforeunload | Скрипт виконується коли документ ось-ось буде вивантажений |
onhashchange | Скрипт виконується коли там відбулися зміни до частини якоря в URL |
onload | Викликається після того як завантаження елемента завершене. |
onmessage | Скрипт виконується коли викликане повідомлення. |
onoffline | Спрацьовує коли браузер починає працювати в автономному режимі |
ononline | Спрацьовує коли браузер починає працювати в режимі онлай.![]() |
onpagehide | Скрипт виконується коли користувач переходить на іншу сторінку сторінку. |
onpageshow | Скрипт виконується коли користувач заходить на сторінку. |
onpopstate | Скрипт виконується коли змінено історію одного вікна. |
onresize | Скрипт виконується, коли розмір вікна браузера змінюється. |
onstorage | Скрипт виконується, коли вміст Web Storage оновлюється. |
onunload | Викликається, коли сторінка розвантажена, або вікно браузера було зачинено. |
onblur | Скрипт виконується, коли елемент втрачає фокус. |
onchange | Викликається в той момент, коли значення елемента змінюється.![]() |
oncontextmenu | Скрипт виконується коли викликається контекстне меню. |
onfocus | Викликається в той момент, коли елемент отримує фокус. |
oninput | Скрипт викликається коли користувач вводить дані поле. |
oninvalid | Скрипт виконується, коли елемент недійсний. |
onreset | Викликається, коли натискається у формі кнопка типу Reset. |
onsearch | Викликається, коли користувач щось пише в поле пошуку (для <input type="search">) |
onselect | Викликаєтсья після того як будь-який текст був обраний в елементі. |
onsubmit | Викликається при відправленні форми.![]() |
onkeydown | Подія викликається, коли користувач затис (натиснув та не відпускає) клавішу. |
onkeypress | Викликається коли корисрувач натиснув на клавішу. |
onkeyup | Викликається коли користувач відпускає клавішу. |
ondblclick | Виникає при подвійному клацанні ЛКМ на елементі. |
ondrag | Періодично викликається при операції перетягування. |
ondragend | Викликається коли користувач відпускає перелягуваний елемент. |
ondragenter | Викликається, коли перетягуваний елемент входить в цільову зону. |
ondragleave | Викликається, коли перетягуваний елемент виходть з зони призначення.![]() |
ondragover | Викликається, коли перетягуваний елемент знаходиться в зоні призначення. |
ondragstart | Викликається, коли користувач починає перетягувати елемент, або виділений текст. |
ondrop | Викликається, коли перетягуваний елемент падає до зони призначення. |
onmousedown | Викликається, коли користувач затискає ЛКМ на елементі. |
onmousemove | |
onmouseout | Викликається, коли курсор виходить за межі елемента. |
onmouseover | Виконується, коли курсор наводиться на елемент. |
onmouseup | Викликається, коли користувач відпускає кнопку миші.![]() |
onscroll | Викликається при прокручуванні вмісту елемента (чи веб-сторінки). |
onwheel | Викликається, коли користувач прокручує коліщатко миші. |
oncopy | Викликається, коли користувач копіює вміст елемента. |
oncut | Викликається, коли користувач вирізає вміст елемента. |
onpaste | Викликається, коли користувач вставляє вміст в елемент. |
onabort | Виконується при перериванні якоїсь події. |
oncanplay | Скрипт виконується коли файл готовий, для початку відтворення (коли він буферизований достатньо, щоб почати відтворення) |
oncanplaythrough | Скрипт виконується, коли контент вже може бути відтворений без переривання на буферизацію.![]() |
oncuechange | Скрипт виконується коли змінюється кий в <track> елемента |
ondurationchange | Викликається коли змінюється довжина медіа файлу. |
onemptied | Викликається коли доступ до медіа контенту обривається (зникло з’єднання з мережею). |
onended | Викликається коли медіа елемент повністю відтворив свій зміст. |
onshow | Викликається, коли елемент <menu> буде відображено як контекстне меню. |
onloadedmetadata | Скрипт виконується коли метадані (розміри чи тривалість) завантажуються. |
onloadeddata | Викликається коли медіа данні завантажено. |
onloadstart | Викликається коли браузер тільки починає завантажувати медіа дані з сервера.![]() |
onpause | Викликається коли відтворення медіа даних призупинено. |
onplaying | Викликається коли розпочато відтворення медіа даних. |
onprogress | Подія onprogress відбувається, коли браузер завантажує вказане аудіо / відео. |
onratechange | Викликається коли змінюється швидкість відтворення медіа даних. |
onseeked | Викликається коли атрибут seeked у тега audio або video змінює значення з true на false. |
onseeking | Викликається коли атрибут seeking у тегів audio або video змінює значення з false на true |
onstalled | Скрипт виконується коли браузер з будь-якої причини не може отримати медіа дані. |
onsuspend | Скрипт виконується коли з будь-якої причини завантаження данних призупинено до його повного завантаження.![]() |
ontimeupdate | Викликається коли змінилася позиція відтворення елемента <audio> або <video>. |
onvolumechange | Викликається коли змінюється гучність звуку. |
onwaiting | Викликається коли наступний кадр при відтворенні медіа даних недоступний, але браузер очікує що він незабаром завантажиться. |
ontoggle | Викликається, коли користувач відкриває або закриває елемент <details>. |
onerror | Викликається якщо при завантаженні елемента сталася помилка. |
onclick | Подія викликається коли користувач клацає ЛКМ по елементу. |
Шпаргалка по метатегам HTML
Метатеги
<метакодировка='utf-8'>
···
<ссылка rel='canonical' href='http://···'>
Подробнее opengraph
<мета-свойство='og:site_name' content='···'>
<мета-свойство='fb:app_id' content='···'>
mp3'>
См.: протокол OpenGraph (developers.facebook.com)
Opengraph для статей
-
статья:опубликовано_время
-
статья:modified_time
-
статья:expiration_time
-
статья:автор
-
артикул:секция
-
артикул:бирка
Только для Apple
Прогрессивные веб-приложения
Добавить на главный экран
Цвет темы
только для Android. См. Цвет темы
Манифест
только для Android. См.: Манифест
.Иконки
<ссылка rel='icon' href='icon@192.png'> <ссылка rel='apple-touch-icon' href='icon@152.png'>
Chrome на Android рекомендует 192 x 192. См.: Иконки
.
Артикул
- https://dev.twitter.com/cards
- https://developers.facebook.com/docs/opengraphprotocol/#types
Мета-элементы HTML (с примерами)
В этом уроке мы узнаем о мета-элементах в HTML с помощью примеров.
Тег HTML
используется для представления метаданных о документе HTML.
Метаданные относятся к информации о данных (данные о HTML-документе). Метаданные состоят из такой информации, как charset
атрибут, name
атрибут, http-equiv
атрибут и т. д.
Тег
всегда должен находиться внутри элемента
. Например,
<заголовок> <метакодировка="utf-8" />
Здесь
указывает браузеру использовать кодировку символов UTF-8 для преобразования машинного кода в удобочитаемый код.
Атрибуты метаданных
Метатег может иметь следующие атрибуты:
-
кодировка
атрибут -
имя
атрибут -
http-экв.
атрибут
Мы подробно узнаем о каждом атрибуте.
атрибут charset
Атрибут charset
определяет кодировку символов для документа HTML. Например,
Помогает правильно отображать HTML-страницу в браузере. UTF-8 — единственная допустимая кодировка для документов HTML5.
атрибут name
Атрибут name
вместе с атрибутом content
предоставляет информацию в терминах пар имя-значение . Где:
-
имя
— имя метаданных -
контент
— значение метаданных
Давайте рассмотрим пример:
Здесь мы использовали атрибут name
для предоставления информации о описании HTML-документа. Текст внутри атрибута content
является значением description .
Некоторые общие значения атрибута имени включают автора , ключевых слов , реферера и т. д. Например,
Здесь мы использовали метатеги для предоставления информации о ключевых словах и авторе HTML-документа.
Атрибут http-equiv
Атрибут http-equiv
используется для предоставления заголовка HTTP для информации атрибута содержимого. Список возможных значений атрибута:
- политика безопасности содержимого : определяет политику содержимого для документа. Он используется для указания разрешенных URL-адресов серверов. Например,
Здесь приведенный выше тег указывает, что внешние ресурсы разрешены только с self , то есть с того же хоста, что и веб-страница.
- тип содержимого: Указывает кодировку символов для документа. Это то же самое, что использовать атрибут charset . Он используется для установки кодировки символов для документа HTML. Например,
- default-style: Указывает предпочтительную таблицу стилей для использования. Например,
Здесь, в случае нескольких таблиц стилей, таблица стилей с идентификатором stylesheet-1 будет иметь приоритет.
- обновление: Определяет временной интервал для обновления документа. Например,
При желании вы можете перенаправить пользователя на отдельный URL-адрес, добавив ;url= , за которым следует URL-адрес.