Атрибут itemref в HTML


Содержание

Общий HTML атрибут >

Атрибут id определяет уникальный идентификатор HTML элемента (его значение должно быть уникально для всего HTML документа).

Чаще всего атрибут id используется в качестве селектора для определения стиля элемента в каскадной таблице стилей (CSS), а также в скриптах JavaScript для манипулирования элементом с определенным идентификатором.

В HTML5 атрибут id можно использовать с любым HTML элементом (все элементы с этим атрибутом будут проходить валидацию. Тем не менее, это не всегда имеет смысл!).

В HTML 4.01 атрибут id нельзя использовать с элементами , , , ,

W3cubDocs

The global attribute itemref Properties that are not descendants of an element with the itemscope attribute can be associated with the item using an itemref . itemref provides a list of element id’s (not itemid s) with additional properties elsewhere in the document.

The itemref attribute can only be specified on elements that have an itemscope attribute specified.

Note: the itemref attribute is not part of the microdata data model. It is merely a syntactic construct to aid authors in adding annotations to pages where the data to be annotated does not follow a convenient tree structure. For example, it allows authors to mark up data in a table so that each column defines a separate item while keeping the properties in the cells.

HTML Attributes

Атрибуты предоставляют дополнительную информацию о HTML-элементах.

Атрибуты HTML

  • Все элементы HTML могут иметь атрибуты
  • Атрибуты предоставляют Дополнительные сведения об элементе
  • Атрибуты всегда указываются в начальном теге
  • Атрибуты обычно поставляются в парах «имя/значение», например: name=»value»

Атрибут href

Пример

Вы узнаете больше о ссылках и тег далее в этом учебнике.

Атрибут src

HTML-образы определяются тегом .

Имя файла источника изображения указывается в атрибуте src :

Example

Атрибуты ширины и высоты

Изображения в HTML имеют набор атрибутов size, который определяет ширину и высоту изображения:

Пример

Размер изображения указан в пикселях: w , означает 500 пикселей в ширину.

Вы узнаете больше об изображениях в наших HTML-изображениях Глава.

The alt Attribute

Атрибут alt указывает альтернативный текст, который будет использоваться, когда изображение не может быть отображено.

Значение атрибута может быть прочитано программами чтения с экрана. Таким образом, кто-то «прослушивание» на веб-странице, например, слепой человек, может «слышать» элемент.

Пример

Атрибут alt также полезен, если изображение не существует:

Пример

Посмотрите, что произойдет, если мы попытаемся отобразить изображение, которое не существует:

Атрибут style

Атрибут style используется для указания стиля элемента, например цвета, шрифта, размера и т. д.

Пример

I am a paragraph

Вы узнаете больше о стилизации позже в этом учебнике, и в нашем Учебник по CSS.

Атрибут lang

Язык документа может быть объявлен в теге .

Язык объявляется с атрибутом lang .

Объявление языка важно для приложений специальных возможностей (программы чтения с экрана) и поисковых систем:

Как использовать data-атрибуты HTML5

Давным-давно, во времена XHTML/HTML4 у разработчиков было всего несколько возможностей, которыми они могли пользоваться для того, чтобы хранить произвольные данные, относящиеся к DOM. Вы могли изобретать свои собственные атрибуты, но это было рискованно — ваш код не был бы валидным, браузеры могли игнорировать ваши данные, и это могло вызвать проблемы, если название совпадало со стандартными атрибутами HTML.

Поэтому большинство разработчиков завязывались на атрибуты class или rel так как они были единственным разумным способом хранить дополнительные строки. К примеру, предположим, что мы создаем виджет для отображения сообщений типа временной линии сообщений в Twitter. В идеале JavaScript должен иметь возможность конфигурирования без необходимости переписывать код, так что мы определяем идентификатор пользователя в атрибуте class, например:

Наш JavaScript код будет искать элемент с ID msglist. С помощью скрипта мы будем искать классы, начинающиеся с user_, а “bob” в нашем случае будет идентификатором пользователя, и мы отобразим все сообщения этого пользователя.

Скажем, мы бы хотели также задать максимальное количество сообщений, и пропускать сообщения старше шести месяцев (180 дней):

Наш атрибут class очень быстро загромождается — проще допустить ошибку, а разбор строк на JavaScript становится все сложнее.

Data-атрибуты HTML5

К счастью, в HTML5 была введена возможность использовать пользовательские атрибуты. Вы можете использовать любое имя в нижнем регистре с префиксом data-, например:

  • это строки — в них вы можете хранить любую информацию, которая может быть представлена или закодирована в виде строки, например JSON. Приведение типов должно осуществляться с помощью JavaScript
  • должны использоваться в тех случаях, когда нет подходящих элементов HTML5 или атрибутов
  • относятся только к странице. В отличие от микроформатов они должны игнорироваться внешними системами, типа поисковых систем и поисковых роботов

Пример №1 обработки на JavaScript: getAttribute и setAttribute

Все браузеры позволяют вам получить и изменить data-атрибуты с использованием методов getAttribute и setAttribute:

Это работает, но должно использоваться только для поддержания совместимости со старыми браузерами.

Пример №2 обработки на JavaScript: метод data() библиотеки jQuery

Начиная с версии jQuery 1.4.3 метод data() обрабатывает data-атрибуты HTML5. Вам нет необходимости явно указывать префикс data-, так что подобный код будет работать:

Но как бы то ни было, имейте в виду, что jQuery пытается конвертировать значения таких атрибутов в подхдящие типы (булевы значения, числа, объекты, массивы или null) и затронет DOM. В отличие от setAttribute, метод data() физически не заменит атрибут data-list-size — если вы проверите его значение вне jQuery — оно все еще останется равным 5.

Пример №3 обработки на JavaScript: API для работы с наборами данных

И, наконец, у нас есть API для работы с наборами данных HTML5, которое возвращает объект DOMStringMap. Необходимо помнить, что data-атрибуты отображаются в объект без префиксов data-, из названий убираются знаки дефиса, а сами названия конвертируются в camelCase, например:

Имя атрибута Имя в API набора данных
data-user user
data-maxage maxage
data-list-size listSize

Данный API поддерживается всеми современными браузерами, но не IE10 и ниже. Для таких браузеров существует обходной путь, но, наверное, куда практичнее использовать jQuery, если вы пишете для старых браузеров.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.sitepoint.com/use-html5-data-attributes/
Перевел: Станислав Протасевич
Урок создан: 14 Марта 2014
Просмотров: 59674
Правила перепечатки

5 последних уроков рубрики «HTML5»

Расширяем возможности HTML за счёт создания собственных тегов

В этом уроке я покажу процесс создания собственных HTML тегов. Пользовательские теги решают множество задач: HTML документы становятся проще, а строк кода становится меньше.

Определение доступности атрибута HTML5 с помощью JavaScript

Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.

HTML5: API работы с вибрацией

HTML5 — глоток свежего воздуха в современном вебе. Она повлиял не только на классический веб, каким мы знаем его сейчас. HTML5 предоставляет разработчикам ряд API для создания и улучшения сайтов с ориентацией на мобильные устройства. В этой статье мы рассмотрим API для работы с вибрацией.

Создание форм с помощью Webix Framework — 4 практических примера

Веб дизайнеры частенько сталкиваются с необходимостью создания форм. Данная задача не простая, и может вызвать головную боль (особенно если вы делаете что-то не стандартное, к примеру, много-страничную форму). Для упрощения жизни можно воспользоваться фрэймворком. В этой статье я покажу вам несколько практических приёмов для создания форм с помощью фрэймворка Webix.

Знакомство с фрэймворком Webix

В этой статье мы бы хотели познакомить вас с фрэймворком Webix. Для демонстрации возможностей данного инструмента мы создадим интерфейс online аудио плеера. Не обольщайтесь — это всего лишь модель интерфейса. Исходный код доступен в демо и на странице GitHub.

Как использовать в html 5 data-атрибуты и другие новые атрибуты

Дата публикации: 2020-03-16

От автора: приветствую вас, дорогие читатели блога webformyself. В этой статье мы продолжим говорить о технологии html5. В этот раз я хотел бы затронуть другие нововведения этой спецификации. Таковыми являются в html5 data-атрибуты, которые можно прописывать любым тегам.

Что такое data-атрибуты и для чего они нужны?

Итак, начнем с того, что же это такое вообще. Как вы возможно знаете, в html любому тегу можно указать какой-то атрибут, будь то универсальный (class, id) или уникальный для этого элемента.

Так вот, новая спецификация HTML5 добавила несколько новых атрибутов. В основном они пишутся для таких же новых тегов, но также появилась еще одна, абсолютно новая категория – data-атрибуты.

Их первая особенность в том, что атрибут может называться как угодно. Единственное правило – он должен начинаться с префикса data- и в нем, естественно, не должно быть русских букв. Одному тегу можно записать сколько угодно таких параметров. В качестве значений также можно указывать произвольные слова. Кстати, значение можно указывать и на русском. Пример:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Как видите, можно указывать любые имена и любые значения. Но ведь эти параметры ничего не делают с элементом, зачем тогда они вообще нужны? Есть как минимум несколько способов применения data-атрибутов в сайтостроении, и давайте рассмотрим их.

Способ применения 1 – обращение к элементам в css

Если вы знаете, что такое селекторы атрибутов, то наверняка уже догадываетесь, как могут быть использованы новые возможности. Указывая для тега уникальный data-атрибут, вы сможете соответствующим образом обратиться к нему в стилях. Давайте рассмотрим пример:

Это позволило нам обратиться к элементу без использования стилевых классов. Однако, если так подумать, то никакого особого преимущества это не дает, для обращения по классу нужно проделать примерно такие же действия. Таким образом, у вас просто расширяются возможности по селекторам и ничего более.

