Learn how to use WebSlices with IE8 Beta 1

A new feature called WebSlices has been introduced in IE8 Beta 1, allowing you to subscribe to and get regular updates from different parts of a Web page.

A portion of a Web page marked as a WebSlice acts as a feed. When a user subscribes to one, it is added to their Favourites bar and they get informed when the content gets updated.

If a Web page contains a feed the circled icon below will be orange and, purple if it contains WebSlices. If neither is detected the icon will stay inactive.

Microsoft claims that you are able to find WebSlices directly on a Web page by moving your mouse over an area that has been marked as a WebSlice. The purple button below is supposed to show up in the top-left corner of a WebSlice, but I haven't been able to discover this feature so far.

To subscribe to a WebSlice and get alerted when the content gets updated click on the icon below in your browser. When prompted click the add button.

Once you have added the WebSlice it will appear in your Favourites bar. The bold text indicates there are new updates.

To preview the content, click the WebSlice button. A window containing the latest content will pop up. You have the option of navigating to the full page by clicking the open button.

Behind the scenes

To understand how WebSlices work, let's take a look at the code behind them. Marking a portion of a Web page as a WebSlice is done with hAtom Microformat and the WebSlice format. In addition to basic properties they can contain expiration and bandwidth properties, but here we'll look at the basic anatomy of a WebSlice.

A WebSlice consist of a container, entry title and entry format which is optional. The first two are compulsory.

The container, which encompasses the entire WebSlice must have a class name of hslice and an ID. The entry title and entry content use entry-title and entry-content class names respectively (see the example code below).

<div class="hslice" id="webslice">
   <p class="entry-title"> MSN.com Slideshow </p>
   <div class="entry-content"> Latest content ... </div>
</div>

Now that you have an understanding of WebSlices, you can create your own or use them to get updates from Web sites you visit frequently.