This document discusses the evolution from HTML to semantic HTML5. It explains that early web pages were meant only for humans to read, but semantic markup allows computers to understand web pages as well by denoting the meaning and relationships of content. HTML5 introduces more semantic elements like <header> and <nav> that replace non-semantic HTML 4 elements and are consistently understood by computers and devices. The adoption of semantic markup paves the way for improved search, accessibility, and communication across the web.

1. HTML5 & Semantic Web
Prepared by Jeremiah L. Brusola

2. Web

3. 

Web







4. Socialize
Videos
News

Gaming
Sharing
Communication
  
Web



Entertainment
Services

Shopping
Music

5. 



   



Web  


  


  







6. Web pages are to
be read by people


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

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

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

10. Web Browsers
- retrieves data from the web
- presents data to users.
- renders HTML based from it's tags.

11. Information is shared through HTML

12. Information is shared through HTML
<p>This cat is funny.</p>
<img src=”cat.gif” alt=”funny cat”/>

13. Information is shared through HTML
<p>This cat is funny.</p>
<img src=”cat.gif” alt=”funny cat”/>
Browsers can render the information but
won't understand it's meaning and relation.
...

14. This cat is funny.

15. Semantic Web

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

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

18. Semantic Web
- a movement to promote conversion of
unstructured documents to a web of data.
Semantic = Meaning
- coined by Tim Berners-Lee

19. Why Semantic?

20. Why Semantic?
- Searchability

21. Why Semantic?
- Searchability
- Accessibility

22. Why Semantic?
- Searchability
- Accessibility
- Consistency

23. Why Semantic?
- Searchability
- Accessibility
- Consistency




24. Why Semantic?
- Searchability
- Accessibility
- Consistency
For computers




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

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

27. HTML5
- the successor to HTML 4.01
and XHTML 1.1

28. HTML5
- the successor to HTML 4.01
and XHTML 1.1
- semantic markups

29. HTML5
- the successor to HTML 4.01
and XHTML 1.1
- semantic markups
- consistently understood by
computers and devices

30. HTML5
- the successor to HTML 4.01
and XHTML 1.1
- semantic markups
- consistently understood by
computers and devices


31. Pave the Cowpaths Principle

32. Pave the Cowpaths Principle
Don't reinvent the wheel

33. Pave the Cowpaths Principle
Don't reinvent the wheel
Semantic HTML 4?

34. Pave the Cowpaths Principle
Don't reinvent the wheel
Semantic HTML 4?
<b> → <strong>
<i> → <em>

35. Pave the Cowpaths Principle
Don't reinvent the wheel
Semantic HTML 4?
<b> → <strong>
<i> → <em>
<meta name=”keywords” content=”...”>
<meta name=”author” content=”...”>
...

36. Markup Comparison
HTML 4
<div
class=”header”> ...
<div class='nav'>
<ul>
<li> ...
</>

37. Markup Comparison
</>
HTML 4
HTML 5
<div class=”header”> ...
<header> ...
<div class='nav'>
<nav>
<ul>
<ul>
<li> ...
<li> ...

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

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

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

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

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

43. More HTML5 Markups
</>
<label for=”fullname”>Name</label>
<input type=”text” id=”fullname” />
<label for=”email”>Name</label>
<input type=”email” id=”email” />

44. ...And way even more!
</>
article
footer
nav
aside
header
section
figcaption
hgroup
time
figure
mark

45. Down the road
- Data can be shared easily.


46. Down the road
- Data can be shared easily.
- Data can easily be accessible.


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

48. 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!

49. Thank you.

50. 
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/