Способ применения 2 – хранение значений и их использование

С первого взгляда, значения data-атрибутов ничего не меняют и вообще никак не влияют на веб-страницу. Так зачем они вообще нужны? На самом деле применение им найти можно, если вспомнить про функцию attr() в css.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Давайте поставим задачу: нужно вывести на страницу поясняющий текст к фотографиям, который появлялся бы либо сразу с загрузкой картинки, либо при наведении на нее, не важно как. Стандартная подсказка реализуется с помощью атрибута title.

Но такая подсказка может не удовлетворять вас по очень многим параметрам. Во-первых, она появляется плавно (что не всегда нужно). Во-вторых, она исчезает через какое-то время. В-третьих, она появляется в разных местах, в зависимости от того, куда наведен курсор. Ну а самая большая проблема – мы никак не можем стилизовать нашу подсказку – это всегда будет черный текст на белом фоне, что не очень интересно.

Итак, выше в коде мы вставили картинку, указали путь к ней и дополнительно записали произвольный data-параметр. Реализовать вывод пояснения к фото теперь можно таким образом:

Что мы сделали? Теперь у всех изображений будет псевдоэлемент, в котором будет находиться значение атрибута data-img, если оно есть у тега img. Таким нехитрым способом вы смогли вывести поясняющий текст к фотографии.

Я не буду в этой статье приводить инструкцию, как оформить подсказку. Скажу только, что по умолчанию она будет отображаться после загрузки страницы. Зачастую ее нужно изначально скрыть, а выводить при наведении на картинку. Чтобы это реализовать, вам нужно воспользоваться селектором img:hover:after.

Ну а какие есть еще html5 атрибуты, появившиеся только в этой спецификации? К таковым можно отнести, например, controls – атрибут для новых элементов audio и video, который позволяет вывести элементы управления видеороликом или аудиозаписью.

У видео с помощью параметра poster можно указать путь к изображению, которое будет фоном до начала просмотра видео. В общем, вот таких вот мелких атрибутов появилось не так уж и мало.

Также у одиночного элемента input появилось очень много новых параметров. Теперь можно создавать поля для ввода электронной почты, телефона, выбора календарной даты или времени, поле для выбора цвета и т.д. Пустой атрибут required делает любое поле обязательным для заполнения, если этого не сделать, то браузер просто не пропустит отправку формы.

Конечно, единственный минус всех этих нововведений в том, что они не везде должным образом поддерживаются. Так что если в одном браузере новые возможности прекрасно работают и пользователи могут использовать новые поля, то в другом веб-обозревателе все может быть по-другому. Конечно, отчасти виноваты сами пользователи, которые не обновляют ПО, но нужно также следить за тем, что и как поддерживается. В премиум-курсе по HTML5 вы как раз сможете узнать о хороших сервисах, которые определяют поддержку тех или иных свойств.

Упрощенный синтаксис

Не могу не упомянуть о том, как правильно записывать атрибуты и их значения. Дело в том, что HTML 5 в этом плане стал гораздо более простым. Достаточно указать , и можно писать код даже с небольшими ошибками, а в результате он все равно будет обработан правильно. Примеры:

Атрибут itemref в HTML

This section is non-normative.

Sometimes, it is desirable to annotate content with specific machine-readable labels, e.g. to allow generic scripts to provide services that are customized to the page, or to enable content from a variety of cooperating authors to be processed by a single script in a consistent manner.

For this purpose, authors can use the microdata features described in this section. Microdata allows nested groups of name-value pairs to be added to documents, in parallel with the existing content.

5.1.2 The basic syntax

This section is non-normative.

At a high level, microdata consists of a group of name-value pairs. The groups are called items, and each name-value pair is a property. Items and properties are represented by regular elements.

To create an item, the itemscope attribute is used.

To add a property to an item, the itemprop attribute is used on one of the item’s descendants.

Here there are two items, each of which has the property «name»:

Markup without the microdata-related attributes does not have any effect on the microdata model.

These two examples are exactly equivalent, at a microdata level, as the previous two examples respectively:

Properties generally have values that are strings.

Here the item has three properties:

When a string value is a URL, it is expressed using the a element and its href attribute, the img element and its src attribute, or other elements that link to or embed external resources.

In this example, the item has one property, «image», whose value is a URL:

When a string value is in some machine-readable format unsuitable for human consumption, it is expressed using the value attribute of the data element, with the human-readable version given in the element’s contents.

Here, there is an item with a property whose value is a product ID. The ID is not human-friendly, so the product’s name is used the human-visible text instead of the ID.

For numeric data, the meter element and its value attribute can be used instead.

Here a rating is given using a meter element.

Similarly, for date- and time-related data, the time element and its datetime attribute can be used instead.

In this example, the item has one property, «birthday», whose value is a date:

Properties can also themselves be groups of name-value pairs, by putting the itemscope attribute on the element that declares the property.

Items that are not part of others are called top-level microdata items.

In this example, the outer item represents a person, and the inner one represents a band:

The outer item here has two properties, «name» and «band». The «name» is «Amanda», and the «band» is an item in its own right, with two properties, «name» and «size». The «name» of the band is «Jazz Band», and the «size» is «12».

The outer item in this example is a top-level microdata item.

Properties that are not descendants of the element with the itemscope attribute can be associated with the item using the itemref attribute. This attribute takes a list of >itemscope attribute.

This example is the same as the previous one, but all the properties are separated from their items:

This gives the same result as the previous example. The first item has two properties, «name», set to «Amanda», and «band», set to another item. That second item has two further properties, «name», set to «Jazz Band», and «size», set to «12».

An item can have multiple properties with the same name and different values.

This example describes an ice cream, with two flavors:

This thus results in an item with two properties, both «flavor», having the values «Lemon sorbet» and «Apricot sorbet».

An element introducing a property can also introduce multiple properties at once, to avoid duplication when some of the properties have the same value.

Here we see an item with two properties, «favorite-color» and «favorite-fruit», both set to the value «orange»:

It’s important to note that there is no relationship between the microdata and the content of the document where the microdata is marked up.

There is no semantic difference, for instance, between the following two examples:

Both have a figure with a caption, and both, completely unrelated to the figure, have an item with a name-value pair with the name «name» and the value «The Castle». The only difference is that if the user drags the caption out of the document, in the former case, the item will be included in the drag-and-drop data. In neither case is the image in any way associated with the item.

5.1.3 Typed items

This section is non-normative.

The examples in the previous section show how information could be marked up on a page that doesn’t expect its microdata to be re-used. Microdata is most useful, though, when it is used in contexts where other authors and readers are able to cooperate to make new uses of the markup.

For this purpose, it is necessary to give each item a type, such as «https://example.com/person», or «https://example.org/cat», or «https://band.example.net/». Types are identified as URLs.

The type for an item is given as the value of an itemtype attribute on the same element as the itemscope attribute.

Here, the item’s type is «https://example.org/animals#cat»:

In this example the «https://example.org/animals#cat» item has three properties, a «name» («Hedral»), a «desc» («Hedral is. «), and an «img» («hedral.jpeg»).

The type gives the context for the properties, thus selecting a vocabulary: a property named «class» given for an item with the type «https://census.example/person» might refer to the economic class of an individual, while a property named «class» given for an item with the type «https://example.com/school/teacher» might refer to the classroom a teacher has been assigned. Several types can share a vocabulary. For example, the types » https://example.org/people/teacher » and » https://example.org/people/engineer » could be defined to use the same vocabulary (though maybe some properties would not be especially useful in both cases, e.g. maybe the » https://example.org/people/engineer » type might not typically be used with the » classroom » property). Multiple types defined to use the same vocabulary can be given for a single item by listing the URLs as a space-separated list in the attribute’ value. An item cannot be given two types if they do not use the same vocabulary, however.

5.1.4 Global identifiers for items

This section is non-normative.

Sometimes, an item gives information about a topic that has a global identifier. For example, books can be identified by their ISBN number.

Vocabularies (as >itemtype attribute) can be designed such that items get associated with their global >itemid attribute.

The exact meaning of the URLs given in itemid attributes depends on the vocabulary used.

Here, an item is talking about a particular book:

The » https://vocab.example.net/book » vocabulary in this example would define that the itemid attribute takes a urn: URL pointing to the ISBN of the book.

5.1.5 Selecting names when defining vocabularies

This section is non-normative.

Using microdata means using a vocabulary. For some purposes, an ad-hoc vocabulary is adequate. For others, a vocabulary will need to be designed. Where possible, authors are encouraged to re-use existing vocabularies, as this makes content re-use easier.

When designing new vocabularies, identifiers can be created either using URLs, or, for properties, as plain words (with no dots or colons). For URLs, conflicts with other vocabularies can be avoided by only using identifiers that correspond to pages that the author has control over.

For instance, if Jon and Adam both write content at example.com , at https://example.com/

jon/. and https://example.com/

adam/. respectively, then they could select identifiers of the form «https://example.com/

jon/name» and «https://example.com/

Properties whose names are just plain words can only be used within the context of the types for which they are intended; properties named using URLs can be reused in items of any type. If an item has no type, and is not part of another item, then if its properties have names that are just plain words, they are not intended to be globally unique, and are instead only intended for limited use. Generally speaking, authors are encouraged to use either properties with globally unique names (URLs) or ensure that their items are typed.

Here, an item is an «https://example.org/animals#cat», and most of the properties have names that are words defined in the context of that type. There are also a few additional properties whose names come from other vocabularies.

This example has one item with the type «https://example.org/animals#cat» and the following properties:

Property Value
name Hedral
https://example.com/fn Hedral
desc Hedral is a male american domestic shorthair, with a fluffy black fur with white paws and belly.
https://example.com/color black
https://example.com/color white
img . /hedral.jpeg

