SlideShare a Scribd company logo

Semantic HTML

•Download as PPT, PDF•
•
H
hchen1

The document discusses different methods for embedding semantic information in HTML pages, including microformats which use standard HTML tags and attributes to describe information, and RDFa which uses XML attributes to carry metadata. It provides examples of using microformats and RDFa to add semantic annotations and explores tools for processing and consuming these semantic data formats. The conclusion questions which technology, microformats or RDFa, web developers will embrace more in the future for adding semantics to web pages.

Related slideshows

Linked Data Tutorial
Linked Data TutorialLinked Data Tutorial
Linked Data Tutorial
 
#sod14 - ok, è un endpoint SPARQL non facciamoci prendere dal panico
#sod14 - ok, è un endpoint SPARQL non facciamoci prendere dal panico#sod14 - ok, è un endpoint SPARQL non facciamoci prendere dal panico
#sod14 - ok, è un endpoint SPARQL non facciamoci prendere dal panico
 
2007 03 12 Swecr 2
2007 03 12 Swecr 22007 03 12 Swecr 2
2007 03 12 Swecr 2
 
1 of 21
Semantic HTML Dr. Harry Chen CMSC 491S/691S April 23, 2008
Agenda Yet Another Semantic Web Presentation Embed semantic description in HTML Microformats RDFa
Click to watch the video
Problem & Plausible Solutions How should we publish semantic information on the Web? One HTML page  One RDF document Mix RDF into the HTML page Extend HTML with new semantic tags
Microformats Introduce semantics into Web pages by using XHTML tags with standard data format vocabularies hCard (People & Organization) hCalendar (Calendar & Events) XFN (Social Networks) rel-tag (tagging) …
Microformats basics Use standard XHTML attributes to describe information. Mostly thru the “class” attribute Sometimes thru the “id”, “title”, “rel” or “rev” attr. As the webots process the pages, they reads information from those attributes. For search indexing Grabbing contact & social network information
Describe yourself using Microformats My Home Page
Find my name
Wrap my name in “fn” “ fn” == Full Name in hCard “ url” == my URL CSS Class (not MF) http://harry.hchen1.com/contact-me/biosketch
What’s next? http://kitchen.technorati.com/contact/search
Another Example http://hchen1.com/contact-me/biosketch/ I live in Columbia Maryland.
Add Geo location Geo vocabulary comes from W3C Geo http://www.w3.org/2003/01/geo/
Prepare mashup data Optimus is a Microformats data transformer. Transform Microformatted page to XML, JSON or JSON-P Implementation One PHP file and Few XSTL Let’s see a demo…
http:// microformatique.com/optimus /
RDFa “ a” == “awesome” -- src:http://www.youtube.com/watch?v=ldl0m-5zLz4 “ a” == provide a set of “attributes” that can be used to carry metadata in an XML language XHTML is XML
RDFa uses… XML Attributes “ about” “ rel” “ href” “ property” “ content” “ datatype” “ typeof”
Dublin Core example ( http://www.example.com/books/wikinomics , dc:title, “Wikinomics”) ( http:// www.example.com/books/wikinomics , dc:creator, “Don Tapscott”) ( http:// www.example.com/books/wikinomics , dc:date, 2006-10-01”) RDF Triples Source: http://en.wikipedia.org/wiki/RDFa
XHTML + RDFa
Let’s try something cool Fuzzbot is a Firefox plugin for detecting RDFa and Microformats descriptions http://rdfa.digitalbazaar.com/fuzzbot/ Demo http://rdfa.digitalbazaar.com/fuzzbot/demo/foaf-depictions.html
Additional Resources Microformats http://microformats.org/ RDFa http://en.wikipedia.org/wiki/RDFa
Concluding Remarks Microformats & RDFa are two different approaches to embed semantic information in XHTML pages. Tools for processing and consuming these data formats are under development. Question: Which technology will developers embrace in the future Web?

More Related Content

Semantic HTML

  • 1. Semantic HTML Dr. Harry Chen CMSC 491S/691S April 23, 2008
  • 2. Agenda Yet Another Semantic Web Presentation Embed semantic description in HTML Microformats RDFa
  • 3. Click to watch the video
  • 4. Problem & Plausible Solutions How should we publish semantic information on the Web? One HTML page  One RDF document Mix RDF into the HTML page Extend HTML with new semantic tags
  • 5. Microformats Introduce semantics into Web pages by using XHTML tags with standard data format vocabularies hCard (People & Organization) hCalendar (Calendar & Events) XFN (Social Networks) rel-tag (tagging) …
  • 6. Microformats basics Use standard XHTML attributes to describe information. Mostly thru the “class” attribute Sometimes thru the “id”, “title”, “rel” or “rev” attr. As the webots process the pages, they reads information from those attributes. For search indexing Grabbing contact & social network information
  • 7. Describe yourself using Microformats My Home Page
  • 9. Wrap my name in “fn” “ fn” == Full Name in hCard “ url” == my URL CSS Class (not MF) http://harry.hchen1.com/contact-me/biosketch
  • 12. Add Geo location Geo vocabulary comes from W3C Geo http://www.w3.org/2003/01/geo/
  • 13. Prepare mashup data Optimus is a Microformats data transformer. Transform Microformatted page to XML, JSON or JSON-P Implementation One PHP file and Few XSTL Let’s see a demo…
  • 15. RDFa “ a” == “awesome” -- src:http://www.youtube.com/watch?v=ldl0m-5zLz4 “ a” == provide a set of “attributes” that can be used to carry metadata in an XML language XHTML is XML
  • 16. RDFa uses… XML Attributes “ about” “ rel” “ href” “ property” “ content” “ datatype” “ typeof”
  • 17. Dublin Core example ( http://www.example.com/books/wikinomics , dc:title, “Wikinomics”) ( http:// www.example.com/books/wikinomics , dc:creator, “Don Tapscott”) ( http:// www.example.com/books/wikinomics , dc:date, 2006-10-01”) RDF Triples Source: http://en.wikipedia.org/wiki/RDFa
  • 19. Let’s try something cool Fuzzbot is a Firefox plugin for detecting RDFa and Microformats descriptions http://rdfa.digitalbazaar.com/fuzzbot/ Demo http://rdfa.digitalbazaar.com/fuzzbot/demo/foaf-depictions.html
  • 20. Additional Resources Microformats http://microformats.org/ RDFa http://en.wikipedia.org/wiki/RDFa
  • 21. Concluding Remarks Microformats & RDFa are two different approaches to embed semantic information in XHTML pages. Tools for processing and consuming these data formats are under development. Question: Which technology will developers embrace in the future Web?