1 / 26

Enhancing Web Pages with Semantic Markup

Learn about adding semantic markup to HTML to make web pages more meaningful and searchable, including microdata and microformats. Find out how to embed semantic data and use vocabularies to categorize information effectively.

bodin
Download Presentation

Enhancing Web Pages with Semantic Markup

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Sematic Web Microdata, Microformat and RDF Advanced Web-based Systems | Misbhauddin

  2. HTML as-is for Semantic Web • Extensibility • HTML is not extensible such as other languages out there such as XML • If you want a tag with a specific name in XML, you just go ahead and create it. • Advantage to HTML’s limited set of elements • Every user agent knows about every element • Browsers have a built-in knowledge of HTML • Can we make HTML extensible? • The answer is YES • Adding Semantic Markup to HTML will allow it to be more meaningful Advanced Web-based Systems | Misbhauddin

  3. Semantic Markup How to make your page more meaningful Types of Semantic Markup Standardized way of representing common categories of information Basic HTML 5 markup tags Microformats RDF Microdata

  4. HTML5 for Semantics • Document Structuring Algorithm • <header> • <section> • <footer> • <aside> • <nav> • <article> Advanced Web-based Systems | Misbhauddin

  5. Microdata • Simple way to embed semantic markup in HTML • Helps in marking content as opposed structure (as seen through HTML5 tags) • Search engines use this markup to improve the display of search results • makes it easier for people to find the right Web pages Where do I find these markups? http://schema.org/ Provides list of all semantics to make your webpage more meaningful and searchable

  6. itemscope & itemtype • itemscope • specifies that the HTML contained in the HTMLcode block is about a particular item • Can be applied to any HTML block-level tag <div itemscope> <h1>iPhone 5</h1> <p>Made By Apple </p> <p>Golden Color</p> <p>Average Rating: <imgsrc=“rating.png” alt=“4 out of 5”></p> </div>

  7. itemscope & itemtype • itemtype • adding itemscope, you are specifying that the HTML contained in thecode block is about a particular item • Types of items can be found at schema.org <div itemscopeitemtype="http://schema.org/Product"> <h1>iPhone 5</h1> <p>Made By Apple </p> <p>Golden Color</p> <p>Average Rating: <imgsrc=“rating.png” alt=“4 out of 5”></p> </div>

  8. itemprop • Used to markup more specific properties of each item within the itemscop. • Properties of items are labeled using the itempropattribute • Each itemtype has a list of properties that can be defined <div itemscopeitemtype="http://schema.org/Product"> <h1 itemprop=“name”>iPhone 5</h1> <p>Made By Apple </p> <p>Golden Color</p> <p>Average Rating: <imgsrc=“rating.png” alt=“4 out of 5”></p> </div>

  9. Using Itemprop with part content • If you have only part of a tag that needs to be semantically tagged and not the whole HTML tag • Use a <span> tag to separate that content • Then use itemprop attribute with the span tag <div itemscopeitemtype="http://schema.org/Product"> <h1 itemprop=“name”>iPhone <span itemprop=“model”> 5</span></h1> <p>Made By Apple </p> <p> <span itemprop=“color”> Golden </span>Color</p> <p>Average Rating: <imgsrc=“rating.png” alt=“4 out of 5”></p> </div>

  10. Embedding items • If a itemtype block includes another block of itemtype, we can embed one inside the other <div itemscopeitemtype="http://schema.org/Product"> <h1 itemprop=“name”>iPhone <span itemprop=“model”> 5</span></h1> <p itemscopeitemtype=“http://schema.org/brand “> Made By <span itemprop=“name”>Apple</span> </p> <p> <span itemprop=“color”> Golden </span>Color</p> <p>Average Rating: <imgsrc=“rating.png” alt=“4 out of 5”></p> </div>

  11. Un-markable Information • Usually you will find information (like pictures) that cannot be marked • Use the meta tag <div itemscopeitemtype="http://schema.org/Product"> <h1 itemprop=“name”>iPhone <span itemprop=“model”> 5</span></h1> <p itemscopeitemtype=“http://schema.org/brand “> Made By <span itemprop=“name”>Apple</span> </p> <p> <span itemprop=“color”> Golden </span>Color</p> <p itemscopeitemtype=“http://schema.org/aggregateRating“> Average Rating: <imgsrc=“rating.png” alt=“4 out of 5”> <meta itemprop=“ratingValue” content=“4”> </p> </div>

  12. Microformats • Set of conventions which are agreed upon by a community • These formats use the classattribute (Remember we used it for CSS) • There are a huge list of vocabularies that can be used for different content on the webpage Where do I find these vocabularies? http://microformats.org/wiki/microformats2 Provides list of all microformat vocabularies to make your webpage more meaningful and searchable

  13. hCardMicroformat • simple, open format for publishing people and organizations on the web • It is composed many other properties • http://microformats.org/wiki/h-card <p class="h-card"> <img class="u-photo" src="http://drmisbha.net/photo.png" alt="" /> <a class="p-name u-url" href="http://drmisbha.net">Dr. Misbha</a> <a class="u-email“ href="mailto:misbha@drmisbha.net">misbha@drmisbha.ney</a>, <span class="p-street-address">Khaldiyyah Dist.</span> <span class="p-locality">Al-Ahsa</span> <span class="p-country-name">Saudi Arabia</span> </p>

  14. Other Microformats • h-adr [marking up structured locations such as addresses, physical and/or postal] • h-card [marking up people and organizations] • h-entry [marking up syndicatable content such as blog posts, notes, articles, comments, photos and similar] • h-event [marking up events] • h-geo [marking up WGS84 geophysical coordinates] • h-item [marking up the item of an h-review or h-product] • h-product [marking up products] • h-recipe [marking up food recipes] • h-resume [marking up resumes] • h-review [marking up reviews] • h-review-aggregate [marking up aggregate reviews of a single item] • v2 vocab notes • v2 vocab to-do

  15. RDFa allows authors to embed custom vocabularies within HTML What’s Next?

  16. RDF • Standard model for data interchange on the Web • Features that facilitate data merging even if the underlying schemas differ • RDF extends the linking structure of the Web to use URIs to name the relationship between things as well as the two ends of the link • Also called the “triple” • Linking structure forms a directed, labeled graph, where the edges represent the named link between two resources URI relationship URI

  17. RDF • Written in XML • Examples of Use • Describing properties for shopping items, such as price and availability • Describing time schedules for web events • Describing information about web pages (content, author, created and modified date) • Describing content and rating for web pictures • Describing content for search engines • Describing electronic libraries

  18. RDF Resource, Property, and Property Value • Resource is anything that can have a URI, such as http://www.kfu.edu.sa/advanced-web-based • Property is a Resource that has a name, such as "author" or "homepage“ • Property value is the value of a Property, such as “Misbhauddin" or http://www.drmisbha.net Property value of a resource can be another property <?xml version="1.0"?><RDF>  <Description about="http://www.kfu.edu.sa/advanced-web-based">    <author>Mohammed Misbhauddin</author>    <homepage>http://www.drmisbha.net</homepage>  </Description></RDF>

  19. RDF Statement Statement Resource + Property + Property value Object Subject Predicate http://www.drmisbha.net http://www.kfu.edu.sa/advanced-web-based Author’s Homepage

  20. Issues with using RDF • It is not really designed to be integrated with HTML • It is used mainly in databases and other back-end works So what now? To avoid this, another form of RDF was introduced known as RDFa • RDFa means Resource Description Framework in attributes • It can integrate with older version of HTML (xHTML) and HTML5 • It works similar to MicroData • Although RDFa is very huge and complex, another form of RDFa is available for beginners called as RDFa-lite

  21. RDFa Lite • It does exactly what RDFa does, but in a very simple kind of way. • http://www.w3.org/TR/2012/REC-rdfa-lite-20120607/ • Has a huge advantage over Microformats and MicroData, specially when working with big websites • It has only 7 attributes. • It is extensible, that means if the 7 attributes are not enough, you can add more from RDFa

  22. RDFa Lite vs. MicroData • RDFa Lite is very similar to MicroData in terms of structure itemscope vocab => itemtype typeof => itemprop => property <div itemscopeitemtype="http://schema.org/Product"> <h1 itemprop=“name”>iPhone <span itemprop=“model”> 5</span></h1> <p itemscopeitemtype=“http://schema.org/brand “> Made By <span itemprop=“name”>Apple</span> </p> <p> <span itemprop=“color”> Golden </span>Color</p> <p itemscopeitemtype=“http://schema.org/aggregateRating“> Average Rating: <imgsrc=“rating.png” alt=“4 out of 5”> <meta itemprop=“ratingValue” content=“4”> </p> </div>

  23. RDFa Lite Example In this paragraph, I am talking about a person <p > My name is Manu Sporny and you can give me a ring via 1- 800-555-0199. </p> <p vocab=http://schema.org typeof=“Person”> My name is Manu Sporny and you can give me a ring via 1- 800-555-0199. </p>

  24. RDFa Lite Example In this paragraph, I mention the name of the person and his phone number <p vocab=http://schema.org typeof=“Person”> My name is Manu Sporny and you can give me a ring via 1- 800-555-0199. </p> <p vocab=http://schema.org typeof=“Person”> My name is <span property=“name”>Manu Sporny</span> and you can give me a ring via <span property=“telephone”>1- 800-555-0199</span>. </p>

  25. So Why RDFa? • Flexibility of using/defining a vocabulary • In this class example, we used the same vocabulary as MicroData which is schema.org • But we can use others, for example Friend-of-a-Friend [FOAF] vocabulary. It is helpful to use others when one vocabulary does not define all the needed properties • On another hand, you can define your own vocabulary in terms of RDF and then use it for adding it to the HTML document.

  26. Conclusion • How can we add semantic information to the web • Using HTML 5 attributes • Using MicroData • Using MicroFormats • Using RDFa or RDFa Lite

More Related