Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Microdatas by examples

itemscope

<div itemscope></div>
{
  "items": [
    {
      "properties": {}
    }
  ]
}

itemprop

<div itemscope>
  <span itemprop="a">A</span>
  <span itemprop="b">B</span>
</div>
{
  "items": [
    {
      "properties": {
        "a": [
          "A"
        ],
        "b": [
          "B"
        ]
      }
    }
  ]
}

Multi-value

<div itemscope>
  <span itemprop="a">A</span>
  <span itemprop="a">A</span>
</div>
{
  "items": [
    {
      "properties": {
        "a": [
          "A",
          "A"
        ]
      }
    }
  ]
}

Multi-key

<div itemscope>
  <span itemprop="a b">AB</span>
</div>
{
  "items": [
    {
      "properties": {
        "a": [
          "AB"
        ],
        "b": [
          "AB"
        ]
      }
    }
  ]
}

Nested

<div itemscope>
  <span itemprop="a">A</span>
  <span itemprop="b" itemscope>
    <span itemprop="aa">AA</span>
    <span itemprop="bb">BB</span>
  </span>
</div>
{
  "items": [
    {
      "properties": {
        "a": [
          "A"
        ],
        "b": [
          {
            "properties": {
              "aa": [
                "AA"
              ],
              "bb": [
                "BB"
              ]
            }
          }
        ]
      }
    }
  ]
}

itemref

<div itemscope itemref="foo bar"></div>
<span id="foo" itemprop="a">A</span>
<span id="bar" itemprop="b">B</span>
{
  "items": [
    {
      "properties": {
        "a": [
          "A"
        ],
        "b": [
          "B"
        ]
      }
    }
  ]
}

Nested

<div itemscope itemref="foo bar"></div>
<span id="foo" itemprop="a">A</span>
<span id="bar" itemprop="b" itemscope itemref="baz">

<div id="baz">
  <span itemprop="aa">AA</span>
  <span itemprop="bb">BB</span>
</div>
{
  "items": [
    {
      "properties": {
        "a": [
          "A"
        ],
        "b": [
          {
            "properties": {
              "aa": [
                "AA"
              ],
              "bb": [
                "BB"
              ]
            }
          }
        ]
      }
    }
  ]
}

itemtype

TODO

itemid

TODO

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment