SlideShare a Scribd company logo
1 of 22
SEMANTIC HTML 5
David Kelleher  NEPHP 2013 
www.davidk.net
David Kelleher
http://www.davidk.net
http://joind.in/8913
Semantics
Semantics
What does it mean?
<body>41-76-61-74-61-72-20-52-6f-67-65-72-
20-45-62-65-72-74-20-44-65-63-65-6d-62-65-
72-20-31-31-2c-20-32-30-30-39-20-57-61-74-63-
68-69-6e-67-20-5c-22-41-76-61-74-61-72-2c-5c-
22-20-49-20-66-65-6c-74-20-73-6f-72-74-20-6f-
66-20-74-68-65-20-73-61-6d-65-20-61-73-20-
77-68-65-6e-20-49-20-73-61-77-20-5c-22-53-74-
61-72-20-57-61-72-73-5c-22-20-69-6e-20-31-39-
37-37-2e</body>
What does it mean?
What does it mean?
<body>Аватара
Роджер Эберт
11 декабря 2009
Смотря «Аватар», я чувствовал видом того же
самого, когда я увидел "Звездные войны" в 1977
году.</body>
What does it mean?
What does it mean?
<div><div>Аватара</div><div>Роджер
Эберт</div>
<div>11 декабря 2009</div></div>
<div>Смотря<span>«Аватар»</span>, я
чувствовал видом того же самого, когда я увидел "
<span>Звездные <div>войны</div></span> "в
1977 году. </div>
What does it mean?
Mark this up to convey
meaning:
Semantic Tags, IDs, Class
Names
<div id=“filmreview”>
<div id=“author”>
<h1>Аватара</h1>
<div id=“byline”>Роджер Эберт</div>
<div id=“date”>11 декабря 2009</div>
</div>
<p class=“review”>Смотря «Аватар», я
чувствовал видом того же самого, когда я увидел
"Звездные войны" в 1977 году.</p>
</div>
Semantic HTML5
Sectioning Elements
<body>
<header>
<h1>..</h1>
<nav>...</nav>
</header>
<section>
<article>...</article>
<aside>..</aside>
</section>
<footer>
<address>...</address>
</footer>
</body>
Semantic HTML5
Content Grouping Elements
<p>Paragraph</p>
<ul>
<li>List Item #1</li>
<li>List Item #2</li>
</ul>
 Also ordered list, description list, blockquote,
figure
 Use to group content within a section
 They create line breaks by default in display
Semantic HTML5
Text-Level Elements
<strong>important</strong>
<b>keyword</b> or <b>article lead</b>
<em>emphasized</em>
<cite>book title</cite>
<i lang="fr">c'est la vie</i>
<small>fine print</small>
<s>inaccurate, outdated $3.99</s>
 Group words, phrases, or other content parts
 They do not create line breaks
Semantic HTML5
<article class=“filmreview”>
<header>
<h1>Avatar</h1>
<span class=“author”>Roger Ebert</span>
<time datetime=“2009-12-11”>December 11,
2009</time>
</header>
<p class=“review”><b class=“lead”>Watching
"Avatar," I felt sort of the same as when I saw "Star Wars"
in 1977. </b></p>
</article>
Semantic Microdata
Semantic Microdata
 schema.org
 Supports microdata spec
 Supports RDFa spec
 microformats
Semantic Microdata
<article itemscope itemtype="http://schema.org/Movie">
<header>
<h1 itemprop="name">Avatar</h1>
<section itemprop="review" itemscope itemtype="http://schema.org/Review">
<span itemprop="author">Roger Ebert</span>
<meta itemprop="datePublished" content="2009-12-11">December 11, 2009
</section>
</header>
<p><b class="lead">Watching "Avatar," I felt sort of the same as when I saw "Star
Wars" in 1977. </b></p>
</article>
Semantic Microdata
Semantic Web
 Semantic Web: Web of “Data” not “Pages”
 Knowledge Graph (Bing Snapshots, Google)
 Linked Data (Wikidata)
 RDF: Data model for storing knowledge graph
 RDF/XML: XML document containing RDF
data
 Ontology: Represent Knowledge as set of
Concepts
 OWL: Web Ontology Language
 Case Study: BBC 2010 World Cup Website
