Using Semantic Naming Conventions In Your Mark-Up
// February 25th, 2008 // 1 Comment » // POSH, tutorials, web standards
When marking up a document, how many of us pay attention to good naming conventions? By this I mean using mark up that is meaningful and nonpresentational.
Let’s take a very basic web page which has main navigation, a header which contains the company branding or logo, a sidebar for additional content, a main content area and a footer area which has site content such as copyright information. Before we all used web standards and meaningful mark-up our document would probably resemble something like this:
The way each div element is named is not telling you anything about the content, only giving clues to how the content is being presented. Even though we can achieve valid mark up using these naming conventions, they are non-semantic and as we are aiming for a true separation of presentation from content we need to have a re-think of these names by using semantic mark-up.
Let’s take another look at our document and break it down piece by piece:
#Navigation
Looking at our mark-up we have just #navigation, but what kind of navigation? Is it primary, sub or whatever? As this will be the main navigation in our document lets give it a meaningful name, lets call it #nav_main. This clearly tells us that this is the main navigation not the sub or the secondary but the main navigation.
#Header
The company logo is something I have seen named as ‘header’ or ‘head’ or even in some cases ‘banner’. Not at all semantic as it’s presentational, but how about ‘brand’ or ‘branding’. That is what we are putting there – the company branding or identity. When we see a famous logo like Fedex for example, we don’t say “oh that’s the company header” we say ‘Ah! Thats the company brand identity or ‘Branding’ So, in our example let’s use #branding
#Sidebar
A question we must ask ourselves here is “what is the sidebar actually for and what is it going to contain?” In our example we are going to use it for additional content. Let’s say for example we want to put a small thumbnail gallery like a flickr feed inside the sidebar, we can label this “Additional content” but more semantically we can re-name this to #content_sub If we kept it as #sidebar we would be using a presentational name which goes against our goal of separating presentation from content.
#Content
Our example has one area of main content which needs to be given a definition. Instead of just calling it ‘content’ which could be anything on the page, let’s give it more meaning, let’s call it #content_main
Here we can achieve an added bonus, you have probably seen those ‘skip to main content’ links on some websites right? Now that we have a meaningful ‘hook’ in place, we really can skip to main content rather than putting a ‘skip to content’ link in the page and linking it to just something with the name ‘#content’.
#Footer
Finally we come to the ‘footer’ of our page. Now footers have a wide range of possibilities and are often overlooked. In fact they are a vital component of your website as they can contain some useful information.
In our example, we are going to put some copyright information, a link to a site map, and a link to an accessibility statement. This tells us that the footer is going to contain content relating to information about the site. So I think it would be common sense to re-name the footer to #site_info
Now let’s look at the changes we have made to our mark-up:
All we have done is change our naming conventions from presentational sounding mark-up to semantic mark-up giving our document’s content structure something that is meaningful and not presentational.
Advantages
Using naming conventions in this way can help yourself or a design team working together on a project in more ways than one. In a team environment, naming conventions make it simple to understand mark-up that has been written by a designer or a developer, as everyone in that team will understand a set of pe-defined conventions that the team have created and agreed upon. It will also reduce the margin for error with deadlines looming so in turn can help reduce costs as well.
It can also be a great deal of help to yourself. You probably have old items or snippets of code created months ago which you might not have looked at in a while, and whilst reading through them thought “what the hell does that relate to?”. It’s so easy to forget why you gave something a certain name when you created that code, so by using the same named conventions, you have ease of reference when reading through your code.
Not Just Mark-Up
A common head-scratcher is often when naming images. In our #branding we could use the same name for our company logo image – branding.jpg. Here we are naming our image semantically by naming it what it is rather than what it looks like.
Find Out More
Please Note: The above article is not a definitive guide, just a seed to plant into your mind about the idea of using good well formed and semantic mark-up. POSH (Plain Old Semantic Mark-Up) is quite a debatable subject and I would suggest reading more from some of the authors listed below to learn more in greater detail:
“There is a danger of adversly effecting semantics through incorrect use of CSS.” Andy Clarke
Read: Semantics and Design by Andy Clarke
Learn about the origins of POSh and Semantic XHTML from the Microformats Wiki
Read: POSH – Microformats
Read: Semantic XHTML
Here’s a great article from Digital Web entitled Mark-Up As A Craft which gives an extensive list of guidelines to aid you in creating well formed and semantic mark-up.
These are just a few pointers that I hope you will take a look at and learn from. Good Luck!
