Why Does Clean Markup Matter in Web Design?

May 06, 2009

Because the web is a changing and ever evolving organism, it’s important to build sites that can grow with it and easily ride the current instead of drowning when a new wave approaches.

Clean markup and building with web standards not only helps you do this, but will save you both time and money in the long run.

As the web expands, so the technologies that it uses grow with it. While HTML has been around for a long time, it has acquired quite a few sidekicks along the way.

First Javascript, then CSS, XML and later AJAX. Wide adoption of HTML 5 is just around the corner, with Firefox, Safari, Opera and Chrome already enjoying nearly full HTML 5 support (the slow kid on the block, Internet Explorer, is lagging behind as usual).

In this article, we’ll review the basics of web standards, what they are, what they mean to you, and some important tips to help you deal with this important and often neglected issue.

What Does it Mean to Have “Clean” Markup?

Simply put, it means free of clutter, standards-compliant, and using the tags and structures of each language for their intended purpose.

Clutter-free HTML makes sparse use of tags, eliminates the extraneous and accomplishes its task with as little markup as necessary. It avoids needless attributes, such as inline CSS, and leaves each document structured and organized.

Likewise, clutter-free CSS should avoid repeating itself, take advantage of inheritance (remember, CSS stands for Cascading Style Sheet) and re-use classes whenever possible.

Standards-compliant means that your pages validate with the standards laid out by the W3C for HTML, CSS, and XML. It means using the free W3C validators to check for errors, correcting them and testing again until you’re as close to 100% valid as possible.

Why Should I Care? It Works, Isn’t That Enough?

Every project has an aggressive deadline and every client wants their site launched yesterday. So as web developers and designers we are under constant pressure to work faster and more efficiently.

It’s easy to fall into the trap of thinking fast must mean sloppy, and that clean, standards-compliant markup takes more time. It’s easy to just say “it works and that’s all that matters.”

Sure, it works… for now, for you. What about next year, or three years from now? What about new browsers? What about accessibility?

Do you really think that the major search engines will adhere to special, sloppy coding methods? They’re finicky, and if you are not standards compliant you’re kicking your search ranking in the face.

What about the next poor sap that has to edit these pages you’ve created? What happens if you get hit by a bus, quit to go backpacking in Alaska, or get abducted by aliens? Someone else has to pick up where you left off and he’ll be looking at your code, trying to make sense of it. Will it be easy, or will it give him a headache and make him curse your name?

Do it right the first time. This isn’t just some annoying, fatherly life-lesson. It will actually save you both time and money, and make those that follow you have an easier time of things.

You may think it’s faster to just drop in the inline CSS instead of properly adding a new class to your style sheet. And you may think it’s faster to toss in whatever HTML you can spit out without considering the overall document structure.

When it comes time to update that document later or redesign the whole site, you’ll spend much more time making up for sloppy code than you ever saved by rushing through it in the first place. When you create a new style sheet, those pesky inline styles you hastily added will come back to haunt you and you’ll spend hours hunting them down and stripping them out.

Extensibility, Accessibility, Translation and Future Proofing

Mobile browsing is growing like Godzilla on atomic-steroids. Instead of being relegated to the jet-setting Blackberry addicts from 5 years ago, today everyone is using their phone to surf the web.

Assistive technology ‑screen readers for the blind and alternate interface devices for the handicapped- is common, and you don’t want to lose a sale or alienate traffic just because you didn’t take that into account.

Your site is likely to be translated into a half-dozen languages as readers from around the world find your content. Thanks to the Internet Archive, Google’s cache and others, pages you publish today will be around for a long, long time even after they’ve been removed from your live site.

Clean markup and standards-compliance will go a long way to ensure your sites work in each of these scenarios.

Do’s and Don’ts:

DO use tags as they are intended. For example: h1 is the first top-level element on the page, then h2, h3 and so on. There should only be one h1 tag per page.
DO name your CSS classes and IDs using meaningful terms, and ask yourself if someone else will know what a class/ID does from its name alone. Which naming convention makes more sense: #box12 or #comment-footer?
DO make good use of CSS inheritance. For example: if you set a font on a container, you don’t need to specify it again on every child element unless that child element needs to use a different font. This will keep your style sheets lean and quick to load.
DO validate your HTML, CSS and XML and correct as many errors as possible. Pay attention to the warnings generated as well.
DO double check WYSIWYG generated code and clean up as necessary. They’re notorious for spitting out bulky, bloated markup with loads of unnecessary, invalid junk.
DON’T inject inline styles or extraneous tags and attributes just because you’re in a rush.
DON’T settle for “it works.” Just because a page renders it doesn’t mean that the markup under the hood is standards-compliant, problem-free or search engine friendly.

WDD Staff

WDD staff are proud to be able to bring you this daily blog about web design and development. If there’s something you think we should be talking about let us know @DesignerDepot.