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.