Each website is like a book, and each individual HTML page can be considered a chapter of this book. This common analogy can help you to visualize how to break down a website into it’s smaller, semantic components. The ‘chapter’ may contain common, re-usable elements such as paragraphs, block-quotes, headings or even bold and italicized text.

Other example of semantic elements are:

• Lists of Items
• Headings
• Navigational Elements
• Tabular Data
• Address or Contact Info
• Event Details

In order to implement semantic HTML, some decisions should be made before one line of code has been written on the website.

Who reads only the HTML of a website?

Screen Readers
Visually impaired or blind users on the internet may access your website using screen-reading software. This software goes through the code of the website to communicate verbally what the contents of the website are to the screen-reader users. Visual design has no meaning to this software.

Search Engines
Search engines are often dubbed “your most common blind visitor,” as they navigate a website just as a blind person would with screen reader software. Search engines are not interested in visual design, they tend to prefer lean, meaningful HTML markup. The more accurate the code is at explaining the website’s meaning, the better your website will do in search engines such as Google. Unnecessary implementation of HTML code will just slow search engine spiders down.

Developers
Other developers often have to update code that you may write, so it’s good to think if we all start coding in a common, standardized language that it may become easier for us to maintain and develop on other peoples websites.

Mobile Phones
Mobile phones are getting better at rendering HTML documents, but some phones can attempt to do things with your website that can make it unreadable. If you provide a consistent, semantic HTML foundation to the mobile phones browser, chances are your website will work In a more logical manner on the users end.

Standard Users
Visual users will benefit from the visually designed website, but may sometimes have problems seeing these designs the way you may have intended for them originally. The internet is unpredictable when it comes to how users may view your website, and on what device, so when things fall apart you should have developed robust HTML code that can handle this.

Examples of this could be viewing the internet on older browsers, text-only browsers, mobile devices or even gaming consoles. Backwards compatibility ensures that more people see your site now, and also for the future when people view your website in browsers or devices that do not even exist yet.

What tools do I have to convey semantic meaning in my code?

Semantic HTML exists today, it’s just that a lot of people are not using it correctly at the moment. There have been abuses of the intended uses of HTML elements to achieve visual effects in the past that could not be achieved without implementing hacks or incorrect code. Now, with the modern landscape of browser development and CSS support, hacks are no longer necessary to achieve these visual effects, and we can concentrate on the semantic meaning of our code once again.

Simple steps such as avoiding use of tables for layout, separating your content layer (HTML) from your presentational layer (CSS), using external CSS files, and validating your HTML markup will get you started in the right direction.

POSH (Plain Old Semantic HTML) is a concept of recognizing the patterns of semantic HTML development and applying these to your everyday projects. It is not necessarily a technology, but rather a new way to consider the uses of older, ubiquitous technologies such as HTML and CSS, and how we use them.

Microformats also extend your toolset by creating HTML compounds (existing HTML grouped in a specific structure) that also convey extra semantic meaning. Microformats have been around for a couple of years, and help users identify solutions for elements that are not defined properly. Examples of content being identified as Microformats content would be events, reviews, contact details and resumes.

How do I get started?

If you are about to code a website, the best thing you can do is print out the Photoshop mockup and step away from the computer. Have a look at what you are about to code, and start to break it down into smaller components that seem logical to you.

Think about the hierarchy of headers and how all the information relates to each other and start penning in what you think the primary header is, what the sub-headings are or possibly what might be an unordered list, and this will give you a great start before you have even opened up your favorite text editor.

Once you have thought through this process you are ready to start coding and exploring the world of semantics.

Read Scott’s previous post

This entry was posted on Friday, August 3rd, 2007 at 1:44 pm and is filed under Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.