Many web development companies overlook the importance of well-written HTML when setting up a site, and this can have a dramatic impact on its ability to reach the top of Google’s and other search engines’ listings.  HTML is not simply a method of placing information onto a website, it is the fundamental structure that a website is built around.  Elegant and well-built HTML is required for both a well-designed and easily accessible web presence.

Many web development and design companies rely on image-heavy and/or tabular designs, which can confuse search engines and make your site utterly illegible for potential customers who rely on special accessibility software such as screen readers.  One must remember from the very beginning that a website needs to be designed not just to look good, but also be well-organized and accessible by screen readers and web crawlers (like Googlebot, Bingbot, or Yahoo! Slurp).

Tabular designs are a throwback from when web browsers were not designed in a way that allowed websites to be both accessible and aesthetically-pleasing.  These employ table elements to arrange images and various blocks of text in a way that makes sense to the average viewer, but in a way in which search engines are unable to assign levels of importance to various keywords or terms.  This is because tables and images have very specific functions that in this case are not being used properly.

So what then is the purpose of table and image elements?  Tables are meant to store data, so when a web crawler sees them, that’s what it assumes is being displayed.  Images are meant to be minimally-important aesthetics or to depict a product or service visually, not as navigation elements or as a descriptive header (this can be achieved using CSS in a much more accessible way).  Though alt tags help with improving the accessibility of images, they are not meant as a replacement for keyword-rich headers or textual content.  It is perfectly fine to use both of these elements on your site, however, as long as it is as intended and not as a replacement for actual content.

Search engines can tell the difference between header text (h1 or h2 tags, for example) and normal paragraphs or lists (p or ol/ul tags respectively).  They can even tell that an h1 tag is more important than a h2 tag, and so on.  They can not, however, tell what the text on an image might say, which is potentially the biggest problem with this kind of a design.  It is best to use divider (div) elements, and arrange your content in a logical HTML structure, using proper header, paragraph, and list tags where required.  HTML is not a design language; it is meant specifically for organization and structure.  The actual design should be done using CSS (Cascading Style Sheets), which is a language specifically made for that purpose which all modern browsers recognize.

What’s an easy way to tell if your site’s HTML structure makes sense?  View your site with CSS (and even images) disabled, and see how easy it is to follow the content.  Think of this as how web crawling bots and users with screen readers will view your site.

Setting up your site in this way will allow for further SEO to be achieved much more easily, as you can figure out the best key words and terms and use them in the appropriate places, with the appropriate HTML tags, within your site’s content.  Upon initial development of a new site, Storm Code employs these fundamental tactics so that the more advanced SEO options we offer are more easily implemented, and even if not desired, the client still has a well-organized site that search engines and screen readers will understand.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>