Technical Investigations - html

Most of us know the basics of html by now, so I'm not going to go over a description, or examples of how to use it, but cover a few items I have discovered, and give some hints. Please feel free to argue with the advice, or send me additional advice which you think will be useful.

Contents
Tables
Lists
General
Links

Tables

Tables are great for formatting text and images, but often need a lot of playing about before you get them just right.

You can use <th> tags for table headers as well as <td> for table data.
Always remember to put a </table> at the end of your table. Netscape won't render any of it otherwise.
You can use width and height in the table tag with percentages, and you can use align=center.
You can use width and height in the td tags to size out your table. However, remember these are just suggestions to the browser: it may ignore them.
Trying to make graphics in table cells butt up against each other in Netscape? You need to get rid of all white space in your td definition:

<table border=0 cellspacing=0 cellpadding=0>
    <tr>
	<td>
	    <img src="b.gif" width=20 height=20>
	</td>
    <tr>
    </tr>
	<td>
	    <img src="b.gif" width=20 height=20>
	</td>
    </tr>
</table>

<table border=0 cellspacing=0 cellpadding=0>
    <tr>
	<td><img src="b.gif" width=20 height=20></td>
    </tr>
    <tr>
	<td><img src="b.gif" width=20 height=20></td>
    </tr>
</table>

Lists

There are three main types of list I use, unordered, ordered and definition lists, represented by ul, ol and dl respectively. The unordered and ordered lists contain li elements, while the definition lists contain dt (definition term) and dd (definition description).

Unordered and ordered lists can have a type attribute on them, which for unordered lists can be disc, circle or square; and for ordered lists can be 1, a, A, i, I for various different effects.

Bug warning - Netscape doesn't implement this feature: Opera and Internet Explorer do.

<ol type=I>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ol>

one
two
three

General

The following points give general advice on writing html:

HTML authoring tools can produce bad code

Tools which give a WYSIWYG interface to web pages can make it much easier to create them. Some of them, though, produce html which is messy and even invalid. Frontpage and Word are particularly bad for this.

Get your tags nested in the correct order

Make it a habit always to close tags and nest them correctly. Some tags don't need to be closed, but it is good practise to do so, and badly nested tags are invalid html and may not work on some browsers. The following is invalid:

<li><font face="Arial">Some text</li></font>

Use honest markup

It's easy to think "I need a bigger font in this table item, I'll use h5", but this approach can lead to all sorts of problems. try and make sure your headings really are headings, your lists really are lists, and so on.

Not everyone browses with Netscape 4.03

Hah! You can tell I wrote this page a long time ago. I'm sure nobody browses with Netscape 4 now, though you never know. But the basic rule is to remember that not everyone has the latest browser with all the features you might like to use.

This has many implications. Users with text browsers may miss out on information if you don't add alt tags to your images; users with less colours than you, or different defaults, may end up with hard to read text; search engines may miss out on important information.

Links

Parent Document: Technical Investigations
Author: David Meiklejohn
Web Page: here
Last Updated: 28/05/2012