5.2 Encoding microdata

5.2.1 The microdata model

The microdata model consists of groups of name-value pairs known as items.

Each group is known as an item. Each item can have item types, a global identifier (if the vocabulary specified by the item types support global identifiers for items), and a list of name-value pairs. Each name in the name-value pair is known as a property, and each property has one or more values. Each value is either a string or itself a group of name-value pairs (an item). The names are unordered relative to each other, but if a particular name has multiple values, they do have a relative order.

5.2.2 Items

Chrome Yes Chrome Android Yes Edge Yes Edge Mobile ? Firefox Yes Firefox Android Yes Internet Explorer Yes Opera Yes Opera Android Yes Safari Yes Safari iOS Yes Samsung Internet Yes WebView Android Yes

Every HTML element may have an attribute specified. The itemscope attribute is a boolean attribute.

An element with the itemscope attribute specified creates a new , a group of name-value pairs.

Chrome Yes Chrome Android Yes Edge Yes Edge Mobile ? Firefox Yes Firefox Android Yes Internet Explorer Yes Opera Yes Opera Android Yes Safari Yes Safari iOS Yes Samsung Internet Yes WebView Android Yes

Elements with an itemscope attribute may have an attribute specified, to give the item types of the item.

The itemtype attribute, if specified, must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, each of which is a valid URL string that is an absolute URL, and all of which are defined to use the same vocabulary. The attribute’s value must have at least one token.

The of an item are the tokens obtained by splitting the element’s itemtype attribute’s value on ASCII whitespace. If the itemtype attribute is missing or parsing it in this way finds no tokens, the item is said to have no item types.

The item types must all be types defined in applicable specifications and must all be defined to use the same vocabulary.

Except if otherwise specified by that specification, the URLs given as the item types should not be automatically dereferenced.

A specification could define that its item type can be dereferenced to provide the user with help information, for example. In fact, vocabulary authors are encouraged to provide useful information at the given URL.

Item types are opaque identifiers, and user agents must not dereference unknown item types, or otherwise deconstruct them, in order to determine how to process items that use them.

The itemtype attribute must not be specified on elements that do not have an itemscope attribute specified.

An item is said to be a when either it has an item type, or it is the value of a property of a typed item. The for a typed item is the item’s item types, if it has any, or else is the relevant types of the item for which it is a property’s value.

Chrome Yes Chrome Android Yes Edge Yes Edge Mobile ? Firefox Yes Firefox Android Yes Internet Explorer Yes Opera Yes Opera Android Yes Safari Yes Safari iOS Yes Samsung Internet Yes WebView Android Yes

Elements with an itemscope attribute and an itemtype attribute that references a vocabulary that is defined to may also have an attribute specified, to give a global identifier for the item, so that it can be related to other items on pages elsewhere on the Web.

The itemid attribute, if specified, must have a value that is a valid URL potentially surrounded by spaces.

The of an item is the value of its element’s itemid attribute, if it has one, parsed relative to the node document of the element on which the attribute is specified. If the itemid attribute is missing or if resolving it fails, it is said to have no global identifier.

The itemid attribute must not be specified on elements that do not have both an itemscope attribute and an itemtype attribute specified, and must not be specified on elements with an itemscope attribute whose itemtype attribute specifies a vocabulary that does not support global identifiers for items, as defined by that vocabulary’s specification.

The exact meaning of a global identifier is determined by the vocabulary’s specification. It is up to such specifications to define whether multiple items with the same global identifier (whether on the same page or on different pages) are allowed to exist, and what the processing rules for that vocabulary are with respect to handling the case of multiple items with the same ID.

Chrome Yes Chrome Android Yes Edge Yes Edge Mobile ? Firefox Yes Firefox Android Yes Internet Explorer Yes Opera Yes Opera Android Yes Safari Yes Safari iOS Yes Samsung Internet Yes WebView Android Yes

Elements with an itemscope attribute may have an attribute specified, to give a list of additional elements to crawl to find the name-value pairs of the item.

The itemref attribute, if specified, must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, consisting of IDs of elements in the same tree.

The itemref attribute must not be specified on elements that do not have an itemscope attribute specified.

The itemref attribute is not part of the microdata data model. It is merely a syntactic construct to aid authors in adding annotations to pages where the data to be annotated does not follow a convenient tree structure. For example, it allows authors to mark up data in a table so that each column defines a separate item, while keeping the properties in the cells.

This example shows a simple vocabulary used to describe the products of a model railway manufacturer. The vocabulary has just five property names:

product-code An integer that names the product in the manufacturer’s catalog. name A brief description of the product. scale One of «HO», «1», or «Z» (potentially with leading or trailing whitespace), indicating the scale of the product. digital If present, one of «Digital», «Delta», or «Systems» (potentially with leading or trailing whitespace) indicating that the product has a digital decoder of the given type. track-type For track-specific products, one of «K», «M», «C» (potentially with leading or trailing whitespace) indicating the type of track for which the product is intended.

This vocabulary has four defined item types:

https://md.example.com/loco Rolling stock with an engine https://md.example.com/passengers Passenger rolling stock https://md.example.com/track Track pieces https://md.example.com/lighting Equipment with lighting

Each item that uses this vocabulary can be given one or more of these types, depending on what the product is.

Thus, a locomotive might be marked up as:

A turnout lantern retrofit kit might be marked up as:

A passenger car with no lighting might be marked up as:

Great care is necessary when creating new vocabularies. Often, a hierarchical approach to types can be taken that results in a vocabulary where each item only ever has a single type, which is generally much simpler to manage.

Chrome Yes Chrome Android Yes Edge Yes Edge Mobile ? Firefox Yes Firefox Android Yes Internet Explorer Yes Opera Yes Opera Android Yes Safari Yes Safari iOS Yes Samsung Internet Yes WebView Android Yes

5.2.3 Names: the attribute

Every HTML element may have an itemprop attribute specified, if doing so adds one or more properties to one or more items (as defined below).

The itemprop attribute, if specified, must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, representing the names of the name-value pairs that it adds. The attribute’s value must have at least one token.

Each token must be either:

  • If the item is a typed item: a allowed in this situation according to the specification that defines the relevant types for the item, or
  • A valid URL string that is an absolute URL defined as an item property name allowed in this situation by a vocabulary specification, or
  • A valid URL string that is an absolute URL, used as a proprietary item property name (i.e. one used by the author for private purposes, not defined in a public specification), or
  • If the item is not a typed item: a string that contains no U+002E FULL STOP characters (.) and no U+003A COLON characters (:), used as a proprietary item property name (i.e. one used by the author for private purposes, not defined in a public specification).

Specifications that introduce defined property names must ensure all such property names contain no U+002E FULL STOP characters (.), no U+003A COLON characters (:), and no ASCII whitespace.

The rules above disallow U+003A COLON characters (:) in non-URL values because otherwise they could not be distinguished from URLs. Values with U+002E FULL STOP characters (.) are reserved for future extensions. ASCII whitespace are disallowed because otherwise the values would be parsed as multiple tokens.

When an element with an itemprop attribute adds a property to multiple items, the requirement above regarding the tokens applies for each item individually.

The of an element are the tokens that the element’s itemprop attribute is found to contain when its value is split on ASCII whitespace, with the order preserved but with duplicates removed (leaving only the first occurrence of each name).

Within an item, the properties are unordered with respect to each other, except for properties with the same name, which are ordered in the order they are given by the algorithm that defines the properties of an item.

In the following example, the «a» property has the values «1» and «2», in that order, but whether the «a» property comes before the «b» property or not is not important:

Thus, the following is equivalent:

As is the following:

And the following:

5.2.4 Values

The of a name-value pair added by an element with an itemprop attribute is as given for the first matching case in the following list:

If the element also has an itemscope attribute

The value is the item created by the element.

If the element is a meta element

The value is the value of the element’s content attribute, if any, or the empty string if there is no such attribute.

If the element is an audio , embed , iframe , img , source , track , or video element

The value is the resulting URL string that results from parsing the value of the element’s src attribute relative to the node document of the element at the time the attribute is set, or the empty string if there is no such attribute or if parsing it results in an error.

If the element is an a , area , or link element

The value is the resulting URL string that results from parsing the value of the element’s href attribute relative to the node document of the element at the time the attribute is set, or the empty string if there is no such attribute or if parsing it results in an error.

If the element is an object element

The value is the resulting URL string that results from parsing the value of the element’s data attribute relative to the node document of the element at the time the attribute is set, or the empty string if there is no such attribute or if parsing it results in an error.

If the element is a data element

The value is the value of the element’s value attribute, if it has one, or the empty string otherwise.

If the element is a meter element

The value is the value of the element’s value attribute, if it has one, or the empty string otherwise.

If the element is a time element

The value is the element’s datetime value.

The are the a , area , audio , embed , iframe , img , link , object , source , track , and video elements.

If a property’s value, as defined by the property’s definition, is an absolute URL, the property must be specified using a URL property element.

These requirements do not apply just because a property value happens to match the syntax for a URL. They only apply if the property is explicitly defined as taking such a value.

For example, a book about the first moon landing could be called «mission:moon». A «title» property from a vocabulary that defines a title as being a string would not expect the title to be given in an a element, even though it looks like a URL. On the other hand, if there was a (rather narrowly scoped!) vocabulary for «books whose titles look like URLs» which had a «title» property defined to take a URL, then the property would expect the title to be given in an a element (or one of the other URL property elements), because of the requirement above.

5.2.5 Associating names with items

To find defined by the element root , the user agent must run the following steps. These steps are also used to flag microdata errors.

Let results , memory , and pending be empty lists of elements.

