Navigation

Why Does Clean Markup Matter in Web Design?

CSS, Usability, Web Development | May 6, 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.

Share this post
Comments (no login required)
  • http://snailbird.com Nikki

    So many great points! Clean markup DOES matter. Thanks for a great article.

  • http://www.designbyadmiral.com/ Doug S.

    Actually the one H1 per page rule is not a rule at all. Google recently ruled in from an SEO point of view and stated that multiple H1s was not going to negatively effect you and that it was perfectly OK as long as the situation warranted multiple H1 tags.

    From a screen-reader usability perspective, however, I would imagine one H1 to be beneficial but other than that?

    • Alvaro Guzman

      I would expect the same as well. Personally, H1 to me is very beneficial, it helps differentiate the “Alpha” content from the rest that trail along.

    • Snookerman

      I was just about to write that, here is the video from Google:
      http://www.youtube.com/watch?v=GIn5qJKU8VM&fmt=22

      Also, in HTML5, we are supposed to use h1 tags for each article or section.

  • serj

    verry good info you give there. great article!

  • Brad

    What about speed?

    Using clean markup and web standards can significantly increase the speed at which your site loads.

  • http://www.pixelstudioworks.com KAMAL

    Good post!

    It was a useful article for web designers and programmers.

    Thanks.

  • Hugo

    Hey I got a question: After you’ve finished a project, does anyone use CSS/Javascript compressor tools to make the files smaller and save bandwidth? I mean the tools that smash all you organized code into one line by deleting all whitespace and comments. Reason why I’m asking this is that compressed code is like unreadable (equals ‘not clean’?), but at the same time you save several kilobytes.

    • AGuzman

      This all depends on the project. If it’s one that’s personal I’d probably condense and compress the code, however a project for a customer, that’s different. I wouldn’t want to have to come back to fix something and later have trouble with the coding because it’s entirely way too compressed.

    • http://www.chotrul.com/dhttp://www.chotrul.com/skills/design-markup.html Chotrul Web Design

      A good alternative to this is to use HTTP compression on the host server, such a GZip etc. That way the files are unchanged and easy to modify, but compressed and decompressed on the fly for smaller file sizes. This can work for HTML, CSS and Javascript, amongst others.

    • http://armorik.com.ba Roni

      or, you can use on the live site compressed code, but keep on a separate folder the “source” uncompressed code.

      When you deliver a site, it’s supposed to be bug free & working. Yet do not compress.
      May be a couple of minor lat minute changes request.(most probably)

      Fair enougth, when the client is happy with the live: compress! Then use source for any further work.

  • http://twitter.com/shiido shiido

    very useful article, i think Ie is somehow slowing us down, in this top speed INTERNET grow…

  • http://www.stpo.fr STPo

    Doug S. is right, several H1 on the same page are OK. What’s the problem with the screen-reader usability?

  • Matt Ward

    Yikes. I admit I am a bit guilty of overusing inline styles, but your post has convinced me to take more time to take more time with my style sheets! Thanks!

  • http://www.rocketgenius.com Kevin

    Great post. I’m always put off but the “just get it done” mentality. Take pride in your work, take the time to do it right and you’ll always come out ahead.

    I know too many “web developers” who think a job well done is one that you can bang out in 2 hours and then they rationalize by saying “the client will never look at the code”. Not good and definitely not very professional.

  • http://www.cbgrafica.com Luis Ahmed

    Clean Markup and the use of standards are not only a necessary practice, we have to make web sites semantically correct and it includes every issue touched by this post and some others. Thanks for share the ideas, great post.

  • http://www.webair.it/webdesign.html Realizzazione Siti Web Bologna

    very useful the “Do’s and Don’ts” list

  • http://greenflipflops.com Gabe Harris

    Thank you for mentioning “the next poor sap” that has to inherit your code. I cringe at the thought of taking on existing projects because experience has taught me that so many developers just don’t care what their code looks like in the editor. I have a similar post on my blog talking about cleaning up css files here: http://tinyurl.com/ct7p3j

    Maybe even more important than the “next poor sap” – what if that poor sap is you?!?!? I know I don’t like revisiting projects that I have been thinking of as “complete” for months or years, but I do feel much better when I go back to the site and the code is crispy clean!

  • http://goodkarmahost.com Dixie Vogel

    Some wonderful points here! I would add a couple.

    1. Clean markup is less likely to break in obscure browsers.
    2. Carefully constructed markup allows you to change styles sitewide very easily, and if it’s done very well, you can do a whole redesign via straight CSS.
    3. Cleaner, leaner code means faster loading pages. Everybody likes that!

    This message can sometimes get lost in the push to produce and the fact clients don’t understand the value of what’s under the hood nearly as much as what they can see. But taking pride in your work invarabily pays off.

    Thanks for the article!

  • http://sweetpaperdoll.wordpress.com SaraKate

    As someone who is just learning to create a website from scratch, I find this post extremely important. Not only is clean markup easier to learn (Why would you clutter up markup anyway? Doesn’t seem to benefit anyone involved.), but also easier to edit for people who don’t do web design or development for a living. I work for a small non-profit and am re-designing our website from scratch. The current site looks as if everything was created with Dreamweaver in WYSIWYG format instead of hand-coded, which gives a lot of extra (useless and hard-to-read) bulk. It has created a lot of problems, which I am hoping to avoid in the future by hand-coding with clean and simple markup in the next version of our site.

  • http://www.creydesign.com Chris Reynolds

    Couldn’t have said it better myself! Excellent post on a very important topic. Nice job!

  • http://blog.insicdesigns.com insic

    Now I have a solid reference when somebody ask me why they need to validate their markup. As I recall, I tried to explain this to lot of people like my teamate :) but they refuse to listen sometime.

    Very nice article

  • http://cssah.blogspot.com/ cssah

    very useful thanks so much

  • http://www.darrenalawi.com darrenalawi

    Some very good points Alvaro, it’s really difficult to quantify the benefits of clean standards compliant code, if we all took the attitude that ‘if it works, leave it’ we would never improve.

  • http://www.crearecommunications.co.uk Adam

    We make sure all of our sites are compliant unless there’s a valid reason not to. At the end of the day it’s not hard to do – you can often go from 100 to 2 errors just by removing or adding one tag!

  • http://randsco.com stk

    As a designer, we often ask clients, “Do you want it done right or done fast? Because if you want it done fast, you’ll be calling us in to fix stuff.”

    Understand @ following behind sloppy coders (believe me) but in the real world, the person hired to pick up where you left off, will often bash your work – regardless. It’s human nature, eh?

  • http://www.GoGlobalWebs.com Chris Gray

    Great article. Markup text seems so hard to keep up with these days. I feel like Internet Explorer sometimes!

    So helpful that I tweeted about it.

    Chris G

    Twitter ID: @goglobalwebs

  • http://www.alibiproductions.com/html/website-design.html web design greenville

    I couldn’t agree with you more. Its so funny how the “it works fine” excuse seems to pop up all the time.

    I think a lot of it has to do with knowledge. I was fortunate to start my dev career with a bunch of people to bounce ideas off of and to show me the best way to do things.

    Now it’s just second nature to make sure every page is as clean as possible and validates. But if you never had that mentoring then figuring out the best and cleanest way to write code can seem like a painful addition to any project.

  • http://be-ayano.com AYANO

    I can’t stand messy mark-up. Even though I didn’t learn much new I’m going to show this article to my friends who are satisfied with “it works”-excuse. :)

  • http://www.pavetosuccess.com Amy

    What a great reference article. I’m continuously reminding clients of the importance of clean markup. I’ll be sure to bookmark and share.

    Thanks!

  • http://www.terracurve.com Joe

    Great post – very “to-the-point” and without the clutter of over-explaining everything. One point/tip I’d like to give: you mention above “DON’T inject inline styles or extraneous tags and attributes just because you’re in a rush”. In my experience, I find it useful to TEMPORARILY use inline tags for designing/testing purposes. Once I achieve the desired result, be it visually or functionally, I move the CSS code to the actual stylesheet and leave the page as clean as possible.

  • http://www.dan-hauk.com Dan Hauk

    Great article! So glad to see others reflecting my own views. I always take a look at the code of the beautifully designed sites that I come across. And it always makes me cringe when one of those sites has ugly code. It’s just one of those things you can’t rush, and you’ll be much happier and satisfied when you do it right the first time.

  • http://www.webdesigntipsonline.com Web Design Brisbane

    Couldn’t agree more.
    I usually use the validator over at W3C to see what my code looks like.
    I think the other important thing is that what works now might not work later on as browsers change and update especially if your code contains errors.

  • Web Design Dallas

    Great article!!!! (New to the site and loving the content)

    Now only if I could get my team to understand the importance. Taking of the lead designer/developer role from a person that did the complete opposite of this article makes my life a living hell everyday trying to sort through the mess!!!

    Keep up the great work!!!

  • http://www.uprinting.com/ UPrinting.com Printing Services

    Exactly, with how fast the technologies are advancing, like, there’s always a new and improved browser about to be launched, we won’t know if what we’re using right now will still be applicable in the future. Thanks for this very informative post :) Really enjoyed reading it.

  • Vince

    I don’t think there’s much truth in any of this. Search engines are not picky as this article suggests. Google built their search knowing that not everyone follows standards.

    Its ok to have clean markup, but at the end of the day, the average user never sees your code. If your site works perfectly in all major browsers your job is done.

    Markup is something that gets good with experience.

    My opinion is don’t spend too much time on presentation or how clean your markup is. It will improve over time anyway. Get your site working and move on.

  • http://www.guillaumevoisin.fr Guillaume

    Great article! I totally agree with all these points. Plus, standard-compliant websites improve search engine indexation. There’re only benefits of using such markup.

    Keep writing in this way ;)

  • http://www.dawghousedesignstudio.com Jan

    Great post! Thank you!

  • http://www.rahulsahu.com/ rahul sahu

    wow! great point. this infomation very use full…

  • Mark

    Inline css cannot be avoided specially with templates that have complex design…it helps lessen your external css.

  • http://www.wordpressgala.net/ WORDPRESSGALA

    Thanks!
    Very good and useful article for all web designers and programmers.

  • http://www.acesoftec.com Anju

    Really nice post.

  • AGuzman

    Thank you all for your kind comments and thoughts! Clean mark-up is necessary and it keeps every piece of element organized while increasing the standard of how we design websites. Plus, practicing clean mark-up is very beneficial to our coding skills.

  • http://www.misty-blue.net Sarah

    Great post! All is too true.

    @Doug S.: I completely agree with you on that one point. One h1 tag per page just doesn’t work when it comes to a blog, for instance. Otherwise, I think that does make for a good general rule.

  • http://www.dotworks.pl macias

    be valid or die ! :)

  • http://www.theredrooms.net Patricia

    boy oh boy did I need to read this…

  • http://highpointseo.com Denver SEO

    This was a great post Well written, and to the point. From an SEO standpoint, nothing is more frustrating than getting a new client and trying to decipher the clutter of a poorly designed site, and then cleaning up that code to make it more search engine friendly.

    I wish more designers would follow the spirit of this post and do it right the first time. Great design = great results.

    BTW -love the design of this blog!

  • http://www.tec-z.com/ Professional & reliable web designing & web development services at affordable prices.

    Hi an awesome site where you can find a good information ,which is very useful .Thank you

  • http://tentonweb.com/ Jim S.

    Great points made here. You can really speed things up as well by using CSS sprites, reusing/re-purposing/repositioning background images, and compressing and combining your CSS/JavaScript etc. A well inherited stylesheet is a lean, mean, work of art. You also level the browser playing field somewhat by adhering to standards (like not starting your code on the 1st line puts IE6 in quirks mode), and it helps assistive technology when aiming for ADA or 508 compliance.
    Thanks!
    ~ Jim S.
    ~ tweet: @seo_web_design

  • http://chrisruppel.com Chris Ruppel

    Clean markup is only the first step toward creating truly meaningful content. Once you have the art of semantic HTML under your wing, you’re in a better position to add more machine-readable data to your content via microformats and RDFa.

    http://google.com/support/webmasters/bin/answer.py?hl=en&answer=99170

    Major search engines are beginning to ramp up adoption of rich search results using Microformats and RDFa embedded in XHTML documents. So in addition to specifying proper hierarchy via HTML, developers will be able to tell the search engines that the content is a movie review, a product for sale, etc. You cannot add this new layer of rich information without first organizing the basic elements properly.

    Semantic HTML will eventually be mandatory, rather than a strong recommendation, for anyone wanting their website to appear as a rich, useful search result.

  • http://www.santhos.nl Thomas

    Great to see that someone takes the time to explain WHY web standars are important! Well done, keep it up!

  • http://www.webmarketingexperts.com.au web designing

    It is a good blog, nice content also. Thanks for sharing such a good blog.

  • http://costablancapropertyguide.com Costa blanca repossessions

    Very interesting take on the whole clean mark up issue. I learned a lot from this post, thanks.

  • http://mmohut.com MMORPG

    Of course it matters. It allows search engines to better spider your sites and better ensures cross – browser compatibility.

  • http://www.arborseo.com Jay

    Browser compatibility is truly essential. Additionally, as an SEO, it frankly sucks working with websites written in horribly messy code…they increase the suicide rate among developers. :)

  • http://sbssinavi2009.blogspot.com/ sbs sonuçları

    Very interesting take on the whole clean mark up issue. I learned a lot from this post, thanks.

  • http://www.mushroomdigital.co.uk mushroom website design

    Clean coding and Clean markup are 2 principles you must follow. Theres nothing worse coming back to a job and its been over coded and complicated. Keep it simple, stupid! lol Thanks

  • http://www.webprofits.com.au seo

    So very, very true and well said. Do it once, do it well is the best motto anyone could live by and never is it more true than in website design and seo. There are so many clients who want fast results and of course like buying a new car, as long as it looks good and goes then it should be okay. No need to worry about under the hood. Not until something goes wrong and then it has to be fixed. Web standards should be followed and I think this should also be one of the criteria that people choose their web designer on. A simple question ‘do you use clean code and follow web standards’ the more we get it out there the less likely people will be to get ripped off by so-called designers just looking to make money. People who do any job because they love doing it will always want to do the very best job they can, mostly because they can’t stand the thought of their work being out there and not being the best it can be. Thanks for the great post.

  • http://www.otimizacao-de-websites.com Otimização de Sites

    This is fact. I have observed that the majority of Web site developers are not very concerned with the future trends, and the result is only one: disaster in the future. Even in SEO, many do not bother and end up not getting any results with their projects.

  • http://www.punkz.fm punk

    Great Post. I really like your Blog.

  • http://www.chotrul.com/skills/design-markup.html Chotrul Web Design

    .. and it matters because of SEO concerns too … if it’s really bad junk code it’ll impact your rankings.

  • http://www.m65jacket.com m65 field jacket

    just the other day someone asked why he needed to validate his markup..i will send him here

  • http://www.cyclonerita.com/ Cyclone rita

    Nice information, valuable and excellent design, as share good stuff with good ideas and concepts, lots of great information and inspiration, thanks for sharing

  • http://www.wearingrainbows.com/mens-waistcoats-ties-c-2659.html Billy

    This is all very good advice, especially the point about “Do it right the first time”

    This will save you so much time and effort in the long run trying to find and fix your errors

  • http://peninggi-badan.com cara meninggikan badan

    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).

  • http://peninggi-badan.com tinggi badan

    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).

  • http://www.divulgueseuwebsite.com.br Otimização de site

    Yikes. I admit I am a bit guilty of overusing inline styles,

  • http://www.solushunz.in web developer India

    I found more knowledge this article.so thank.

  • http://sbssinavi2009.blogspot.com/ sbs sonuçları

    Great list of resources, thanks for the round up. Definitely bookmarking this list.

  • http://www.core-web-design.com/ Byron

    Wow, as a newbie to the web design trade- the more I research, the more difficult it seems. One day, one day I’ll own the world

  • http://www.peerpressurecreative.com Nick Satkovich

    Yeah, I can’t stress the importance of clean and valid Markup. You should have also touched a bit about Strict vs. Transitional Doctypes :D.

  • http://albert-augustin-gestaltung.de Albert Augustin

    Great article. Thanks for sharing!

  • http://www.jc-designs.net/blog Jeremy Carlson

    “and using the tags and structures of each language for their intended purpose.”

    I’ve started using HTML 5 tags, and I am struggling with the “intended purpose” thing. The new tag definitions change, and you won’t know unless you are paying attention. For instance, the ‘aside’ tag, originally said that it was for content related to the article, but could be considered seperate. NOT for use though for a sidebar. Now the definition is says you can use it for things like: blogroll, groups of additional navigation, and even advertising if that content is related to the page. So yes, more like a sidebar now.

    The ‘nav’ tag’s definition has this in it “Not all groups of links on a page need to be in a nav element — only sections that consist of major navigation blocks are appropriate for the nav element…”

    Got a menu in the footer? No nav tag. What exactly does ‘need’ mean?? Do I or don’t I?

    My point is, there are a lot of ‘ifs’ and ‘appropriate’ in the definitions, how the hell are we supposed to know what is semantically correct, if 1) They change the definition to suit a different purpose, or 2) The definition is just plain confusing.

    Anyone else having difficulty understanding the “intended purpose” of some of the new HTML5 tags?

  • http://chrisjamero.carbonmade.com Chris J.

    I’m guilty on the “it works,” and most of having a really clean markup…especially when I’m on the rush. Great pointers and really helpful. Thanks!

  • http://www.pixelmetrie.de Matthias

    Very nice article! In my opinion, every good webdesigner should be able to code his designs on himself. In the past I worked with some designers who couldn’t, it was horrible! It didn’t just take more time, but it was a real fight to explain why something can’t be done the way the designer wanted it to.

    Design must be practicle. If a design can’t be coded using standards, it cuts itself down to be “just art”.

  • http://www.rhinoweb.com.au Ryan

    A great article. Thank you very much.

  • http://martens.ms Christoph Martens

    I’ve got an addition to the DO-List.

    - DO check your site with http://gtmetrix.com and optimize your messy stylesheets and messy javascripts!

    That’s it. Thumbs up for the article =)

  • http://www.jamesradford.net/ James Radford

    Good article, personally I have a thing against using negative values, particularly for margins and paddings. Admittedly there are times when you need to but I tend to think using negative values is a bit of a hack, except for those few occasions.
    Thanks, nice article.

  • http://migre.me/1NS7L Diego – Otimização de Sites

    I think float:left is better than display:inline

  • http://trtrtrukfteftgvcsdfgv.com Liberty Brendlinger

    Great article and straight to the point. I am not sure if this is really the best place to ask but do you people have any thoughts on where to get some professional writers? Thanks :)

  • http://www.jmc-material-eletrico.com.br/ Fios e Cabos

    Couldn’t have said it better myself! Excellent post on a very important topic. Nice job!

  • http://[email protected] Michael Persson

    of course it matters but the professionals have to educate their clients and make the effort for what its worth. Its even much better for SEO if you wanna play on the following years of positioning and ranking results.

    Semantic rules!!

  • http://[email protected] Michael Persson

    Yeah there you go, anyone would request a clean office as well as having a clean desk and clean code to work with… It waves time, attract multiple developers for greater projects cooperation, understanding of similar code eaier and make things faster…

    Great article, thanks