selectpdf c# : Bookmark pdf documents control SDK platform web page wpf azure web browser dive_into_html522-part1537

add a couple of HTML aributes to annotate the data you were already publishing anyway.
ASK PROFESSOR MARKUP
ASK PROFESSOR MARKUP
Q: I did everything you said, but my Google
sear 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 sear
results.” But even if Google decides not to use
your microdata annotations, another sear
engine might. Like the rest of HTML5,
microdata is an open standard that anyone can
implement. It’s your job to provide as mu
data as possible. Let the rest of the world
decide what to do with it. ey might surprise
you!
MARKING UP ORGANIZATIONS
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.
Here is a sample page of business listings. Let’s look at the original HTML markup, without
microdata.
< a r t t i i c l e e >
diveintohtml5.org
“DISTRIBUTED,” “EXTENSIBILITY,” & OTHER FANCY WORDS
Bookmark pdf documents - add, remove, update PDF bookmarks in C#.net, ASP.NET, MVC, Ajax, WinForms, WPF
Empower Your C# Project with Rapid PDF Internal Navigation Via Bookmark and Outline
auto bookmark pdf; export pdf bookmarks to excel
Bookmark pdf documents - VB.NET PDF bookmark library: add, remove, update PDF bookmarks in vb.net, ASP.NET, MVC, Ajax, WinForms, WPF
Empower Your VB.NET Project with Rapid PDF Internal Navigation Via Bookmark and Outline
copy bookmarks from one pdf to another; bookmark pdf documents
< h 1 > > G o o o g g l l e , I n n c . . < < / h 1 1 >
< p >
1 600 Am m p p h h i t h h e e a t r r e  P P a a r r k wa y y < < b r >
M o u n n t t a i n  Vi i e e w, CA 94043< < b b r r >
USA
< / p >
< p > 650- 253- 0000< < / / p >
< p > < < a  h h r r e e f = " h h t t p p : : / / www. g o o o o g l e e . . c o m m / / "> G o o o g l l e e . c o o m m < / a a > > < / p p >
< / a r r t t i c l l e e >
[Follow along! Before: 
organization.html, aer: 
organization-plus-microdata.html]
Short and sweet. All the information about the organization is contained within the
< a r t t i i c l e e >
element, so let’s start there.
< a r t t i i c l e  
i t e e m m s c o o p p e  
i t t e m t t y y p e = "h h t t t p p : / / d d a a t a - - v v o c a a b b u l a a r r y . o o r r g / Or g a n n i i za t i i o o n "
>
As with 
marking up people, you need to set the 
i t t e m s s c c o p e
and 
i t e m m t t y p e
aributes on the
outermost element. In this case, the outermost element is an 
< a r t i i c c l e >
element. e
i t e m m t t y p e
aribute declares the microdata vocabulary you’re using (in this case,
h t t p p : : / / d d a a t a - - v v o c a a b b u l a a r r y . o r r g g / Or r g g a n i i za a t i i o o n
), and the 
i t e e m m s c o o p p e
aribute declares
that all of the properties you set on ild elements relate to this vocabulary.
So what’s in the Organization vocabulary? It’s simple and straightforward. In fact, some of it
should already look familiar.
ORGANIZATION VOCABULARY
ORGANIZATION VOCABULARY
Property Description
n a m m e
e name of the organization (for example, “Inite”)
u r l
Link to the organization’s home page
a d d d r r e s s
e location of the organization. Can contain the subproperties 
s t t r r e e t t - - a d d r r e e s s
,
l o c a a l l i t y
r e g g i i o n
p o s t t a a l - c o o d d e
, and 
c o o u u n t r r y y - n a a m m e
.
t e l
e telephone number of the organization
g e o
Specifies the geographical coordinates of the location. Always contains two
subproperties, 
l a a t i t u u d d e
and 
l o o n n g i t t u u d e
.
diveintohtml5.org
“DISTRIBUTED,” “EXTENSIBILITY,” & OTHER FANCY WORDS
C# PDF Print Library: Print PDF documents in C#.net, ASP.NET
view, Annotate,Convert documents online using ASPX. extract, copy, paste, C#.NET rotate PDF pages, C#.NET search text in PDF, C#.NET edit PDF bookmark, C#.NET
how to bookmark a pdf file in acrobat; bookmark pdf acrobat
VB.NET PDF Print Library: Print PDF documents in vb.net, ASP.NET
view, Annotate,Convert documents online using ASPX. extract, copy, paste, C#.NET rotate PDF pages, C#.NET search text in PDF, C#.NET edit PDF bookmark, C#.NET
create bookmarks in pdf from excel; export excel to pdf with bookmarks
e first bit of markup within the outermost 
< a r r t t i c l l e e >
element is an 
< h 1 >
. is 
< h 1 1 >
element contains the name of a business, so we’ll put an 
i t e e m m p r o o p p = "n n a a m e "
aribute
directly on the 
< h h 1 >
element.
< h 1  
i t e m m p p r o p p = "n n a a m m e " > > G o o o g g l l e , I n n c . < < / / h 1 >
[Follow along! Before: 
organization.html, aer: 
organization-plus-microdata.html]
According to the 
HTML5 microdata data model
< h h 1 >
elements don’t need any special
processing. e microdata property value is simply the text content of the 
< h 1 1 >
element. In
English, we just said “the name of the Organization is 'Google, Inc.'”
Next up is a street address. Marking up the address of an Organization works exactly the
same way as 
marking up the address of a Person. First, add an 
i t t e e m p r r o o p = " a a d d r e e s s s "
aribute to the outermost element of the street address (in this case, a 
< p p >
element). at
states that this is the 
a d d d r e e s s s
property of the Organization. But what about the properties of
the address itself? We also need to define the 
i t e e m m t y p p e
and 
i t e m m s s c o p p e
aributes to say
that this is an Address item that has its own properties.
< p  
i t t e m p p r r o p = "a a d d d r r e s s s "  
i t t e e m s c c o o p e
i t e m m t t y p e e = "h h t t t t p : / / / / d a t t a a - v o o c c a b u l l a a r y . . o o r g / / Ad d d r r e e s s " >
[Follow along! Before: 
organization.html, aer: 
organization-plus-microdata.html]
Finally, we need to wrap ea distinct piece of information in a dummy 
< s p a a n n >
element so
we can add the appropriate microdata property name (
s t t r e e e t t - a d d d d r e s s
l o c c a a l i t t y
,
r e g i i o o n
p o o s t a a l l - c o o d d e
, and 
c o o u u n t r r y y - n a m m e
) on ea 
< s p a a n n >
element.
< p  i i t t e m p p r r o p = "a a d d d r r e s s s " i i t e e m m s c o o p p e
i t e m m t t y p e e = "h h t t t t p : / / / / d a t t a a - v o c c a a b u l l a a r y . . o o r g / / Ad d d r r e e s s " >
< s p a a n  
i t t e e m p r r o o p = " s s t r e e e e t - a a d d d r e s s s s " > > 1 1 600 Am m p h h i i t h e e a a t r e  P P a r r k k wa y y < < / s p a a n n > < b b r r >
< s p a a n  
i t t e e m p r r o o p = " l l o c a a l l i t y y " > > M o o u u n t a i i n  Vi i e e w< / / s s p a n n > > ,
< s p a a n  
i t t e e m p r r o o p = " r r e g i i o o n " > > CA< < / / s s p a n >
< s p a a n  
i t t e e m p r r o o p = " p p o s t t a a l - c c o o d e " > > 94043< / s s p p a n > > < < b r >
< s p a a n  
i t t e e m p r r o o p = " c c o u n n t t r y - - n n a m e " > > USA < < / s p p a a n >
< / p >
diveintohtml5.org
“DISTRIBUTED,” “EXTENSIBILITY,” & OTHER FANCY WORDS
VB.NET PDF File Merge Library: Merge, append PDF files in vb.net
VB.NET Guide and Sample Codes to Merge PDF Documents in VB.NET Project. Batch merge PDF documents in Visual Basic .NET class program.
convert word to pdf with bookmarks; creating bookmarks in pdf documents
C# PDF Library SDK to view, edit, convert, process PDF file for C#
quality PDF conversions to or from multiple supported images and documents. for editing PDF document hyperlink (url) and quick navigation link in PDF bookmark.
pdf reader with bookmarks; bookmarks in pdf reader
[Follow along! Before: 
organization.html, aer: 
organization-plus-microdata.html]
In English, we just said “is organization has an address. e street address part is '1600
Amphitheatre Parkway'. e locality is 'Mountain View'. e region part is 'CA'. e postal
code is '94043'. e name of the country is 'USA'.”
Next up: a telephone number for the Organization. Telephone numbers are notoriously triy,
and the exact syntax is country-specific. (And if you want to call another country, it’s even
worse.) In this example, we have a United States telephone number, in a format suitable for
calling from elsewhere in the United States.
< p  
i t t e m p p r r o p = "t t e l l " > > 650- 253- 0000< / p p >
[Follow along! Before: 
organization.html, aer: 
organization-plus-microdata.html]
(Hey, in case you didn’t notice, the Address vocabulary went out of scope when its 
< p >
element was closed. Now we’re ba to defining properties in the Organization vocabulary.)
If you want to list more than one telephone number — maybe one for United States
customers and one for international customers — you can do that. Any microdata property can
be repeated. Just make sure ea telephone number is in its own HTML element, separate
from any label you may give it.
< p >
US c c u u s t o o m m e r s s :  < < s s p p a n  
i t e m m p p r o p = "t t e l l " > > 650- 253- 0000< / / s s p a n n > > < b r r >
UK c c u u s t o o m m e r s s :  < < s s p p a n  
i t e m m p p r o p = "t t e l l " > > 00 + 1 1 * + 6502530000< < / / s s p a n >
< / p >
According to the 
HTML5 microdata data model, neither the 
< p p >
element nor the 
< s s p a n n >
element have special processing. e value of the microdata 
t e l
property is simply the text
content. e Organization microdata vocabulary makes no aempt to subdivide the different
parts of a telephone number. e entire 
t e l
property is just free-form text. If you want to
put the area code in parentheses, or use spaces instead of dashes to separate the numbers, you
can do that. If a microdata-consuming client wants to parse the telephone number, that’s
entirely up to them.
diveintohtml5.org
“DISTRIBUTED,” “EXTENSIBILITY,” & OTHER FANCY WORDS
C# PDF File Compress Library: Compress reduce PDF size in C#.net
Thus, how to compress large-size existing PDF documents is quite useful for increasing the efficiency and productiveness of existing document management system
bookmark template pdf; copy pdf bookmarks
C# PDF File Merge Library: Merge, append PDF files in C#.net, ASP.
C#.NET PDF Library - Merge PDF Documents in C#.NET. Provide NET components for batch combining PDF documents in C#.NET class. Powerful
create pdf bookmarks online; pdf bookmark editor
Next, we have another familiar property: 
u r r l
. Just like 
associating a URL with a Person, you
can associate a URL with an Organization. is could be the company’s home page, a contact
page, product page, or anything else. If it’s a URL about, from, or belonging to the
Organization, mark it up with an 
i t e m m p p r o p p = "u u r r l l "
aribute.
< p > < < a  
i t t e e m p r r o o p = " u u r l "  h h r e e f f = "h h t t t p : / / / / www. g o o o g g l e . . c c o m / / "> > G o o o o g l e e . . c o m < < / / a > < < / / p >
[Follow along! Before: 
organization.html, aer: 
organization-plus-microdata.html]
According to the 
HTML5 microdata data model, the 
< a a >
element has special processing. e
microdata property value is the value of the 
h r e f
aribute, not the link text. In English, this
says “this organization is associated with the URL 
h t t p p : : / / www. g g o o o g l l e e . c o o m m /
.” It doesn’t
say anything more specific about the association, and it doesn’t include the link text
“Google.com.”
Finally, I want to talk about geolocation. No, not 
the W3C Geolocation API. is is about
how to mark up the physical location for an Organization, using microdata.
To date, all of our examples have focused on marking up visible data. at is, you have an
< h 1 >
with a company name, so you add an 
i t e m m p p r o p
aribute to the 
< h 1 >
element to
declare that the (visible) header text is, in fact, the name of an Organization. Or you have an
< i m g g >
element that points to a photo, so you add an 
i t t e m p p r r o p
aribute to the 
< i i m g >
element to declare that the (visible) image is a photo of a Person.
In this example, geolocation information isn’t like that. ere is no visible text that gives the
exact latitude and longitude (to four decimal places!) of the Organization. In fact, the
organization.html example (without microdata) has no geolocation information at all. It has a
link to Google Maps, but even the URL of that link does not contain latitude and longitude
coordinates. (It contains similar information in a Google-specific format.) But even if we had
a link to a hypothetical online mapping service that did take latitude and longitude
coordinates as URL parameters, microdata has no way of separating out the different parts of
a URL. You can’t declare that the first  URL query parameter is the latitude and the second
URL query parameter is the longitude and the rest of the query parameters are irrelevant.
To handle edge cases like this, HTML5 provides a way to annotate invisible data. is
tenique should only be used as a last resort. If there is a way to display or render the data
you care about, you should do so. Invisible data that only maines can read tends to “go
diveintohtml5.org
“DISTRIBUTED,” “EXTENSIBILITY,” & OTHER FANCY WORDS
VB.NET Create PDF from Excel Library to convert xlsx, xls to PDF
Create fillable and editable PDF documents from Excel in Visual Basic .NET class. Change Excel hyperlink to PDF hyperlink and bookmark.
add bookmarks to pdf preview; acrobat split pdf bookmark
VB.NET PDF File Split Library: Split, seperate PDF into multiple
Split PDF document by PDF bookmark and outlines in VB.NET. file to one-page PDF files or they can separate source PDF file to smaller PDF documents by every
copy pdf bookmarks to another pdf; create bookmark pdf
stale” quily. at is, someone will come along later and update the visible text but forget to
update the invisible data. is happens more oen than you think, and it will happen to you
too.
Still, there are cases where invisible data is unavoidable. Perhaps your boss really wants
maine-readable geolocation information but doesn’t want to cluer up the interface with
pairs of incomprehensible six-digit numbers. Invisible data is the only option. e only saving
grace here is that you can put the invisible data immediately aer the visible text that it
describes, whi may help remind the person who comes along later and updates the visible
text that they need to update the invisible data right aer it.
In this example, we can create a dummy 
< s s p p a n >
element within the same 
< a a r r t i c c l l e >
element as all the other Organization properties, then put the invisible geolocation data inside
the 
< s s p a n n >
element.
< s p a a n  
i t t e e m p r r o o p = " g g e o "  
i t e e m m s c o o p p e
i t e m m t t y p e e = "h h t t t t p : / / / / d a t t a a - v o o c c a b u l l a a r y . . o o r g / / G e e o " >
< m e t t a  i i t t e e m p r r o o p = " l l a t i i t t u d e "  c c o n n t t e n t t = "37 . . 41 49" / / >
< m e t t a  i i t t e e m p r r o o p = " l l o n g g i i t u d e e " c c o o n n t e n n t t = "- - 1 1 22. . 078"  / / >
< / s p p a a n >
< / a r r t t i c l l e e >
[Follow along! Before: 
organization.html, aer: 
organization-plus-microdata.html]
Geolocation information is defined in its own vocabulary, like 
the address of a Person or
Organization. erefore, this 
< s p p a a n >
element needs three aributes:
1. 
i t e m m p p r o p p = "g g e e o o "
says that this element represents the 
g e o
property of the surrounding
Organization
2. 
i t e m m t t y p e e = "h h t t t t p : / / / / d a t a a - - v o c c a a b u l l a a r y . . o o r g / / G e e o "
says whi microdata vocabulary
this element’s properties conform to
3. 
i t e m m s s c o p p e
says that this element is the enclosing element for a microdata item with
its own vocabulary (given in the 
i t e m m t t y p e
aribute). All the properties within this
element are properties of 
h t t t t p : / / / / d a t t a a - v o o c c a b u u l l a r y y . . o r g g / / G e e o
, not the surrounding
h t t p p : : / / d d a a t a - - v v o c a a b b u l a r r y y . o r r g g / Or r g g a n i i za a t i i o o n
.
e next big question that this example answers is, “How do you annotate invisible data?”
diveintohtml5.org
“DISTRIBUTED,” “EXTENSIBILITY,” & OTHER FANCY WORDS
C# PDF Convert to Word SDK: Convert PDF to Word library in C#.net
watermark and save PDF text, image, table, hyperlink and bookmark to Word without losing format. Powerful components for batch converting PDF documents in C#
export pdf bookmarks; display bookmarks in pdf
You use the 
< m e e t t a >
element. In previous versions of HTML, you could only use the 
< m m e e t a >
element within 
the 
< h h e e a d >
of your page. In HTML5, you can use the 
< m m e t a a >
element
anywhere. And that’s exactly what we’re doing here.
<
m e t t a  i i t t e e m p r r o o p = " l l a t i i t t u d e e " c c o o n n t e n t t = "37 . . 41 49" / / >
[Follow along! Before: 
organization.html, aer: 
organization-plus-microdata.html]
According to the 
HTML5 microdata data model, the 
< m m e e t a >
element has special processing.
e microdata property value is the 
c o o n n t e n n t
aribute. Since this aribute is never visibly
displayed, we have the perfect setup for unlimited quantities of invisible data. With great
power comes great responsibility. In this case, the responsibility is on you to ensure that this
invisible data stays in sync with the visible text around it.
ere is no direct support for the Organization vocabulary in Google Ri Snippets, so I don’t
have any prey sample sear result listings to show you. But organizations feature heavily in
the next two case studies: events and reviews, and those are supported by Google Ri
Snippets.
MARKING UP EVENTS
MARKING UP EVENTS
Shit happens. Some shit happens at pre-determined times. Wouldn’t it be nice if you could
tell sear engines exactly when shit was about to happen? ere’s an angle braet for that.
Let’s start by looking at 
a sample sedule of my speaking engagements.
< a r t t i i c l e e >
< h 1 > > G o o o g g l l e  D e e v e l l o o p e r  Da a y  2009< < / h 1 1 >
< i m g  wi i d d t t h = " 300"  h h e i i g g h t = " 200"
s r c = "h h t t t p p : / / / d d i v e e i i n t o o h h t m l 5. o r g g / / e xa a m m p l e e s s / g d d d d - 2009- p p r r a g u u e e - p i l l g g r i m m . . jp g g "
a l t = "[M M a a r r k  P P i i l g r r i i m  a a t  p p o d d i i u m ]">
< p >
diveintohtml5.org
“DISTRIBUTED,” “EXTENSIBILITY,” & OTHER FANCY WORDS
Go o g g l l e  D e e v e l l o o p e r  Da a y y s  a a r e  a  c c h h a n c c e  t t o  l l e a a r r n  a a b b o u t  G o o o o g g l e
d e v e e l l o p e e r  p p r r o o d u c c t t s  f f r r o m  t t h h e  e e n n g i n n e e e r s  wh h o  b b u i i l l t  t t h h e m .  Th h i s
o n e - - d d a y  c c o n f f e e r e n n c c e  i i n n c l u d d e e s  s s e e m i n n a a r s  a a n d  “o o f f f i i c e  h h o u r r s s ”
o n  we e b  t t e e c h n n o o l o g g i i e s  l l i k e  G o o o g g l l e  M M a a p s , Op p e e n n So c c i i a l , An n d d r r o i d ,
AJAX AP P I s s , Ch h r o m m e e , a a n n d  G o o o o g l e  We e b  To o o o l l k i t t .
< / p >
< p >
< t i m m e  d d a a t t e t i i m m e = " 2009- - 1 1 - 06T08 : : 30+01 : 00"> 2009 N o o v e e m m b e r  6, 8 : : 30< < / / t i m m e e >
&n d a a s s h ;
< t i m m e  d d a a t t e t i i m m e = " 2009- - 1 1 - 06T20: 30+01 : 00"> 20: 30< / t i i m m e >
< / p >
< p >
Co n g g r r e s s  Ce e n n t t e r < < b b r >
5t h  k k v ět t n n a  65< < b r r >
1 40 21  P P r r a h a  4< < b b r r >
Cze c c h  R e e p p u b l l i i c
< / p >
< p > < < a
h r e f f = "h h t t t t p : / / / / c o d d e e . g o o o o g l e . . c c o m / / i i n t l l / / c s / / e e v e n n t t s / d d e e v e l l o o p e r r d d a y / 2009/ / h h o m e e . . h t m
l "> G DD/ / P P r r a g u u e  h h o o m m e  p p a a g e < / / a a > < / / p p >
< / a r r t t i c l l e e >
[Follow along! Before: 
event.html, aer: 
event-plus-microdata.html]
All the information about the event is contained within the 
< a a r t i i c c l e >
element, so that’s
where we need to put the 
i t t e m t t y y p e
and 
i t t e e m s c c o o p e
aributes.
< a r t t i i c l e  
i t e e m m s c o o p p e  
i t t e m t t y y p e = "h h t t t p p : / / d d a a t a - - v v o c a a b b u l a a r r y . o o r r g / Ev e n t t " >
[Follow along! Before: 
event.html, aer: 
event-plus-microdata.html]
e URL for the Event vocabulary is 
h t t t p : : / / / d a a t t a - v v o o c a b b u u l a r y y . . o r g g / / Ev e e n n t
, whi also
happens to contain a nice lile art describing the vocabulary’s properties. And what are
those properties?
EVENT VOCABULARY
EVENT VOCABULARY
Property
Description
diveintohtml5.org
“DISTRIBUTED,” “EXTENSIBILITY,” & OTHER FANCY WORDS
s u m m m m a r y
e name of the event
u r l
Link to the event details page
l o c c a a t i o o n
e location or venue of the event. Can optionally be represented by a
nested 
Organization or 
Address.
d e s s c c r i p p t t i o n
A description of the event
s t a a r r t Da a t t e
e starting date and time of the event in 
ISO date format
e n d d Da a t e
e ending date and time of the event in 
ISO date format
d u r r a a t i o o n
e duration date of the event in 
ISO duration format
e v e e n n t Ty y p p e
e category of the event (for example, “Concert” or “Lecture”). is is a
freeform string, not an enumerated aribute.
g e o
Specifies the geographical coordinates of the location. Always contains two
subproperties, 
l a a t t i t u u d d e
and 
l o o n n g i t t u u d e
.
p h o o t t o
A link to a photo or image related to the event
e event’s name is in an 
< h h 1 >
element. According to the 
HTML5 microdata data model,
< h 1 >
elements have no special processing. e microdata property value is simply the text
content of the 
< h h 1 >
element. All we need to do is add the 
i t t e m p r r o o p
aribute to declare that
this 
< h h 1 >
element contains the name of the event.
< h 1  
i t e m m p p r o p p = "s s u u m m m a r r y y " > > G o o o g l l e  De e v v e e l o p p e e r  D a a y  2009< < / / h 1 >
[Follow along! Before: 
event.html, aer: 
event-plus-microdata.html]
In English, this says, “e name of this event is Google Developer Day 2009.”
is event listing has a photo, whi can be marked up with the 
p h h o t o
property. As you
would expect, the photo is already marked up with an 
< i i m g >
element. Like 
the 
p h o o t t o
property in the Person vocabulary, an Event photo is a URL. Since the 
HTML5 microdata data
model says that the property value of an 
< i i m m g >
element is its 
s r r c
aribute, the only thing
we need to do is add the 
i t t e m p r r o o p
aribute to the 
< i i m m g >
element.
< i m g  
i t e e m m p r o o p p = "p p h h o t o o "  wi i d d t h = "300"  h h e i i g g h t = "200"
s r c = "h h t t t p p : / / / d d i v e e i i n t o o h h t m l 5. o r g g / / e xa a m m p l e e s s / g d d d d - 2009- p p r r a g u u e e - p i l l g g r i m m . . jp g g "
a l t = "[M M a a r r k  P P i i l g r r i i m  a a t  p p o d d i i u m ]">
[Follow along! Before: 
event.html, aer: 
event-plus-microdata.html]
diveintohtml5.org
“DISTRIBUTED,” “EXTENSIBILITY,” & OTHER FANCY WORDS
In English, this says, “e photo for this event is at
h t t p p : : / / d d i i v e i i n n t o h h t t m l 5. o r g / / e e xa m m p p l e s s / / g d d d - - 2009- p r r a a g u e e - - p i l l g g r i m . . jp p g
.”
Next up is a longer description of the event, whi is just a pargaraph of freeform text.
< p  
i t t e m p p r r o p = "d d e s s c c r i p p t t i o n n " > > G o o o o g l e  De e v e e l l o p e e r  Da a y y s  a a r r e  a  c c h a a n n c e  t t o
l e a r r n  a a b b o o u t  G o o o g g l l e  d d e e v e l o o p p e r  p p r o d d u u c t s  f f r o o m  t t h h e  e e n n g g i n e e e e r s  wh h o  b b u u i l t
t h e m m .  Th h i i s  o o n n e - d d a a y  c c o o n f e r r e e n c e  i i n c c l l u d e e s  s s e e m m i n a a r r s  a a n n d  “o o f f i c c e
h o u r r s s ” o o n  we e b  t t e e c c h n o o l l o g i e e s  l l i i k k e  G o o o g l l e  M M a a p p s , Op p e n n So o c i i a a l ,
An d r r o o i d , AJA X AP P I s s , Ch h r o m m e e , a a n n d  G o o o g l l e  We e b  To o o o l k i i t t . < / / p p >
[Follow along! Before: 
event.html, aer: 
event-plus-microdata.html]
e next bit is something new. Events generally occur on specific dates and start and end at
specific times. In HTML5, dates and times should be marked up with 
the 
< t i i m m e >
element,
and we are already doing that here. So the question becomes, how do we add microdata
propeties to these 
< t i i m m e >
elements? Looking ba at the 
HTML5 microdata data model, we
see that the 
< t i i m m e >
element has special processing. e value of a microdata property on a
< t i m m e e >
element is the value of the 
d a a t t e t i i m m e
aribute. And hey, the 
s t t a r t t Da a t e
and
e n d D a a t e
properties of the Event vocabulary take an ISO-style date, just like the 
d a a t e t t i i m e
property of a 
< t t i i m e >
element. Once again, the semantics of the core HTML vocabulary
dovetail nicely with semantics of our custom microdata vocabulary. Marking up start and end
dates with microdata is as simple as
1.  Using HTML correctly in the first place (using 
< t t i i m e >
elements to mark up dates and
times), and
2.  Adding a single 
i t e m m p p r o p
aribute
< p >
< t i m m e  
i t t e e m p r r o o p = " s s t a r r t t Da t t e e "  d d a a t e t i i m m e = " 2009- - 1 1 - - 06T08: : 30+01 : : 00"> > 2009
No v e e m m b e r  6, 8: : 30< / t i i m m e >
&n d a a s s h ;
< t i m m e  
i t t e e m p r r o o p = " e e n d D a a t e "  d d a t t e e t i m e e = "2009- - 1 1 1 1 -
06T20: 30+01 : : 00"> 20: : 30< / t i i m m e >
< / p >
[Follow along! Before: 
event.html, aer: 
event-plus-microdata.html]
diveintohtml5.org
“DISTRIBUTED,” “EXTENSIBILITY,” & OTHER FANCY WORDS
Documents you may be interested
Documents you may be interested