HTML5 v. XHTML5

HTML5 allows developers to code very loosely, making the HTML 4 loose doctype seem strict. To me, not closing tags, omitting tags, not quoting attributes, etc., makes me throw up a little bit in my mouth. Not a pretty picture? Well, I would argue, neither is loose code. In fact, this is a valid HTML5 document:

<!DOCTYPE HTML>
<meta charset=utf-8>
<title>Valid HTML5</title>
<p>Tweetable Web page</p>

No <head>, no <body>, yet still valid. If that is too verbose for you, even:

<!DOCTYPE HTML>
<title>Blank Document</title>

is a valid HTML5 document. All you need is a doctype and a title.

If you want to code HTML5 yet still use valid XML syntax and headers, and serve your document as XML, you’re coding XHTML5: it seems that ‘XHTML5′ has become an official name of HTML5 coded and served as XML, since the original term "Polyglot Markup" never took off.

XHTML5 is a document that conforms to both the HTML and XHTML syntax by using a common subset of both the HTML and XHTML. To code XHTML5 you need to:

  1. Use the HTML5 doctype
  2. Code in XHTML well-formed syntax
  3. Default XHTML namespace: <html xmlns="http://www.w3.org/1999/xhtml">
  4. A server that serves up files as XML MIME type application/xhtml+xml

An XHTML5 document can be served as either HTML or XHTML, depending on browser support and MIME type. It really only becomes XHTML5 document if it is served with the XML MIME type application/xhtml+xml . Otherwise, it is just really well coded HTML5

For a document to be XML, you need a server that serves up the file as XML MIME type: application/xhtml+xml. This MIME declaration is not visible in the source code. If you want to check how you file is served, check the HTTP Content-Type header. The XML MIME type is not yet supported by Internet Explorer, but IE can render XHTML documents.

A XHTML5 document looks like this:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us">
  <head>
    <meta charset="UTF-8"/>
    <title>XHTML5</title>
  </head>
  <body>
    <p>put valid XHTML markup here</p>
  </body>
</html>

The XML declaration <?xml version=”1.0” encoding=”UTF-8”?> is not required if the default UTF-8 encoding is used. The meta charset is also not required, if your server is set up with the HTTP Content-Type header.

No, you don’t need to serve your files as XML. You don’t even need to include the XHTML namespace to code valid HTML5. If you do choose to markup your HTML5 as if you were coding XHTML, your HTML5 document will validate. This article provides a definition of what is XHTML5 versus what is HTML5 coded using XHTML syntax.

Win a FREE TICKET: 2nd Annual CSS Summit: July 28th

Win a free ticket to the online CSSSummit. Follow @estellevw on Twitter, and Tweet, facebook or blog that you want to go. Something like ““I wanna go to attend the online http://csssummit.com. Follow @estellevw and retweet to win: http://awe.sm/58Uxr” will work fine.

Can wait to sign up? Register at http://csssummit.com.


I am very excited to be presenting at the 2nd Annual CSS Summit with some of the best speakers working with CSS today and a list of topics on the cutting edge:

  • Zoe Gillenwater, author of Stunning CSS, presents “CSS3 Techniques”
  • David McFarland, author of CSS: The Missing Manual, presents “CSS3 Animations”
  • Stephanie Sullivan, author of Mastering Dreamweaver and CSS, presents “CSS3 and Progressive Enhancement”
  • Jason Cranford-Teague, author of Fluid Web Typography, presents “CSS and Web Typography”
  • Denise Jacobs, author of The CSS Detective Guide, presents “Advanced CSS Troubleshooting”
  • Estelle Weyl, that’s me!, author of Beginning iPhone Web Apps, presents “CSS3 and iPhone Development”
  • Chris Eppstein, creator of CSS Compass framework, presents “CSS with SASS, SCSS & Compass”
  • Nicole Sullivan, curator of the Object Oriented CSS framework, presents “CSS and Optimizing Facebook”

Tell them Estelle sent you. Use discount code “CSSWEYL” for 10% off the 2nd Annual CSS Summit!

Join us for what is sure to be a great day of knowledge and insight with some of the Web’s leading experts in CSS.

