際際滷

際際滷Share a Scribd company logo
HTML5 & Semantic Web

Prepared by Jeremiah L. Brusola
W艶恢




W艶恢
Socialize
Videos
News



Gaming

Sharing

Communication

  

W艶恢







Entertainment

Services



Shopping
Music






   



Web
Web pages are to
be read by people
Web pages are to
be read by people



What about computers?
Web pages are to
be read by people



What about computers?


Web pages are to
be read by people

What about computers?
Web Browsers
- retrieves data from the web
- presents data to users.
- renders HTML based from it's tags.
Information is shared through HTML
Information is shared through HTML
<p>This cat is funny.</p>
<img src=/slideshow/slide-28530513/28530513/cat.gif alt=funny cat/>
Information is shared through HTML
<p>This cat is funny.</p>
<img src=/slideshow/slide-28530513/28530513/cat.gif alt=funny cat/>

Browsers can render the information but
won't understand it's meaning and relation.

...
This cat is funny.
Semantic Web
Semantic Web
- a movement to promote conversion of
unstructured documents to a web of data.
Semantic Web
- a movement to promote conversion of
unstructured documents to a web of data.

Semantic = Meaning
Semantic Web
- a movement to promote conversion of
unstructured documents to a web of data.

Semantic = Meaning
- coined by Tim Berners-Lee
Why Semantic?
Why Semantic?
- Searchability
Why Semantic?
- Searchability
- Accessibility
Why Semantic?
- Searchability
- Accessibility
- Consistency
Why Semantic?
- Searchability
- Accessibility
- Consistency
Why Semantic?
- Searchability
- Accessibility
- Consistency
For computers
Why Semantic?
- Searchability
- Accessibility
- Consistency





For computers
computers can easily understand the
meaning of the data
Why Semantic?
- Searchability
- Accessibility
- Consistency





For computers
computers can easily understand the
meaning of the data
HTML5
- the successor to HTML 4.01
and XHTML 1.1
HTML5
- the successor to HTML 4.01
and XHTML 1.1
- semantic markups
HTML5
- the successor to HTML 4.01
and XHTML 1.1
- semantic markups
- consistently understood by
computers and devices
HTML5
- the successor to HTML 4.01
and XHTML 1.1
- semantic markups
- consistently understood by
computers and devices
Pave the Cowpaths Principle
Pave the Cowpaths Principle
Don't reinvent the wheel
Pave the Cowpaths Principle
Don't reinvent the wheel
Semantic HTML 4?
Pave the Cowpaths Principle
Don't reinvent the wheel
Semantic HTML 4?
<b>  <strong>
<i>  <em>
Pave the Cowpaths Principle
Don't reinvent the wheel
Semantic HTML 4?
<b>  <strong>
<i>  <em>
<meta name=keywords content=...>
<meta name=author content=...>
...
Markup Comparison
HTML 4
<div
class=header> ...
<div class='nav'>
<ul>
<li> ...

</>
Markup Comparison

</>

HTML 4

HTML 5

<div class=header> ...

<header> ...

<div class='nav'>

<nav>

<ul>

<ul>
<li> ...

<li> ...
More HTML5 Markups
<article>
<header>...</header>
<section>...</section>
<footer>...</footer>
</article>

</>
More HTML5 Markups
<article>
<header>...</header>
<section>...</section>
<footer>...</footer>
</article>

</>
More HTML5 Markups
<article>
<header>...</header>
<section>...</section>
<footer>...</footer>
</article>

</>
More HTML5 Markups
<article>
<header>...</header>
<section>...</section>
<footer>...</footer>
</article>

</>
More HTML5 Markups

</>

<label for=fullname>Name</label>
<input type=text id=fullname />
More HTML5 Markups

</>

<label for=fullname>Name</label>
<input type=text id=fullname />
<label for=email>Name</label>
<input type=email id=email />
...And way even more!

</>

article

footer

nav

aside

header

section

figcaption

hgroup

time

figure

mark
Down the road
- Data can be shared easily.
Down the road
- Data can be shared easily.
- Data can easily be accessible.
Down the road
- Data can be shared easily.
- Data can easily be accessible.



