Ten years ago on Stuff and Nonsense: What’s in a name?

I wrote a lot more a decade ago than I do now and with the ten year anniversary of this blog just past, it’s fascinating to see what I was interested in and sharing back then.


At the end of May in 2004 I’d been increasingly fascinated in the conventions that designers and developers used to name their elements in HTML and I wrote What’s in a name. Remember, this was before microformats. It was before the WHATWG turned a wider sample of naming conventions into the HTML5 elements that we use today.

As I was heavily involved in web accessibility at the time, I was keen to explore whether a common set of naming conventions could help accessibility, particularly through the use of user-stylesheets. Ultimately I was proved right—through HTML5 and WAI ARIA landmarks and roles, conventions do help accessibility today—but not for the reasons I thought at the time.

I made a short survey to see what conventions were being used by designers and developers for common page elements like headers and banners, navigation, content and footers. I then came up with a simple schema for what I thought a common set of names should be.

I followed that up a month later with What’s in a name (pt2) where I outlined a more definitive schema that included:

#container
Page container (usually a <div>)
#branding
Used for a header or banner to brand the site.
#branding-logo
Used for a site logo
#branding-tagline
Used for a strapline or tagline to define the site’s purpose
#nav or #navigation
Used to contain a navigation device
#nav-main
Main or primary navigation
#nav-section
Navigation to pages within the current site section
#nav-external
Navigation to pages outside the site
#nav-supplementary or #nav-supp
A supplementary list of links, perhaps in a footer. This can replace the common, but presentational #footer
#nav-(whatever)
A list of links named at a designer’s descretion
#search
Related to search interface and search results
#search-input
A search form
#search-output
Search results which could include a <div> or other markup including definition lists
#content
Used for content rather than for another purpose such as navigation
#content-main
The main content area
#content-news
News related content
#content-(whatever)
Could include any form of content, including #content-related, #content-quote etc.
#siteinfo
Used for various site related information
#siteinfo-legal
Copyright information etc.
#siteinfo-credits
Designer or other credits

I think most of what I thought of in 2004 still stands up in 2014, although some of it has been made obsolete by HTML5 and ARIA and it can definitely be improved by using the BEM syntax that I’ve become a convert to.

The biggest change in my approach to naming conventions since 2004 is the reasons why. Back then I thought that a common set of attribute values would somehow be helpful to users. Sadly, both I and microformats were proved wrong about that. Today I think that conventions are still important but for developers instead of users. We’ve seen that ‘why’ in the rise of frameworks over the years and the more recent trend towards using pattern libraries.


 
Experience EXPERIENCE

Working with clients for over 25 years

Articles ARTICLES
Contact us OK, LET’S TALK

Press to call 01745 851848

go.bananas@stuffandnonsense.co.uk