PSD to HTML| seoSemanticXHTML BLOG » web standards

Why to prefer Microdata over RDF/RDFa and Microformats?

admin — Tue, 10 Jan 2012 11:50:53 +0000

Standard Rule states that CSS is supposed to have designing or presentation guideline to present the information to readers, whereas HTML should only include semantic or meaning of the information being presented. Since inception, HTML is trying to be semantic means trying to include meaningful terms instead of designing guidelines. Each step in the development of HTML & CSS is aimed to have a better semantic markup language to present the information in a better way without losing its meaning.It remains true for the inception of CSS, RDFa, Microformat, and HTML5. HTML5 includes a meta-data specification named Microdata, which is aimed to include semantics on existing Web pages. Browsers, Web Crawlers, Screen Readers, and Search engines can extract Microdata from its container page to provide better browsing experience to the end-users. In this write up, we will discuss how Microdata is a better semantic format than previous frameworks of RDF, RDFa, and Microformats.

Default Markup Code

We have following markup code created in HTML. We will implement RDF, Microformat and Microdata in this code one by one to illustrate their differences.

Dan Brown’s Latest Book

The Lost Symbol

Author: Dan Brown (born June 22, 1964)

Fiction & Thriller Novel

The Lost Symbol Website

Reviewed by: Mark.

Ratings: 4.5/5 (Excellent)

It is a thriller set in Washington, D.C., after the events of The Da Vinci Code, and relies on Freemasonry for both its recurring theme and its major characters

RDF/RDFa

RDF stands for Resource Description Framework. It is based on W3C Recommendation and adds extensions to XHTML in order to embed rich metadata in Web pages. RDF was firstly introduced in 2004 and is succeeded by RDFa in 2008. RDFa is strictly connected with XHTML and supported with the XHTML1.1 doctype.

Since the inception of RDF, the Webmasters are working to implement it and the big players are creating technologies based RDF like Open Graph Protocol from Facebook, OWL and SKOS. According to W3C, several tools and implementations are built based upon RDF till yet. Let us have a look how to implement the RDF in the above default HTML code. There are different vocabularies to implement the RDFa like FOAF from XMLNS.com, DC from Purl.org, and rdf.data-vocabulary.org from Google Data-Vocabulary.org. We will use Google’s Data-Vocabulary.org in this article. If you use any other

xmlns=”http://www.w3.org/1999/xhtml”

xmlns:v=http://rdf.data-vocabulary.org/#>

Dan Brown’s Latest Book

The Lost Symbol

Author: Dan Brown (born June 22, 1964)

Fiction & Thriller Novel

rel=”v:url”>The Lost Symbol Website

Reviewed by: Mark.

Ratings:

4.5/

5 (Excellent)

It is a thriller set in Washington, D.C., after the events of The Da Vinci Code, and relies on Freemasonry for both its recurring theme and its major characters

Problems with RDFa

RDF was started with the XHTML 1.1 and 2.2. Both of these standards are discontinued now. The world is stepping up to HTML5, CSS3, and other latest standards. All the new versions of Browsers, CMSs, and even Mobile software are adopting HTML5. You cannot use xmlns and meta property attributes with HTML5 as the document will not be validated as HTML5 with these things. Today or tomorrow you have to switch over with the latest Web technologies to stay up-to-date in the market.

Second problem is that there are multiple vocabularies available for RDFa. There is neither unique is no standard format nor common adaption of existing RDF technologies. In addition, there is no W3C-recommended way to embed RDFa in plain HTML. Webmasters often get confused which one to use or which one to left.

Third problem: both HTML and RDF are different technologies, so you must know both of them to use RDF.

Microformat

Microformat is a semantic markup, which re-uses the existing HTML/XHTML code to show metadata. The implementation of Microformat is easier than that of RDF or RDFa. If you know HTML then you can simply add Microformats to your Website. Microformats.org provides the complete description and other tools to implement the Microformats.

Let us have a look on the following implementation of Microformat.

