Why Does Clean Markup Matter in Web Design?

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

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?

verry good info you give there. great article!

What about speed?

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

Good post!

It was a useful article for web designers and programmers.

Thanks.

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.

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

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

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!

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.

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.

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

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!

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!

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.

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

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

very useful thanks so much

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.

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!

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?

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

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.

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.

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!

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.

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.

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.

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!!!

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.

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.

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

Great post! Thank you!

wow! great point. this infomation very use full…

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

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

Really nice post.

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.

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.

be valid or die !

boy oh boy did I need to read this…

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!

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

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

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.

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

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

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

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

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.

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

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

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.

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.

Great Post. I really like your Blog.

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

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