There will be free recordings of the CSS Summit for all attendees. The online event is content-rich and allows for plenty of time for interaction with the speakers, but sometimes life gets in the way. They’ve upgraded their online conferencing software—now you can view (and review) recordings of the 2nd Annual CSS Summit at your own convenience in case work, vacation or nature calls, or in case we cover something that is new to you and you need to re-watch to fully grasp.

Win a Ticket to Front End Conference

We have one free ticket for a lucky winner to http://frontenddesignconference.com/ for a lucky winner.

To enter the drawing Tweet “I wanna go to http://frontenddesignconference.com/ in Florida. Follow @estellevw and retweet to win. http://awe.sm/58TY1 or something more imaginative, with a link to this post. One lucky retweeter / follower will be selected from the group of retweeters on Sunday night.

Here is more on the conference:
7 Awesome Speakers
July 23, 2010
A single day design conference focused on content, presentation and behavior.
Register Now for $129

Oh, and if you want to beg, you can do so in the comments.

Introducing HTML5: Web Workers

All the interactivity executed on a page, including CSS repainting of a page when needed, runs on a single JavaScript thread. If there is a task with a heavy script load, the browser may slow to a crawl, greatly harming the user experience. HTML5 Web Workers allow JavaScript to delegate tasks to other processes so that scripts run in parallel: the main script can do the exciting stuff while the Web Workers do any heavy lifting you pass to them without slowing the main script thread.

One way workers are useful is to allow your code to perform processor-intensive calculations without blocking the user interface thread. Workers enable web content to run scripts, even AJAX HTTPRequests, in background threads. The worker thread can perform tasks without interfering with the user interface.

You know how sometimes web applications take a long time and you have to wait for the hourglass to disappear before being able to interact with the page? Web workers are a solution. Workers perform JavaScript on a background thread leaving the main thread free to manipulate the DOM and repaint the page, if necessary.

Web workers cannot manipulate the DOM. If actions taken by the background thread need to result in changes to the DOM, they should post messages back to their creators to do that work. The postMessage() method can be employed.

Brief overview of Web Worker implementation

To create a web worker you call the Worker() constructor, specifying the URI of a script to execute in the worker thread and set the worker’s onmessage property to an appropriate event handler function to receive notifications from the web worker. You terminate a worker with the Worker terminate() or close() method. The terminate() method is immediate, stopping all current processes.

var webWorker = new Worker('new_thread.js'); //create it
webWorker.onmessage = function(event) {
// handle the message
};

Workers can use timeouts and intervals just like the main thread can. This can be useful, for example, if you want to have your worker thread run code periodically instead of nonstop. You can control the worker by employing the setTimeout(), clearTimeout(), setInterval(), and clearInterval() methods.

Worker threads have access to a global function, importScripts(), which lets them import scripts or libraries into their scope. It accepts as parameters zero or more URIs to resources to import;

importScripts(scripts/jquery-min.js', application.js');      /* imports both scripts */ 

HTML5 includes several APIs that enable developers to enhance user experience. HTML5 web workers improve script runtime of web applications. In this section we provided a very brief overview of webworker. You should also check out microdata, which can be incorporated to improve the semantics of web content. We’ll also be covering ARIA, or Accessible Rich Internet Applications, and GeoLocation into our intro to HTML5 modules series.

In the meantime, if you want to dive deeper into Web Workers, check out:

SessionStorage

SessionStorage is an alternative to session cookies, but more powerful. The HTML5 storage API defines persistent data storage of key-value pair data in Web clients. The HTML5 Storage API improves upon HTTP session and local cookies that you are likely to be already familiar with. While cookies are limited to 4KB, the new standard allows for more space. The size depends on the browser, but is generally in the MB rather that KB range. HTML5 provides for two types of storage: persistant localStorage, and unique per open window/tab sessionStorage. Today we’ll focus on sessionStorage.

SessionStorage

Session storage is accessible to any page from the same site opened in that window. If the user had multiple windows opened on the site, each one would have its own individual copy of the session storage object.

Cookies are sent to the server with every HTTP request. Session data, however, isn’t sent automatically, reducing the size of every request. The developer determines which key-value pairs need to be sent with each request.