Dan Brown’s Latest Book

class=”hreview”>

class=”item”>The Lost Symbol

Author: Dan Brown (born June 22, 1964)

Fiction & Thriller Novel

class=”url fn” href=”http://www.thelostsymbol.com” rel=”tag”>The Lost Symbol Website

Reviewed by: Mark.

Ratings: 4.5/5 (Excellent)

class=”summary”>It is a thriller set in Washington, D.C., after the events of The Da Vinci Code, and relies on Freemasonry for both its recurring theme and its major characters

Following is sample vCard created with Microformats

Dan Brown

Author at Simons & Chuster

200 Main St

Desertville, AZ

12345

Official Website

Currently, Microformats.org provides definition for following Microformats:

adr
geo
hAtom – syndicating RSS content
hAudio
hListing
hMedia
hNews
hProduct
hRecipe
hReview
rel-directory
rel-enclosure
rel-home
rel-payment
robots exclusion
xFolk

Problems with Microformats

Several issues were detected and reported with Microformats. BBC Radio was using the hCalendar Microformat to add the start & end times, broadcasting channels etc. However, BBC found issues with hCalendar and dropped its usage. Accessibility issues are listed with hCalendar, and audio information issues with hAudio at Microformats.org. In addition, issues with hAtom and hProduct are also mentioned there. In addition, Microformats does not have any specification to replace the existing Semantic or meta-data format RDF & RDFa. It is just reusing the existing XHTML document. After seeing the issues, everyone was just moving backward to RDF or not considering the Microformats appropriate for their work.

Microdata

Microdata is the latest meta-data or semantic specification for HTML5 from WHATWG and W3C. It is considered as an integral part of HTML5 and use vocabularies from Schema.org. Recently, all three major search engines Google, Bing and Yahoo agreed to have a common specification Microdata for semantic markup show the rich snippets of Websites in their search engine result pages (SERPs). They’ve recommended using Microdata and shifting from previous meta-data format to this one. Let us see how to implement the Microdata in the above mentioned default HTML code.

itemscope itemtype=”http://schema.org/Book”>

The Lost Symbol

Author: Dan Brown (born June 22, 1964)

Fiction & Thriller Novel

itemprop=”book” href=”http://www.thelostsymbol.com”>The Lost Symbol Website

Reviewed by: Mark.

Ratings: 4.5 / 5 (Excellent)

itemprop=”reviewBody”>It is a thriller set in Washington, D.C., after the events of The Da Vinci Code, and relies on Freemasonry for both its recurring theme and its major characters

Why not to use others?

Most of the Content Management Systems are stepping towards HTML5 and CSS3. You cannot use the RDF or RDFa with HTML5 as you’ve to include xmlns protocol or vocabulary. In addition, Microformats are not sufficient to override all the classes of RDF/RDFa.

Benefits of Microdata

Microdata is a set of tags introduced with HTML5.
It overrides (defines) all the classes of RDF, RDFa and Microformats.
You know HTML then you can use both HTML5 & Microdata.
Bing, Google and Yahoo have recognized Metadata as the standard format of semantic markup. They recommend using it and migrating from previous semantic format to Microdata.
You just have to add a few more classes in the existing HTML code to implement Microdata.
With Microdata, your Website will gain preference in the SERPs.
Schema.org has all the definitions for Microdata classes and will work with major search engines to add more in its database.
You can further extend the Microdata as per requirement.

Conclusion

The semantic markup is considered as a need for human being since the inception of HTML & CSS. Yes, we agree that previously RDF, RDFa and Microformats tried to help us in integrating the semantic markup. Now, there is another new format in the market. The same observation goes for HTML2, HTML3, HTML4, XHTML1, XHTML, CSS1 and CSS2. Why do you want to leave these formats and step ahead to adopt HTML5 and CSS3?

Moving towards Microformats for more Semantic Web

admin — Mon, 09 Jan 2012 13:38:05 +0000