- Web pages can communicate with other
web pages.
Down the road
- Data can be shared easily.
- Data can easily be accessible.



- Web pages can communicate with other
web pages.
- There will be a better web!
Thank you.


References and Attributions


http://en.wikipedia.org/wiki/Semantic_Web



http://en.wikipedia.org/wiki/Semantics











http://www.webdesignerdepo
t.com/2012/12/
why-html5-is-more-semantic/

http://www.webresourcesdepo
t.com/officialhtml5-logo-is-out-get-your-badge/
http://www.html5rocks.com/en/fea
tures/se
mantics
http://www.w3.org/html/wg/wiki/ProposedDe
signPrinciples
http://html5doctor.com/lets-talk-aboutsemantics/
Ad

Recommended

Solving Complex JavaScript Issues and Leveraging Semantic HTML5
Solving Complex JavaScript Issues and Leveraging Semantic HTML5
Hamlet Batista
Distance from Perfect: Marketing w/ the Human Algorithm - DDW
Distance from Perfect: Marketing w/ the Human Algorithm - DDW
Ian Lurie
Forget AMP Make Fast Sites!
Forget AMP Make Fast Sites!
Jon Henshaw
HTML5 as a game console
HTML5 as a game console
michalbu
HTML Design for Devices
HTML Design for Devices
Terry Ryan
The Users are Restless
The Users are Restless
Terry Ryan
Design trends - from html tables to semantic html5
Design trends - from html tables to semantic html5
Kevin Bruce
Introduction to HTML5 and CSS3
Introduction to HTML5 and CSS3
Nivedhitha Venugopal
HTML 5 Fundamental
HTML 5 Fundamental
Lanh Le
Dive into HTML5
Dive into HTML5
Karthik Nallajalla
Html5 tutorial for beginners
Html5 tutorial for beginners
Singsys Pte Ltd
HTML 5 Complete Reference
HTML 5 Complete Reference
EPAM Systems
html5 project.pptx
html5 project.pptx
RiteshJain227353
HTML5-Tutorial-For-Beginn.6202488.pptx
HTML5-Tutorial-For-Beginn.6202488.pptx
BCAGen
WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)
Shumpei Shiraishi
WEB MODULE 1.pdf
WEB MODULE 1.pdf
Deepika A B
wt mod1.pdf
wt mod1.pdf
VinayKumarV24
Html5presentation
Html5presentation
Stephen Brashear
HTML5 for SEO and accessibility in 2016
HTML5 for SEO and accessibility in 2016
Myriam Jessier
WT Module-1.pdf
WT Module-1.pdf
RamyaH11
Html5
Html5
Nitish Sharma
HTML5 Features and Enhancements_Blog.docx
HTML5 Features and Enhancements_Blog.docx
Code Junction
Actsheet10
Actsheet10
Katrina Washington
Technology Research
Technology Research
Katrina Washington
HTML5 - An introduction
HTML5 - An introduction
Eleonora Ciceri
WEB Mod1@AzDOCUMENTS.in (1).pdf
WEB Mod1@AzDOCUMENTS.in (1).pdf
PrathimaMahapurush1
HTML5.pptx
HTML5.pptx
BCAGen
HTML5
HTML5
tanamania
Lessons Learned from Developing Secure AI Workflows.pdf
Lessons Learned from Developing Secure AI Workflows.pdf
Priyanka Aash
Improving Data Integrity: Synchronization between EAM and ArcGIS Utility Netw...
Improving Data Integrity: Synchronization between EAM and ArcGIS Utility Netw...
Safe Software

More Related Content

Similar to HTML5 and Semantic Web (20)

