ID Navigation Conventions
When developing websites and cleaning up code with semantic anchors it’s often difficult to keep consistancy and know what names or conventions to use for container ids.
There has only been a small amount of research in to overall naming conventions for markup, with a few ideas which have been discussed by Andy Clarke. With this in mind, I’ve come up with some conventions for the main containers used in common layouts.
<!-- an overall container for flexibility, styling and centering -->
<div id="container">
<!-- h1, site title and any other branding such as strap lines -->
<div id="branding"></div>
<!-- content container allows for the easy use of faux-columns -->
<div id="content">
<!-- the main content goes in here! -->
<div id="content-primary"></div>
<!-- any supportive text, usually presented as a sidebar -->
<div id="content-secondary"></div>
</div>
<!-- navigation source-ordered at the bottom -->
<div id="navigation">
<!-- main section links -->
<div id="navigation-primary"></div>
<!-- sub navigation related to the current section -->
<div id="navigation-secondary"></div>
</div>
<!-- footer information, copyright etc -->
<div id="footer"></div>
</div>
If you develop your own naming conventions allows you to reuse basic CSS layout techniques. However, if a global naming convention is developed, then it gives more control back to the user. This allows the user to easily restyle any site confidently, using a small set of rules they’ve developed.
Finally, if you’re interested in more powerful conventions which you can implement in to your existing markup right away, check out Microformats, an exciting project by Tantek Çelik.