Rectangle 27 2

Microdata is not only for "typed data". You could define your own Microdata vocabulary, if you like. But you could also use a "local" one (emphasis mine):

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.

However, if you want to use some other Microdata vocabulary (e.g. schema.org) on your pages in the future, you might get some conflicts with your "local" Microdata. So Id not use Microdata if it doesnt offer you benefits over data-* attributes.

Regarding the meta element: You can get something similar with data-* attributes, too. In HTML5, the script element can be used for "data blocks". So you could use something like:

<div class="wrapper" id="module1">
  <script type="text/plain" data-userDoesSomething="alert('Data attributes are better!');">
  </script>
  Module-specific content
</div>

<div class="wrapper" id="module1">
  <script type="text/plain" data-userDoesSomething>
    alert('Data attributes are better!');
  </script>
  Module-specific content
</div>

<!-- etc. -->

Instead of text/plain, you could use whatever suits your needs (JSON, HTML, ).

How are data-* attributes different from microdata? And are you saying that you can create your own Microdata standard? I don't get it. Explain

@AliGajani: Anyone can create Microdata vocabularies (not standards), just like someone created the schema.org vocabulary. And Microdata also allows for "local" vocabularies which dont need to be published in the first place. A local Microdata vocabulary and the use of data-* attributes are similar, as both are not indended to be (re)used by others. However, the use of a "real" (published) vocabulary is typically intended to be used by others, too.

I thought the data-* attribute was used to store whereas Micro-data was used to define, am I missing the point here. I haven't seen people use data-* for semantic purposes, its usually like data-dismiss="modal".

@AliGajani: You (= the webpage author) can do whatever you want with data-*. The point is: the content is "private" to the page. No-one else is intended to make use of it.

That's why search engines use Micro-data and not data-*. Right, thanks unor.

jquery - Microdata vs. the data attribute in modular HTML5 - Stack Ove...

jquery html5 microdata
Rectangle 27 16

Yes, if you wanted to use itemscope in XHTML, you would need to write itemscope="itemscope" and use XHTML5 (same DOCTYPE as HTML5, but XML syntax).

itemscope is not included in W3 HTML5, but present in WHATWG's version, so validation may continue to be a difficulty. There seems to be quite some political argument on this issue, which I haven't been following as it looks fairly tedious.

For the moment, if you want to use breadcrumb annotations in a finalised, validatable document format, you could use RDFa instead: the alternative (but older) proposal, which the argument is all about, and use the existing doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">

To be clear about the state of Microdata in W3C HTML5, it's still part of the work of the HTML5 working group, but it's defined in a separate document. You can find it here: dev.w3.org/html5/md . The rationale behind this is simple enough. RDFa and Microdata inhabit the same problem space and it's unclear which will catch on with web authors, so it was felt by many members of the WG that not having either in the main spec would be most likely to give a level playing field for the two extension mechanisms to compete.

validation - Can I add Microdata from HTML5 to a XHTML Strict site and...

validation html5 breadcrumbs xhtml-1.0-strict microdata
Rectangle 27 11

