Why Does Clean Markup Matter in Web Design?

Wdd Logo.
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.

Further Reading & Resources

Written exclusively for WDD by Jeff Couturier.

Do you follow web standards in your websites? Why or why not? Please share your comments with us.

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.

Read Next

3 Essential Design Trends, December 2023

While we love the holidays, too much of a seasonal theme can get overwhelming. Thankfully, these design trends strike a…

10 Easy Ways to Make Money as a Web Designer

When you’re a web designer, the logical way to make money is designing websites; you can apply for a job at an agency,…

The 10 Most Hated Fonts of All Time

Remember when Comic Sans wasn’t the butt of the jokes? Long for the days when we actually enjoyed using the Impact…

15 Best New Fonts, November 2023

2023 is almost over, and the new fonts are still coming thick and fast. This month, we’ve found some awesome variable…

Old School Web Techniques Best Forgotten

When the web first entered the public consciousness back in the 90s, it was primarily text-based with minimal design…

20 Best New Websites, November 2023

As the nights draw in for the Northern hemisphere, what better way to brighten your day than by soaking up some design…

30 Amazing Chrome Extensions for Designers and Developers

Searching for a tool to make cross-platform design a breeze? Desperate for an extension that helps you figure out the…

Exciting New Tools for Designers, November 2023

We’ve got a mix of handy image helpers, useful design assets, and clever productivity tools, amongst other treats. Some…

The Dangers of Doomscrolling for Designers and How to Break Free

As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…

From Image Adjustments to AI: Photoshop Through the Years

Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…

3 Essential Design Trends, November 2023

In the season of giving thanks, we often think of comfort and tradition. These are common themes with each of our three…

30 Obsolete Technologies that will Perplex Post-2000s Kids

Remember the screech of dial-up internet? Hold fond memories of arcade machines? In this list, we’re condensing down 30…