Website Design Tag Structure – How to Use HTML Structure Ta…

Website Design Tag Structure – How to Use HTML Structure Ta…

In light of the HTML5 specification leaking its way onto the internet it seemed appropriate to do a little review on tag structure and its importance in the SEO and website design process. This article will not cover the HTML5 specification or the importance of well formed code, but a focus instead on the structure of tags complete or incomplete: of course we recommend well formed code and complete closed tags, but that's another article.

The very most important tags in your HTML are found inside the section: the title tag and two or three meta tags for content-type, description, and keywords. These items should always be the first tags to appear in the section. The title, description, and keyword tags should be limited in how many words can be used. The title should be extremely relevant to the page and include a reference to the overall website. Do not spam your title with keywords. The keywords used should be two-five words in length separated by commas and should be relevant to the page and should include some phrases unique to the page. Again use only a maximum of 10 phrases, more looks like spam and remains unfocused. The description tag should be no longer than 255 characters.

In the body of a website page the tags that are of most importance to structure are the heading tags (,,, etc …). Ideally there should only be 1 tag on any given page. It is essentially the chapter, main heading, category name, or page title. Sub headings can be as numerous as they are necessary. Think of an outline for a paper, or a book each book has chapters and each chapter could have subsections. In terms of a website the title tag represents the book name. The tag represents the chapter name, and the others highlight sub-ideas within the chapter.

While it is not necessary to place the content under each heading inside paragraph tags () it is always a nice and preferred option. This gives more control over the format of the text within and also looks more pleasing and organized than a coder's point of view. Quotes should be placed in their appropriate tags as well: for single line quotes and for paragraph or paraphrased quotes. Of course such styling tags should be placed within paragraph tags.

The use of table tags is a practice that many people are now afraid of; however, table tags are completely appropriate for table qualified data presentation. There is absolutely nothing wrong with using tables in modern website design. What is meant to be avoided is the use of tables to structure the website: providing a page with columns and center alignment. It is an unnecessary waste of time, bandwidth, and code to produce websites in this manner any more. The same lies true for the use of frames, rarely is a situation encountered that really requires frames in today's internet.

A final note on code and content structure relates to the ratio between the two. The amount of code or mark-up in a web page file should never exceed the amount of actual content: content includes anything you can read or click on. This is called a code to content ratio and it should be as balanced in favor of content as possible. More code usually means slower loading times, and quite often is represented in unprofessional or amateur work. A good web designer should be aware of the effects of good structure and code management.


The goal of this type of code structure is so that your website pages read like a book to both text-based browsers and search engine spiders. Try viewing a website in a text based web browser. Avoid table and frame layout structure, but use them when they are appropriate to data presentation. Avoid using excessive amounts of code especially when the amount of code exceeds the amount of actual content. These structure tips will help better your search engine marketing efforts.