Proper arrangement of columns in HTML documents

Many so-called SEO experts tell you that nowadays it is not necessary anymore to be concerned about the order of columns in an HTML document anymore, but this is wrong. Column order is not a matter of the myth or misconception that search engines prefer text which is at the beginning of a document, only for that. Search engines are not too lazy to read on to the end of a document. Column order is more a matter of semantics. Most content elements have headlines, some don't. To determine which column must be on top, in the middle or at the bottom of a document, depends on what information each column contains.

Preferable, every HTML page of a website should be complete in itself. Which means it contains one <H1> headline followed by <H2> ond so on, where <H1> is the main headline and there should only one be present, in each page. That can be achieved only, if the column order is correct.

Wrong column order

Wrong column order
Wrong column oder, poor document

The image to the left (click on it to enlarge), is the output of the Webdeveloper extension for Firefox. I've used a german website, because it is most likely that you cannot read the headlines. This doesn't matter, because search engines also can't read, but rate a page due to its semantic contents. You can see quite clearly that something is wrong here.

The webmaster created a page about customer support. It should begin of course with an <H1> headline "Our support for you", which it does. The problem is only that on top of the page there is a column which provides the lates news. Visually, this looks quite good and any human visitor immediately knows that the real content begins below the news. But technically, this breaks the semantics of the page. The news column, in this case, must be physically located below the main content, in the HTML source. With CSS you are still able to position it on top again. In other words, columns must be ordered in a way the document makes sense. However, visualization techniques alone, like borders, shadows, colors or smaller font sizes, do not change the semantic meaning of an HTML element in any way.

Correct column order

Correct column order
Correct column oder, good document

Simply physically resorting the columns in the HTML source (and some changes to the headlines) would make a semantic document. visually the news could still appear on top of the page, because you can use CSS to position it wherever you want.

If, for design reasons, you don't want the word "News" to be dis­played in the news container, you can hide it with CSS. The news headlines itself (in this example) must have the <H3> tag wrapped around them.

Never use HTML elements because of their design or appearance but because of their meanings. HTML elements represent semantics. The order of HTML elements is important, hence colum order does matter. You are always better off to abandon cool design features, like shadows and fancy background images, in favour of semantics and logic documents.