Last modified: 2007-02-10 by phil nelson
Keywords: editors | html recommendations | accessability guidelines |
Links: FOTW homepage |
search |
disclaimer and copyright |
write us |
mirrors
HTML is evolving, or has evolved. Change is not easy and where possible editors should prepare for eventual change to the FOTW website by following a few practices that will help when the time comes for FOTW to move to different levels of HTML/XHTML.
It is recommended that all elements and attributes be in lower case. Elements are the tags themselves, i.e. <a href=> while attributes are the specific parameters used in the tags, i.e. alt=.
Values for attributes should be enclosed in quotation marks, such as height="216" regardless if the value is alphabetic or numeric.
There are two types of elements - empty elements and non-empty elements. Empty elements are those tags that do not have a closing tag, such as <img>, <hr> and <br>. These should be terminated with a terminus character such as <hr />. Older browsers will ignore the slash. Non-empty tags are to end with the corresponding end tag, i.e. <p></p>. <p /> is not the same as <p></p>:
Tags can be nested such as:
<p><blockquote>yada yada yada</blockquote</p>
But they should not be mixed, such as
<p>This is an <em>incorrect sentence.</p></em>
Enclose line breaks (br) within a paragraph, such as:
<p>This is a sample text<br />
<i>Edward Kipplefipper,</i> 2 August 2004</p>
When using fonts outside the normal HTML display range (see
list rules) use Unicode. You may use either the decimal or
hexadecimal code for the character. For instance the Hebrew
Letter BET can be represented as either of the following:
ב ב
ב ב
It is important that FOTW attempt where possible to aid in the access of the website to those people who have disabilities. Therefore, several features should be considered when encoding the page.
1. Alternative text. This is provided not only in the form of providing an alt=attribute in the <img> tag, but also in other ways. If using an acronym, then use the <acronym> tag. For instance:
<p>The <acronym title="Council of Europe">COE</acronym> is separate from the European Union.</p>
Another way to provide alternative text is through the abbreviation <abbr> tag.
<p>The <abbr title="Council of Europe">COE</abbr> is separate from the European Union</p>
Text browsers such as LYNX will display the information and voice synthesizers will provide read the text in the title attribute to allow those with reading problems and low or no vision to understand the information being used as an acronym or abbreviation. Also, certain abbreviations may be rendered incorrectly by braillers as certain combinations may be rendered in a "shorthand" form.
2. Use <em> </em> or <strong> </strong> for stress and <i> </i> for visual meaning. When a voice synthesizer reaches the <em> or <strong> it is supposed to emphasize the word. We may want to emphasize a particular word or phrase such as:
<p>But the interpretation of the colours in some cases <em>is very controversial.</em></p>
But we don’t necessarily want the synthesizer to stress a person’s name, such as:
<p>Just for the record, the Norwegian dependencies in the Antarctic are Bouvet Island, Peter I Island and Queen Maud Land in the Antarctic. The national flag of Norway is the appropriate flag for them.<br />
<i>Jan Oskar Engene</i>, 19 November 2004</p>
3. When using multilingual text on a page, provide a means for voice synthesizers and text readers to understand the change in language (and for synthesizers to shift to another pronunciation scheme), such as:
<p>Official blazon in Swedish: <span lang="sv">"I fält av guld ett på ett grönt treberg stående, upprest, rött lejon med blå beväring, vilket med båda framtassarna håller ett stolpvis ställt rött armborst med svart båge och pil av silver."</span></p>
The lang attribute contains the ISO 639 code. Use the 2-character representation where possible, before using a 3-character code. (Other element tags besides span can also include the lang attribute, such as <p>). Dialects or regional spelling differences can be identified using ISO 3166-1, such as <span lang="en-GB">.
4. Do not use colors in fonts that may be affected by colorblindness. Certain colors will be indistinctive against the FOTW background.
5. Consider providing a "standard" version of the blazon in everyday language. i.e.
paley of six, or and sable per bend counterchanged
six pales (vertical stripes) gold and black, divided diagonally with reversed colors on the diagonal.
6. Use tables sparingly and when doing so, use summary and caption attributes for use by synthesizers and LYNX browsers.
7. Do not use browser specific tags which may cause automatic refresh, flashing text or marquee text. The first is not recommended for those who have problems using traditional pointing tools; the latter two have been known to cause seizures for people having epilepsy.