HTML 5 is supposed to change everything all over again, but can we use progressive enhancement, or does HTML 5 mean starting from scratch after all the lessons we’ve learned about semantic HTML and beautiful markup from HTML 4?
Different web browsers interpret HTML differently. It’s a fact of life, and it can feel like a curse to HTML developers when their clean semantic HTML and CSS code fail to deliver the same results to users across all browsers. Yet the folks developing the next generation of browsers continue to push forward with browsers that include incompatible features from unreleased standards, or proprietary standards that lure us into innocently building web apps that break for our poor users on competing browsers. That’s happening right now with CSS 3 and HTML 5 (branded as “HTML5” by some and just plain “HTML” by others).
The proposed HTML 5 standards introduce a number of useful semantic elements that can help HTML developers plan the structure of their documents. But even with the new web standards in flux, the savvy HTML developer comfortable with the concept of progressive enhancement can start using these elements right now.
New HTML 5 Semantic Elements
Among the new semantic HTML elements to help a developer structure a web page are new general container elements called header, footer, and nav. These are block-level elements that can replace the conventional div with a class of header, footer, or nav commonly used by HTML developers for branding, nav bar, and attribution.
We now have article, section, and aside elements to group content within a page. And since a single page of HTML 5 may have multiple sections with multiple articles, or multiple articles with multiple sections, the cascading style sheet selectors for these elements should provide inheritable styles, just as it would be with a set of divs that share the same class.
Each of these articles or sections, as well as the main content area, may now also have its own hierarchy of headers from h1 to h6, wrapped safely inside its own header elements. No more limiting yourself to a single h1 per page. The CSS styles for these headers can be inherited logically based on the containers.
Progressive Enhancement
But we still live in a world where we have no control over the browsers a user might have. Is it an old one, designed well before standards for HTML 5 were even proposed? Or is it a new one, with a unique idea of how to interpret the elements in this new unfinished web standard?
Happily, there are some Javascript utilities that are coming to the rescue. One of the smallest and simplest is the Google HTML 5 Shim. This simply allows older browsers to recognize the current set of HTML 5 elements for the sake of CSS styling. Yes, this even works in Internet Explorer 6!
Another tool is Modernizr. This handy bit of code includes a shim, but also adds several enhancements that allow features such as advanced CSS3 selectors to take advantage of the native features of older browsers. After all, if we’re going to create our beautiful markup, we want our cascading style sheets to have all the modern advantages, too. To get started using it, all you have to do is include the script, and add a “no-js” class to your html element.
What We’re Losing
The proposed XHTML standard many of us adopted—in spite of the way it was actually interpreted by web browsers—isn’t going away. However, future development has been halted, and we are being encouraged to use HTML 5 instead for web development. HTML 5, like earlier flavors of HTML, doesn’t require us to close all of our elements the way XHTML does, and supports target tags for opening links in separate windows. Of course, creating structured HTML with XML-inspired closed elements is still a good practice, as it makes our page structure cleaner and easier to manage and maintain.
One of the convenient enhancements that follows the practice of actual HTML developers who ignored the published standard is that we no longer have to worry about including block-level elements inside our anchor elements. It is now permitted to put an entire div inside a link, and our HTML 5 markup with still be compliant.
And although we’ve all learned to favor em and strong elements over i and b elements…some of the time…HTML 5 has reinvented our old bold and italic friends, redefining them based on how they have been used by HTML developers over the years instead of deprecating them.
There are plenty of other changes in the proposed HTML 5 standards, but these are a few that might get you started down the right path as you apply the concepts of progressive enhancement to your HTML development.
So with a good sense of semantic structure, we can approach any web design we encounter and parse it into clean, cross-browser compliant HTML 5 based on the web standards that exist. It just takes a little sense, a little discipline, and some Javascript tricks, to help our web sites survive whatever the browser developers throw at us!