The Importance of Patterns in Semantic CSS & HTML


You often hear developers talk about the importance of semantics, but do you know what “semantic” means? I’ve noticed that it tends to be an arbitrary word that’s thrown around the web by people trying to sound smart (I’m guilty of that too). You often hear that semantics are good for SEO and essential for proper and clean code, but what exactly is semantic code?

Semantics literally means description or meaning. Writing semantic code means writing code that’s self-describing, so that little comments are needed. To have semantic code, you need to properly name your IDs, classes, images and other items as descriptive as possible. (For example: “left sidebar”). Semantics also means that you use the code properly, i.e. styles go in CSS and not in HTML.

Patterns in CSS & HTML

Patterns in semantic CSS are all about common repetitive tasks that we do for each site, such as styling a sidebar or adding a navigation. What if we could spot these patterns and figure out a way to decrease our coding time?

Due to the simplicity of CSS and HTML, patterns tend to be a natural occurrence in most developers’ code. While you’ll most likely never find two similarly designed sites with similar code (if they were hand coded), you could easily see similar patterns that exist between them. This is even more obvious when coding around a framework, such as WordPress or Joomla.

The patterns can simply be an ordered list, or they can be as general as possible. Think about the most basic pattern in almost every single website we build. What is it?

<div id="container">
<div></div>
</div>

Even if you don’t name your divs exactly the same as I do, I bet this is the same pattern you use for your development, isn’t it?

Some neat formats created from semantics

Microformats and RDFa were created from some of these obvious patterns in HTML and allow us to reuse these patterns and conventions in attribute names. Microformats are simple, yet powerful pieces of these patterns that can be grouped and nested into each other in order to build massive semantic apps. RDFa is another semantic pattern that extends the semantics of markup without being limited by the host markup language it’s contained in. Both of these contain a great way to specifically describe the content it holds.

Why is all this talk of patterns and semantics important?

Semantics are important for several reasons. It allows several developers to easily work on one project together and the code becomes easier to grasp to newcomers. Using semantics and patterns in your code ensures the code’s reusability, which speeds up your development time in the future, as well as optimizes the code. It also makes it more accessible for people using the internet with screen readers which also help search engines classify and rank your site.

Your HTML should be free of any “styles” and the containers themselves should refer to the content inside, or the placement of the website.

Your Turn

What code patterns have you noticed while in development? What has been your experience in dealing with semantic code or external formats like RDFa?

Image by chrisdlugosz