Standard markup
If you are working with web developing like me you must be quite used to working with standards. But what about the markup of the documents, the use of class and id names, there is no standard, yet.
So what I am after is a way of marking up content the same way, I would love to see when all professional sites uses the same id and class names, all navigation is called navigation, footer is footer and not bottom area. I could make an CSS files that works on not only my own site but also on other sites.
Same thing, different name
I did a investigation on a bunch of sites to see what kind of class and id names that was used. This was what I found out.
Main layout elements
- theme, logo, logoArea, header, tagline, top
- content, body, pagebody, maincontent, contentArea, textArea, startTextLeftArea, leftArea, contentBody
- navigation, nav, menu, topNavigationArea, globalNav
- subnavigation, subnav, sub menu
- related, sidebar, side, startTextRightArea, rightArea
- footer, content-footer
Wrappers
- wrapper, container, bg, contentWrap
Navigation elements
- quicklinks, shortcuts, shortcut-section
- home
- naviItem
- miniNav
Search
- searchbox, searchmodule
Ads
- ads, adwrap, bigAd, adContent, promo
Content types
- feeds
- abouttheauthor, contact, contactInfo
- legal, copyright-terms
- firstNews, news, oldNewsList, smallNews, bb
- date, DATE
- linklist, link-list
- archive
- current, selected
Forms
- input
Accessability elements
- skip, skipnav
Suggestion
I’ve made some suggestions. First of all, use names that describes what kind of content it is, not how it looks or where it is placed. Next, use no capitals, use “-” for spaces. And last, keep it short.
Main areas
- wrapper
- logo
- nav
- sub-nav
- content
- related
- footer
Navigation elements
- nav-item
- home
- shortcuts
- current
Search
- search (easy one)
Ads and commercial
- ads
Content types
- feeds
- about
- legal
- archive
- date
Accessibility elements
- skip
What is your thoughts, any suggestions?
(Daniel & Ulf, thanks for the article suggestion)
Related Posts:
- None
June 9th, 2005 at 9:51 pm
Couldn’t agree more. Excellent suggestions!
Personally, I’ve recently started using a hyphen instead of the good ol’ camel back syntax(i.e. left-nav instead of leftNav) and it feels so much better.
June 13th, 2005 at 9:41 am
Edited: Fixed the links.
You might find some additional thoughts and ideas for just this at What is a name, part I with a followup at What is in a name, part II.
A “standard” might be a good idea, but it’s going to be damn hard getting everyone to agree and change existing practices. It’s also going to be tough coming up with something that works for every site.
June 13th, 2005 at 9:43 am
Uh, what a clusterf*** of a post, heh. Sorry about that. Perhaps a few formatting tips are in order near this comment field. The absence of them makes me think I am meant to just type clear text - which apparently was a wrong assumption
June 13th, 2005 at 10:18 am
Robert: yeah me too. I do not know, but I think it is easier to read.
Jacob: IŽll try to add that and thanks for the links.