There are not definitive guidelines for “proper” HTML. But there are rules on how a valid HTML document should look. It is definitely recommendable to orient yourself with the W3 consortium’s HTML language standards. The W3 consortium has since also recognised that their work does not only consist of elaborating on technical specifications, but also in communicating these specifications to normal laymen users, who lack an extensive background in programming. If you intensely and regularly produce websites, then it is worth checking in on the consortium’s website periodically for the latest happenings and developments.
The W3 consortium also offers a service for HTML authors, with their so-called validator, that checks how correctly HTML files are produced. If your website is reachable online, then you can simply enter the address into the validator to check the website’s syntax.
In terms of what is classified as “good HTML style”, it really is better to begin with what should not be done under any circumstances.
Do not write for specific browsers
If you wish to place data online, then you should use more than one web browser to test your data. Use the prevalent Firefox and Internet Explorer browsers, in multiple versions if at all possible, and also try to use a third browser such as Safari or Opera. If you have the possibility to test on multiple platforms (Windows, Mac OS, Linux), then do so. And maybe even view your website on a handheld computer or with glasses, so that everything looks blurry.
Of course, no one can prevent you from writing HTML that is only correctly viewed by Internet Explorer. But if you upload such sites online, then you should know that you are only damaging your own image.
Do not write for certain screen resolutions.
Extorting specific widths by using interlocked tables and blind pixels has since become so widespread in the web, that some website designers do not even know regular HTML produces text that automatically adjusts to the browser’s window size. There is no point in completely corrupting and forcing minimum widths. Tables with multiple columns and the corresponding content require only a certain width. If you ask the question of whether you should “optimise” your website for a 1024 or 800 resolution, then you are asking the wrong question. Many users surf with multiple windows open and continuously open links in new windows. These windows are then often not displayed in full screen mode. Many users also have programs open that fundamentally take up a portion of the screen and are always displayed, such as instant messaging programmes. All these users do not make the extra effort to show your site in with the maximum screen size. Do not bother with the maximum value screen size resolution. You can require a few hundred pixels (a very inexact amount) for the width, but that is all.
Use tables and frames only sparingly and instead opt for width and height values in percentages. Absolute pixel values only make sense when the first column of a blind table is supposed to be located on a colour background picture split in two. Otherwise, you should not occupy yourself with such notions. Just because it looks good for you, doesn’t mean it looks good for others, in fact, it could even appear very bad.
Do not use HTML elements for purposes they are not designed for
Especially do not use the logical and semantic HTML elements for certain formatting effects. For example, some people use the blockquote element in order to indent paragraphs, only because most browsers display text within the <blockquote>…</blockquote> as an indented paragraph. However, the blockquote element is purely conceived for quotes and should only be used as such.
People are more frequently using tables and headings in a sloppy manner. Headings are not there to make text big and fat, but instead to mark a logical hierarchical relationship between the blocks of text. Tables should be used to view table data and not for any layout purposes. If you wish to format or position text in a certain way, then you should use style sheets.
Use honest and meaningful linking text
This rule generally applies: the link destination should include what the link promises. This means that when constructing a link, the link text should neither promise too much, nor too little. For example, if you offer information about a piece of software, without offering the opportunity to also download it, then it is unfair to link to the information and suggest the user may immediately download the software.
In HTML, links can be set up at any desired location in the text. However, if you read a text, where every second word is a link, then you will clearly realise this disturbs the reading flow. The links continually draw the same amount of attention and prevent the reader from actually understanding the text’s content. This makes it even more important for links inside the text to be clear and not pose any riddles.
Therefore, only enter a link inside text when the link text makes sense. And structure the sentences, which contain the link, in such a way that the link is also meaningful.
For example, do not write:
“For further information click here.”
But instead:
“Additional information is also available”.
Use Graphics correctly
If you are not in the middle of producing a huge art exhibition in HTML, then you should first keep your distance from large graphics files. Think about how many users will not be thrilled over the long loading times with the files that you produce for the web.
Instead, use smaller, better placed graphics. 16 colours often suffice, instead of 256 or even 16.7 million. That makes the graphics much smaller.
On the other hand, you should not at all do without any graphics. Pure text on the computer monitor is more tiring to read than on a handheld book, for example. That’s why you should try to structure long texts as richly as possible and with a lot of variation. Graphics are one means of doing so.
Small icon sized graphics are ideal. The load quickly, and you can reference loads of them without a second thought.
Small graphics can also assume certain corporate identity or orientation functions. The advantage of using such graphics more than once, is that the browser need only load them once and then keep them saved.