Semantic Web
 Discovery / Analysis example:
Show me Roger Ebert’s favorite films with an
Asian director of photography.
 Agent / Automation example:
Purchase tickets and load directions into my
device for a movie playing in a theater today,
near my current location, that fits my taste in
film.
SEMANTIC HTML 5
David Kelleher  NEPHP 2013 
www.davidk.net
David Kelleher
http://www.davidk.net
http://joind.in/8913

More Related Content

Similar to Semantic HTML5 and Microdata

Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015beyond tellerrand
 
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)Christopher Schmitt
 
Make your website 2 times faster
Make your website 2 times fasterMake your website 2 times faster
Make your website 2 times fasterSatoshi Kikuchi
 
Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013Brad Frost
 
Practical progressive enhancement
Practical progressive enhancementPractical progressive enhancement
Practical progressive enhancementGraham Bird
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Nicholas Zakas
 
Design+Performance Velocity 2015
Design+Performance Velocity 2015Design+Performance Velocity 2015
Design+Performance Velocity 2015Steve Souders
 
HTML5+CSS3 (入門編)
HTML5+CSS3 (入門編)HTML5+CSS3 (入門編)
HTML5+CSS3 (入門編)博史 高木
 
JavaScript For People Who Don't Code
JavaScript For People Who Don't CodeJavaScript For People Who Don't Code
JavaScript For People Who Don't CodeChristopher Schmitt
 
Design & Performance - Steve Souders at Fastly Altitude 2015
Design & Performance - Steve Souders at Fastly Altitude 2015Design & Performance - Steve Souders at Fastly Altitude 2015
Design & Performance - Steve Souders at Fastly Altitude 2015Fastly
 
Using Node.js to make HTML5 work for everyone
Using Node.js to make HTML5 work for everyone Using Node.js to make HTML5 work for everyone
Using Node.js to make HTML5 work for everyone Tom Croucher
 
Progressive downloads and rendering (Stoyan Stefanov)
Progressive downloads and rendering (Stoyan Stefanov)Progressive downloads and rendering (Stoyan Stefanov)
Progressive downloads and rendering (Stoyan Stefanov)Ontico
 
How clean "semantic" markup can power simple Facebook Connect integrations
How clean "semantic" markup can power simple Facebook Connect integrationsHow clean "semantic" markup can power simple Facebook Connect integrations
How clean "semantic" markup can power simple Facebook Connect integrationsThe Guardian Open Platform
 
建立前端開發團隊 - 2011 中華電信訓練所版
建立前端開發團隊 - 2011 中華電信訓練所版建立前端開發團隊 - 2011 中華電信訓練所版
建立前端開發團隊 - 2011 中華電信訓練所版Joseph Chiang
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Nicholas Zakas
 
Progressive Downloads and Rendering - take #2
Progressive Downloads and Rendering - take #2Progressive Downloads and Rendering - take #2
Progressive Downloads and Rendering - take #2Stoyan Stefanov
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucksTim Wright
 
Browsers with Wings
Browsers with WingsBrowsers with Wings
Browsers with WingsRemy Sharp
 

Similar to Semantic HTML5 and Microdata (20)

Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
 
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
 
Make your website 2 times faster
Make your website 2 times fasterMake your website 2 times faster
Make your website 2 times faster
 
Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013
 
Practical progressive enhancement
Practical progressive enhancementPractical progressive enhancement
Practical progressive enhancement
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
 
Design+Performance Velocity 2015
Design+Performance Velocity 2015Design+Performance Velocity 2015
Design+Performance Velocity 2015
 
HTML5+CSS3 (入門編)
HTML5+CSS3 (入門編)HTML5+CSS3 (入門編)
HTML5+CSS3 (入門編)
 
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
 
JavaScript For People Who Don't Code
JavaScript For People Who Don't CodeJavaScript For People Who Don't Code
JavaScript For People Who Don't Code
 
Design & Performance - Steve Souders at Fastly Altitude 2015
Design & Performance - Steve Souders at Fastly Altitude 2015Design & Performance - Steve Souders at Fastly Altitude 2015
Design & Performance - Steve Souders at Fastly Altitude 2015
 
Using Node.js to make HTML5 work for everyone
Using Node.js to make HTML5 work for everyone Using Node.js to make HTML5 work for everyone
Using Node.js to make HTML5 work for everyone
 
