How do you use HTML5 tags while supporting Progressive Enhancement for no-script clients that don't natively recognize unknown elements?

Question

As I understand Progressive Enhancement, one of the basic tenets is the web site should be functional for everyone, regardless of browser version or settings.

The suggested breakdown I've seen is:

• HTML content layer using semantic markup
• CSS Presentation layer
• Enhancement layer (typically through JavaScript or a JS library like JQuery)

I'm a bit confused over the proper way to handle the HTML content layer, however. In particular, the semantic markup.

I keep seeing that HTML5 tags such as nav, article, footer etc. are the ideal method of maintaining this semantic markup for PE. However, many older browsers do not support HTML5 tags. The easy way to get around this is to use CSS to set default stylings to { display: block; } for the HTML5 tags, but this only works with some browsers. The dreaded IE6, for example, does not recognize HTML5 elements.

The typical workaround for this is to use javascript to dynamically create the missing elements directly into the DOM (such as through an HTML5 shiv).

However... if the client is running an environment that doesn't recognize HTML5 elements, and they do not, for whatever reason, accept javascript, how do you incorporate HTML5 semantic tags in support of Progressive Enhancement, without failing to render properly for scriptless browsers that don't recognize the tags? Is this possible, or do you have to leave those browsers out of your design consideration (which seems counter to the PE ideals)?

Answer 1

According to Yahoo's internal traffic analysis, nearly all users with JavaScript disabled are using HTML5 compliant browsers. Don't worry about not supporting the rare IE8 user with JavaScript disabled.

Your company won't lose any business by not supporting those users. The only real reason to offer this level of support would be as an academic exercise to prove it can be done. There's no bang for your buck.

Answer 2

If you are hyper-paranoid about supporting GhettoIE, without JS, in this fashion, this might be the time to use if ie comments in the HTML, directing people to get Chrome Frame, or get a better browser, or to click a link to take them to an oldschool, fugly-but-functional version of the page, which adheres to CSS2.1 (just core features) and HTML4.01 strict markup.

The point of Progressive Enhancement IS to provide separation of concerns, and offer features as they're supported... ...but there ARE baseline requirements, here.

You can't expect Mosaic and IE3 to run this stuff, either.

IE6 with JS, or non-IE, modern standard browser, without is sort of the de-facto, here.