Say it like you mean it
Author of this post: Jonathan Nicol | About Blog Authors »
Those of us responsible for designing the front-end of websites have traditionally concerned ourselves with producing clean layouts rather than clean markup. Today, improved education about the importance of web standards means that web designers are likely to pay as much attention to what happens “under the hood” as what we see in the browser window. Writing code that validates is an essential part of the web standards equation, but a more subtle concept to grasp is that of writing semantic (X)HTML markup.
The semantics of markup refers to its meaning. When marking up an HTML document it is important to choose HTML elements that best describes the content they contain. For example, the most important heading on a page should be marked up as an < h1 >. Similarly, if your page contains a list of ‘related articles’ which appear in no particular order, these would be marked up as an unordered list. The key to writing semantic markup if to think about your content in terms of what it means rather than how you want it to look.
When it comes time to apply visual styles to our markup, we should also pay attention to the way we name our CSS id and class attributes. If we label our HTML elements using a semantic naming convention we avoid tying our markup to its visual presentation. Imagine an error message paragraph assigned class=”big-red-text”. What happens if later we decide that error messages should actually be white on a blue background? We can change our CSS rule to effect this visual change, but our CSS class will still be called “big-red-text”. A more semantic way to name the class might have been class=”error-message”, which of course describes the content’s meaning rather than its presentation.
Thinking semantically not only improves your a site’s accessibility, it also makes it easier to maintain in the long term. The goal of CSS is the effective separation of content from its presentation, but without semantic markup and naming conventions that goal will remain an elusive one.