Progressive downloads and rendering (Stoyan Stefanov)
Progressive downloads and rendering (Stoyan Stefanov)Progressive downloads and rendering (Stoyan Stefanov)
Progressive downloads and rendering (Stoyan Stefanov)
 
Html5
Html5Html5
Html5
 
How clean "semantic" markup can power simple Facebook Connect integrations
How clean "semantic" markup can power simple Facebook Connect integrationsHow clean "semantic" markup can power simple Facebook Connect integrations
How clean "semantic" markup can power simple Facebook Connect integrations
 
建立前端開發團隊 - 2011 中華電信訓練所版
建立前端開發團隊 - 2011 中華電信訓練所版建立前端開發團隊 - 2011 中華電信訓練所版
建立前端開發團隊 - 2011 中華電信訓練所版
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
 
Progressive Downloads and Rendering - take #2
Progressive Downloads and Rendering - take #2Progressive Downloads and Rendering - take #2
Progressive Downloads and Rendering - take #2
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
 
Browsers with Wings
Browsers with WingsBrowsers with Wings
Browsers with Wings
 

More from Dave Kelleher

HTML5 Games with CreateJS
HTML5 Games with CreateJSHTML5 Games with CreateJS
HTML5 Games with CreateJSDave Kelleher
 
Uml Diagrams for Web Developers
Uml Diagrams for Web DevelopersUml Diagrams for Web Developers
Uml Diagrams for Web DevelopersDave Kelleher
 
Really Fast HTML5 Game Development with CreateJS
Really Fast HTML5 Game Development with CreateJSReally Fast HTML5 Game Development with CreateJS
Really Fast HTML5 Game Development with CreateJSDave Kelleher
 
Database Design and Normalization
Database Design and NormalizationDatabase Design and Normalization
Database Design and NormalizationDave Kelleher
 
Reverse Card Sort for UX Testing
Reverse Card Sort for UX TestingReverse Card Sort for UX Testing
Reverse Card Sort for UX TestingDave Kelleher
 

More from Dave Kelleher (9)

HTML5 Games with CreateJS
HTML5 Games with CreateJSHTML5 Games with CreateJS
HTML5 Games with CreateJS
 
Uml Diagrams for Web Developers
Uml Diagrams for Web DevelopersUml Diagrams for Web Developers
Uml Diagrams for Web Developers
 
Really Fast HTML5 Game Development with CreateJS
Really Fast HTML5 Game Development with CreateJSReally Fast HTML5 Game Development with CreateJS
Really Fast HTML5 Game Development with CreateJS
 
Database Design and Normalization
Database Design and NormalizationDatabase Design and Normalization
Database Design and Normalization
 
Debugging PHP Code
Debugging PHP CodeDebugging PHP Code
Debugging PHP Code
 
Cinematic UX Design
Cinematic UX DesignCinematic UX Design
Cinematic UX Design
 
Cryptocurrencies
CryptocurrenciesCryptocurrencies
Cryptocurrencies
 
Cinematic UX Design
Cinematic UX DesignCinematic UX Design
Cinematic UX Design
 
Reverse Card Sort for UX Testing
Reverse Card Sort for UX TestingReverse Card Sort for UX Testing
Reverse Card Sort for UX Testing
 

Recently uploaded

Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rick Flair
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...AliaaTarek5
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...Scott Andery
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityIES VE
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
Exploring ChatGPT Prompt Hacks To Maximally Optimise Your Queries
Exploring ChatGPT Prompt Hacks To Maximally Optimise Your QueriesExploring ChatGPT Prompt Hacks To Maximally Optimise Your Queries
Exploring ChatGPT Prompt Hacks To Maximally Optimise Your QueriesSanjay Willie
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPathCommunity
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda
 

Recently uploaded (20)

Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a reality
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
Exploring ChatGPT Prompt Hacks To Maximally Optimise Your Queries
Exploring ChatGPT Prompt Hacks To Maximally Optimise Your QueriesExploring ChatGPT Prompt Hacks To Maximally Optimise Your Queries
Exploring ChatGPT Prompt Hacks To Maximally Optimise Your Queries
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to Hero
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
 

