Search Engine Optimization:: HTML and CSS

The article below outlines the basic method of using HTML and CSS to build a web site; AND how this translates into a Search Engine Optimized web page.

The first order of business is when to use HTML.
Second point is when to use CSS.

First, using HTML for structure means to apply HTML tags that will identify the different elements in your web site (headings, forms, paragraphs, div tags, tables, etc). At this point, by adding the tags the elements may not look or feel like you want. Furthermore, the elements may not be in the correct position according to your design. This is ok. Remember, right now you are just applying the tag -later you will change things like: position, color and size using css.

Once a tag is added it can be styled using a style sheet.

When I say, "styled" basically I'm referring to: changing the color of a font, positioning a table or div tag somewhere on your web page or adding a float, etc. A quick point about using css to style your web page.

This article does not address how to style, but I have added a google search field below and included some suggested keywords that are listed in blue.

positioning div with css
tables and css
W3C validation
HTML Tips
HTML and CSS
Using floats and css

How it helps with Search Engine Optimization

The h1 tag is a good example of using html with css and SEO. If you have ever tried to use the h1 tag without styling ...well you know... it is HUGE text that is hardly any use. But, with a little css that useless tag just became both a useful design element and a search engine optimization tactic.

First, lets make the h1 tag usable, then we can address the SEO benefits. In your style sheet To create a heading, use the h1 tag. To style your heading, use a style sheet with something like this:
h1 { font-family: "Times New Roman", Times, serif; font-size: 16px; font-weight: lighter; color: #5393CD; text-align: center; padding: 3px; }

Now, apply your new h1 tag to your heading. My h1 tag is just an example of what could be done, the important thing is: the tag can be used. And, in regards to search engine optimization, the h1 tag tells the mindless robot/spider that the text inside the h1 tag is very important. That's right, "the mindless robot is programmed to understand structure."

One important note.

Only use the h1 tag once, and keep your h1-h6 tags in order from top to bottom.

You can use your other tags (h2-h6) more than once, but again, don't use a h5 tag above a h2 tag. Remember, mindless robot and structure.

Gary Reichel

sitemap