There is constant demand to write semantic code for a website for it attaches more meaning to the pages and helps search engines to better understand the web pages. Though there are several ways of accomplishing this but Microformats seem to have occupied the centre stage and are increasingly being used to create a meaningful markup. The primary advantage of using Microformats is that they help develop structured data which is easy to understand by search engines and aid their indexing process.

However, before proceeding further to discuss the benefits of using Microformats, let us first have a quick understanding about them.

What are Microformats?

Microformats are a set of simple formats that helps create effective metadata and thus enhance the semantic value of a code.

The widely acclaimed definition of Microformats from microformats.org states:

“Designed for humans first and machines second, Microformats are a set of simple, open data formats built upon existing and widely adopted standards.”

The best feature of Microformats is that they can be easily integrated into the existing XHTML mark up and prove beneficial in describing the web content accurately and in a consistent manner.

How do Microformats enhance semantic value?

Though HTML and XHTML do provide elements to lend semantic meaning to web page content but Microformats are able to do it more effectively by using the following attributes:

Class
Rel
Rev

Why use Microformats?

Adherence to standards

As web standards compliance is necessary for a website, Microformats are built keeping this in mind and thus will ensure that code adheres to existing standards.

Ensure Inter-operability

Using Microformats will ensure that the site is viewable in different browsers, operating systems as well as mobile devices.

Flexibility

Microformats allow the desired flexibility to the users to control and share data over the Web.

Adaptability

Microformats are highly adaptable to the existing behaviors and web usage patterns that ease out the tasks for site owners

Search Engine Friendliness

As Microformats create machine readable and more meaningful metadata, it lends search engine friendliness to the site

Consistent Content

With the ability to share a Microformat with content providers, it becomes possible to create consistent content and in the manner as desired

Meant for Future Web

As the emphasis to have semantic mark up gains more prominence, the use of Microformats is going to increase making it ideal for the future Web

Though it offers these advantages, there are also some drawbacks associated with Microformats including:

They add on the to the HTML markup
Though they are easy to use but the user still has to devote time learning to make the proper use
All browsers may not show full support for Microformats

Some Useful Microformats

Geo – For marking geographic location

hCalendar – used to mark events and calendar

hCard – useful for representing personal and business contacts

rel=”nofollow” – Elemental Microformat that adds no-follow attribute to links

VoteLinks – allows liking or disliking a link

Robot Exclusion Profile – provides page-specific direction to web crawlers

For more Microformats, you can visit http://microformats.org/wiki/Main_Page.

So, creating a well structured and semantic mark up is no longer a trouble as Microformats provide the right help. We hope that you liked the above information. Kindly provide some more suggestions.

Site’s Speed Optimization for Better User Experience

Keshav — Thu, 01 Sep 2011 11:57:15 +0000

A website is weighed against various parameters in order to ensure that it enables a friendly user experience. One of these factors, which is of immense importance is the speed of the site or in other words, the time taken by the site to load itself. If a site loads fast, it allows users to quickly get the information they wish to know. This is an important consideration as users usually don’t prefer to wait for long. Also, having a fast site can create a competitive advantage for webmasters as site’s speed has made it to list of Google ranking factors. Therefore, efforts must be made to improve the speed of the site. We are going to highlight some of the effective ways of optimizing the site’s speed to enable a pleasant user experience.

Code –Optimize It First

It must be ensured that the source code is not bulky. The HTML and CSS documents must not contain unnecessary characters that may increase the file size and affect load speed. Optimizing the code is the basic thing to do.

Minimizing HTTP Requests

It is important to minimize the HTTP requests made to the server as they increase the downloading time, thereby decreasing the speed. Two effective ways to reduce the number of such requests include:

Using CSS Sprites

This is a useful way to lessen the number of image requests and it does so by combining all background images into a single image.

Combining Files into Libraries

Combining various files, say scripts and stylesheets, and creating their libraries is another way to reduce the number of HTTP requests.

External CSS and JS Files

