Stuff & Nonsense product and website design

More on developing naming conventions, Microformats and HTML5

It seems like a lifetime ago that I first sat down with a cup of tea and a bourbon biscuit and thought about the conventions that we use for naming HTML/XHTML id and class attribute values.


Not quite a lifetime, but it was way back in May 29th 2004, on my retired blog And All That Malarkey, when I surveyed forty designers' sites to see what conventions they used for common page elements like headers and banners, navigation, content and footers (the results at the time).

It was hardly scientific research but in June that year I followed up on some comments by Eric Meyer and published a set of naming conventions. I am always really pleased when I find a site that has adopted these naming conventions and I still use them every single day, even over four years later.

My thoughts at the time can be summarized to this.

id and class attribute names must reflect the function or content of an element, rather than reflect presentation. So out went header and in came branding; out went footer and in its place came site-info.

Naming should take on almost an XML style structure. So inside content came content-main, content-sub and content-supp.

These conventions have served me well and I've made almost no changes to their core. Without doubt, they have made my work faster, more consistent and more profitable. They made it easier to build products and easier to train people I work with in my way of thinking. Naming conventions work.


Written by Andy Clarke .


Would you like advice and inspiration on making better designs for the web?

Get monthly design inspiration and insights based on my 25+ years of experience. View some recent emails, sign up today, and get:

    I promise never to share your email address and you can unsubscribe with just one click.

    Free set of Layout Love grid templates when you sign up today.

    Hire me. I’m available for coaching and to work on design projects.