HTML 5 Fundamental
HTML 5 Fundamental
Lanh Le
Dive into HTML5
Dive into HTML5
Karthik Nallajalla
Html5 tutorial for beginners
Html5 tutorial for beginners
Singsys Pte Ltd
HTML 5 Complete Reference
HTML 5 Complete Reference
EPAM Systems
html5 project.pptx
html5 project.pptx
RiteshJain227353
HTML5-Tutorial-For-Beginn.6202488.pptx
HTML5-Tutorial-For-Beginn.6202488.pptx
BCAGen
WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)
Shumpei Shiraishi
WEB MODULE 1.pdf
WEB MODULE 1.pdf
Deepika A B
wt mod1.pdf
wt mod1.pdf
VinayKumarV24
Html5presentation
Html5presentation
Stephen Brashear
HTML5 for SEO and accessibility in 2016
HTML5 for SEO and accessibility in 2016
Myriam Jessier
WT Module-1.pdf
WT Module-1.pdf
RamyaH11
Html5
Html5
Nitish Sharma
HTML5 Features and Enhancements_Blog.docx
HTML5 Features and Enhancements_Blog.docx
Code Junction
Actsheet10
Actsheet10
Katrina Washington
Technology Research
Technology Research
Katrina Washington
HTML5 - An introduction
HTML5 - An introduction
Eleonora Ciceri
WEB Mod1@AzDOCUMENTS.in (1).pdf
WEB Mod1@AzDOCUMENTS.in (1).pdf
PrathimaMahapurush1
HTML5.pptx
HTML5.pptx
BCAGen
HTML5
HTML5
tanamania
HTML 5 Fundamental
HTML 5 Fundamental
Lanh Le
Html5 tutorial for beginners
Html5 tutorial for beginners
Singsys Pte Ltd
HTML 5 Complete Reference
HTML 5 Complete Reference
EPAM Systems
HTML5-Tutorial-For-Beginn.6202488.pptx
HTML5-Tutorial-For-Beginn.6202488.pptx
BCAGen
WEB MODULE 1.pdf
WEB MODULE 1.pdf
Deepika A B
HTML5 for SEO and accessibility in 2016
HTML5 for SEO and accessibility in 2016
Myriam Jessier
WT Module-1.pdf
WT Module-1.pdf
RamyaH11
HTML5 Features and Enhancements_Blog.docx
HTML5 Features and Enhancements_Blog.docx
Code Junction
HTML5 - An introduction
HTML5 - An introduction
Eleonora Ciceri
WEB Mod1@AzDOCUMENTS.in (1).pdf
WEB Mod1@AzDOCUMENTS.in (1).pdf
PrathimaMahapurush1
HTML5.pptx
HTML5.pptx
BCAGen

Recently uploaded (20)