Add the element root to memory .

Add the child elements of root , if any, to pending .

If root has an itemref attribute, split the value of that itemref attribute on ASCII whitespace. For each resulting token ID , if there is an element in the tree of root with the ID ID , then add the first such element to pending .

While pending is not empty:

Remove an element from pending and let current be that element.

If current is already in memory , there is a microdata error; continue.

Add current to memory .

If current does not have an itemscope attribute, then: add all the child elements of current to pending .

If current has an itemprop attribute specified and has one or more property names, then add current to results .

Sort results in tree order.

A document must not contain any items for which the algorithm to find the properties of an item finds any .

An item is a if its element does not have an itemprop attribute.

All itemref attributes in a Document must be such that there are no cycles in the graph formed from representing each item in the Document as a node in the graph and each property of an item whose value is another item as an edge in the graph connecting those two items.

A document must not contain any elements that have an itemprop attribute that would not be found to be a property of any of the items in that document were their properties all to be determined.

In this example, a single license statement is applied to two works, using itemref from the items representing the works:

The above results in two items with the type » http://n.whatwg.org/work «, one with:

work images/house.jpeg title The house I found. license http://www.opensource.org/licenses/mit-license.php

work images/mailbox.jpeg title The mailbox. license http://www.opensource.org/licenses/mit-license.php

5.2.6 Microdata and other namespaces

Currently, the itemscope , itemprop , and other microdata attributes are only defined for HTML elements. This means that attributes with the literal names » itemscope «, » itemprop «, etc, do not cause microdata processing to occur on elements in other namespaces, such as SVG.

Thus, in the following example there is only one item, not two.

5.3 Sample microdata vocabularies

The vocabularies in this section are primarily intended to demonstrate how a vocabulary is specified, though they are also usable in their own right.

5.3.1 vCard

An item with the item type represents a person’s or organization’s contact information.

The following are the type’s defined property names. They are based on the vocabulary defined in vCard Format Specification ( vCard ) and its extensions, where more information on how to interpret the values can be found. [RFC6350]

Describes what kind of contact the item represents.

The value must be text that, when compared in a case-sensitive manner, is equal to one of the kind strings.

A single property with the name kind may be present within each item with the type http://microformats.org/profile/hcard .

Gives the formatted text corresponding to the name of the person or organization.

The value must be text.

Exactly one property with the name fn must be present within each item with the type http://microformats.org/profile/hcard .

Gives the structured name of the person or organization.

The value must be an item with zero or more of each of the family-name , given-name , additional-name , honorific-prefix , and honorific-suffix properties.

Exactly one property with the name n must be present within each item with the type http://microformats.org/profile/hcard .

Gives the family name of the person, or the full name of the organization.

The value must be text.

Any number of properties with the name family-name may be present within the item that forms the value of the n property of an item with the type http://microformats.org/profile/hcard .

Gives the given-name of the person.

The value must be text.

Any number of properties with the name given-name may be present within the item that forms the value of the n property of an item with the type http://microformats.org/profile/hcard .

Gives the any additional names of the person.

The value must be text.

Any number of properties with the name additional-name may be present within the item that forms the value of the n property of an item with the type http://microformats.org/profile/hcard .

Gives the honorific prefix of the person.

The value must be text.

Any number of properties with the name honorific-prefix may be present within the item that forms the value of the n property of an item with the type http://microformats.org/profile/hcard .

Gives the honorific suffix of the person.

The value must be text.

Any number of properties with the name honorific-suffix may be present within the item that forms the value of the n property of an item with the type http://microformats.org/profile/hcard .

Gives the nickname of the person or organization.

The nickname is the descriptive name given instead of or in addition to the one belonging to a person, place, or thing. It can also be used to specify a familiar form of a proper name specified by the fn or n properties.

The value must be text.

Any number of properties with the name nickname may be present within each item with the type http://microformats.org/profile/hcard .

Gives a photograph of the person or organization.

Any number of properties with the name photo may be present within each item with the type http://microformats.org/profile/hcard .

Gives the birth date of the person or organization.

A single property with the name bday may be present within each item with the type http://microformats.org/profile/hcard .

Gives the birth date of the person or organization.

A single property with the name anniversary may be present within each item with the type http://microformats.org/profile/hcard .

Gives the biological sex of the person.

The value must be one of F , meaning «female», M , meaning «male», N , meaning «none or not applicable», O , meaning «other», or U , meaning «unknown».

A single property with the name sex may be present within each item with the type http://microformats.org/profile/hcard .

Gives the gender identity of the person.

The value must be text.

A single property with the name gender-identity may be present within each item with the type http://microformats.org/profile/hcard .

Gives the delivery address of the person or organization.

The value must be an item with zero or more type , post-office-box , extended-address , and street-address properties, and optionally a locality property, optionally a region property, optionally a postal-code property, and optionally a country-name property.

If no type properties are present within an item that forms the value of an adr property of an item with the type http://microformats.org/profile/hcard , then the address type string work is implied.

Any number of properties with the name adr may be present within each item with the type http://microformats.org/profile/hcard .

Gives the type of delivery address.

The value must be text that, when compared in a case-sensitive manner, is equal to one of the address type strings.

Any number of properties with the name type may be present within the item that forms the value of an adr property of an item with the type http://microformats.org/profile/hcard , but within each such adr property item there must only be one type property per distinct value.

Gives the post office box component of the delivery address of the person or organization.

The value must be text.

Any number of properties with the name post-office-box may be present within the item that forms the value of an adr property of an item with the type http://microformats.org/profile/hcard .

vCard urges authors not to use this field.

Gives an additional component of the delivery address of the person or organization.

The value must be text.

Any number of properties with the name extended-address may be present within the item that forms the value of an adr property of an item with the type http://microformats.org/profile/hcard .

vCard urges authors not to use this field.

Gives the street address component of the delivery address of the person or organization.

The value must be text.

Any number of properties with the name street-address may be present within the item that forms the value of an adr property of an item with the type http://microformats.org/profile/hcard .

Gives the locality component (e.g. city) of the delivery address of the person or organization.

The value must be text.

A single property with the name locality may be present within the item that forms the value of an adr property of an item with the type http://microformats.org/profile/hcard .

Gives the region component (e.g. state or province) of the delivery address of the person or organization.

The value must be text.

A single property with the name region may be present within the item that forms the value of an adr property of an item with the type http://microformats.org/profile/hcard .

Gives the postal code component of the delivery address of the person or organization.

The value must be text.

A single property with the name postal-code may be present within the item that forms the value of an adr property of an item with the type http://microformats.org/profile/hcard .

Gives the country name component of the delivery address of the person or organization.

The value must be text.

A single property with the name country-name may be present within the item that forms the value of an adr property of an item with the type http://microformats.org/profile/hcard .

Gives the telephone number of the person or organization.

The value must be either text that can be interpreted as a telephone number as defined in the CCITT specifications E.163 and X.121, or an item with zero or more type properties and exactly one value property. [E163] [X121]

If no type properties are present within an item that forms the value of a tel property of an item with the type http://microformats.org/profile/hcard , or if the value of such a tel property is text, then the telephone type string voice is implied.

Any number of properties with the name tel may be present within each item with the type http://microformats.org/profile/hcard .

Gives the type of telephone number.

The value must be text that, when compared in a case-sensitive manner, is equal to one of the telephone type strings.

Any number of properties with the name type may be present within the item that forms the value of a tel property of an item with the type http://microformats.org/profile/hcard , but within each such tel property item there must only be one type property per distinct value.

Gives the actual telephone number of the person or organization.

The value must be text that can be interpreted as a telephone number as defined in the CCITT specifications E.163 and X.121. [E163] [X121]

Exactly one property with the name value must be present within the item that forms the value of a tel property of an item with the type http://microformats.org/profile/hcard .

Gives the e-mail address of the person or organization.

The value must be text.

Any number of properties with the name email may be present within each item with the type http://microformats.org/profile/hcard .

Gives a URL for instant messaging and presence protocol communications with the person or organization.

Any number of properties with the name impp may be present within each item with the type http://microformats.org/profile/hcard .

Gives a language understood by the person or organization.

The value must be a valid BCP 47 language tag. [BCP47].

Any number of properties with the name lang may be present within each item with the type http://microformats.org/profile/hcard .

Gives the time zone of the person or organization.

The value must be text and must match the following syntax:

  1. Either a U+002B PLUS SIGN character (+) or a U+002D HYPHEN-MINUS character (-).
  2. A valid non-negative integer that is exactly two digits long and that represents a number in the range 00..23.
  3. A U+003A COLON character (:).
  4. A valid non-negative integer that is exactly two digits long and that represents a number in the range 00..59.

Any number of properties with the name tz may be present within each item with the type http://microformats.org/profile/hcard .

Gives the geographical position of the person or organization.

The value must be text and must match the following syntax:

  1. Optionally, either a U+002B PLUS SIGN character (+) or a U+002D HYPHEN-MINUS character (-).
  2. One or more ASCII digits.
  3. Optionally*, a U+002E FULL STOP character (.) followed by one or more ASCII digits.
  4. A U+003B SEMICOLON character (;).
  5. Optionally, either a U+002B PLUS SIGN character (+) or a U+002D HYPHEN-MINUS character (-).
  6. One or more ASCII digits.
  7. Optionally*, a U+002E FULL STOP character (.) followed by one or more ASCII digits.

The optional components marked with an asterisk (*) should be included, and should have six digits each.

The value specifies latitude and longitude, in that order (i.e., «LAT LON» ordering), in decimal degrees. The longitude represents the location east and west of the prime meridian as a positive or negative real number, respectively. The latitude represents the location north and south of the equator as a positive or negative real number, respectively.