Since the major search engines have decided on schema.org last June (2011) as the way to do rich snippets, this question has become much more important seeing XHTML5 does not yet have a working DTD (BTW, http://www.html5dtd.org/ is working on a XHTML5 DTD and may well be ready when you read this, if so disregard what I'm about to say). And what I am about to say summarises a page I placed at http://www.nedprod.com/programs/portable/XHTMLwithHTML5microdata/ a few weeks ago, and there has more detail including a rich snippets demo if you want it.

I had need of extending XHTML 1.x Strict with schema.org/HTML5 microdata and getting it all to validate properly for updating nedprod, and Microsoft Expression Web has the occasional tendency to eat bits of HTML it edits, so validation is handy for catching when it borks. Hence I have created these DTDs which extend the standard XHTML 1.0 ones:

To use, take a copy of your desired DTD (don't use the original from nedprod, I can't afford the bandwidth) and use as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict with HTML5 microdata//EN" "xhtml1-strict-with-html5-microdata.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional with HTML5 microdata//EN" "xhtml1-transitional-with-html5-microdata.dtd">

... or more likely, override the DTD used for validation by your particular XML validating setup.

BTW, here's something interesting, and I only include this as it's useful to know when answering the question. I honest to God thought that using the above doctypes would invoke quirks mode when rendering. Turns out, much to my great surprise, that IE8, Chrome 14, Firefox 5 and Opera 11.50 all render such a doctype in Standards mode. Who would have thought! So you could, if you wanted to, upload your XHTML pages onto the public internet with the custom doctype and the newer browsers at least would do the right thing.

validation - Can I add Microdata from HTML5 to a XHTML Strict site and...

validation html5 breadcrumbs xhtml-1.0-strict microdata
Rectangle 27 6

Markup for the tags

Update: The definition of Schema.orgs keywords property changed. Now it makes clear that it expects multiple tags, and that they should typically be comma-separated.

tl;dr: If you want to use a ul element for your tags, using Schema.orgs keywords property could look like this in Microdata:

<article itemscope itemtype="http://schema.org/BlogPosting">

  <footer>
    <ul itemprop="keywords">
      <li><a href="/tags/foo" rel="tag">foo</a>,</li>
      <li><a href="/tags/bar" rel="tag">bar</a></li>
    </ul>
  </footer>

</article>

If using it like that, you have to make sure that the ul contains no other non-tag text.

The meta element with the name value keywords offers a way to specify keywords that apply to the whole page. These keywords consist of text only, so you cant use URIs.

So for the typical blog tags, youd go the following way (possibly in addition to meta-keywords).

tag

The tag keyword indicates that the tag that the referenced document represents applies to the current document.

Note that this link type can only be used on single post pages as the tag always applies to the whole page.

(Attention: tag is a Microformat, too, but it has a different definition: You may only use specially crafted URLs for the Microformat tag.)

If your tags are more like categories (controlled vocabulary instead of free tagging), you could use the link type category (possibly in combination with tag).

You might use a ul or a dl:

<ul>
  <li><a href="/tags/foo" rel="tag">foo</a></li>
  <li><a href="/tags/bar" rel="tag">bar</a></li>
</ul>
<dl>
  <dt>Tags</dt>
  <dd><a href="/tags/foo" rel="tag">foo</a></dd>
  <dd><a href="/tags/bar" rel="tag">bar</a></dd>
</dl>

Id go with the dl when you also have other metadata to list, e.g. the author, publication date, etc.

A div with comma-separated a elements would work also, of course:

<div>Tags: <a href="/tags/foo" rel="tag">foo</a>, <a href="/tags/bar" rel="tag">bar</a></div>

The list should be part of a footer element (inside the article if you use one for your blog post):

A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

CreativeWork defines the property keywords (BlogPosting inherits it):

Keywords or tags used to describe this content. Multiple entries in a keywords list are typically delimited by commas.

It expects plain text, so theres no way to provide the tag URLs in Schema.org.

As keywords expects a comma-separated list of tags, dl cant be used (unless the dl contains nothing else than tags).

With an ul, it could look like this in Microdata:

<ul itemprop="keywords">
  <li><a href="/tags/foo" rel="tag">foo</a>,</li>
  <li><a href="/tags/bar" rel="tag">bar</a></li>
</ul>

If using a div, youd need to add another div/child so that the label "Tags:" gets not interpreted as tag itself:

<div>Tags: <span itemprop="keywords"><a href="/tags/foo" rel="tag">foo</a>, <a href="/tags/bar" rel="tag">bar</a></span></div>

Common Tag is a (RDF) vocabulary for tagging. In contrast to Schema.orgs keywords property it uses URIs for tags, not text only.

Example from their Quick Start Guide in RDFa:

<div xmlns:ctag="http://commontag.org/ns#" rel="ctag:tagged">
   NASA's <a typeof="ctag:Tag" 
             rel="ctag:means"
             href="http://rdf.freebase.com/ns/en.phoenix_mars_mission"
             property="ctag:label">Phoenix Mars Lander</a> has deployed its robotic arm. 
</div>
ctag:tagged
ctag:Tag
ctag:means
ctag:label

Instead of ctag:Tag you could use the class ctag:AuthorTag (which means that its tagged by the content author).

There is also the MOAT vocabulary, which stands for "Meaning Of A Tag". Unfortunately, their website seems to be gone (?).

An ontology that let users define relationships between Tag objects and URIs of Semantic Web resources

Thanks for the long article, while honestly it doesn't really provide much help. What I want to know is a semantically correct way to markup keywords, by using HTML5 and Microdata. I know the Microformats rel="tag" thing, yet both of it and RDF are not the main point at here. As mentioned in the question, the keywords property of Microdata is in plural form, so wouldn't it be weird to use it on a single word?

And if a Microdata property is used on an <a> or an <img> tag, then its values is sourced by the href or the src attribute. So your second example (the one using <span>) is the correct way to source text values.

@IanY.: I was under the impression that your last sentence ("Is there a common consensus on how the keywords of a blog post should be markuped by using HTML5 and Microdata?") refers to "keywords" in general. You are not restricted to use the schema.org vocabulary in Microdata, so I mentionend Common Tag and MOAT as you could use them instead of or in combination with the schema.org vocabulary.

@IanY: I updated the schema.org section regarding multiple keywords properties. I think you have to use multiple ones.

@IanY.: Well, yes, but the property name doesnt have any "meaning", so you should simply ignore that. There is a proposal to change some schema.org properties from plural to singular. However, for keywords it says that its "not grammatically plural".

schema.org - The correct approach to markup "keywords" of a blog post ...

html5 schema.org semantic-markup microdata
Rectangle 27 2

For embedding metadata, you could try using HTML microdata, but it's even more verbose than using class names.

<div itemscope>
    <p>My name is <span itemprop="name">Elizabeth</span>.</p>
</div>

<div itemscope>
    <p>My name is <span itemprop="name">Daniel</span>.</p>
</div>

Is there a way to create your own html tag in HTML5? - Stack Overflow

html5
Rectangle 27 2

For embedding metadata, you could try using HTML microdata, but it's even more verbose than using class names.

<div itemscope>
    <p>My name is <span itemprop="name">Elizabeth</span>.</p>
</div>

<div itemscope>
    <p>My name is <span itemprop="name">Daniel</span>.</p>
</div>

Is there a way to create your own html tag in HTML5? - Stack Overflow

html5
Rectangle 27 1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example page</title>
</head>
<body>
    <div itemscope="" itemtype="http://schema.org/MediaObject">
        <div itemprop="video" itemscope="" itemtype="http://schema.org/VideoObject">
           <meta itemprop="name" content="Breast Augmentation Video Diary">
           <meta itemprop="duration" content="PT12M54S">
           <meta itemprop="thumbnailUrl" content="http://www.plastic-surgery-estonia.com/new-assets/images/thumbnails/breast-augmentation.jpg">
           <meta itemprop="contentURL" content="http://www.youtube.com/watch?v=BwPN6eCpxTk">
           <meta itemprop="embedURL" content="http://www.youtube.com/watch?feature=player_embedded&amp;v=BwPN6eCpxTk">
           <meta itemprop="uploadDate" content="2010-11-09">
           <iframe src="http://www.youtube.com/embed/BwPN6eCpxTk?rel=0&amp;autohide=1&amp;modestbranding=1&amp;showinfo=0"></iframe>
           <span itemprop="description">Video Diary</span>
        </div>
   </div>
</body>
</html>

validation - Can I add Microdata from HTML5 to a XHTML Strict site and...

validation html5 breadcrumbs xhtml-1.0-strict microdata
Rectangle 27 4

Each category in a dd

I'd markup it up this way (without using any RDFa/microdata vocabularies or microformats; so only using what the plain HTML5 spec gives):

<ol start="1">

  <li id="1">
    <article>
     <h1><a href="url-to-the-page.html" rel="external">The Title of the Page</a></h1>
     <p>A short summary of the page</p>
     <footer>
       <dl>
         <dt>Categories</dt>
         <dd><a href="first-category.html">First category</a></dd>
         <dd><a href="second-category.html">Second category</a></dd>
         <dt>File size</dt>
         <dd>2 <abbr title="kilobyte">kB</code></dd>
         <dt>Published</dt>
         <dd><time datetime="2010-07-15T13:15:05-02:00">Today</time></dd>
        </dl>
      </footer>
    </article>
  </li>

  <li id="2">
    <article>
     
    </article>
  </li>

</ol>

If the search engine uses pagination, you should give the start attribute to the ol, so that each li reflects the correct ranking position.

Each li should get id atribute, so that you can link to it. The value should be the rank/position.

One could think that the id should be given to the article instead, but I think this would be wrong: the rank/order could change by time. You are not referring to a specific result but to a result position.

It is not needed if it contains only the heading (h1).

The link to each search result is an external link (leading to a different website), so it should get the rel value external.

The category links are not navigation in scope of the article. So remove the nav.

<dt>Categories</dt>
<dd>
 <ul>
  <li><a href="first-category.html">First category</a></li>
  <li><a href="second-category.html">Second category</a></li>
 </ul>
</dd>

Instead, you should list each category in its own dd and remove the ul:

<dt>Categories</dt>
<dd><a href="first-category.html">First category</a></dd>
<dd><a href="second-category.html">Second category</a></dd>

The unit in "2 kB" should be marked-up with abbr:

2 <abbr title="kilobyte">kB</code>

It's not in the spec anymore.

  • give hreflang attribute to the link if the linked result has a different language than the search engine
  • give lang attribute to the link description and the summary if it is in a different language than the search engine
  • summary: use blockquote (with cite attribute) instead of p, if the search engine does not create a summary itself but uses the meta-description or a snippet from the page.
  • title/link description: use q (with cite attribute) if the link description is exactly the title from the linked webpage

Marking up a search result list with HTML5 semantics - Stack Overflow

html5 search-engine semantic-markup
Rectangle 27 21

Using data-* attributes in the head

While your example may work, note that the keyword application-name is for Web applications only.

application-name

No need for a meta element.

<!DOCTYPE html>
<html>
<head
    data-details="52:AS6[rxSdsMd4RgYXJgeabsRAVBZ:0406139009]" 
    data-policyId="1234567890"
    data-partyId="0987654321"
    data-emailAddress="user@email.com"
    data-error="49"
    data-subsessionid="bffd5bc0-a03e-42e5-a531-50529dae57e3">
</head>

You could create a vocabulary, but thats not required for local use.

<!DOCTYPE html>
<html>
<head itemscope>
  <meta itemprop="details" content="52:AS6[rxSdsMd4RgYXJgeabsRAVBZ:0406139009]" />
  <meta itemprop="policyId" content="1234567890" />
  <meta itemprop="partyId" content="0987654321" />
  <link itemprop="emailAddress" href="mailto:user@email.com" /> <!-- or use a meta element if you dont want to provide a full URI with "mailto:" scheme -->
  <meta itemprop="error" content="49" />
  <meta itemprop="subsessionid" content="bffd5bc0-a03e-42e5-a531-50529dae57e3" />
</head>

The script element can be used for data blocks. You can choose any format that suits your needs. Example with plain text:

<!DOCTYPE html>
<html>
<head>
  <script type="text/plain">
    details = 52:AS6[rxSdsMd4RgYXJgeabsRAVBZ:0406139009]
    policyId = 1234567890
    partyId = 0987654321
    emailAddress = user@email.com
    error = 49
    subsessionid = bffd5bc0-a03e-42e5-a531-50529dae57e3
  </script>
</head>

When trying the <meta itemprop="key" content="value" /> method, do not forgot to set itemscope in the head tag. Otherwise it fails validation on the w3c validator stating "The itemprop attribute was specified, but the element is not a property of any item.". Took me some time to figure that one out!

html5 - Best practice for meta data in a html document? - Stack Overfl...

html html5 meta-tags w3c-validation
Rectangle 27 1

As Johnathon mentioned, the future really belongs to microdata format, because it's the part of the new HTML5. I highly recommend to use this format. I believe that this is the even rich snippet, which have you showed in your post. You can implement your event rich snippet like this:

<div itemscope itemtype="http://data-vocabulary.org/Event">
  <a href="http://www.example.com/events/spinaltap" itemprop="url" >
    <span itemprop="summary">Spinal Tap</span>
  </a>
   <img itemprop="photo" src="spinal_tap.jpg" />

  <span itemprop="description">After their highly-publicized search for a new drummer,
   Spinal Tap kicks off their latest comeback tour with a San
   Francisco show.</span>

  When:
  <time itemprop="startDate" datetime="2015-10-15T19:00-08:00">Oct 15, 7:00PM</time>
  <time itemprop="endDate" datetime="2015-10-15T19:00-08:00">Oct 15, 9:00PM</time>

  Where:
  <span itemprop="location" itemscope itemtype="http://data-vocabulary.org/Organization">
     <span itemprop="name">Warfield Theatre</span>
     <span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
         <span itemprop="street-address">982 Market St</span>, 
         <span itemprop="locality">San Francisco</span>, 
         <span itemprop="region">CA</span>
     </span>
     <span itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo">
        <meta itemprop="latitude" content="37.774929" />
        <meta itemprop="longitude" content="-122.419416" />
     </span>
  </span>

  Category: <span itemprop="eventType">Concert</span>
  <span itemprop="ticketAggregate" itemscope itemtype="http://data-vocabulary.org/Offer-aggregate"> 
    Tickets from $<span itemprop="lowPrice">10.00</span>-$<span itemprop="highPrice">11.00</span>
    <span itemprop="currency" content="USD" /> 
    <span itemprop="offerCount">2,000</span> tickets available
    <a href="http://www.example.com/events/spinaltap/alltickets" itemprop="offerurl">
      http://google.com/ticket</span>See all available tickets</a>
  </span>
  <span itemprop="tickets" itemscope itemtype="http://data-vocabulary.org/Offer"> 
    <a href="http://www.example.com/events/spinaltap/presale" itemprop="offerurl">Presale tickets</a> 
    <span itemprop="price">$10</span><span itemprop="currency" content="USD" /> 
      till <time itemprop="priceValidUntil" datetime="2015-11-10">10 November 2015</time> 
      (<span itemprop="quantity">1000</span> available)  
  </span> 
  <span itemprop="tickets" itemscope itemtype="http://data-vocabulary.org/Offer"> 
    <a href="http://www.example.com/events/spinaltap/tickets" itemprop="offerurl">Full-price tickets</a> 
    <span itemprop="price">$11</span><span itemprop="currency" content="USD" /> 
  </span>
</div>

html - Rich snippets in Google results - Stack Overflow

html seo rich-snippets
Rectangle 27 12

It's a little bit different in HTML5, but builds on the same concept. See:

Is there any tool like this vcardmaker.com to make the code with newer HTML5 standards?

Unfortunately, it's extra complicated because it's trying to support both the current hcard/vcard and future html5 methods. I don't know of any tool like that to use though, sorry :/

Keep in mind the new schema.org thing that all the major search engines have thrown in on. It utilizes HTML5 microdata exclusively and new vocabularies that bear some resemblance to microformats.org and data-vocabulary.org, but are also different and more extensive. Also see ablognotlimited.com for info and rlmo.me/n7zNU0 for bookmarks that include tools (no HTML5 ones that I know of right now).

css - Is Microformats vCard still a best semantic way to code "contact...

html css html5 semantic-markup
Rectangle 27 3

Here is the "conversion" form that I am using, if it helps. (The first couple of sites I forgot the html5 doc tag, and spent an hour trying to find out why it wasn't working, the document elements aren't recognized if the doc type is wrong, duh!)

<div itemscope itemtype="http://data-vocabulary.org/Organization"> 
    <h2 itemprop="name">Heading2</h2>
    TEXT text text

    <div itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
        <span itemprop="street-address">12345 test way </span>, 
        <span itemprop="locality">Testville</span>, 
        <span itemprop="region">TS</span> 
        <span itemprop="postal-code">00000</span>
    </div>
    <span itemprop="geo" itemscope itemtype="http://www.data-vocabulary.org/Geo/" style="display:none"><!Dont display in UI-->
        <span itemprop="latitude">11.1111 N</span>  
        <span itemprop="longitude">11.1111 W</span>  
    </span>  
    <p>Call us at:</p> 
    <span itemprop="tel">555-555-5555</span>
    <div>
        <a href="http://www.blahblahbla.com" itemprop="url"> http://www.blahblahbla.com</a>
    </div>
</div>

+1 for posting code instead of (now dead) links!

css - Is Microformats vCard still a best semantic way to code "contact...

html css html5 semantic-markup
Rectangle 27 14

W3C HTML5 validator maintainer here. As pointed out in another answer, in addition to checking requirements in the HTML5 spec itself, the validator also checks against requirements in the HTML+RDFa 1.1 spec:

And while the HTML spec itself says link is normally not allowed in the body, the RDFa spec says that if a link element has a property attribute, it is allowed in the body.

So that validator message is basically saying,The link element is only allowed here if it has a property attribute. But this particular link element doesn't have a property attribute.

The HTML spec itself does also say that the link element is allowed in the body if it has an itemprop attributebut only if the link element doesn't have a rel value. (itemprop is Microdata attribute whose purpose is basically the same as the RDFa property attribute).

So we have two different attributes that both independently affect where in a document the link element is allowed to appear, and that complicates the checking logic in the validator in a way that makes it difficult to emit a better, more helpful error message for this case.

html - Element link is missing required attribute property - Stack Ove...

html
Rectangle 27 9

According to the W3 specs, <link> tags are only supposed to go in the <head> section:

Back in 2013, if you put a link tag within the body of the HTML document, it would not validate using validate.w3.org with rules based on HTML 4.01.

On a first reading, the HTML 5.0 specification document seems to imply that link's should appear only in the head element of the document. However, if you validate using a HTML 5.0 validator, then the documents appears okay even if you have a link in the flow content.

The best explanation for this discrepancy may be as follows.

If you read the MDN documentation for the link entry (MDN Link entry), you see that if the link element has an itemprop attribute, then the link can appear in flow and phrasing content, thus, in the body.

This may be the reason why HTML 5.0 validators do not issue a warning even if the itemprop attribute is not present.

The itemprop is part of the microdata specification and is relatively new (read about HTML Microdata) and it is worth reading.

For the moment, one could add a link to a stylesheet within the body, but it is not clear what the advantages are.

@SebastianPatten I rarely validate HTML anymore, I just make sure open and close tags are matched. After a while, good and proper syntax becomes second nature.

@SebastianPatten - what's wrong with validate.w3.org? Sometimes it happens that you misplace some tags around(especially easy to do with dynamic websites) and the validator can easily point out such issues. Modern browsers for the most part seem to be pretty smart about such issues, but it doesn't hurt to have as valid of an HTML as possible :)

