Somewhere along the line we moved from using HTML to publish information to using HTML to turn a static design into a webpage. We sliced and diced and turned HTML into a cupboard to put visuals in.

It’s time to turn things around, using HTML to mimic design is not the way forward. We need to go back to our roots, it’s time to start writing perfect HTML pages and use visuals, interaction patterns and progressive enhancement to turn these pages into fantastic user experiences for all contexts.

We’ve been celebrating Semantic HTML but we’re still basing our HTML on a visual design instead of the other way around.

From publishing documents to slicing designs

HTML, 1989

HTML was conceived to facilitate publishing well structured documents and link them together.

Presentational Elements, 1995

Presentational elements were introduced to allowing styling of these documents.

Tables for Layout, 1997

Tables were found to be very handy, you could now design a webpage, slice it into little parts and present these parts exactly the way you wanted on the web using tables for layout. We stopped using HTML describe our information but used it as a tool to create cupboards.

Divitis, 2001

Tables for layout ended abruptly and a lot of web developers, me included, caught a bad case of Divitis.

Semantic HTML, 2002

Divitis was cured quite quickly, slowly but surely everyone started using the correct HTML elements for presenting the various visual elements in the design.

HTML5 Sectioning, 2010

We started using HTML5 sectioning elements to create a clean document outline. Creating such an outline based on a visual design is I find near impossible.

Content should rule again

It’s 2013, and we are still basing our HTML on a design, this workflow is creating numerous problems. It’s near impossible to create a correctly formatted HTML5 document outline, it’s difficult to setup fitting heading levels and progressive enhancement is something that’s done in reverse.

In 2014, let’s change things, let’s write our HTML first and then think about how it should be presented.

We would get all these wonderful things for free:

• A stable base to create an accessible webpage.
• The perfect starting point to work with Progressive Enhancement.
• A correct HTML5 document outline.
• Usable and readable pages on all devices.
• Print!

What do you think?