Recommendations for HTML Coding

Accessibility

So that web pages are accessible as possible, adhere closely to the HTML standards. There are a number of these: Strict, Loose, and Frames. I use the Loose standard.

HTML is designed to 'mark-up' or indicate the logical meaning of text, rather than its visual appearance. For example, rather than specifying that a heading should be in large text, which is the typical thing to do, HTML recommends specifying the heading as a heading, and let the browser decide how to represent a heading.

The merit of this approach is that non-visual browsers (speech, braille, etc.) can present the information appropriately. For instance, one usually emphasises a word by writing it in italics. However, a non-visual browser cannot represent italics. Browsers don't know why some text is in italics - is it because it's a scientific name in Latin, a book title, an emphasis, or a mere visual effect? A browser can, however, represent emphasis. A speech browser might raise the pitch of volume. HTML, for that reason, recommends that one use the emphasis tag, rather than the italics tag. For a book citation, one would use the citation tag.

It is common to see text marked-up as an Arial font of a specific size. However, non-visual broswers may have no concept of a font. Also, a visually impaired person may use an extremely large font size for ordinary text, then the heading text will probably appear smaller than the body text! In this case, it would be better to use a relative font size, but the best solution would be to use the heading tags.

The HTML standard allows web pages to be published such that both non-visual and visual browsers are able to represent the same page. This is done by separating the content of the web page from it's appearance, a goal achieved by the use of style sheets.

Meta Tags

To improve the chances of your web pages being found and well categorised by a search engine, the meta tags for description and keywords should be used. These are added in the head section of the HTML page, thus:

<META NAME="description" CONTENT="a brief description 
of this web page's content goes here">
<META NAME="keywords" CONTENT="individual words, separated by 
commas, relevant to the content of this web page go here">

Text Styles

Go here for a good introduction to Cascading Style Sheets.

I recommend using <H> tags for headings, rather than specific font styles.

With respect to emphasis, do not use bold and italic tags (<B> and <I>). These cannot be interpreted by non-visual browsers. Instead, it is better to use emphasis (<EM>) and strong (<STRONG>, stronger emphasis) tags. These tags convey logical meaning which can be translated by non-visual browsers. Visual browsers display text within emphasis tags is typically displayed as italics in visual browsers, and text within strong tags as bold.

See my FrontPage Notes for more information about text styles.

Missing Styles

I need a way to represent the following logical items:

Paragraphs within Lists

Using paragraphs (<P> tag) in a list item this leaves gaps between paragraphs within an item that are bigger than the gaps between the items! This spoils the structure of the list, and therefore reduces its readability. Using break (<BR>) tags solve this problem.

Definition Lists

If you're using definition lists (<DL>), and you have a multi-paragraph definition definition (<DD>), don't include the first paragraph in <P> tags, unless you've done this for all the <DD>'s. Doing so will leave a blank line between the definition term (<DT>), and the definition itself, which is inconsistent with the other definitions. Instead, start the first paragraph with the <DD> tag, and end it with a <BR> tag, all the other paragraphs (including the last one) can be within <P> tags.

Devaluing Blocks of Text

I had a set of instructions which I had modified after they had been in circulation for a while. I replaced a few paragraphs, but wanted to keep the old paragraphs as I wasn't certain about the new procedure I was recommending. However, I wanted to reduce the importance of these several consecutive paragraphs, so that they were still present but clearly of less importance than the main text.

However, it turns out the <SMALL> tag is an inline element. I need a way of applying some sort of logical de-emphasis across multiple paragraphs. Small isn't a logical style, but it's the tag closest to the intended meaning that I could find.

Tag style

I use upper-case tags since they are easier to see amongst a lot of text, and the readability issue is not so important with short text anyway. Typing is not much of a problem, because I type in lower case and use HTML-TIDY, or a search&replace process to change lower-case tags to upper-case.

Word Document Conversion

I tried three methods of converting documents from Word format to HTML. These are the results:

Save As... command in Word2k The resulting HTML files contain HUGE amounts of HTML code. Not very efficient
Copy in Word2k, Paste in FP98 Less HTML code generated than Word2k's Save As...command, but still rather inefficient.
Open filename.doc in FP98, Save in FP98 The HTML is clean and efficient. This is my preferred method.

Further Information

You can find the definitive guide to HTML (and other standards for the web) at the W3C consortium's web site. More information on general HTML quality issues can be found at HTMLHelp's web site. For advice on making your web pages as universal as possible, see their accessibility pages. For a more general discussion of best practice, go to their style pages.


Home About Me
Copyright © Neil Carter

Content last updated: 2001-10-12