W3C Concepts and Fixes: Separating Design from Content and Ensuring Standards Compliance

Filed Under (Uncategorized) by on 03-10-2009

Tagged Under : ,

(The following is a guest post from Brian Harnish)

HTML and CSS heart cookies.One of the biggest obstacles to overcome in the quest for nearly perfect SEO is correct coding practices.  From making sure your site works on the latest web browsers on the market, to making sure that your site is viewable on as many resolutions as possible, correct coding practice is the root skill necessary to make sure that all of the above issues are resolved.  So, then, the question arises.  What, exactly, is correct coding and how should you use it to achieve the desired effect:  higher rankings and even better usability?

HTML, or Hyper Text Markup Language, is the language used to build web sites.  CSS, or Cascading Style Sheets language, is the language that’s used to actually STYLE the HTML tags within a web page.  The W3C, or World Wide Web Consortium, mandates that design should be a separate component of each HTML document.  This means that HTML tags should be used ONLY for markup and determining the layout of a web page, and CSS should be used to apply all style instructions to a specific document.

Back in the early days of the web when Yahoo! ruled the search engine world, tables would be used to design the layouts of web pages.  Many web designers would create graphics intensive websites created with Photoshop.  These graphics would be sliced, and tables would be used to put them together as a website.  Many times, depending on the complexities of these interfaces, using tables could result in as many as 60 rows and 100 columns in order to put them together.  Needless to say, this resulted in a lot of useless code that could have otherwise been used to include content on the site instead.

Then Cascading Style Sheets came along, and the W3C concept of separating design from content.  No longer did designers have to be frustrated with what table design would look good in IE, but crap on Netscape, and have to add several extra tags in order to ensure a correct layout.  No longer did designers have to be frustrated with changing a single image in table column 132, row 136, and having to scroll through pages of text in notepad or their favorite text editor.  Instead, all style instructions could be housed within a separate style sheet document that contained one line of code in the actual HTML document.  And, if a site has 100 pages, then style instructions could simply be changed in the external style sheet, saving a huge amount of time in updating the web site.

Now, there are several coding practices that you should be familiar with when writing your code.  First and foremost:  indent your code, please.  It makes things so much easier to read and understand, and you don’t have to spend time hunting and hunting for a particular code element in order to make a very small change.  Next, use very MINIMAL markup.  This means that if you can use one paragraph tag to separate a paragraph and style it, then do so instead of using a paragraph tag, font tag, and a whole bunch of other ones in between.  This practice of minimization will help search engines read your content better, and results in a much lower code to text ratio.  As a result of this practice, you’ll get even better optimized pages, which will make it much easier for search engines to crawl your site.  Next, use all lower case or upper case letters for your HTML tags.  Don’t go from <P> to <p> or <table><tr><TD><TBODY> for your tags.  From a professional standpoint, it makes your code look much less sloppy.

Let’s face it.  Using notepad is all well and good, but there are other text editors on the market that will make your life easier.  For example, editors like Crimson Editor, Edit Pad, and PSPad, all feature highlighted and indented code to make life easier.  For those with a ton of cash on hand, Dreamweaver is the best that money can buy.  For those on a mac, BBedit will be a great choice.  For those who are just starting out with learning correct coding practices, you may want to check out the book Build Your Own Web Site the Right Way Using HTML & CSS by Ian Lloyd.

SEO’s without a good knowledge of behind the scenes practices will not be as successful as those that know how to code like the pros.  Good coding practices are a major foundation to building a web site that will perform well in the engines.  If you’re not familiar with how to create a standards-compliant web site using HTML and CSS, then you need to start there first.  You don’t build a house without first building the foundation, so why would you approach building an optimized web site the same way?  After all, it’s the foundation of a project that will determine its success or eventual failure.

About Brian Harnish

Brian HarnishBrian is an in-house SEO and former colleague with an extensive knowledge of W3C and coding compliance.  Dabbling in a mix of both search and social you can view more of Brian’s SEO writing on his blog Prolific SEO.  For the social side of things you can catch him on Twitter via @BrianHarnish.  A huge thanks to Brian for this post.  He was the first of a handful of writers to get back to me in regards to guest posts here on the blog.


There are (17) Comments for the W3C Concepts and Fixes: Separating Design from Content and Ensuring Standards Compliance

Write a comment