I don't see any validation errors for using <link> outside of <head>.

HTML & CSS - put tag outside of the - Stack Overflow

html css performance hyperlink head
Rectangle 27 1

I think you should make the number a link and in the href attribute put "tel:younumberhere"

on click trigger phone call in html - Stack Overflow

html
Rectangle 27 0

I don't think most of this is possible with the current status of microdata. One way round it would be to add the info in another place (i.e. first person at the end of a post, then second person hidden at end of page), which semantically is stupid, but would allow naive parsing to pick up both cards.

As I say though, I don't think there is a neat way to do this in the page at the moment.

darn, well i guess Iw ill stick of calling myself my fiancee's "friend" and hope people atleast make the connection that I'm involved in all that junk. i would love to find out some sort of naming convention or schema where u can get quite detailed I'm not willing to go through the confusion of separating everything up :P

It might be worth asking on the working group email list, I believe that it's public-html@w3.org.

awesome I think I'll clean up my questions a bit into better examples and give them an email :)

html5 - MicroData Headaches, Nesting, and Mixed up info - Stack Overfl...

html5 semantics semantic-web semantic-markup microdata
Rectangle 27 0

you should add a lang and hreflang attribute on the link, with an IETF language tag (bcp47) as the target value, see e.g. the links in wikipedia's article on water to the same item in other languages:

<a lang="de" hreflang="de" title="Wasser" href="//de.wikipedia.org/wiki/Wasser">Deutsch</a>

NB: the lang attribute is not link specific. it specifies the language of the content of the tag (wikipedia puts it also in the <html>- tag and on the <h1> header-tag.), while hreflang specifies the language of the page you are linking to.

html5 - What is the correct semantics for language switching navigatio...

html5 semantic-web semantic-markup nav microdata
Rectangle 27 0

You have to choose a page type, like for example http://schema.org/Blog and then add the article/blogposts http://schema.org/BlogPosting

Here is a very simple example:

<div itemscope itemtype="http://schema.org/Blog">
  ...
  <article  itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
    ...
  </article>

  <article  itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
    ...
  </article>
</div>

html - Microdata: moving from microformats to schema.org (example hAto...

html html5 microdata schema.org microformats
Rectangle 27 0

As Johnathon mentioned, the future really belongs to microdata format, because it's the part of the new HTML5. I highly recommend to use this format. I believe that this is the even rich snippet, which have you showed in your post. You can implement your event rich snippet like this:

<div itemscope itemtype="http://data-vocabulary.org/Event">
  <a href="http://www.example.com/events/spinaltap" itemprop="url" >
    <span itemprop="summary">Spinal Tap</span>
  </a>
   <img itemprop="photo" src="spinal_tap.jpg" />

  <span itemprop="description">After their highly-publicized search for a new drummer,
   Spinal Tap kicks off their latest comeback tour with a San
   Francisco show.</span>

  When:
  <time itemprop="startDate" datetime="2015-10-15T19:00-08:00">Oct 15, 7:00PM</time>
  <time itemprop="endDate" datetime="2015-10-15T19:00-08:00">Oct 15, 9:00PM</time>

  Where:
  <span itemprop="location" itemscope itemtype="http://data-vocabulary.org/Organization">
     <span itemprop="name">Warfield Theatre</span>
     <span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
         <span itemprop="street-address">982 Market St</span>, 
         <span itemprop="locality">San Francisco</span>, 
         <span itemprop="region">CA</span>
     </span>
     <span itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo">
        <meta itemprop="latitude" content="37.774929" />
        <meta itemprop="longitude" content="-122.419416" />
     </span>
  </span>

  Category: <span itemprop="eventType">Concert</span>
  <span itemprop="ticketAggregate" itemscope itemtype="http://data-vocabulary.org/Offer-aggregate"> 
    Tickets from $<span itemprop="lowPrice">10.00</span>-$<span itemprop="highPrice">11.00</span>
    <span itemprop="currency" content="USD" /> 
    <span itemprop="offerCount">2,000</span> tickets available
    <a href="http://www.example.com/events/spinaltap/alltickets" itemprop="offerurl">
      http://google.com/ticket</span>See all available tickets</a>
  </span>
  <span itemprop="tickets" itemscope itemtype="http://data-vocabulary.org/Offer"> 
    <a href="http://www.example.com/events/spinaltap/presale" itemprop="offerurl">Presale tickets</a> 
    <span itemprop="price">$10</span><span itemprop="currency" content="USD" /> 
      till <time itemprop="priceValidUntil" datetime="2015-11-10">10 November 2015</time> 
      (<span itemprop="quantity">1000</span> available)  
  </span> 
  <span itemprop="tickets" itemscope itemtype="http://data-vocabulary.org/Offer"> 
    <a href="http://www.example.com/events/spinaltap/tickets" itemprop="offerurl">Full-price tickets</a> 
    <span itemprop="price">$11</span><span itemprop="currency" content="USD" /> 
  </span>
</div>

html - Rich snippets in Google results - Stack Overflow

html seo rich-snippets
Rectangle 27 0

There seems to be a good deal of momentum behind the JobPosting microformat. It's part of schema.org.

microformats - Which HTML5 microdata do I use for a job (vacancy)? - S...

html5 microformats microdata