Standards and Guidlines

1. Introduction

1.1 Semantic mark-up is HTML that describes the content, rather than the manner in which the content is presented. It allows the meaning to be delivered to users regardless of the browser they use, so that content can be provided to the widest possible audience.

1.2 As an example, <em>this text</em> uses HTML as it was intended by the W3C, while <i>this text</i> does not. The appearance of this visual browsers (as opposed to screenreaders, etc.) will be the same, but only by using semantic HTML is the meaning of the content preserved across all types of browser. Only by using semantic HTML can the emphasis of the words be maintained, whether emphasis is presented visually as italics (as it is by default) or in another way.

1.3 The CEC endorses the principle of separating content from presentation in web pages, using HTML as a semantic mark-up language.


2. Scope of This Standard

2.1 This standard is an 'ideal' ambition, which may-not be fully able to be fully realized at this time due to the legacy of non-semantic content currently on all CEC Marketing websites.

2.2 This standard should be applied as far as is possible - to all new templates or pages produced outside of existing templating systems and content management systems.


3. Principles of Application

3.1 You MUST NOT use semantic tags outside the purposes defined below, e.g. if you use the blockquote tag you MUST ONLY use it as defined below and not for any other purpose, such as to set a particular presentation style.

3.2 If you are capturing semantic meaning in a document, you MUST use the appropriate semantic tag, e.g. an <abbr> tag MUST be used in preference to <span class="abbr">


4. Headings

4.1 All pages MUST use heading elements

4.2 Heading elements MUST convey the structure of the document/page.

4.3 Heading elements MUST be ordered hierarchically, i.e. if there is an H2 element on the page it SHOULD be preceded by an H1 element somewhere on the same page, if there is an H3 element on the page it SHOULD be preceded by an H2 element somewhere on the same page, if there is an H4 element on the page it SHOULD be preceded by an H3 element somewhere on the same page, etc. Intermediate levels MUST NOT be omitted (e.g. H1 directly to H3).

NOTE: this is to maintain well structured pages, which are essential in order to deliver a good user experience to those using assistive technologies such as screen-readers.

4.4 Headings SHOULD be followed by further content, e.g.

<h3>Title</h3> <p>Text text</p>

4.5 Headings SHOULD NOT be treated as 'standalone' content.

4.6 Headings MUST NOT have a consecutive series of same level headings without content between each e.g.

<h3>Title</h3>

<h3>Title</h3>

4.7 Headings MAY have sequential headings (without content between each) to specify hierarchy. For example:

<h3>Section</h3>

<h4>Sub section</h4>

4.8 There MUST be one, and only one H1 per page. Depending on the page type within the site CMS the heading may be entered separately via a dedicated input or it could be included as a part of the page content itself. Please be cognizant of the context within which you are working in order to adhere to this standard.

4.9 The H1 MUST be subject of that page.

4.10 Establishing HEADINGS that also serve as links is strongly discouraged. While this technique is represented in the sites legacy content it has been used in an inconsistent manner that runs contrary to best practice. Please refer to the Standards and Guidelines Examples page for alternative approaches.


5. Lists

5.1 There are three valid list types: ordered lists <ol>; unordered lists <ul>; definition lists <dl>

5.2 All lists SHOULD be preceded by a header - <h*>description</h*> - that describes the content of the list. Example: <h2>Other top stories</h2> before a list of other top stories.

5.3 <ul> unordered list: MUST ONLY be used where the order of the list is not editorially significant.

5.4 <ol> ordered list: MUST ONLY be used where the order of the list items is editorially significant. (Even if the numbers are hidden with CSS).

5.5 <ul> and <ol> type lists MUST have at least one <li> item.

5.6 <dl> lists MUST contain at least one <dt> with a corresponding <dd>.

5.7 <dd> MUST have at least one corresponding <dt>.

5.8 <dl> MAY have multiple terms for a given definition, as well as multiple definitions for a given term.

5.9 <dl> definition list: MUST only be used to describe terms and their definitions.

5.10 In content, you SHOULD use h tag structure rather than nested lists.


6. Table Mark-up

6.1 Tables SHOULD ONLY be used for conveying tabular data, not presentational (layout) use.

6.2 Tables MUST be used for tabular data. Tabular data is data that has relationships in two or more dimensions.

6.3 If you are displaying tabular data you MUST use a "summary" attribute to describe the editorial intent of the data.

6.4 If you wish to apply a caption to your table you SHOULD use a caption tag to do this, e.g. source or copyright of data.

6.5 If you wish to supply a title to your data you MUST use a heading tag, so as to enable navigation to the table within the page by screenreaders.

6.6 In a data table you MUST make use of <thead> and <tbody>.

6.7 If your table has a footer this MUST be encapsulated in a <tfoot> tag.

6.8 If you have table headings you MUST use <th> tags for these.


7. Other Semantic Tags

7.1 These presentational tags MUST NOT be used.

<big>
increased font size
<blink>
alternating for- and background colours
<marquee>
for scrolling text
<tt>
teletypewriter style
<nobr>
creates a region of non-breaking text
<font>
changes the size, style and color of text

7.2 These semantic tags MUST be used where the content matches their description:

<p>
defines a paragraph of text.
<em>
indicates emphasis.
<strong>
indicates stronger emphasis.

7.3 These presentational tags MUST ONLY be used when we need to adjust presentation without affecting the semantics of the mark-up.

<b>
bold contents
<i>
italic contents

7.4 These presentational tags MAY be used visually emphasise content.

<s>
strikes through text
<small>
decreases font size
<strike>
strikes through text
<u>
underlines contents

7.5 These semantic tags SHOULD be used where the content matches their description:

<blockquote>
defines a block quotation.
<q>
defines a short quotation (inline).
<cite>
contains a citation or a reference to other sources.
<abbr>
indicates an abbreviated form (e.g HTML).
<dfn>
defines instances of special terms or phrases.
<code>
designates a fragment of computer code.
<samp>
designates sample output from programs, scripts, etc.
<kbd>
indicates text that is typed on a keyboard.
<var>
indicates an instance of a variable or program argument.
<ins>
defines inserted document content.
<del>
defines deleted document content.
<address>
defines an address

7.6 These notational tags MUST be used.

<sub>
subscripted text
<sup>
superscripted text

7.5 These tags MAY be used.

<br />
inserts a line break in to the text flow
<pre>
preformats text - although alternatives to using this tag are recommended

7.7 You MUST ONLY use <br /> tags to create single line breaks. For more than one line break an alternative should be found (e.g. paragraphs).

7.8 You SHOULD NOT use <br /> tags in general. Recognized exceptions would be address listings and where the line break may be argued as part of the meaning rather than the presentation.