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. 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
| 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='[email protected]'> <ссылка rel='apple-touch-icon' href='[email protected]'>
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-адрес.