Most shopping carts us use cookie-based authentication to remember the users browser session. Without sessionStorage, if two users want to shop on the same site from two windows of the same browser, it is not possible because cookies are tied to the browser session. With session storage, this can be done as the session storage is tied to the current window. As each window maintains its own session information, using sessionStorage is perceived as if each window is a different user accessing the shopping cart from different systems.

Okay that example explains how session storage is different from cookies… but is there not a slightly more practical example to talk about? I’m just thinking what storefront is ever going to think of what you just described as a desirable scenario that they’ll want to support (or care about)?

Perhaps something like the ability to test websites by logging in as different users as the same time from different tabs, or? just something that is a bit more practical would help I think…

sessionStorage should be used to store temporary data related to a single browser window as it ceases to exist after the window is closed.

The sessionStorage object has five methods and one property:

  • setItem(key, value) – sets the value for the given key. For example, define the session variable with:
    sessionStorage.setItem('keyname', 'data value')
  • getItem(key) - retrieves the value for the given key. Returns null if the key does not exist.
    sessionStorage.getItem('keyname')
    sessionStorage.keyname
  • removeItem(key) - removes the key and its associated value. Unset the value with:
    sessionStorage.removeItem(‘keyname’);
  • key(position) – returns the key for the value in the given numeric position.
  • clear() – removes all key-value pairs. Clear all the key value pairs with:
    sessionStorage.clear();
  • length – The length property indicates how many key-value pairs are currently stored in sessionStorage.

Using sessionStorage is extremely easy. It is like defining and using a regular variable, except that it needs to be prefixed with sessionStorage.

For more information on sessionStorage, see http://www.nczonline.net/blog/2009/07/21/introduction-to-sessionstorage/

Microdata

Microdata let you create your own vocabularies beyond HTML5 and extend your web pages with custom semantics. Microdata uses the new to HTML5 attributes of itemscope, itemprop, itemref and itemtype. The itemscope attribute is used create an item. The itemprop attribute is used to add a property to an item. If an itemprop has associated properties that are not descendants of that itemprop, you can associate those properties with that itemprop by using the itemref attribute: the entity that has the itemscope attribute also accepts the itemref attribute that takes as it’s value a space separated list of id’s of entities that should be crawled in addition to the itemprop’s descendants.

Microdata is most useful when it is used in contexts where other authors and readers are able to cooperate to make new uses of the markup. You can create your own types of microdata markup marked up on a page that doesn’t expect its microdata to be re-used. Use the itemtype attribute to provide a URI. There doesn’t need to be anything at that URI, but all of the itemscopes of the same itemtype should reference the same URI. It is most useful, however, to not create your own vocabulary if one exists for a similar purpose. There are several microdata vocabularies that have been standardized that coincide with Microformat conventions.

Microformats are very similar to microdata. In fact, microdata can be viewed as an extension of the existing microformat idea that attempts to address the deficiencies of microformats without the complexity of systems such as RDFa. Instead of using the new itemscope, itemprop, itemtype, etc. attributes, Microformats repurpose the class attribute to provide human and machine readable semantic meaning to data, microdata

Microformats are standardized sets of vocabularies that are both human and machine-readable. They are web page conventions used to describe common information types including events, reviews, address book information and calendar events. Each entity, such as a person, event or business, has its own properties, such as name, address and phone number.

In general, microformats use the class attribute in opening HTML tags (often <span> or <div>) to assign brief, descriptive names to entities and their properties. Unlike Microdata, Microformats are NOT part of the HTML5 specification.

Here’s an example of a short HTML block showing my contact information for me.

<ul>
<li><img src="http://standardista.com/images/estelle.jpg" alt="photo of Estelle Weyl "/></li>
<li><a href="http://www.standardista.com">Estelle Weyl</a></li>
<li>1234 Main Street<br />
San Francisco, CA 94114</li>
<li>415.555.1212</li>
</ul>

Here is the same HTML marked up with the hCard (person) microformat.

