Web Page Accessibility - Placing Content First With CSS

Search engines give more weight to a web page that has content closer to the top of the HTML document. I am refering to the source code not the visual content you see in your browser. If you incorporate this in the design of your web site, it may just give you the edge to outrank your competitors.

Most web sites these days are designed with tables therefore the navigation will appear first in your source code. You really don't want this because you want your main content with all your keywords to be spidered first.

With CSS you can easily structure the content to appear first with the rest of the source code following it.

Here's an example of a web page I recently redesigned using CSS where the content is on top. It was converted from a table-based design to a CSS-based design for better accessibility.

http://www.ihost-websites.com/gordon/

Use view source to read the html code.

Here's the External Cascading Style Sheet

http://www.ihost-websites.com/gordon/css.htm

How I positioned the content first.

1. I first structured the HTML in the same order as the order in the style sheet.
2. I put the content div before the sidebar in the source order then floated the content left and floated the sidebar right.
3. I placed widths on the floats for it to work correctly.

That's it!

Tip If you are not familiar with CSS and still wish to use tables use the "table trick"

This means placing your navigation on the right side of your document.

Here's a web page I designed using the table trick:

http://www.isitebuild.com/web-site-promotion

If you want your web pages to be accessible to as many people as possible plus get high rankings, incorporate CSS into the design of your future web sites or redesign your current one.

Herman Drost - EzineArticles Expert Author

Get Highly Effective Web Site Design, Marketing Tips and Tricks by visiting the author's Web Design Discussion Blog
Herman Drost is a Professional Web Designer, SEO Specialist, Article Writer and Publisher of the "Marketing Tips Newsletter".