It is a good practice to keep the CSS and JavaScript files as external components as this reduces the number of HTTP requests and thus leads to fast loading pages. As these files are cached, keeping them inline delays the rendering of the web page.

Make Use of Caching Systems

Caching systems are the best option as the files don’t need to be downloaded several times if these are used. They help load the site faster by caching all files. You can enable the Browser Cache, Page Cache and Disk Cache for your Website.

Optimize the Images

Images are known to increase the loading time, thus it makes sense to optimize them so that they don’t affect the speed negatively. There are several image editing software that can be utilized for this purpose. They allow saving images in different suitable formats such as PNG & JPEG while reducing the file size which ultimately results in fast loading site.

Usage of Content Delivery Network (CDN)

It is a great thing to make available the content across multiple locations across the globe so that users see it. In this regard, using a CDN can come handy and will allow the users to access the site easily; no matter how far they are located. A CDN does so by caching the content and making it available across distant servers so that the site downloads fast and users face no problems in seeing it.

Go for Gzip

Gzip Compression is an efficient means used by sites to reduce the size of various files whether HTML, CSS or JS, etc. Using Gzip reduces the response time and makes a site faster.

Keeping CSS at Top and JS at Bottom

To enable progressive rendering and make pages load faster, it is a good practice to keep CSS at the top of the page. On the other hand, having JS files at the end of the page helps as it then doesn’t prevent the browser from downloading other components.

Redirects Should be Avoided

For the simple reason that they cause delay and hamper user experience by taking more time, Redirects must be avoided to maintain a good speed for the site.

Site’s speed is important as it directly affects the users’ experience and is one of the ranking factors, therefore it must be dealt with serious attention. A site needs to load fast and allow users to quickly view the content.

We hope that the above mention practices provide some insights to our readers. We would be delighted to get suggestions and opinions from our readers.

Web Standards

admin — Fri, 03 Jul 2009 06:28:04 +0000

Does your website look different on different browsers? Does it take a lot of time to make even a small change on your website? Do you have bandwidth concern? Does your website takes lot of time to load?

The solution for any of the above mentioned issues is “Web Standard compliant website“.

Founded in 1998, web standard is a general term for the formal standard and other technical specification, established by W3C and other standard bodies. Their aim is to increase the accessibility of web pages.

Why use web standards?
Using web standards improve the accessibility of the websites, reduce development and maintenance time, improve search engine rankings and can also improve accessibility.

This is why it is always advisable to follow standards based approach while developing a website.

1. Separation of Content and presentation:
In standard-based approach, XHTML is used for content, structure and Cascading Style Sheet (CSS) for presentation. Separating content and presentation improves the accessibility of the webs pages across browsers and Operating system.

2. Improved efficiency:
By separating content and presentation, we reduce page weight, which in turn results into lower bandwidth costs.

3. Lower site maintenance cost:
Having all the styles defined in single CSS file makes the maintenance easy. It is easy to understand the semantic and structured code even though created by some one else.

4. Consistent Look and Feel:
All styles are defined separately in a central CSS file. Separation of style from the content gives a consistent look and feel to the website.

5. Increased Accessibility:
Standard based websites work well with assistive devices including screen-reader or Braille terminals.

6. Cross browser compatible:
Writing clean code that conforms to the W3C standards will give consistent results across all browser platforms. Major browsers include – IE6, IE7, Safari, firefox (Windows and Mac), Opera.

7. Non-Desktop Browser Compatibility:
Separating content and presentation, makes it easy to build custom style sheets for non-desktop browsers. Its easy to define separate CSS for mobile, PDAs, Print etc.

8. Improved search engine ranking:
CSS driven website helps in improving content to code ration by removing junk code. This improves the structural organization of the code, thereby improving its readability. Using optimized content rich code makes it easy for the search engine to index it more accurately which results in better ranking

Conclusion:
In nutshell, standard based websites are more accessible across all browsers, operating systems and different devices. They use low bandwidth and perform well in search engines.