Writing Symantically Correct HTML

Symantically correct HTML is HTML that defines correctly what the content of the web page is without supplying any information about how that content should be displayed (because that is the job of the stylesheet). In order to write a symantically correct web page, the first thing that you need to do is to forget all about how the web page is supposed to look and start thinking about what the content in your page is.

There are a number of valid HTML tags that you will NOT use when writing a symantically correct web page. Some of these are obvious such as <font> that has no place on any web page these days. Others are not quite so obvious (eg. <b> <i> <u> tags). Basically any tag that implies a certain appearance to the content of that tag should be avoided.

The next step is that the tags that you do use should indicate what the content actually is and should not be used to force the page to follow a particular arrangement. <p> tags should only be used to identify that their content is a paragraph and should not be used to add spacing into the page. <table> tags should only be used to contain tabular data and should not be used for controlling page layout. Similarly <img> tags should only be used to display real images on the page and should not be used to display distorted transparent 1x1 images that are intended to force the spacing of the other content.

A symantically correct web page should NOT contain any embedded stylesheet or Javascript code. All stylesheet entries should be coded externally and referenced either visa the assigned classes or (where a specific item on the page needs to be uniquely identified) by the Id. All Javascript should also be coded externally and referenced via script tags in the head part of the page. By using event listeners and the appropriate DOM references the Javascript will be able to interact with your page without needing to have anything coded within the HTML itself.

When creating a symantically correct web page some tags should be used more often than you may have become used to when you used the HTML to define the layout. A lot of things that are displayed on a web page are lists and so deserve to be marked up within <li> tags. The fact that these items are not supposed to have a bullet displayed in front of them should not stop their being entered as unordered lists as the bullets can be removed via the stylesheet.

When marking up a symantically correct web page the various items on the page should be assigned to a class (or multiple classes where appropriate) that further identifies what the actual items are. Meaningful class names should be used that describe the purpose of the class. This will make it easier for someone to read the markup and understand what the purpose of each element in the content is as well as making it easy to define the appropriate stylesheet entries to define the way that the various items are to appear.

Creating a symantically correct web page ameans that you can then use a stylesheet to define how that web page is to be displayed on the screen, printed out on paper, and read out to those using talking browsers. The "appearance" of the page many be completely different for each media but the content of the page and what that content means is the same in each case.

Not including any tags that imply how anything on your page should look and using stylesheets to control the appearance of your web page not only makes it easier to cater for different media but it also makes it easier to make changes to the appearance of all of your web pages by changing one external stylesheet rather than having to amend every page on which the code appears. Of course you may decide not switch straight to symantically correct HTML, you may find it easier to make small changes to your pages that gradually remove the appearance related tags from your page and replace them with the appropriate equivalents. By implementing these changes gradually over a period of time you will eventually end up with symantically correct web pages and maintaining your site from that time onwards will be much easier.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow