Think before you wrap. A few tips for coding semantically.

Why code semantically?

There are lots of benefits your website can gain from well formed code. Here is a brief list:

• Your content will be accessible to the widest range of users and devices possible.
• Separation of content and presentation.
• You will have cleaner code, which will render faster than bloated html.
• With browsers becoming more standards compliant you can start to expect your content to render the same in all browsers. Less browser hacks!
• Improve search engine rankings.
• It is the law for service providers to make sure content is accessible and usable to all customers. By considering how you code you can address this. See www.drc-gb.org for more information.
• Easier to maintain and for other developers to work on.

Making your website standards compliant and built with style sheets is a good way forward from old fashioned table based layouts. However, I find there are still designers not aware of the correct ways to mark up certain content. Here are some tips of what I think are the most unknown tags. You should be using them everyday in your coding. It’s also another way to plug CSS into your well described content and style particular elements sitewide without the need for extra span tags or classes. Come on, let’s make your content even richer.

Some of the forgotten tags

• address - wrap your company address in the this tag.
• blockquote - use this with cite=”http://” when you have a quote from another source
• code - use this to wrap any example code
• dfn - wrap this around definitions
• label - wrap your field names in label tags
• abbr - use this for abbreviated text
• acronym - use this for acronyms

There is a good list of other xhtml tags located at www.w3schools.com.

A note about navigation
Recently, I have seen some web sites that have done a great job of moving over to css design and coding semantically, however their navigation is a series of href’s. Make sure you code site navigation in a list and use css to style the them as you please. This is semantically correct, because a sites navigation is a list of links.

There are lots of remarkable tutorials out there showcasing how you can design accessible navigation bars that can look just as visually stunning as one with images and javascript. Your only limit is how creative you can be with backgrounds and rollover images.

Tutorials
www.projectseven.com/tutorials/css/uberlinks/

A nice example of list navigation
www.happycog.com/

I hope that helps some of you designers who are trying to do your bit towards a more semantic web. As we work harder to think about how we describe our content, we are also preparing for all the cool things that computers will be able to do with our well-formed websites as well as making them very accessible to all users.