HTML has a problem. As implemented in browsers many interactive elements cannot be styled as desired by web developers, or developers as directed by designers, marketing or any of the numerous others whose wishes code cutters must abide by.

Something borrowed, something blue

Take for example, Google’s gmail UI, a ‘web application’ if there ever was one. It consists of literally 100’s of controls, many of which are simple controls such as buttons and checkboxes.

screenshot of gmail 'all mail' view.

Looking under the hood, what is evident is there are a lot of custom controls built from <div>‘s and <span>‘s:

HTML: 1, HEAD: 1, STYLE: 8, META: 6, TITLE: 1, LINK: 3, SCRIPT: 11, BODY: 1,  IFRAME: 11,  DIV: 3757, FORM: 3,  INPUT: 11,  NOSCRIPT: 1,  P: 1,  A: 107,  B: 433, OL: 1, LI: 19, BR: 115, UL: 2, SPAN: 1603,  IMG: 263,  H2: 6,  FIELDSET: 2,  LEGEND: 2,  TABLE: 10, TBODY: 61, TR: 284, TD: 1618, BUTTON: 1, H1: 1, NOBR: 1, H3: 6, HR: 1, COLGROUP: 5, COL: 34, TEXTAREA: 1.

Digging a little deeper:

There are 1172 instances of the role attribute, including:

  • 304 – role="checkbox"
  • 83 – role="button"
  • 54 – role="option"

These roles are some examples of  native elements of HTML that in 2015 continue to be re-invented using <div>‘s and <span>‘s, but have been around since pretty much the dawn of HTML. The <button> and <input type="button"> elements are latecomers as they first appeared in HTML 4 in 1999, while <input type="checkbox"> and <option> appeared in HTML 2 in 1995.

Now in 2015 we have web components re-inventing native HTML buttons, radio buttons and checkboxes, for relief from the scourge of divitis, perpetrated upon us by the as shipped inability to style a native HTML element as desired.

Is it just me, or are new web UI technologies continuing to try to solve the wrong problems?

Further reading