Developing semantic W3C compliant web pages

People use HTML and CSS to create web pages. Over the years, a number of good design principles have been identified and, when followed, allow anyone to produce websites which are standards-compliant, compatible with all the major websites yet flexible and easily maintainable.

The principles are:

• Build websites using semantic HTML. Previously, HTML pages mixed structure and presentation. Now, people use CSS for presentation which implies that HTML should only contain the structure of a document. Semantic HTML goes further, in the sense that it uses markup to reinforce the semantics (i.e. the meaning) of a document. For example, only one H1 should be used in a document as one document cannot possibly have more than one main title.
• Use CSS for formatting. Typographic attributes (e.g. typefaces, weight, etc.) as well as colours, margins, backgrounds, etc. should always be specified in a CSS stylesheet which is linked from the HTML file.
• Use CSS for positioning. For many years, people used HTML tables for positioning objects on an HTML page but this was brittle and tended to produce bloated webpages.

The work to do is to progressively create a website like the one pictured above using semantic HTML first, then writing CSS “manually” both for formatting and positioning.

Note that web standards are in constant evolution. For example, there is a lot of buzz around HTML5 and CSS3 right now even though the standardisation process is still in progress.