Principia Hypertextica · A Mathematics Educator's View of Web Design
--------
intro speed accessibility validity navigability typesetting links
--------
Validity
A document that uses HTML coding according to the specification
is called "valid."
Validity is important in web pages, because it
guarantees that your work will be rendered adequately by any HTML-compliant
web browser. Pages that are invalid may be wrongly displayed or not
display at all on various web browsers.
- Learn and use HTML 3.2 or its future versions. The best reference
I have found is the Web Design Group's HTML Reference. It clearly
describes what HTML tags can contain other HTML tags and offers tips
about common errors.
- Use only legally valid HTML entities for special characters.
Aside from the regular ASCII characters you get by using your keyboard
and its shift key, there are many other characters available in the
ISO Latin 1 repertoire that is commonly used on the web. These include
such items as accented letters (such as é, ü, and ò),
the copyright symbol (©), and the middot (·).
Alan Flavell has charts that describe how to enter these characters in
your web pages using the &#XXX; notation. The charts are available in table format
and in preformatted text format.
He also has a page of explanation
about the charts.
- Invalid HTML entities will display unpredictably. If you try
to use prohibited entities -- such as € through Ÿ -- you
may see something desirable (such as curly quotes, em dashes, bullets, or the
trademark symbol), but these are not going to appear on all platforms,
because of differences in the way font character sets are handled. I have
created a monospaced PostScript font for Macintosh users -- called CourierWeb --
that includes only the legal HTML entities. You can download it and use it
to develop and test web pages so they will not rely on illegal characters.
- Your page is not valid simply because it displays acceptably
in your favorite browser. Many browsers are forgiving when it comes
to interpreting HTML code. What is rendered by your browser might not
be rendered by other browsers. That's why validating your pages
is important.
It requires careful algorithmic thinking to figure out why
something is not being presented the way you desire on a web page.
If you have a very logical mind, you can usually figure it out
yourself. Luckily, there are plenty of free automated validation
services that will parse your HTML documents according to the
official specifications and present error messages to help you
correct your pages.
- Use a validator. The W3C
Validation Service is one free service you can use. You select the
level of HTML and whether you want the validator to ignore or flag
non-standard HTML "extensions" you have used. You enter the address of
the web page you want to validate, and the parsing is done automatically.
- Don't be discouraged by error messages. The first pass
through an HTML document often results in a lot of error messages.
Because the validator blindly passes through your document applying
its rules strictly, it may treat later code as incorrect because of
an earlier error. Luckily, fixing one error often clears up many other
errors. Don't lose heart!
- Add a <!DOCTYPE> declaration as the first line in your
HTML files. Some of the validator services require
this line, which tells the validator what version of HTML you want
it to use when examining a document. Details about this
are available at the Unofficial KGV FAQ web site.
- Add a link to a validator to make re-validating easy. I
often put a link to the validator I use on the web page itself,
customizing it so that when I select the link, the page is
re-examined by the online validator. This way I can verify that
any changes I have made to a document have not rendered it invalid.
This is a great time saver, and it encourages me to write only valid
HTML.
Because HTML validators are picky, it pays to learn about some
of the common errors that they catch. Here are some tips.
- Use quotation marks around attribute values if required. If the
attribute value contains anything other than the letters A-Z and a-z, the
digits 0-9, hyphens, or periods, then you must use quotation marks.
Wrong: <table width=80%><tr><td><font size=+2>...
Right: <table width="80%"><tr><td><font size="+2">...
- Close quoted attribute values. When an HTML tag
has an attribute whose value is in quotes, remember to close the quotation.
Wrong: <a href="http://www.domain.com/document.html>Read me</a>
Right: <a href="http://www.domain.com/document.html">Read me</a>
- Nest tags rather than overlapping them. When more than one tag is
applied to some text, you must nest the tags. That means that you
must close the innermost tag first before closing outer tags. This
is reminiscent of the way we use parentheses and brackets in
mathematical notation. You would never see the expression [a(b + c]) in
mathematics, for example.
Wrong:
overlap
------------------------------------------------------------
----|------------------------------------------------------ |
| | | |
<B><FONT SIZE="+2">Welcome to NCTM's 1997 Annual Meeting...</B></FONT>
Right:
nesting
------------------------------------------------------------------
| -------------------------------------------------------- |
| | | |
<B><FONT SIZE="+2">Welcome to NCTM's 1997 Annual Meeting...</FONT></B>
The above example of invalid coding is from the NCTM annual
conference web site welcome page.
It dismays me that NetObjects Fusion, the commercial software used to create the conference web site, yields invalid HTML
code.
- If one nesting method doesn't work, try switching the order.
You might think that the two examples of nesting below are both valid, but the
HTML specification states that <h> may contain <a>, but <a> cannot contain <h>.
Wrong: <a name="top"><h1>Major Heading</h1></a>
Right: <h1><a name="top">Major Heading</a></h1>
- Don't apply text-level tags to block-level elements. The Web Design
Group HTML Reference shows you which HTML elements are block-level
and which are text-level. You will get error messages from a validator, for
example, if you try to apply <b> outside <p> or <font> outside <table>.
Wrong: <b><p>A bold paragraph.</p></b>
Right: <p><b>A bold paragraph.</b></p>
Wrong: <font color="#00CC00"><table><tr><td> </td></tr></table></font>
Right: <table><tr><td><font color="#00CC00"> </font></td></tr></table>
As another resource, read the comp.infosystems.www.authoring.html newsgroup and post your questions along with the address of your problematic page. The HTML experts in that newsgroup will often be
able to suggest answers. Before you post, you may want to consult www.dejanews.com, which archives newsgroup
postings, to find out if someone has asked your questions in the past.
Live with the limits of HTML. Don't try to circumvent them.
Remember that the portability of valid HTML is its most powerful feature.
--------
intro speed accessibility validity navigability typesetting links
--------
http://world.std.com/~wij/web-design/validity.html
revised 26 June 1997
HTML 3.2 validated
William I. Johnston Home Page
wij@world.std.com
