Why Does Clean Markup Matter in Web Design?

Default avatar.
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

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…

20 Best New Websites, April 2023

In April’s edition, there’s a whole heap of large-scale, and even full-screen, video. Drone footage is back with a veng…

Exciting New Tools For Designers, April 2023

The AI revolution is having a huge impact on the types of products that are hitting the market, with almost every app b…

3 Essential Design Trends, March 2023

One thing that we often think about design trends is that they are probably good to make a list. That’s not always true…