Lessons Learned from Developing Secure AI Workflows.pdf
Lessons Learned from Developing Secure AI Workflows.pdf
Priyanka Aash
Improving Data Integrity: Synchronization between EAM and ArcGIS Utility Netw...
Improving Data Integrity: Synchronization between EAM and ArcGIS Utility Netw...
Safe Software
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Alliance
10 Key Challenges for AI within the EU Data Protection Framework.pdf
10 Key Challenges for AI within the EU Data Protection Framework.pdf
Priyanka Aash
cnc-processing-centers-centateq-p-110-en.pdf
cnc-processing-centers-centateq-p-110-en.pdf
AmirStern2
Oh, the Possibilities - Balancing Innovation and Risk with Generative AI.pdf
Oh, the Possibilities - Balancing Innovation and Risk with Generative AI.pdf
Priyanka Aash
AI VIDEO MAGAZINE - June 2025 - r/aivideo
AI VIDEO MAGAZINE - June 2025 - r/aivideo
1pcity Studios, Inc
Connecting Data and Intelligence: The Role of FME in Machine Learning
Connecting Data and Intelligence: The Role of FME in Machine Learning
Safe Software
Securing Account Lifecycles in the Age of Deepfakes.pptx
Securing Account Lifecycles in the Age of Deepfakes.pptx
FIDO Alliance
OWASP Barcelona 2025 Threat Model Library
OWASP Barcelona 2025 Threat Model Library
PetraVukmirovic
Techniques for Automatic Device Identification and Network Assignment.pdf
Techniques for Automatic Device Identification and Network Assignment.pdf
Priyanka Aash
Security Tips for Enterprise Azure Solutions
Security Tips for Enterprise Azure Solutions
Michele Leroux Bustamante
Creating Inclusive Digital Learning with AI: A Smarter, Fairer Future
Creating Inclusive Digital Learning with AI: A Smarter, Fairer Future
Impelsys Inc.
Coordinated Disclosure for ML - What's Different and What's the Same.pdf
Coordinated Disclosure for ML - What's Different and What's the Same.pdf
Priyanka Aash
"Database isolation: how we deal with hundreds of direct connections to the d...
"Database isolation: how we deal with hundreds of direct connections to the d...
Fwdays
FIDO Seminar: Authentication for a Billion Consumers - Amazon.pptx
FIDO Seminar: Authentication for a Billion Consumers - Amazon.pptx
FIDO Alliance
You are not excused! How to avoid security blind spots on the way to production
You are not excused! How to avoid security blind spots on the way to production
Michele Leroux Bustamante
AI vs Human Writing: Can You Tell the Difference?
AI vs Human Writing: Can You Tell the Difference?
Shashi Sathyanarayana, Ph.D
9-1-1 Addressing: End-to-End Automation Using FME
9-1-1 Addressing: End-to-End Automation Using FME
Safe Software
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC
Lessons Learned from Developing Secure AI Workflows.pdf
Lessons Learned from Developing Secure AI Workflows.pdf
Priyanka Aash
Improving Data Integrity: Synchronization between EAM and ArcGIS Utility Netw...
Improving Data Integrity: Synchronization between EAM and ArcGIS Utility Netw...
Safe Software
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Alliance
10 Key Challenges for AI within the EU Data Protection Framework.pdf
10 Key Challenges for AI within the EU Data Protection Framework.pdf
Priyanka Aash
cnc-processing-centers-centateq-p-110-en.pdf
cnc-processing-centers-centateq-p-110-en.pdf
AmirStern2
Oh, the Possibilities - Balancing Innovation and Risk with Generative AI.pdf
Oh, the Possibilities - Balancing Innovation and Risk with Generative AI.pdf
Priyanka Aash
AI VIDEO MAGAZINE - June 2025 - r/aivideo
AI VIDEO MAGAZINE - June 2025 - r/aivideo
1pcity Studios, Inc
Connecting Data and Intelligence: The Role of FME in Machine Learning
Connecting Data and Intelligence: The Role of FME in Machine Learning
Safe Software
Securing Account Lifecycles in the Age of Deepfakes.pptx
Securing Account Lifecycles in the Age of Deepfakes.pptx
FIDO Alliance
OWASP Barcelona 2025 Threat Model Library
OWASP Barcelona 2025 Threat Model Library
PetraVukmirovic
Techniques for Automatic Device Identification and Network Assignment.pdf
Techniques for Automatic Device Identification and Network Assignment.pdf
Priyanka Aash
Security Tips for Enterprise Azure Solutions
Security Tips for Enterprise Azure Solutions
Michele Leroux Bustamante
Creating Inclusive Digital Learning with AI: A Smarter, Fairer Future
Creating Inclusive Digital Learning with AI: A Smarter, Fairer Future
Impelsys Inc.
Coordinated Disclosure for ML - What's Different and What's the Same.pdf
Coordinated Disclosure for ML - What's Different and What's the Same.pdf
Priyanka Aash
"Database isolation: how we deal with hundreds of direct connections to the d...
"Database isolation: how we deal with hundreds of direct connections to the d...
Fwdays
FIDO Seminar: Authentication for a Billion Consumers - Amazon.pptx
FIDO Seminar: Authentication for a Billion Consumers - Amazon.pptx
FIDO Alliance
You are not excused! How to avoid security blind spots on the way to production
You are not excused! How to avoid security blind spots on the way to production
Michele Leroux Bustamante
AI vs Human Writing: Can You Tell the Difference?
AI vs Human Writing: Can You Tell the Difference?
Shashi Sathyanarayana, Ph.D
9-1-1 Addressing: End-to-End Automation Using FME
9-1-1 Addressing: End-to-End Automation Using FME
Safe Software
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC
Ad

HTML5 and Semantic Web