Any number of properties with the name geo may be present within each item with the type http://microformats.org/profile/hcard .

Gives the job title, functional position or function of the person or organization.

The value must be text.

Any number of properties with the name title may be present within each item with the type http://microformats.org/profile/hcard .

Gives the role, occupation, or business category of the person or organization.

The value must be text.

Any number of properties with the name role may be present within each item with the type http://microformats.org/profile/hcard .

Gives the logo of the person or organization.

Any number of properties with the name logo may be present within each item with the type http://microformats.org/profile/hcard .

Gives the contact information of another person who will act on behalf of the person or organization.

The value must be either an item with the type http://microformats.org/profile/hcard , or an absolute URL, or text.

Any number of properties with the name agent may be present within each item with the type http://microformats.org/profile/hcard .

Gives the name and units of the organization.

The value must be either text or an item with one organization-name property and zero or more organization-unit properties.

Any number of properties with the name org may be present within each item with the type http://microformats.org/profile/hcard .

Gives the name of the organization.

The value must be text.

Exactly one property with the name organization-name must be present within the item that forms the value of an org property of an item with the type http://microformats.org/profile/hcard .

Gives the name of the organization unit.

The value must be text.

Any number of properties with the name organization-unit may be present within the item that forms the value of the org property of an item with the type http://microformats.org/profile/hcard .

Gives a URL that represents a member of the group.

Any number of properties with the name member may be present within each item with the type http://microformats.org/profile/hcard if the item also has a property with the name kind whose value is » group «.

Gives a relationship to another entity.

The value must be an item with one url property and one rel properties.

Any number of properties with the name related may be present within each item with the type http://microformats.org/profile/hcard .

Gives the URL for the related entity.

Exactly one property with the name url must be present within the item that forms the value of a related property of an item with the type http://microformats.org/profile/hcard .

Gives the relationship between the entity and the related entity.

The value must be text that, when compared in a case-sensitive manner, is equal to one of the relationship strings.

Exactly one property with the name rel must be present within the item that forms the value of a related property of an item with the type http://microformats.org/profile/hcard .

Gives the name of a category or tag that the person or organization could be classified as.

The value must be text.

Any number of properties with the name categories may be present within each item with the type http://microformats.org/profile/hcard .

Gives supplemental information or a comment about the person or organization.

The value must be text.

Any number of properties with the name note may be present within each item with the type http://microformats.org/profile/hcard .

Gives the revision date and time of the contact information.

The value distinguishes the current revision of the information for other renditions of the information.

Any number of properties with the name rev may be present within each item with the type http://microformats.org/profile/hcard .

Gives a sound file relating to the person or organization.

Any number of properties with the name sound may be present within each item with the type http://microformats.org/profile/hcard .

Gives a globally unique identifier corresponding to the person or organization.

The value must be text.

A single property with the name uid may be present within each item with the type http://microformats.org/profile/hcard .

Gives a URL relating to the person or organization.

Any number of properties with the name url may be present within each item with the type http://microformats.org/profile/hcard .


Indicates a single entity (e.g. a person).

Indicates multiple entities (e.g. a mailing list).

Indicates a single entity that is not a person (e.g. a company).

Indicates a geographical place (e.g. an office building).

Indicates a delivery address for a residence.

Indicates a delivery address for a place of work.

Indicates a residential number.

Indicates a telephone number for a place of work.

Indicates that the telephone number supports text messages (SMS).

Indicates a voice telephone number.

Indicates a facsimile telephone number.

Indicates a cellular telephone number.

Indicates a video conferencing telephone number.

Indicates a paging device telephone number.

Indicates a telecommunication device for people with hearing or speech difficulties.

An emergency contact.

Another entity that acts on behalf of this entity.

Has the meaning defined in XFN. [XFN]

5.3.1.1 Conversion to vCard

Given a list of nodes nodes in a Document , a user agent must run the following algorithm to (only the first vCard is returned):

If none of the nodes in nodes are items with the item type http://microformats.org/profile/hcard , then there is no vCard. Abort the algorithm, returning nothing.

Let node be the first node in nodes that is an item with the item type http://microformats.org/profile/hcard .

Let output be an empty string.

Add a vCard line with the type » BEGIN » and the value » VCARD » to output .

Add a vCard line with the type » PROFILE » and the value » VCARD » to output .

Add a vCard line with the type » VERSION » and the value » 4.0 » to output .

Add a vCard line with the type » SOURCE » and the result of escaping the vCard text string that is the document’s URL as the value to output .

If the title element is not null, add a vCard line with the type » NAME » and with the result of escaping the vCard text string obtained from the the title element’s descendant text content as the value to output .

Let sex be the empty string.

Let gender-identity be the empty string.

For each element element that is a property of the item node : for each name name in element ‘s property names, run the following substeps:

Let parameters be an empty set of name-value pairs.

Run the appropriate set of substeps from the following list. The steps will set a variable value , which is used in the next step.

If the property’s value is an item subitem and name is n

Let value be the empty string.

Append to value the result of collecting the first vCard subproperty named family-name in subitem .

Append a U+003B SEMICOLON character (;) to value .

Append to value the result of collecting the first vCard subproperty named given-name in subitem .

Append a U+003B SEMICOLON character (;) to value .

Append to value the result of collecting the first vCard subproperty named additional-name in subitem .

Append a U+003B SEMICOLON character (;) to value .

Append to value the result of collecting the first vCard subproperty named honorific-prefix in subitem .

Append a U+003B SEMICOLON character (;) to value .

Append to value the result of collecting the first vCard subproperty named honorific-suffix in subitem .

Let value be the empty string.

Append to value the result of collecting vCard subproperties named post-office-box in subitem .

Append a U+003B SEMICOLON character (;) to value .

Append to value the result of collecting vCard subproperties named extended-address in subitem .

Append a U+003B SEMICOLON character (;) to value .

Append to value the result of collecting vCard subproperties named street-address in subitem .

Append a U+003B SEMICOLON character (;) to value .

Append to value the result of collecting the first vCard subproperty named locality in subitem .

Append a U+003B SEMICOLON character (;) to value .

Append to value the result of collecting the first vCard subproperty named region in subitem .

Append a U+003B SEMICOLON character (;) to value .

Append to value the result of collecting the first vCard subproperty named postal-code in subitem .

Append a U+003B SEMICOLON character (;) to value .

Append to value the result of collecting the first vCard subproperty named country-name in subitem .

If there is a property named type in subitem , and the first such property has a value that is not an item and whose value consists only of ASCII alphanumerics, then add a parameter named » TYPE » whose value is the value of that property to parameters .

If the property’s value is an item subitem and name is org

    Let value be the empty string.

    For each property named organization-unit in subitem , run the following steps:

    If the value of the property is an item, then skip this property.

    Append a U+003B SEMICOLON character (;) to value .

    Append the result of escaping the vCard text string given by the value of the property to value .

If the property’s value is an item subitem with the item typehttp://microformats.org/profile/hcard and name is related

    Let value be the empty string.

    If there is a property named url in subitem , and its element is a URL property element, then append the result of escaping the vCard text string given by the value of the first such property to value , and add a parameter with the name » VALUE » and the value » URI » to parameters .

    If there is a property named rel in subitem , and the first such property has a value that is not an item and whose value consists only of ASCII alphanumerics, then add a parameter named » RELATION » whose value is the value of that property to parameters .

If the property’s value is an item and name is none of the above

    Let value be the result of collecting the first vCard subproperty named value in subitem .

    If there is a property named type in subitem , and the first such property has a value that is not an item and whose value consists only of ASCII alphanumeric, then add a parameter named » TYPE » whose value is the value of that property to parameters .

If the property’s value is not an item and its name is sex

If this is the first such property to be found, set sex to the property’s value.

If the property’s value is not an item and its name is gender-identity

If this is the first such property to be found, set gender-identity to the property’s value.

Otherwise (the property’s value is not an item)

Let value be the property’s value.

If element is one of the URL property elements, add a parameter with the name » VALUE » and the value » URI » to parameters .

Otherwise, if name is bday or anniversary and the value is a valid date string, add a parameter with the name » VALUE » and the value » DATE » to parameters .

Otherwise, if name is rev and the value is a valid global date and time string, add a parameter with the name » VALUE » and the value » DATE-TIME » to parameters .

Prefix every U+005C REVERSE SOLIDUS character (\) in value with another U+005C REVERSE SOLIDUS character (\).

Prefix every U+002C COMMA character (,) in value with a U+005C REVERSE SOLIDUS character (\).

Unless name is geo , prefix every U+003B SEMICOLON character (;) in value with a U+005C REVERSE SOLIDUS character (\).

Replace every U+000D CARRIAGE RETURN U+000A LINE FEED character pair (CRLF) in value with a U+005C REVERSE SOLIDUS character (\) followed by a U+006E LATIN SMALL LETTER N character (n).

Replace every remaining U+000D CARRIAGE RETURN (CR) or U+000A LINE FEED (LF) character in value with a U+005C REVERSE SOLIDUS character (\) followed by a U+006E LATIN SMALL LETTER N character (n).

Add a vCard line with the type name , the parameters parameters , and the value value to output .

If either sex or gender-identity has a value that is not the empty string, add a vCard line with the type » GENDER » and the value consisting of the concatenation of sex , a U+003B SEMICOLON character (;), and gender-identity to output .

Add a vCard line with the type » END » and the value » VCARD » to output .

When the above algorithm says that the user agent is to consisting of a type type , optionally some parameters, and a value value to a string output , it must run the following steps:

Let line be an empty string.

If there are any parameters, then for each parameter, in the order that they were added, run these substeps:

Append a U+003B SEMICOLON character (;) to line .

Append the parameter’s name to line .