<ul id="hcard-Estelle-Weyl" class="vcard">
<li><img src="http://standardista.com/images/estelle.jpg" alt="photo of Estelle Weyl" class="photo"/></li>
<li><a class="url fn" href="http://www.standardista.com">Estelle Weyl</a></li>
<li class="adr">
<span class="street-address">1234 Main Street</span>
<span class="locality">San Francisco</span>, <span class="region">CA</span>, <span class="postal-code">94114</span> <span class="country-name hidden">USA</span>
</li>
<li class="tel">415.555.1212</li>
</ul>

In the first line, class="vcard" indicates that the HTML enclosed in the <ul> describes a person: in this case, me. The microformat used to describe people is called hCard but is referred to in HTML as vcard. While confusing, it isn’t a typo.

The rest of the example describes properties of the person, including a photo, name, address, URL and phone, with each property having a class attribute describing the property. For example, fn describes my full name.
Properties can contain other properties. In the example above, the property adr encompasses all components of my fake address including street-address, locality, region and postal-code. With a little CSS we can hide the ‘hidden’ class and add a line break between street-address and locality. To create your own hcard, visit http://microformats.org/code/hcard/creator

The same content could be written with microdata:

<ul id="hcard-Estelle-Weyl" itemscope itemtype="http://microformats.org/profile/hcard">
<li><img src="http://standardista.com/images/estelle.jpg" alt="photo of Estelle Weyl" class="photo"/></li>
<li><a href="http://www.standardista.com" itemprop="fn">Estelle Weyl</a></li>
<li itemprop="adr">
<span itemprop="street-address">1234 Main Street</span>
<span itemprop="locality">San Francisco</span>, <span itemprop="region">CA</span>, <span itemprop="postal-code">94114</span> <span class="hidden" itemprop="country-name">USA</span>
</li>
<li itemprop="tel">415.555.1212</li>
</ul>

Or you can combine the two:

<ul id="hcard-Estelle-Weyl" class="vcard" itemscope itemtype="http://microformats.org/profile/hcard">
<li><img src="http://standardista.com/images/estelle.jpg" alt="photo of Estelle Weyl" class="photo"/></li>
<li><a class="url fn" href="http://www.standardista.com" itemprop="fn">Estelle Weyl</a></li>
<li class="adr" itemprop="adr">
<span class="street-address" itemprop="street-address">1234 Main Street</span>
<span class="locality" itemprop="locality">San Francisco</span>, <span class="region" itemprop="region">CA</span>, <span class="postal-code" itemprop="postal-code">94114</span> <span class="country-name hidden" itemprop="country-name">USA</span>
</li>
<li class="tel" itemprop="tel">415.555.1212</li>
</ul>

http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#microdata provides information about microdata.

Search engines will not display content that is not visible to the user. Providing search engines with more detailed information, even if you don’t want that information to be seen by visitors to your page, can be helpful. Event time in ISO data format helps ensure that events are placed in the right time sequence and correctly placed in calendars. Providing geo coordinates of latitude and longitude can help ensure correct mapping. Providing semantics around reviews provides Google with added meta data that it can use to better display your search results leading to a higher click thru rate.

To enable the web to be a single global database, being able to parse the available data into meaningful data points is required. Microdata and microformats help make otherwise non-descript data meaningful to parsers.

ApplicationCache

Up until now, users of web applications have only been able to use the applications while connected to the Internet. When offline, web based e-mail, calendars and other online tools have been unavailable, and, for the most part, continue to be. While offline, users may still access some portions of sites they have visited by accessing what is in the local cache, but that is limited and inconvenient. If a user gets bumped offline in the middle of a process — writing an email, filling a form — hitting submit can lead to a loss of all the data entered. The HTML 5 specification provides a few solutions including a SQL-based database API for storing data locally, and an offline application HTTP cache for ensuring applications are available even when the user is offline. HTML 5 contains several features that address the challenge of building Web applications that don’t lose all functionality while offline, including SQL, offline application caching APIs as well as online/offline events, status, and the localStorage API.

In this section we are focusing on the Application Cache.

A book could be written about each of these topics. In this series of articles, we’re are introduced to each of the HTML5 API and related modules (for example, GeoLocation is not in the HTML5 specifications, but is often thought to be). This series will provide a brief introduction to each topic, linking to the specifications and other relevant articles. It’s important to know about what is going to be in HTML5 so that when these features are needed, and when they are available and supported on your target devices, you’ll know about these features.