Semantic HTML5 and Microdata

  • 1. SEMANTIC HTML 5 David Kelleher  NEPHP 2013  www.davidk.net David Kelleher http://www.davidk.net http://joind.in/8913
  • 4. What does it mean? <body>41-76-61-74-61-72-20-52-6f-67-65-72- 20-45-62-65-72-74-20-44-65-63-65-6d-62-65- 72-20-31-31-2c-20-32-30-30-39-20-57-61-74-63- 68-69-6e-67-20-5c-22-41-76-61-74-61-72-2c-5c- 22-20-49-20-66-65-6c-74-20-73-6f-72-74-20-6f- 66-20-74-68-65-20-73-61-6d-65-20-61-73-20- 77-68-65-6e-20-49-20-73-61-77-20-5c-22-53-74- 61-72-20-57-61-72-73-5c-22-20-69-6e-20-31-39- 37-37-2e</body>
  • 5. What does it mean?
  • 6. What does it mean? <body>Аватара Роджер Эберт 11 декабря 2009 Смотря «Аватар», я чувствовал видом того же самого, когда я увидел "Звездные войны" в 1977 году.</body>
  • 7. What does it mean?
  • 8. What does it mean? <div><div>Аватара</div><div>Роджер Эберт</div> <div>11 декабря 2009</div></div> <div>Смотря<span>«Аватар»</span>, я чувствовал видом того же самого, когда я увидел " <span>Звездные <div>войны</div></span> "в 1977 году. </div>
  • 9. What does it mean?
  • 10. Mark this up to convey meaning:
  • 11. Semantic Tags, IDs, Class Names <div id=“filmreview”> <div id=“author”> <h1>Аватара</h1> <div id=“byline”>Роджер Эберт</div> <div id=“date”>11 декабря 2009</div> </div> <p class=“review”>Смотря «Аватар», я чувствовал видом того же самого, когда я увидел "Звездные войны" в 1977 году.</p> </div>
  • 13. Semantic HTML5 Content Grouping Elements <p>Paragraph</p> <ul> <li>List Item #1</li> <li>List Item #2</li> </ul>  Also ordered list, description list, blockquote, figure  Use to group content within a section  They create line breaks by default in display
  • 14. Semantic HTML5 Text-Level Elements <strong>important</strong> <b>keyword</b> or <b>article lead</b> <em>emphasized</em> <cite>book title</cite> <i lang="fr">c'est la vie</i> <small>fine print</small> <s>inaccurate, outdated $3.99</s>  Group words, phrases, or other content parts  They do not create line breaks
  • 15. Semantic HTML5 <article class=“filmreview”> <header> <h1>Avatar</h1> <span class=“author”>Roger Ebert</span> <time datetime=“2009-12-11”>December 11, 2009</time> </header> <p class=“review”><b class=“lead”>Watching "Avatar," I felt sort of the same as when I saw "Star Wars" in 1977. </b></p> </article>
  • 17. Semantic Microdata  schema.org  Supports microdata spec  Supports RDFa spec  microformats
  • 18. Semantic Microdata <article itemscope itemtype="http://schema.org/Movie"> <header> <h1 itemprop="name">Avatar</h1> <section itemprop="review" itemscope itemtype="http://schema.org/Review"> <span itemprop="author">Roger Ebert</span> <meta itemprop="datePublished" content="2009-12-11">December 11, 2009 </section> </header> <p><b class="lead">Watching "Avatar," I felt sort of the same as when I saw "Star Wars" in 1977. </b></p> </article>
  • 20. Semantic Web  Semantic Web: Web of “Data” not “Pages”  Knowledge Graph (Bing Snapshots, Google)  Linked Data (Wikidata)  RDF: Data model for storing knowledge graph  RDF/XML: XML document containing RDF data  Ontology: Represent Knowledge as set of Concepts  OWL: Web Ontology Language  Case Study: BBC 2010 World Cup Website
  • 21. Semantic Web  Discovery / Analysis example: Show me Roger Ebert’s favorite films with an Asian director of photography.  Agent / Automation example: Purchase tickets and load directions into my device for a movie playing in a theater today, near my current location, that fits my taste in film.
  • 22. SEMANTIC HTML 5 David Kelleher  NEPHP 2013  www.davidk.net David Kelleher http://www.davidk.net http://joind.in/8913