Append a U+003D EQUALS SIGN character (=) to line .

Append the parameter’s value to line .

Append a U+003A COLON character (:) to line .

Append value to line .

Let maximum length be 75.

While line ‘s length is greater than maximum length :

Append the first maximum length code points of line to output .

Remove the first maximum length code points from line .

Append a U+000D CARRIAGE RETURN character (CR) to output .

Append a U+000A LINE FEED character (LF) to output .

Append a U+0020 SPACE character to output .

Let maximum length be 74.

Append (what remains of) line to output .

Append a U+000D CARRIAGE RETURN character (CR) to output .

Append a U+000A LINE FEED character (LF) to output .

When the steps above require the user agent to obtain the result of named subname in subitem , the user agent must run the following steps:

Let value be the empty string.

For each property named subname in the item subitem , run the following substeps:

If the value of the property is itself an item, then skip this property.

If this is not the first property named subname in subitem (ignoring any that were skipped by the previous step), then append a U+002C COMMA character (,) to value .

Append the result of escaping the vCard text string given by the value of the property to value .

When the steps above require the user agent to obtain the result of named subname in subitem , the user agent must run the following steps:

If there are no properties named subname in subitem , then return the empty string.

If the value of the first property named subname in subitem is an item, then return the empty string.

Return the result of escaping the vCard text string given by the value of the first property named subname in subitem .

When the above algorithms say the user agent is to value , the user agent must use the following steps:

Prefix every U+005C REVERSE SOLIDUS character (\) in value with another U+005C REVERSE SOLIDUS character (\).

Prefix every U+002C COMMA character (,) in value with a U+005C REVERSE SOLIDUS character (\).

Prefix every U+003B SEMICOLON character (;) in value with a U+005C REVERSE SOLIDUS character (\).

Replace every U+000D CARRIAGE RETURN U+000A LINE FEED character pair (CRLF) in value with a U+005C REVERSE SOLIDUS character (\) followed by a U+006E LATIN SMALL LETTER N character (n).

Replace every remaining U+000D CARRIAGE RETURN (CR) or U+000A LINE FEED (LF) character in value with a U+005C REVERSE SOLIDUS character (\) followed by a U+006E LATIN SMALL LETTER N character (n).

Return the mutated value .

5.3.1.2 Examples

This section is non-normative.

Here is a long example vCard for a fictional character called «Jack Bauer»:

The odd line wrapping is needed because newlines are meaningful in microdata: newlines would be preserved in a conversion to, for example, the vCard format.

This example shows a site’s contact details (using the address element) containing an address with two street components:

The vCard vocabulary can be used to just mark up people’s names:

This creates a single item with a two name-value pairs, one with the name «fn» and the value «George Washington», and the other with the name «n» and a second item as its value, the second item having the two name-value pairs «given-name» and «family-name» with the values «George» and «Washington» respectively. This is defined to map to the following vCard:

5.3.2 vEvent

An item with the item type represents an event.

The following are the type’s defined property names. They are based on the vocabulary defined in Internet Calendaring and Scheduling Core Object Specification ( iCalendar ), where more information on how to interpret the values can be found. [RFC5545]

Only the parts of the iCalendar vocabulary relating to events are used here; this vocabulary cannot express a complete iCalendar instance.

Gives the address of an associated document for the event.

Any number of properties with the name attach may be present within each item with the type http://microformats.org/profile/hcalendar#vevent .

Gives the name of a category or tag that the event could be classified as.

The value must be text.

Any number of properties with the name categories may be present within each item with the type http://microformats.org/profile/hcalendar#vevent .

Gives the access classification of the information regarding the event.

The value must be text with one of the following values:

This is merely advisory and cannot be considered a confidentiality measure.

A single property with the name class may be present within each item with the type http://microformats.org/profile/hcalendar#vevent .

Gives a comment regarding the event.

The value must be text.

Any number of properties with the name comment may be present within each item with the type http://microformats.org/profile/hcalendar#vevent .

Gives a detailed description of the event.

The value must be text.

A single property with the name description may be present within each item with the type http://microformats.org/profile/hcalendar#vevent .

Gives the geographical position of the event.

The value must be text and must match the following syntax:

  1. Optionally, either a U+002B PLUS SIGN character (+) or a U+002D HYPHEN-MINUS character (-).
  2. One or more ASCII digits.
  3. Optionally*, a U+002E FULL STOP character (.) followed by one or more ASCII digits.
  4. A U+003B SEMICOLON character (;).
  5. Optionally, either a U+002B PLUS SIGN character (+) or a U+002D HYPHEN-MINUS character (-).
  6. One or more ASCII digits.
  7. Optionally*, a U+002E FULL STOP character (.) followed by one or more ASCII digits.

The optional components marked with an asterisk (*) should be included, and should have six digits each.

The value specifies latitude and longitude, in that order (i.e., «LAT LON» ordering), in decimal degrees. The longitude represents the location east and west of the prime meridian as a positive or negative real number, respectively. The latitude represents the location north and south of the equator as a positive or negative real number, respectively.

A single property with the name geo may be present within each item with the type http://microformats.org/profile/hcalendar#vevent .

Gives the location of the event.

The value must be text.

A single property with the name location may be present within each item with the type http://microformats.org/profile/hcalendar#vevent .

Gives a resource that will be needed for the event.

The value must be text.

Any number of properties with the name resources may be present within each item with the type http://microformats.org/profile/hcalendar#vevent .

Gives the confirmation status of the event.

The value must be text with one of the following values:

A single property with the name status may be present within each item with the type http://microformats.org/profile/hcalendar#vevent .

Gives a short summary of the event.

The value must be text.

User agents should replace U+000A LINE FEED (LF) characters in the value by U+0020 SPACE characters when using the value.

A single property with the name summary may be present within each item with the type http://microformats.org/profile/hcalendar#vevent .

Gives the date and time by which the event ends.

If the property with the name dtend is present within an item with the type http://microformats.org/profile/hcalendar#vevent that has a property with the name dtstart whose value is a val >dtend must be text that is a valid date string also. Otherwise, the value of the property must be text that is a valid global date and time string.

In either case, the value be later in time than the value of the dtstart property of the same item.

The time given by the dtend property is not inclusive. For day-long events, therefore, the dtend property’s value will be the day after the end of the event.

A single property with the name dtend may be present within each item with the type http://microformats.org/profile/hcalendar#vevent , so long as that http://microformats.org/profile/hcalendar#vevent does not have a property with the name duration .

Gives the date and time at which the event starts.

Exactly one property with the name dtstart must be present within each item with the type http://microformats.org/profile/hcalendar#vevent .

Gives the duration of the event.

The duration represented is the sum of all the durations represented by integers in the value.

A single property with the name duration may be present within each item with the type http://microformats.org/profile/hcalendar#vevent , so long as that http://microformats.org/profile/hcalendar#vevent does not have a property with the name dtend .

Gives whether the event is to be considered as consuming time on a calendar, for the purpose of free-busy time searches.

The value must be text with one of the following values:

A single property with the name transp may be present within each item with the type http://microformats.org/profile/hcalendar#vevent .

Gives the contact information for the event.

The value must be text.

Any number of properties with the name contact may be present within each item with the type http://microformats.org/profile/hcalendar#vevent .

Gives a URL for the event.

A single property with the name url may be present within each item with the type http://microformats.org/profile/hcalendar#vevent .

Gives a globally unique identifier corresponding to the event.

The value must be text.

A single property with the name uid may be present within each item with the type http://microformats.org/profile/hcalendar#vevent .

Gives a date and time at which the event does not occur despite the recurrence rules.

Any number of properties with the name exdate may be present within each item with the type http://microformats.org/profile/hcalendar#vevent .

Gives a date and time at which the event recurs.

The value must be text that is one of the following:

  • A valid date string.
  • A valid global date and time string.
  • A valid global date and time string followed by a U+002F SOLIDUS character (/) followed by a second valid global date and time string representing a later time.
  • A valid global date and time string followed by a U+002F SOLIDUS character (/) followed by a valid vevent duration string.

Any number of properties with the name rdate may be present within each item with the type http://microformats.org/profile/hcalendar#vevent .

Gives a rule for finding dates and times at which the event occurs.

The value must be text that matches the RECUR value type defined in iCalendar . [RFC5545]

A single property with the name rrule may be present within each item with the type http://microformats.org/profile/hcalendar#vevent .

Gives the date and time at which the event information was first created in a calendaring system.

A single property with the name created may be present within each item with the type http://microformats.org/profile/hcalendar#vevent .

Gives the date and time at which the event information was last modified in a calendaring system.

A single property with the name last-modified may be present within each item with the type http://microformats.org/profile/hcalendar#vevent .

Gives a revision number for the event information.

A single property with the name sequence may be present within each item with the type http://microformats.org/profile/hcalendar#vevent .

A string is a if it matches the following pattern:

  1. A U+0050 LATIN CAPITAL LETTER P character (P).
  2. One of the following:
    • A val >5.3.2.1 Conversion to iCalendar

Given a list of nodes nodes in a Document , a user agent must run the following algorithm to :

If none of the nodes in nodes are items with the type http://microformats.org/profile/hcalendar#vevent , then there is no vEvent data. Abort the algorithm, returning nothing.

Let output be an empty string.

Add an iCalendar line with the type » BEGIN » and the value » VCALENDAR » to output .

Add an iCalendar line with the type » PRODID » and the value equal to a user-agent-specific string representing the user agent to output .

Add an iCalendar line with the type » VERSION » and the value » 2.0 » to output .

For each node node in nodes that is an item with the type http://microformats.org/profile/hcalendar#vevent , run the following steps:

Add an iCalendar line with the type » BEGIN » and the value » VEVENT » to output .

