Stuff & Nonsense product and website design

Blog and all that malarkey

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


More from Stuff & Nonsense

Andy Clarke demonstrates how to take your product and website designs to the next level.

Take your Squarespace designs to the next level with our premium Squarespace templates.

The popular web design contract template trusted by thousands of web designers and developers.

Andy is an experienced mentor who can help you improve your design skills and develop your career.


I’m available to work on new design projects.