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)?

Ambie

Do I have to read all this, or just the title of your question? :) – Plant

@RobertHarvey With my edit, just the title :) – Ambie

IE6 is pretty much dead: ie6countdown.com. So many sites these days require JavaScript and provide no fallback if it is disabled, I can't imagine anyone disabling JS on purpose anymore (other than to turn off poorly written JS that makes the site unusable). – Daffodil

@Daffodil not to mention that browsers like chrome (and even ie10 surprisingly) make it almost impossible to find the "turn off javascript" button – Infantile

@Daffodil clearly its been too long since I checked that site... last time I looked I believe it was closer to 10%. However, while not a large portion, I know for a fact that we have some visitors who use IE6, and part of PE is the idea that you don't say "well, you need to upgrade". – Ambie

@ThomasJones turning off JS in IE9 and earlier, however, is as easy as turning security to the highest setting. Higher is better, right? :P – Ambie

good point @Beofett. I do think part of the solution is drawing the line somewhere though. I'm not sure that you can do much if you have the anti-holy grail of settings. Its not unreasonable to expect JavaScript (and they can create exceptions for specific sites - I think) to function on your site. while PE is about making it work for older browsers, a line must be drawn somewhere. See Norguard's answer – Infantile

@ThomasJones I think I still need to support IE6, and browsers that don't have JS, but tackling those as separate goals, rather than combining them, will certainly make my life easier. – Ambie

If JS is the only way to give antique browsers a reasonable experience, you've done all you can (aside from taking the time to manually install a reasonable browser for them). Users who turn off JS are in the same boat as those who turn off CSS: they're not allowed to get upset because the site they're viewing isn't pretty anymore. – Daffodil

The IE6countdown.com stats shown today are nearly 6 months old. More recent data puts Global IE6 usage at .38%. Even China's usage is now below 7%. More good news: Global IE7 usage is below 1% - The US is among the worst IE7 offenders with .94% usage. – Carpentry

If people are seriously browsing the web using IE6 with Javascript turned off, they are used to not being able to use the web anymore. You cannot keep caring about every last possible holdout from a decade ago. The time and energy needed to make a modern site with features people expect in 2013 work on a base IE6 engine without Javascript is prohibitively expensive, if not impossible. If you want to make a modern site for modern browsers, you have to let go of the old ones that don't even give you chance to drag them into the 21st century kicking and screaming. – Incontinent

@Incontinent makes perfectly reasonable statements...that miss the entire Progressive Enhancement point. PE is about providing utility at all levels of browser capability, regardless of why the browser is incapable (even if it is "guilty" of being IE6 with JS turned off). – Taille

@JeromyFrench there are things that you just can't shim around. If you are building a YouTube clone, and you want it to work on Netscape 1, what are you going to do? I'll even give you IE3... You can't give things to all people -- plus have it also be responsive, plus fluid, plus a single-page app, and validate in W3C, etc, on one single page, PLUS keep page-weight down for mobile, all without redirects to different versions of the page, on a stateless, REST framework. It's just not doable, at a fundamental level. – Unrefined

@Norguard: completely agree and understand. I guess I'd just reiterate that PE isn't about some sort of "separate but equal" ethic as much as "give the user the best experience they can have". Given your YouTube example, there is more content than just the video, so at least mark that content up with syntactically-correct HTML. The video can't be streamed to SuperOldBrowser 1.o, so instead provide a link that lets the user order a DVD of the video to their home...that sort of thing. – Taille

@JeromyFrench Right. But now, without browser detection or anything of the sort, you have a browser with CSS turned off, no JavaScript, but they support Flash -- so you've got the video there, but also the order links... It becomes a mashup of 5x as much code on the page, plus IE-special circumstances. All when more and more people are using mobile and tablet, over wireless/data, where the impetus is to lower the weight of the initial page and then stream in dependencies as quickly as possible, afterwards, because the weight and added calls, upfront, is a killer on those platforms. – Unrefined

And as an online-analyst, I can tell you that every second of waiting for things to load results in a very large drop in traffic. Especially now that portable-browsing is more ubiquitous. People are now expecting desktop-speeds in terms of time-to-display. I'm not saying "Don't support these things, somehow" -- I'm saying that your support for same-page content must stop somewhere, and concede that a more-suitable experience can be had on a different page, whether that's mobile or IE3. – Unrefined

@Norguard: totally valid to make the business decision "we're just going to support top 90% of traffic and expect that the rest of browsers will be reasonable usable with our app". But Progressive Enhancement presents another option, one that can also help you be "future-proof" because the HTML foundation is (by definition) supported by all web browsers. Wish I knew how to move this convo to a community wiki! – Taille

let us continue this discussion in chat – Unrefined

@Jeromy Yes, PE is all about providing some form of experience to everybody. But you have to stay realistic. It is entirely possible to create a page that works on Lynx, IE6- with and without JS, Chrome 356 and all broken versions of old Android browsers. But those are not all going to have the same top notch experience. You cannot drag IE6-noJS into HTML5 land, you'd have to rewrite the entire site in non-HTML5 with tons of tricks and hacks to provide an equivalent experience. Is this feasible? Usually no. IE6-noJS users get the "please update your browser" experience, nothing more. – Incontinent

Answer 1

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.

Unrefined

Answer 2

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.

Carpentry