Add an iCalendar line with the type » DTSTAMP » and a value consisting of an iCalendar DATE-TIME string representing the current date and time, with the annotation » VALUE=DATE-TIME «, to output . [RFC5545]

For each element element that is a property of the item node : for each name name in element ‘s property names, run the appropriate set of substeps from the following list:

If the property’s value is an item

Skip the property.

If the property is dtend If the property is dtstart If the property is exdate If the property is rdate If the property is created If the property is last-modified

Let value be the result of stripping all U+002D HYPHEN-MINUS (-) and U+003A COLON (:) characters from the property’s value.

If the property’s value is a valid date string then add an iCalendar line with the type name and the value value to output , with the annotation » VALUE=DATE «.

Otherwise, if the property’s value is a valid global date and time string then add an iCalendar line with the type name and the value value to output , with the annotation » VALUE=DATE-TIME «.

Otherwise skip the property.

Add an iCalendar line with the type name and the property’s value to output .

Add an iCalendar line with the type » END » and the value » VEVENT » to output .

Add an iCalendar line with the type » END » and the value » VCALENDAR » to output .

When the above algorithm says that the user agent is to consisting of a type type , a value value , and optionally an annotation, to a string output , it must run the following steps:

Let line be an empty string.

If there is an annotation:

Append a U+003B SEMICOLON character (;) to line .

Append the annotation to line .

Append a U+003A COLON character (:) to line .

Prefix every U+005C REVERSE SOLIDUS character (\) in value with another U+005C REVERSE SOLIDUS character (\).

Prefix every U+002C COMMA character (,) in value with a U+005C REVERSE SOLIDUS character (\).

Prefix every U+003B SEMICOLON character (;) in value with a U+005C REVERSE SOLIDUS character (\).

Replace every U+000D CARRIAGE RETURN U+000A LINE FEED character pair (CRLF) in value with a U+005C REVERSE SOLIDUS character (\) followed by a U+006E LATIN SMALL LETTER N character (n).

Replace every remaining U+000D CARRIAGE RETURN (CR) or U+000A LINE FEED (LF) character in value with a U+005C REVERSE SOLIDUS character (\) followed by a U+006E LATIN SMALL LETTER N character (n).

Append value to line .

Let maximum length be 75.

While line ‘s length is greater than maximum length :

Append the first maximum length code points of line to output .

Remove the first maximum length code points from line .

Append a U+000D CARRIAGE RETURN character (CR) to output .

Append a U+000A LINE FEED character (LF) to output .

Append a U+0020 SPACE character to output .

Let maximum length be 74.

Append (what remains of) line to output .

Append a U+000D CARRIAGE RETURN character (CR) to output .

Append a U+000A LINE FEED character (LF) to output .

5.3.2.2 Examples

This section is non-normative.

Here is an example of a page that uses the vEvent vocabulary to mark up an event:

The getCalendar() function is left as an exercise for the reader.

The same page could offer some markup, such as the following, for copy-and-pasting into blogs:

5.3.3 Licensing works

An item with the item type represents a work (e.g. an article, an image, a video, a song, etc). This type is primarily intended to allow authors to include licensing information for works.

The following are the type’s defined property names.

Identifies the work being described.

Exactly one property with the name work must be present within each item with the type http://n.whatwg.org/work .

Gives the name of the work.

A single property with the name title may be present within each item with the type http://n.whatwg.org/work .

Gives the name or contact information of one of the authors or creators of the work.

The value must be either an item with the type http://microformats.org/profile/hcard , or text.

Any number of properties with the name author may be present within each item with the type http://n.whatwg.org/work .

Identifies one of the licenses under which the work is available.

Any number of properties with the name license may be present within each item with the type http://n.whatwg.org/work .

5.3.3.1 Examples

This section is non-normative.

This example shows an embedded image entitled My Pond , licensed under the Creative Commons Attribution-Share Alike 4.0 International License and the MIT license simultaneously.

5.4 Converting HTML to other formats

5.4.1 JSON

Given a list of nodes nodes in a Document , a user agent must run the following algorithm to :

Let result be an empty object.

Let items be an empty array.

For each node in nodes , check if the element is a top-level microdata item, and if it is then get the object for that element and add it to items .

Add an entry to result called » items » whose value is the array items .

Return the result of serializing result to JSON in the shortest possible way (meaning no whitespace between tokens, no unnecessary zero digits in numbers, and only using Unicode escapes in strings for characters that do not have a dedicated escape sequence), and with a lowercase » e » used, when appropriate, in the representation of any numbers. [JSON]

This algorithm returns an object with a single property that is an array, instead of just returning an array, so that it is possible to extend the algorithm in the future if necessary.

When the user agent is to for an item item , optionally with a list of elements memory , it must run the following substeps:

Let result be an empty object.

If no memory was passed to the algorithm, let memory be an empty list.

Add item to memory .

If the item has any item types, add an entry to result called » type » whose value is an array listing the item types of item , in the order they were specified on the itemtype attribute.

If the item has a global identifier, add an entry to result called » id » whose value is the global identifier of item .

Let properties be an empty object.

For each element element that has one or more property names and is one of the properties of the item item , in the order those elements are given by the algorithm that returns the properties of an item, run the following substeps:

Let value be the property value of element .

If value is an item, then: If value is in memory , then let value be the string » ERROR «. Otherwise, get the object for value , passing a copy of memory , and then replace value with the object returned from those steps.

For each name name in element ‘s property names, run the following substeps:

If there is no entry named name in properties , then add an entry named name to properties whose value is an empty array.

Append value to the entry named name in properties .

Add an entry to result called » properties » whose value is the object properties .

HTML5 Microdata — itemref для другого предмета (Person работает для организации)

Веб-сайт организации, скажем, «Sun Industries», хотел бы добавить список сотрудников. Адрес и контактная информация организации уже присутствуют на веб-странице, но список сотрудников будет где-то еще.

а затем в коде HTML5 у нас будет

Как связать два объекта «организация» и «сотрудник-1» вместе?

Я попытался добавить следующий дочерний объект к объекту «employee-1»

но это не сработало (по крайней мере, не в Google Structured Data Testing Tool).

Как я могу использовать свойство microdata itemref правильно в этом случае?

Чтобы быть ясным, я также пробовал следующее:

  • Добавить itemprop=»worksFor» в объект «организация» .
  • Добавить itemref=»organization» в объект «employee».

но это дало мне Warning: Page contains property «worksfor» which is not part of the schema. для объекта «организация» .

Краткий курс HTML 5

17. Новые атрибуты в HTML 5

На момент составления курса приведенные ниже атрибуты не поддерживаются всеми браузерами в полной мере, поэтому перед пользователем документ может предстать не таким, каким видите его вы. Насколько оправдано применение этих атрибутов, зависит от конкретной задачи, и решение остается за вами. В любом случае, рекомендуем ознакомиться с главой «Обратная совместимость».

В HTML 5 добавлены несколько атрибутов, принимающих только значения true или false . Атрибут contenteditable указывает, может ли пользователь редактировать содержимое элемента ( true ) или нет ( false ). Естественно, что редактируемые элементы могут получать фокус ввода, и для определения порядка переключения между ними используется tabindex , упомянутый в главе «Элементы ввода». Атрибут draggable позволяет включить ( true ) или отключить ( false ) возможность перетаскивания элемента мышью. Обычно по умолчанию браузер позволяет перетаскивать только изображения и гиперссылки. С помощью атрибута hidden можно обозначить элемент, содержимое которого уже или еще не актуально. Если установить ему значение true , то такой элемент не будет отображен браузером. И наконец, атрибут spellcheck со значением true сообщает браузеру о необходимости орфографической/грамматической проверки содержимого элемента. В результате такой проверки обнаруженные ошибки будут выделены каким-либо, зависящим от конкретного браузера образом. Этот атрибут применяется вместе с различными элементами ввода.

Еще одной новинкой HTML 5 является атрибут contextmenu , применяемый при создании контекстых меню. Подробнее эта возможность описана в главе «Создание меню»

Поддержка микроформатов

Стандартом HTML 5 предусмотрена возможность использовать собственные атрибуты, определяя их назначение самостоятельно. Такие атрибуты имеют вид data-* , где * — комбинация строчных латинских букв, цифр и символов « — » и « . ». Пользовательские атрибуты игнорируются браузером, но могут быть применены, например, для сортировки информации «на лету» встроенным скриптом или в микроформатах — дополнительных правилах семантической разметки документа, облегчающей его машинную обработку.

С той же целью в HTML 5 добавлены атрибуты item , itemprop и subject , позволяющие группировать информацию в документе по наборам различных признаков. Атрибутом item обозначается некая сущность, а с помощью itemprop можно определять ее свойства. Значением свойства может быть строка, URL, дата/время или даже другая сущность. Если какие-то свойства расположены вне сущности, то их можно привязать к ней, указав в значении атрибута subject идентификатор id самой сущности.

5. HTML — Атрибуты

Вы уже знакомы с несколькими html-тегами и их использованием, например теги заголовков

, или тег абзаца

и другие. До сих пор мы использовали их в простейшей форме, но большинство тегов в HTML могут иметь атрибуты, которые являются дополнительными битами информации.

Атрибут — используется для определения характеристик html-элемента и помещается внутри открытого тега элемента. Все атрибуты состоят из двух частей — это имя и значение:

    Имя — это свойство, которое Вы хотите установить. Например, элемент абзаца

