Cabinet Office
The technical detail in section 6 does not provide a full tutorial on how to write HTML. It assumes that you have a basic understanding of HTML and is intended to provide clear instructions and sample markup on how to successfully achieve much of what is contained in the previous section of these guidelines.
Web pages are formatted using Hypertext Mark up Language (HTML). Systems of document formatting have been around, in one form or another, since the 1960s. The popularity of HTML stems from the fact that it is fairly easy to learn. However, in common with most systems of instructing computers, it has to be done with precision in order to produce the intended result.
Use each checklist to ensure that your web pages comply with these guidelines
6.1.1 Checklist and summary: Core guidance
Checklist
Summary
To ensure that any browser can read a published web page it must first be marked-up correctly, to the open standard of HTML 4.01.
HTML version 3.2 should be considered the standard for non-PC device channels.
6.1.2 Implementation
The primary consideration for any public sector body in the UK is to ensure that data presented on the web is available to all.
The public’s ability to access the data should not be conditional on their having the latest version of a browser, the fastest modem or the most powerful processor or having the physical attributes to be able to see the page on screen or to use a mouse.
Because of the wide variety of web browsers available today and the legacy issues that exist because of older browsers that are still in use, it is fundamentally important that a recognised international standard is set that is understood by all.
Any standard that is used must be implemented correctly on each and every page. It is only when this is done is it that a content provider can reasonably expect its information to be interpreted and rendered correctly by all browsers.
An automated service is available to ensure that pages do comply with the recommendations. This is provided by the World Wide Web Consortium (W3C) that exists to promote the development and use of standards in Web technology.
W3C HTML validation service [External link]
6.1.3 Simple introduction to HTML
HTML is a markup language for expressing the structure of documents published on the World Wide Web. The display arrangements were originally under the control of the browsers’ implicit built-in style sheet. Subsequent versions of HTML started incorporating display instructions into the markup languages but these have now been taken back out of HTML and more appropriately put into Cascading Style Sheets (CSS). What started off as a very simple, efficient markup language has now become a rich, multimedia publishing language.
However, the fundamentals of HTML are still very simple and can be understood by anyone after an hour or two. It is also this simplicity which has led to the incorrectly marked-up HTML documents that are found on many websites.
Below is a simple HTML page. The document structure shows a collection of markup tags each contained within angle brackets (< >). Anything inside these brackets is an instruction to the browser that reads and interprets them, but does not display them on screen.
HTML markup tags are usually combined in pairs, for example
An HTML page should always contain correctly nested html, head, title and body elements. The start and end of each element is indicated in the markup by the opening and closing tags. The example below shows the structure that should be used in all pages. The opening html tag is the first to appear and is consequently the last to be closed. Everything included within this element is recognised as HTML.
In this example, the head element serves only to contain the title element. The content of the title element will be displayed in the Web browser’s window title bar.
The opening <body> tag is next. Whatever is contained within the body element will appear in the user’s web browser window. If any of these fundamental elements are placed in the wrong order, or not used at all, an author cannot guarantee that the page will render correctly.
In this example, the word ‘hello’ has been emboldened by using the strong markup element. This is another example of an element that has opening and closing tags. The element is closed by repeating the opening tag name prefaced with a forward slash, ie <strong>Hello</strong>.
<:html>
<head>
<title>My document</title>
</head>
<body>
<strong>Hello</strong< world
</body>
</html<
The diagram below shows how our simple example page looks when it is rendered by a browser.
Adding attributes and values can extend tags. A simple example would be an author assigning the colour yellow to the background of an HTML page by adding the following attribute and value to the opening <body> tag.
Two features not mentioned yet have really given the web life and helped ensure its enduring popularity. These are:
HTML also contains many other content structuring elements which control the way the browser renders text (see section 6.1 above), tables (see section 6.3), frames (see section 6.4) and forms (see section 6.5).
Detailed information on the correct implementation of the latest version of HTML 4.01 can be gained from the World Wide Web Consortiums (W3C) website.
6.1.4 Using the appropriate Document Type Definition (DTD)
The Document Type Definition (DTD) must be included at the very top of each HTML page. This line informs the validation services which revision of the HTML standard you have used to construct the page. It should be entered into the page in the following manner:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
...The head, body, etc. goes here...
</html>
Three specific DTDs are available within the HTML 4.01 standard, one of which must be quoted on each HTML page to ensure the correct validation and subsequent guaranteed usability. They are as follows:
HTML 4.01 Strict DTD
This includes all elements and attributes that have not been deprecated or do not appear in frameset documents. For documents that use this DTD, use this document type declaration:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
HTML 4.01 Transitional DTD
This includes everything in the strict DTD plus deprecated elements and attributes (most of which concern visual presentation). For documents that use this DTD, use this DOCTYPE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
HTML 4.01 Frameset DTD
This includes everything in the transitional DTD plus frames as well. For documents that use this DTD, use this DOCTYPE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd">
6.1.5 HTML 4.01
Once an appropriate Document Type Definition (DTD) has been decided upon the corresponding standard must be adhered to. The set of DTDs available with HTML 4.01 is listed in the previous section.
It is important to use the correct HTML elements and the tags that represent them when marking-up a document. The rendered document must be as legible and understandable to a user with a visual impairment as to anyone else. To accomplish this there are certain elements that render in the same way on a visual browser but which actually have subtle differences when read by a disability browser.
<i> … text … </i>
This tag will make all text contained within it italic.
<em> … text … </em>
This tag will make all text contained within it italic but will change the inflection of a speech browser, placing emphasis on the text within the containers.
<b< … text … </b>
This tag will make all text contained within it bold.
<strong> … text … </strong>
This tag will make all text contained within it bold but will change the inflection of a speech browser, placing emphasis on the text within the containers.
Other elements should only be used for structuring the document rather than styling it.
<body></body>
This tag should not be used as a styling device, and no font styling, margin control or link colouring should be contained within this element. Many of the commonly used attributes and values are proprietary extensions and will not work for all browsers. The only styling element that may be included is the specification of a background colour for the page. Any other styling information that is used to control the entire page should be included in the website’s Cascading Style Sheet.
<h1> … text … </h1>
There are six levels of heading within HTML, h1 is the most prominent, and h6 is the least prominent. These should only be used when headings are required for separating individual groups of data within a publication. <h1> through to <h6> should be used hierarchically.
<hr>
A horizontal rule should be used to separate information. It should never be used as a styling device.
<blockquote> … text … </blockquote>
This tag should be used when formatting a speech quotation within a document. It should never be used for indenting information in a web publication as it could be misleading to browsers with access technology.
Many HTML elements can have extra attributes and values added to them. The basic HTML element will, for example allow an author to add a paragraph break (<p>) or a horizontal rule (<hr>) but on many occasions this is not enough to obtain the full effect that is required.
The extra attributes provide further controls over the way elements are rendered by a web browser. Entire paragraphs can be justified or aligned to the left, and the width, height and the thickness of horizontal rules can be adjusted. Each attribute will have a value, which must always be preceded by an equals sign and contained within quotation marks.
An example of an HTML tag being extended with attributes and values is as follows:
<hr width="90%" size="5">
The resulting horizontal rule will stretch across 90 per cent of the viewable web browser screen, and will be five pixels in height.
Always remember that:
any attribute value must be contained within quotation marks (“ “);
not all browsers will recognise a particular attribute;
most of these attributes can and should alternatively be added using Cascading Style Sheets;
care should be taken that chosen colours do not cause difficulty for users.
All formatting of textual and tabular information should be added by using Cascading Style Sheets. This is explained within section 6.2.
6.1.6 Validation
The W3C automatic online validation service is free of charge and enables Web managers to test and correct their HTML document.
The URL to be tested is entered; enabling the W3C website validation service to validate the HTML page against the DTD specified at the top of the file. A results page will then be sent to the user with either a congratulatory message or a full list of errors.
The error page is well constructed, reporting exact problems, showing the line that the mistake occurred on and stating where in the HTML standard the correct formatting can be found.
Only once a page has been completely cleared by the validation service will the Web manager see the congratulatory message. This message page also gives the graphic that can be displayed on the organisation’s website homepage:
Also listed is a sample URL that enables the Web manager to keep a continual link to this successful validation message, which might be for example:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.ukonline.gov.uk
Important: It is easy to learn HTML, but it takes a long time to learn how to use it correctly.
It should be remembered that every page within the website should validate correctly. It is simply not enough to have a well-written homepage that validates correctly and other pages within the website that do not.
If the production of HTML pages within the organisation is automated it is still worthwhile validating the output, as it is not uncommon for these pages to be badly constructed. Mistakes can always be corrected as the templates that the automated process uses are usually straightforward to change.
Many of the features of WAI rely on the Web manager knowing how to format a page correctly in HTML, and only validation and display of the logo and link will prove that this is the case.
HTML pages should never be published on the web in what is in effect a half-finished format. If an open standard is going to be used it should be used correctly - this is the only way in which it can be checked properly.
6.1.7 eXtensible Hypertext Mark up Language (XHTML1.0)
The W3C’s December 2000 recommendation for the latest revision of the HTML markup language is XHTML 1.0 (eXtensible Hypertext Mark up Language). There are two main questions that need to be answered before any Web manager seriously considers this move:
6.1.7.1 What is the difference?
XHTML1.0 is the first major change to HTML since HTML 4.0 was released in 1997. It brings the rigour of XML to web pages and is the keystone in W3C's work to create standards that provide richer web pages on an ever increasing range of browser platforms including cellular phones, televisions, in-cars devices, wallet-sized wireless communicators, kiosks and desktops.
XHTML1.0 is modular in construction, making it easy to combine with markup tags for technologies like vector graphics, multimedia, mathematics, electronic commerce and more. Content providers will find it easier to produce content for a wide range of platforms, with greater assurance as to how the content is rendered.
The modular design reflects the realisation that a one-size-fits-all approach will no longer work in a world where browsers vary enormously in their capabilities. A browser in a mobile phone can't offer the same experience as a top-of-the-range multimedia desktop machine. The mobile phone doesn't even have the memory to load one page designed for the desktop browser.
XHTML1.0 is the first step. XHTML reformulates HTML as an XML application. This makes it easier to process and easier to maintain. XHTML borrows the tags from W3C's earlier work on HTML 4, and can be interpreted by existing browsers, by following a few simple guidelines.
All old HTML documents can be changed into XHTML1.0 using W3C's open source HTML Tidy utility. This tool also cleans up markup errors, removes clutter and structures the markup, making it easier to maintain.
6.1.7.2 What does XHTML1.0 look like?
Instead of the normal HTML Document Type Definition at the top of each page, the following needs to be used:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
This informs the browser that the document is marked up using XHTML. The elements that are used are basically the same as the ones used in all other HTML documents, but there are some subtle differences that need to be understood to ensure that the document validates correctly.
Well-formed
This concept introduced with XML, means that every markup element must be closed correctly. This is not an issue with many elements in HTML as most are closed by replicating the tag name but preceding it with a /, as in this example:
<html>
<head>
<title>Document</title>
</head>
<body>
<h1>Document Title</h1>
<p>This is a short paragraph</p>
<table>
<tr><td>cell 1</td><td>cell2</td></tr>
<tr><td>cell 3</td><td>cell4</td<</tr<
</table>
</body>
</html>
In this simple example, every markup tag is turned on and off, with the contents of that element being affected by the specified formatting.
However, a number of HTML elements do not have a closing tag. In this case a special notation is needed:
<meta name="DC.Identifier" scheme="URI" content="http://www.open.gov.uk" />
<link rel="stylesheet" href="css/open.css" type="text/css" />
<body>
This is a short line of text<br />
Followed by another line of text<br />
<hr />
<img src=”test.gif” />
</body>
In this example a number of common elements are shown that are normally left open - that is, they actually terminate themselves once their formatting instruction has been read. In XHTML each of these needs to be closed to be considered well formed so a space and / needs to be incorporated at the end of each tag. This is effect on the following these simple examples.
Nested elements
As with HTML it is important that elements are written in the correct order and are always closed in reverse sequence. The first tag turned on must be the last tag turned off. An example of nested elements: here is an emphasised <em>paragraph</em>. An example of overlapping elements: here is an emphasised <em>paragraph.</p></em> Both will probably work in most browsers but only the first example with correctly nested elements will work in all and will also validate correctly to the XHTML standard. Case sensitivity Unlike HTML, the elements used in XHTML1.0 must all be in lower case. This is because XML is case sensitive and the element written as can be different to the one written as <P>. Values All attribute values must be given in quotation marks, as in the following example: <table border=”0” width=”100%”> not this: <table border=0 width=100%< Although the latter does not constitute correct HTML either because an attribute value that includes the percentage symbol should also be enclosed in quotation marks in all versions of HTML. 6.1.7.3 Validation If XHTML1.0 has been employed on the organisation’s website it should be validated using the online W3C validator in the same way that HTML is. When pages pass, the following logo can be displayed on the website: The specification for XHTML1.0 can be accessed at the W3C website. Start-up kit
This start-up kit provides a small, self-contained, accessible and usable website template for training purposes.
In section navigation