My OperaNaming key HTML page elements
Monday, March 29, 2010 8:46:31 AM
Earlier, when building a website, I wasn't really putting much thoughts into HTML element identifier names. Not anywhere near as much as I do when designing a C++ code. But lately, as I more and more (sometimes ad absurdum) try to separate content from presentation, I found myself sick of <div id="body-bellownav-middle-helper-div"> and I sat back for few moments to think about it all.
I have discovered one thing. The typical HTML code is great candidate to use a Human Body Metaphor. Almost any web page can be generalized into following parts.
I have discovered one thing. The typical HTML code is great candidate to use a Human Body Metaphor. Almost any web page can be generalized into following parts.
HAIR
Small navigation icons, language switches, logon fields, sometimes breadcrumb navigation or company slogan. These parts have usually their descriptive identifiers (breadcrumb, login, ...) but together they are hair to me now.
HEAD
Logo with or without subtitle, full menu, place for an ad banner.
NECK
Mostly place for graphics, but can carry tabs-based main menu, logon fields or breadcrumb navigation again, or some important links.
BODY
A place for content.
ARM, LEFT, RIGHT
If the page has a sidebar, side navigation, article chapters list or whatever, these I believe can be good names.
WAIST
This element serves similar purpose as NECK does. To connect main parts and provide space for specific controls. This time those would be paging controls, next and previous buttons, and common actions user would want to do, or go to, after reading the content.
LEGS
Usually part of the footer already. Two, three or four columns of links to various parts of the server, most visited, most commented or recently updated articles and so on.
FOOT
A footer, there is not much to add. Copyright, authors link or logo, and various useless stuff like XHTML 1.1 valid messages or that it took server a 0.0069141387939453 seconds to generate the page.
And that would be all. I said that I sat back for only a few moments, didn't I?