Application Cache

To access a webpage offline, we’ve been able to click on the ‘save’ menu item in our browser to save the html file and associated media for a while now, but this method of saving web pages only works for static content. With the ubiquity of web-based applications, it is more important now than ever that web applications be accessible when the user is offline: whether the user is offline for the duration of a 5 hour flight, or if the user is just temporarily offline as 3G connectivity is lost while driving… um, I mean, riding as a passenger. While browsers have been able to cache components of a website, HTML5 addresses some of the difficulties of being offline with the ApplicationCache API.

Using the cache interface gives your web application the advantages of 1) offline browsing, 2) faster reloads and 3) reduced server load. With Application Cache offline browsing, you entire site (within limits) can be navigable even when a user is offline. By caching resources, the resources are local, loading much faster, and they’re retrieved only when altered, which reduces the server load. AppCache enables the local storing of up to 5MB (or limits you to 5MB, depending on your perspective) per website.

The Application Cache (or AppCache) enables you to specify which files should be cached and made available offline, enabling your website to work correctly, including page reload, when your user is not online.

For AppCache to work, you include the manifest attribute in the opening <html> tag. The value of which is the URL of a text file listing which resources should be cached. In your HTML file, include manifest="URL_of_manifest".

<!doctype HTML>
<html manifest="resourcelist.manifest">
<meta charset="utf-8" />
<title>....

With the inclusion of the manifest attribute linking to a valid manifest file, when a user downloads this page, the browser will cache the files listed in the manifest file, the manifest file itself and the current document and make them available even when the user is offline.

When the page is visited, the browser will try to update the cache if the manifest file has changed. It fetches the manifest and, if the manifest has changed since the page was last visited, the browser re-downloads all the assets and re-caches them.

The cache manifest file

The .manifest file is a text file that lists the resources the browser should cache. The file must start with the following string: CACHE MANIFEST. The required string is then followed by a list of files to be cached, and optional comments and section headers.

To create a comment, include a # as the first character of the line and the remainder of the line will be ignored. Section headers change the current section. There are three possible section headers, CACHE:, FALLBACK: and NETWORK:. The files following the CACHE: header are explicit. If no header is defined, or if files are listed above the headers, those files are explicit. FALLBACK: switches to the fallback section — if the first file is not available, the second file listed on the line will be served. While secure (https://) files may be cached, they have to be from the same origin as the manifest. The NETWORK: heading leads the online white list section – it isn’t cached, and references to this file will bypass the cache and access the file online.

The manifest file is also permanently stored into the browser cache, only to be overwritten if there is an edit made to the file. While the browser will not read the comment, the .manifest file needs to be served with the mime-type "text/cache-manifest". You may need to add a custom file type to your web server or .htaccess configuration if you don’t have access to the server.

A .manifest file lists the files that the browser should cache. The file may look something like this:

CACHE MANIFEST
#version01

#files that explicitly cached
CACHE:
index.html
css/styles.css
scripts/application.js

#Resources requiring connectivity
NETWORK:
signin.php
dosomething.cgi

The Application Cache API adds an element to HTML5. The <event-source> element is a new feature in HTML 5 that allows servers to continuously stream updates. When used with the appCache, its src attribute takes as its value a NETWORK: file. The NETWORK: files will never be cached, so that any attempt to access that file will bypass the cache. The <event-source> tag defines a source for events sent by a server. The src attribute of the <event-source> element takes as it’s value the white-listed NETWORK: file to allow for continuous upsteaming from the server.

You’ll note that there is a version number in a comment on the second line. While the browser will generally ignore the comment, it will note if there are changes to the file. Changing the commented version number has become the standard way of informing the browser that the manifest file should be considered updated.

Updating the cache

Once an application is offline it remains cached until the user clears their browser’s data storage for your site, the .manifest file is modified or the app cache is programmatically updated.

If you update a file listed in the manifest, this does not inform the browser that the assets must be re-cached. The reason we added the commented version number was to inform the browser that the assets must be re-cached by altering the .manifest file itself.

If the manifest file or a resource specified in it fails to download, the entire cache update process fails and the browser will keep using the old application cache.