, в примере ниже, содержит атрибут align, который Вы можете использовать для указания выравнивания абзаца на странице.

  • Значение — это значение, которое Вы хотите установить для свойства. Значение атрибута всегда помещается в кавычки. В приведенном ниже примере показаны три возможных значения атрибута align: left, center и right.
  • Имена и значения атрибутов в HTML не зависят от регистра. Однако консорциум World Wide Web (W3C) рекомендует в своей рекомендации HTML 4 использовать атрибуты и значения атрибутов в нижнем регистре.

    Пример

    Получим следующий результат:

    Содержание

    Основные атрибуты HTML

    Существует четыре основных атрибута в HTML, которые могут использоваться для большинства html-элементов (хотя и не для всех):

    Атрибут id

    Атрибут id html-тега может быть использован для однозначной идентификации любого элемента внутри html-страницы. Существуют две основные причины, по которым Вы можете использовать атрибут id для элемента:

    • Если элемент содержит атрибут id как уникальный идентификатор, то можно идентифицировать только этот элемент и его содержимое.
    • Если на веб-странице (или в таблице стилей) есть два элемента с одним и тем же именем, Вы можете использовать атрибут id для различения элементов, имеющих одно и то же имя.

    Таблицу стилей мы обсудим в отдельном самоучителе. Пока же давайте использовать атрибут id для различения двух элементов абзаца, как показано ниже.

    Атрибут title

    Атрибут title — дает название элемента для элемента. Синтаксис для атрибута title аналогичен атрибуту id.

    Поведение этого атрибута будет зависеть от элемента, который его несет, хотя он часто отображается как подсказка, когда курсор наводится на элемент или когда элемент загружается.

    Пример

    Получим следующий результат:

    Теперь попробуйте навести курсор на «Пример заголовка», и Вы увидите, что title, который Вы использовали в вашем коде, выйдет как подсказка курсора.

    Атрибут class

    Атрибут class — используется для связывания элемента со списком стилей и задает класс элементу. Вы узнаете больше об использовании атрибута class, когда изучите CSS (каскадные таблицы стилей). Так что пока можете это пропустить.

    Значением атрибута может быть также список имен классов, разделенных пробелами. Например:

    Атрибут style

    Атрибут style — позволяет указывать правила каскадной таблицы стилей (CSS) внутри элемента.

    Получим следующий результат:

    На данный момент мы не изучаем CSS, так что давайте продолжим, не беспокоясь о CSS. Здесь Вам нужно понять, какие существуют html-атрибуты, и как их можно использовать при форматировании содержимого.

    Атрибуты интернационализации

    Существует три атрибута интернационализации в HTML, которые доступны для большинства (хотя и не для всех) элементов XHTML.

    Атрибут dir

    Атрибут dir — позволяет указать браузеру направление потока текста. Атрибут dir может принимать одно из двух значений, которые Вы можете видеть в следующей таблице:

    Значение Описание
    ltr Слева направо (значение по умолчанию).
    rtl Справа налево (для языков, таких как иврит или арабский, которые читаются справа налево).

    Пример

    Получим следующий результат:

    Когда атрибут dir используется в теге , он определяет, как текст будет представлен во всем документе. При использовании в другом теге он управляет направлением текста только для содержимого этого тега.

    Атрибут lang

    Атрибут lang — позволяет указать основной язык, используемый в документе, но этот атрибут хранится в HTML только для обратной совместимости с более ранними версиями HTML. Этот атрибут был заменен атрибутом xml:lang в новых xhtml-документах.

    Значения атрибута lang — это стандартные двухсимвольные языковые коды ISO-639. Проверьте коды ISO-639 для языка HTML, перейдите по ссылке для получения полного списка кодов языков.

    Пример

    Атрибут xml:lang

    Атрибут xml:lang — это XHTML замена для атрибута lang. Значение атрибута xml:lang должно быть ISO-639 кодом страны, которые указаны выше.

    Общие атрибуты

    Ниже представлена таблица некоторых других атрибутов, которые можно легко использовать со многими html-тегами.

    Атрибут Опция Функция
    align right, left, center Горизонтальное выравнивание тегов.
    valign top, middle, bottom Вертикально выравнивает тегов внутри html-элемента.
    bgcolor числовые, шестнадцатеричные, RGB значения Помещает фоновый цвет за элемент.
    background URL Помещает фоновое изображение за элемент.
    id определяется пользователем Именование элемента для использования с каскадными таблицами стилей.
    class определяется пользователем Классифицирует элемент для использования с каскадными таблицами стилей.
    width числовое или процентное значение Задает ширину таблиц, изображений или ячеек таблицы.
    height числовое или процентное значение Задает высоту таблиц, изображений или ячеек таблицы.
    title определяется пользователем «Всплывающий» заголовок элементов.

    Мы ещё увидим соответствующие примеры атрибутов при изучении других html-тегов (полный список html-тегов и связанных атрибутов).

    Как использовать data-атрибуты HTML5

    Давным-давно, во времена XHTML/HTML4 у разработчиков было всего несколько возможностей, которыми они могли пользоваться для того, чтобы хранить произвольные данные, относящиеся к DOM. Вы могли изобретать свои собственные атрибуты, но это было рискованно — ваш код не был бы валидным, браузеры могли игнорировать ваши данные, и это могло вызвать проблемы, если название совпадало со стандартными атрибутами HTML.

    Поэтому большинство разработчиков завязывались на атрибуты class или rel так как они были единственным разумным способом хранить дополнительные строки. К примеру, предположим, что мы создаем виджет для отображения сообщений типа временной линии сообщений в Twitter. В идеале JavaScript должен иметь возможность конфигурирования без необходимости переписывать код, так что мы определяем идентификатор пользователя в атрибуте class, например:

    Наш JavaScript код будет искать элемент с ID msglist. С помощью скрипта мы будем искать классы, начинающиеся с user_, а “bob” в нашем случае будет идентификатором пользователя, и мы отобразим все сообщения этого пользователя.

    Скажем, мы бы хотели также задать максимальное количество сообщений, и пропускать сообщения старше шести месяцев (180 дней):

    Наш атрибут class очень быстро загромождается — проще допустить ошибку, а разбор строк на JavaScript становится все сложнее.

    Data-атрибуты HTML5

    К счастью, в HTML5 была введена возможность использовать пользовательские атрибуты. Вы можете использовать любое имя в нижнем регистре с префиксом data-, например:

    • это строки — в них вы можете хранить любую информацию, которая может быть представлена или закодирована в виде строки, например JSON. Приведение типов должно осуществляться с помощью JavaScript
    • должны использоваться в тех случаях, когда нет подходящих элементов HTML5 или атрибутов
    • относятся только к странице. В отличие от микроформатов они должны игнорироваться внешними системами, типа поисковых систем и поисковых роботов

    Пример №1 обработки на JavaScript: getAttribute и setAttribute

    Все браузеры позволяют вам получить и изменить data-атрибуты с использованием методов getAttribute и setAttribute:

    Это работает, но должно использоваться только для поддержания совместимости со старыми браузерами.

    Пример №2 обработки на JavaScript: метод data() библиотеки jQuery

    Начиная с версии jQuery 1.4.3 метод data() обрабатывает data-атрибуты HTML5. Вам нет необходимости явно указывать префикс data-, так что подобный код будет работать:

    Но как бы то ни было, имейте в виду, что jQuery пытается конвертировать значения таких атрибутов в подхдящие типы (булевы значения, числа, объекты, массивы или null) и затронет DOM. В отличие от setAttribute, метод data() физически не заменит атрибут data-list-size — если вы проверите его значение вне jQuery — оно все еще останется равным 5.

    Пример №3 обработки на JavaScript: API для работы с наборами данных

    И, наконец, у нас есть API для работы с наборами данных HTML5, которое возвращает объект DOMStringMap. Необходимо помнить, что data-атрибуты отображаются в объект без префиксов data-, из названий убираются знаки дефиса, а сами названия конвертируются в camelCase, например:

    Имя атрибута Имя в API набора данных
    data-user user
    data-maxage maxage
    data-list-size listSize

    Данный API поддерживается всеми современными браузерами, но не IE10 и ниже. Для таких браузеров существует обходной путь, но, наверное, куда практичнее использовать jQuery, если вы пишете для старых браузеров.

    Данный урок подготовлен для вас командой сайта ruseller.com
    Источник урока: http://www.sitepoint.com/use-html5-data-attributes/
    Перевел: Станислав Протасевич
    Урок создан: 14 Марта 2014
    Просмотров: 59675
    Правила перепечатки

    5 последних уроков рубрики «HTML5»

    Расширяем возможности HTML за счёт создания собственных тегов

    В этом уроке я покажу процесс создания собственных HTML тегов. Пользовательские теги решают множество задач: HTML документы становятся проще, а строк кода становится меньше.

    Определение доступности атрибута HTML5 с помощью JavaScript

    Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.

    HTML5: API работы с вибрацией

    HTML5 — глоток свежего воздуха в современном вебе. Она повлиял не только на классический веб, каким мы знаем его сейчас. HTML5 предоставляет разработчикам ряд API для создания и улучшения сайтов с ориентацией на мобильные устройства. В этой статье мы рассмотрим API для работы с вибрацией.

    Создание форм с помощью Webix Framework — 4 практических примера

    Веб дизайнеры частенько сталкиваются с необходимостью создания форм. Данная задача не простая, и может вызвать головную боль (особенно если вы делаете что-то не стандартное, к примеру, много-страничную форму). Для упрощения жизни можно воспользоваться фрэймворком. В этой статье я покажу вам несколько практических приёмов для создания форм с помощью фрэймворка Webix.

    Знакомство с фрэймворком Webix

    В этой статье мы бы хотели познакомить вас с фрэймворком Webix. Для демонстрации возможностей данного инструмента мы создадим интерфейс online аудио плеера. Не обольщайтесь — это всего лишь модель интерфейса. Исходный код доступен в демо и на странице GitHub.

    Илон Маск рекомендует:  Импорт шрифта
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL