In English, this says: “Here is the 
photo
property of the 
http://data-vocabulary.org/
Person
vocabulary. The value of the property is 
http://www.example.com/photo.jpg
.”
Finally, the 
url
property is also a URL. According to Table 10-1, the “value” of an
<a>
element is its 
href
attribute. And once again, this fits perfectly with your existing
markup. All you need to do is say that your existing 
<a>
element is the 
url
property:
<a itemprop="url" href="http://diveintomark.org/">dive into mark</a>
In English, this says: “Here is the 
url
property of the 
http://data-vocabulary.org/
Person
vocabulary. The value of the property is 
http://diveintomark.org/
.”
Of course, if your markup looks a little different, that’s not a problem. You can add
microdata properties and values to any HTML markup, even really gnarly 20th
century era,  tables-for-layout, oh-God-why-did-I-agree-to-maintain-this  markup.
While I don’t recommend this kind of markup, it is still very common, and you can
still add microdata to it:
<TABLE>
<TR><TD>Name<TD>Mark Pilgrim
<TR><TD>Link<TD>
<A href=# onclick=goExternalLink()>http://diveintomark.org/</A>
</TABLE>
To mark up the 
name
property, just add an 
itemprop
attribute on the table cell that
contains the name. Table cells have no special rules in the microdata property value
table, so they get the default value, where the microdata property is the text content:
<TR><TD>Name<TD itemprop="name">Mark Pilgrim
Adding the 
url
property looks trickier. This markup doesn’t use the 
<a>
element prop-
erly. Instead of putting the link target in the 
href
attribute, it has nothing useful in the
href
attribute and it uses JavaScript in the 
onclick
attribute to call a function (not
shown) that extracts the URL and navigates to it. For extra “oh crap, please stop doing
that” bonus points, let’s pretend that the function also opens the link in a tiny pop-up
window with no scroll bars. Wasn’t the Internet fun last century?
Anyway, you can still convert this into a microdata property; you just need to be a little
creative. Using the 
<a>
element directly is out of the question. The link target isn’t in
the 
href
attribute, and there’s no way to override the rule that says “in an 
<a>
element,
look for the microdata property value in the 
href
attribute.” But you can add a wrapper
element around the entire mess, and use that to add the 
url
microdata property:
<TABLE itemscope itemtype="http://data-vocabulary.org/Person">
<TR><TD>Name<TD>Mark Pilgrim
<TR><TD>Link<TD>
<span itemprop="url">
<A href=# onclick=goExternalLink()>http://diveintomark.org/</A>
</span>
</TABLE>
The Microdata Data Model | 167
Download from Library of Wow! eBook <www.wowebook.com>
Pdf email link - insert, remove PDF links in C#.net, ASP.NET, MVC, Ajax, WinForms, WPF
Free C# example code is offered for users to edit PDF document hyperlink (url), like inserting and deleting
adding links to pdf in preview; add page number to pdf hyperlink
Pdf email link - VB.NET PDF url edit library: insert, remove PDF links in vb.net, ASP.NET, MVC, Ajax, WinForms, WPF
Help to Insert a Hyperlink to Specified PDF Document Page
pdf hyperlink; chrome pdf from link
Because the 
<span>
element has no special processing, it uses the default rule, “the
microdata property is the text content.” “Text content” doesn’t mean “all the markup
inside this element” (like you would get with, say, the 
innerHTML
DOM property). It
means “just the text, ma’am.” In this case, 
http://diveintomark.org/
is the text content
of the 
<a>
element inside the 
<span>
element.
To sum up: you can add microdata properties to any markup. You’ll find it easier to
add microdata if you’re using HTML correctly than if your HTML markup sucks, but
it can always be done.
Marking Up People
The starter examples in the previous section weren’t completely made up. There really
is a microdata vocabulary for marking up information about people, and it really is that
easy. Let’s take a closer look.
The easiest way to integrate microdata into a personal website is on your “about” page.
You do have an “about” page, don’t you? If not, you can follow along as I extend this
sample “about” page with additional semantics. The final result is here: http://divein
tohtml5.org/examples/person-plus-microdata.html.
Let’s look at the raw markup first, before any microdata properties have been added:
<section>
<img width="204" height="250"
src="http://diveintohtml5.org/examples/2000_05_mark.jpg"
alt="[Mark Pilgrim, circa 2000]">
<h1>Contact Information</h1>
<dl>
<dt>Name</dt>
<dd>Mark Pilgrim</dd>
<dt>Position</dt>
<dd>Developer advocate for Google, Inc.</dd>
<dt>Mailing address</dt>
<dd>
100 Main Street<br>
Anytown, PA 19999<br>
USA
</dd>
</dl>
<h1>My Digital Footprints</h1>
<ul>
<li><a href="http://diveintomark.org/">weblog</a></li>
<li><a href="http://www.google.com/profiles/pilgrim">Google profile</a></li>
<li><a href="http://www.reddit.com/user/MarkPilgrim">Reddit.com profile</a></li>
<li><a href="http://www.twitter.com/diveintomark">Twitter</a></li>
</ul>
</section>    
168 | Chapter 10: “Distributed,” “Extensibility,” and Other Fancy Words
Download from Library of Wow! eBook <www.wowebook.com>
RasterEdge.com General FAQs for Products
copy and email the secure download link to the assistance, please contact us via email (support@rasteredge & profession imaging controls, PDF document, image to
change link in pdf; clickable links in pdf files
RasterEdge Product Licensing Discount
s). After confirming the informations provided, we will send you an email that contains price(s) at a discount and the online order link for new licensing.
pdf edit hyperlink; pdf link to email
The first thing you always need to do is declare the vocabulary you’re using and the
scope of the properties you want to add. You do this by adding the 
itemtype
and
itemscope
attributes on the outermost element that contains the other elements that
contain the actual data. In this case, that’s a 
<section>
element:
<section itemscope itemtype="http://data-vocabulary.org/Person">
You can follow along online with the changes made throughout this
section. Before: http://diveintohtml5.org/examples/person.html; after:
http://diveintohtml5.org/examples/person-plus-microdata.html.
Now you can start defining microdata properties from the 
http://data-vocabu
lary.org/Person
vocabulary. But what are those properties? As it happens, you can see
the list of properties by navigating to http://data-vocabulary.org/Person. The microdata
specification does not require this, but I’d say it’s certainly a “best practice.” After all,
if you want developers to actually use your microdata vocabulary, you need to docu-
ment it. And where better to put your documentation than the vocabulary URL itself?
Table 10-2 lists the properties of the Person vocabulary.
Table 10-2. Person vocabulary
Property
Description
name
Name
nickname
Nickname
photo
An image link
title
The person’s title (for example, “Financial Manager”)
role
The person’s role (for example, “Accountant”)
url
Link to a web page, such as the person’s home page
affiliation
The name of an organization with which the person is associated (for example, an employer)
friend
Identifies a social relationship between the person described and another person
contact
Identifies a social relationship between the person described and another person
acquaintance
Identifies a social relationship between the person described and another person
address
The location of the person (can have the subproperties 
street-address
locality
region
,
postal-code
, and 
country-name
)
The first thing in this sample “about” page is a picture of me. Naturally, it’s marked
up with an 
<img>
element. To declare that this 
<img>
element is my profile picture, all
we need to do is add 
itemprop="photo"
to it:
<img itemprop="photo" width="204" height="250"
src="http://diveintohtml5.org/examples/2000_05_mark.jpg"
alt="[Mark Pilgrim, circa 2000]">
Marking Up People | 169
Download from Library of Wow! eBook <www.wowebook.com>
RasterEdge Product Renewal and Update
4. Order email. Our support team will send you the purchase link. HTML5 Viewer for .NET; XDoc.Windows Viewer for .NET; XDoc.Converter for .NET; XDoc.PDF for .NET;
adding links to pdf; add a link to a pdf
VB.NET Create PDF from PowerPoint Library to convert pptx, ppt to
Link: Edit URL. Bookmark: Edit Bookmark. Metadata: Edit, Delete Metadata. Form Process. Create PDF file from PowerPoint free online without email.
adding links to pdf document; add links to pdf online
Where’s the microdata property value? It’s already there, in the 
src
attribute. If you
recall from Table 10-1, the “value” of an 
<img>
element is its 
src
attribute. Every
<img>
element has a 
src
attribute—otherwise it would just be a broken image—and the
src
is always a URL. See? If you’re using HTML correctly, microdata is easy.
Furthermore, this 
<img>
element isn’t alone on the page. It’s a child element of the
<section>
element, the one we just declared with the 
itemscope
attribute. Microdata
reuses the parent-child relationships of elements on the page to define the scoping of
microdata properties. In plain English, we’re saying: “This 
<section>
element repre-
sents a person. Any microdata properties you might find on the children of
the 
<section>
element are properties of that person.” If it helps, you can think of the
<section>
element as the subject of a sentence. The 
itemprop
attribute represents the
verb of the sentence—something like “is pictured at”—and the microdata property
value represents the object of the sentence:
This person [explicit, from 
<section itemscope itemtype="...">
]
is pictured at [explicit, from 
<img itemprop="photo">
]
http://diveintohtml5.org/examples/2000_05_mark.jpg
[implicit,  from 
<img  src>
attribute]
The subject only needs to be defined once, by putting 
itemscope
and 
itemtype
attributes on the outermost 
<section>
element. The verb is defined by putting the
itemprop="photo"
attribute on the 
<img>
element. The object of the sentence doesn’t
need any special markup at all, because Table 10-1 says that the property value of an
<img>
element is its 
src
attribute.
Moving on to the next bit of markup, we see an 
<h1>
header and the beginnings of a
<dl>
list. Neither the 
<h1>
nor the 
<dl>
needs to be marked up with microdata. Not
every piece of HTML needs to be a microdata property. Microdata is about the prop-
erties themselves, not the markup or headers surrounding the properties. This 
<h1>
isn’t a property; it’s just a header. Similarly, the 
<dt>
that says “Name” is just a label,
not a property:
<h1>Contact Information</h1>
<dl>
<dt>Name</dt>   
<dd>Mark Pilgrim</dd>
So where is the real information? It’s in the 
<dd>
element, so that’s where we need to
put the 
itemprop
attribute. Which property is it? It’s the 
name
property. Where is the
property value? It’s the text within the 
<dd>
element. Does that need to be marked up?
Table 10-1 says no, 
<dd>
elements have no special processing, so the property value is
just the text within the element:
<dd itemprop="name">Mark Pilgrim</dd>
What did we just say, in English? “This person’s name is Mark Pilgrim.” Well OK then.
Onward.
170 | Chapter 10: “Distributed,” “Extensibility,” and Other Fancy Words
Download from Library of Wow! eBook <www.wowebook.com>
VB.NET Create PDF from Word Library to convert docx, doc to PDF in
Link: Edit URL. Bookmark: Edit Bookmark. Metadata: Edit, Delete Metadata. Form Process. Free online Word to PDF converter without email.
adding a link to a pdf in preview; adding hyperlinks to pdf documents
VB.NET Create PDF from Excel Library to convert xlsx, xls to PDF
Link: Edit URL. Bookmark: Edit Bookmark. Metadata: Edit, Delete Metadata. Form Process. Convert Excel to PDF document free online without email.
pdf hyperlinks; clickable pdf links
The next two properties are a little tricky. This is the markup, pre-microdata:
<dt>Position</dt>
<dd>Developer advocate for Google, Inc.</dd>
If you look at the definition of the Person vocabulary, the text “Developer advocate for
Google, Inc.” actually encompasses two properties: 
title
(“Developer advocate”) and
affiliation
(“Google, Inc.”). How can you express that in microdata? The short answer
is, you can’t. Microdata doesn’t have a way to break up runs of text into separate
properties. You can’t say “the first 18 characters of this text are one microdata property,
and the last 12 characters of this text are another microdata property.”
But all is not lost. Imagine that you wanted to style the text “Developer advocate” in a
different font from the text “Google, Inc.” CSS can’t do that either. So what would you
do? You would first need to wrap the different bits of text in dummy elements, like
<span>
, then apply different CSS rules to each 
<span>
element.
This technique is also useful for microdata. There are two distinct pieces of information
here: a 
title
and an 
affiliation
. If you wrap each piece in a dummy 
<span>
element,
you can declare that each 
<span>
is a separate microdata property:
<dt>Position</dt>
<dd><span itemprop="title">Developer advocate</span> for
<span itemprop="affiliation">Google, Inc.<span></dd>
Ta-da! In English, this says: “This person’s title is ‘Developer advocate.’ This person is
employed by Google, Inc.” Two sentences, two microdata properties. A little more
markup, but a worthwhile tradeoff.
The same technique is useful for marking up street addresses. The Person vocabulary
defines an 
address
property, which itself is a microdata item. That means the address
has its own vocabulary (http://data-vocabulary.org/Address) and defines its own prop-
erties: 
street-address
locality
region
postal-code
, and 
country-name
.
If you’re a programmer, you are probably familiar with dot notation to define objects
and their properties. Think of the relationship like this:
Person
Person.address
Person.address.street-address
Person.address.locality
Person.address.region
Person.address.postal-code
Person.address.country-name
In this example, the entire street address is contained in a single 
<dd>
element. (Once
again, the 
<dt>
element is just a label, so it plays no role in adding semantics with
Marking Up People | 171
Download from Library of Wow! eBook <www.wowebook.com>
VB.NET PDF Convert to Word SDK: Convert PDF to Word library in vb.
Create editable Word file online without email. Supports transfer from password protected PDF. VB.NET class source code for .NET framework.
adding hyperlinks to pdf; clickable pdf links
C# PDF Convert to Word SDK: Convert PDF to Word library in C#.net
and .docx. Create editable Word file online without email. Password protected PDF file can be printed to Word for mail merge. C# source
add hyperlink in pdf; pdf reader link
microdata.) Notating the 
address
property is easy. Just add an 
itemprop
attribute on
the 
<dd>
element:
<dt>Mailing address</dt>
<dd itemprop="address">
But remember, the 
address
property is itself a microdata item. That means we need to
add the 
itemscope
and 
itemtype
attributes too:
<dt>Mailing address</dt>
<dd itemprop="address" itemscope
itemtype="http://data-vocabulary.org/Address">
We’ve seen all of this before, but only for top-level items. A 
<section>
element defines
itemtype
and 
itemscope
, and all the elements within the 
<section>
element that define
microdata properties are “scoped” within that specific vocabulary. But this is the first
time we’ve seen nested scopes—defining a new 
itemtype
and 
itemscope
(on the 
<dd>
element) within an existing one (on the 
<section>
element). This nested scope works
exactly like the HTML DOM. The 
<dd>
element has a certain number of child elements,
all of which are scoped to the vocabulary defined on the 
<dd>
element. Once the 
<dd>
element is closed with a corresponding 
</dd>
tag, the scope reverts to the vocabulary
defined by the parent element (
<section>
, in this case).
The properties of the Address vocabulary suffer the same problem we encountered with
the 
title
and 
affiliation
properties. There’s just one long run of text, but we want to
break it up into several separate microdata properties. The solution is the same. We
wrap each distinct piece of information in a dummy 
<span>
element, then declare mi-
crodata properties on each 
<span>
element:
<dd itemprop="address" itemscope
itemtype="http://data-vocabulary.org/Address">
<span itemprop="street-address">100 Main Street</span><br>
<span itemprop="locality">Anytown</span>,
<span itemprop="region">PA</span>
<span itemprop="postal-code">19999</span>
<span itemprop="country-name">USA</span>
</dd>
</dl>
In English: “This person has a mailing address. The street address part of the mailing
address is ‘100 Main Street.’ The locality part is ‘Anytown.’ The region is ‘PA.’ The
postal code is ‘19999.’ The country name is ‘USA.’” Easy peasy.
Ask Professor Markup
Q: Is this mailing address format U.S.-specific?
A: No. The properties of the Address vocabulary are generic enough that they can
describe most mailing addresses in the world. Not all addresses will have values for
every property, but that’s OK. Some addresses might require fitting more than one
“line” into a single property, but that’s OK too. For example, if your mailing address
172 | Chapter 10: “Distributed,” “Extensibility,” and Other Fancy Words
Download from Library of Wow! eBook <www.wowebook.com>
C# Create PDF from Excel Library to convert xlsx, xls to PDF in C#
Export PDF from Excel with cell border or no border. Free online Excel to PDF converter without email. Quick integrate online C# source code into .NET class.
add links to pdf document; add email link to pdf
C# Create PDF from PowerPoint Library to convert pptx, ppt to PDF
application. Free online PowerPoint to PDF converter without email. C# source code is provided for .NET WinForms class. Evaluation
add links to pdf; adding links to pdf
has a street address and a suite number, they would both go into the 
street-address
subproperty:
<p itemprop="address" itemscope
itemtype="http://data-vocabulary.org/Address">
<span itemprop="street-address">
100 Main Street
Suite 415
</span>
...
</p>
There’s one more thing on this sample “about” page: a list of URLs. The Person vo-
cabulary has a property for this, called 
url
. A 
url
property can be anything, really.
(Well, it has to be a URL, but you probably guessed that.) What I mean is that the
definition of the 
url
property is very loose. The property can be any sort of URL that
you want to associate with a Person: a blog, a photo gallery, or a profile on another site
like Facebook or Twitter.
The other important thing to note here is that a single Person can have multiple 
url
properties. Technically, any property can appear more than once, but until now, we
haven’t taken advantage of that. For example, you could have two 
photo
properties,
each pointing to a different image URL. Here, I want to list four different URLs: my
weblog, my Google profile page, my user profile on Reddit, and my Twitter account.
In HTML, that’s a list of links: four 
<a>
elements, each in its own 
<li>
element. In
microdata, each 
<a>
element gets an 
itemprop="url"
attribute:
<h1>My Digital Footprints</h1>
<ul>
<li><a href="http://diveintomark.org/"
itemprop="url">weblog</a></li>
<li><a href="http://www.google.com/profiles/pilgrim"
itemprop="url">Google profile</a></li>
<li><a href="http://www.reddit.com/user/MarkPilgrim"
itemprop="url">Reddit.com profile</a></li>
<li><a href="http://www.twitter.com/diveintomark"
itemprop="url">Twitter</a></li>
</ul>
According to Table 10-1, 
<a>
elements have special processing. The microdata property
value is the 
href
attribute, not the child text content. The text of each link is actually
ignored by a microdata processor. Thus, in English, this says: “This person has a URL
at http://diveintomark.org/. This person has another URL at http://www.google.com/
profiles/pilgrim. This person has another URL at http://www.reddit.com/user/MarkPil-
grim. This person has another URL at http://www.twitter.com/diveintomark.”
Marking Up People | 173
Download from Library of Wow! eBook <www.wowebook.com>
Introducing Google Rich Snippets
I want to step back for just a moment and ask, “Why are we doing this?” Are we adding
semantics just for the sake of adding semantics? Don’t get me wrong; I enjoy fiddling
with angle brackets as much as the next webhead. But why microdata? Why bother?
There are two major classes of applications that consume HTML and, by extension,
HTML5 microdata:
• Web browsers
• Search engines
For browsers, HTML5 defines a set of DOM APIs for extracting microdata items,
properties, and property values from a web page. As I write this, no browser supports
this API. Not a single one. So that’s...kind of a dead end, at least until browsers catch
up and implement the client-side APIs.
The other major consumer of HTML is search engines. What could a search engine do
with microdata properties about a person? Imagine this: instead of simply displaying
the page title and an excerpt of text, the search engine could integrate some of that
structured information and display it. Full name, job title, employer, address, maybe
even a little thumbnail of a profile photo. Would that catch your attention? It would
catch mine.
Google supports microdata as part of its Rich Snippets program. When Google’s
web crawler parses your page and finds microdata properties that conform to the
http://data-vocabulary.org/Person
vocabulary, it parses out those properties and
stores them alongside the rest of the page data. Google even provides a handy tool that
shows how Google “sees” your microdata properties. Testing it against our sample
microdata-enabled “about” page yields this output:
Item
Type: http://data-vocabulary.org/person
photo = http://diveintohtml5.org/examples/2000_05_mark.jpg
name = Mark Pilgrim
title = Developer advocate
affiliation = Google, Inc.
address = Item( 1 )
url = http://diveintomark.org/
url = http://www.google.com/profiles/pilgrim
url = http://www.reddit.com/user/MarkPilgrim
url = http://www.twitter.com/diveintomark
Item 1
Type: http://data-vocabulary.org/address
street-address = 100 Main Street
locality = Anytown
region = PA
postal-code = 19999
country-name = USA
174 | Chapter 10: “Distributed,” “Extensibility,” and Other Fancy Words
Download from Library of Wow! eBook <www.wowebook.com>
It’s all there: the 
photo
property from the 
<img src>
attribute, all four URLs from the
list of 
<a href>
attributes, and even the address object (listed as “Item 1”) and all five
of its subproperties.
And how does Google use all of this information? That depends. There are no hard-
and-fast rules about how microdata properties should be displayed, which ones should
be displayed, or whether they should be displayed at all. If someone searches for “Mark
Pilgrim,” and Google determines that this “about” page should rank in the results,
and Google decides that the microdata properties it originally found on that page are
worth displaying, the search result listing might look something like Figure 10-1.
Figure 10-1. Sample search result for a microdata-enhanced Person listing
The first line, “About Mark Pilgrim,” is actually the title of the page, given in the
<title>
element. That’s not terribly exciting; Google does that for every page. But the
second line is full of information taken directly from the microdata annotations we
added to the page. “Anytown PA” was part of the mailing address, marked up with the
http://data-vocabulary.org/Address
vocabulary. “Developer advocate” and “Google,
Inc.” were two properties from the 
http://data-vocabulary.org/Person
vocabulary
(
title
and 
affiliation
, respectively).
This is really quite amazing. You don’t need to be a large corporation making special
deals with search engine vendors to customize your search result listings. Just take 10
minutes and add a couple of HTML attributes to annotate the data you were already
publishing anyway.
Ask Professor Markup
Q: I did everything you said, but my Google search result listing doesn’t look any different.
What gives?
A: “Google does not guarantee that markup on any given page or site will be used in
search 
results” 
(http://www.google.com/support/webmasters/bin/answer.py?
hl=en&answer=99170). But even if Google decides not to use your microdata annota-
tions, another search engine might. Like the rest of HTML5, microdata is an open
standard that anyone can implement. It’s your job to provide as much data as possible.
Let the rest of the world decide what to do with it. They might surprise you!
Marking Up People | 175
Download from Library of Wow! eBook <www.wowebook.com>
Marking Up Organizations
Microdata isn’t limited to a single vocabulary. “About” pages are nice, but you probably
only have one of them. Still hungry for more? Let’s learn how to mark up organizations
and businesses.
I’ve created a sample page of business listings. Let’s look at the original HTML markup,
without microdata:
<article>
<h1>Google, Inc.</h1>
<p>
1600 Amphitheatre Parkway<br>
Mountain View, CA 94043<br>
USA
</p>
<p>650-253-0000</p>
<p><a href="http://www.google.com/">Google.com</a></p>
</article>
You can follow along online with the changes made throughout this
section.  Before: http://diveintohtml5.org/examples/organization.html;
after: http://diveintohtml5.org/examples/organization-plus-microdata
.html.
Short and sweet. All the information about the organization is contained within the
<article>
element, so let’s start there:
<article itemscope itemtype="http://data-vocabulary.org/Organization">
As with marking up people, you need to set the 
itemscope
and 
itemtype
attributes on
the outermost element. In this case, the outermost element is an 
<article>
element.
The 
itemtype
attribute declares the microdata vocabulary you’re using (in this case,
http://data-vocabulary.org/Organization), and the 
itemscope
attribute declares that all
of the properties you set on child elements relate to this vocabulary.
So what’s in the Organization vocabulary? It’s very simple and straightforward. In fact,
some of it should already look familiar. Table 10-3 lists the relevant properties.
Table 10-3. Organization vocabulary
Property
Description
name
The name of the organization (for example, “Initech”).
url
A link to the organization’s home page.
address
The location of the organization. Can contain the subproperties 
street-address
locality
region
,
postal-code
, and 
country-name
.
tel
The telephone number of the organization.
geo
The geographical coordinates of the location. Always contains two subproperties, 
latitude
and 
longitude
.
176 | Chapter 10: “Distributed,” “Extensibility,” and Other Fancy Words
Download from Library of Wow! eBook <www.wowebook.com>
Documents you may be interested
Documents you may be interested