Web Standards Doc 20110126

8/6/2019 Web Standards Doc 20110126

1/21

Web Standards DocumentCIBO


2/21

Revision History

12.10.2010 Created

1.10.2011 Changes to XHTML to HTML5 doctype

1.26.2011 Changes to HTML5 use; removed accessibility section

1.27.2020 Adding JavaScript validation and CSS font sizing percentages; added

browser testing and operating system list


3/21

Introduction

This document contains recommendations for the use of HTML5 and

Cascading Style Sheets (CSS) where HTML5 structure is separated from the CSS

style and layout of a document. As a set of standards it aims to inform and assist

front-end developers in the creation of consistent, maintainable, high quality code.


4/21

HTML5

IntroductionHTML5is the new version of HTML4, XHTML1, and DOM Level 2

HTML.

The following set of guidelines can be used to assure compatibility

with HTML5. They are a distilled version of the recommendations contained withinthe W3C document on HTML5: http://www.w3.org/TR/html5/.

HTML5 Basics and Tag RulesWe will not using the following HTML5 tags: , ,, and for browser compatibility reasons. HTML5 allows for HTML

or XHTML style syntax and we will use the XHTML style syntax.

1. Documents must be well formed

2. Tags and attributes must be in all lowercase

3. For non-empty tags (, and

, for example), end tags are

required

4. Attribute values must always be quoted5. Attribute minimization is not supported

6. Empty elements ( and
, for example) must be properlyclosed

7. The id attribute must be used instead of the name attribute

8. All images must have alt attributes

Documents must be well formed

Essentially, this means that all HTML elements must be closed and

must nest properly. Proper nesting is as follows:

CORRECT:

Here is an emphasized word.

INCORRECT: Elements overlap

Here is an emphasized word.

Empty elements must either have an end tag, or the start tag must endwith />. For example, XHTML would use
or
.


5/21

CORRECT: Minimized tag syntax with white space

INCORRECT or UNPREDICTABLE RESULTS:

or

Element minimization and empty element contentGiven an empty instance of an element whose content model is not

empty (e.g., an empty div or paragraph), do not use the minimized form. For

example, use for a div with no content, not . An exception to this rule is which must always have an

end tag i.e.

Attribute values must be quoted

All attributes must be quoted, even simple numeric values.

Attribute minimization is not supportedIn XHTML, attribute-value pairs must be written in full. HTML

supports certain attributes where no value is provided, but this is not allowed in

XHTML.

CORRECT: Unminimized attributes

INCORRECT: Minimized attributes

Line breaks and attribute values

Avoid line breaks and multiple whitespace characters within attribute

values. User agents do not handle these consistently.

Use name and id attributes

XHTML treats id and name attributes differently than HTML 4.

Without going into the specifics, the id attribute is preferred in XHTML (name is

actually deprecated in favor of id). Many HTML clients don't play well with id

attributes, so supply both name and id to ensure compatibility:

CORRECT: Identification with id and name

UNPREDICTABLE RESULTS: Identification with name only


6/21

Element prohibitions

XHTML places restrictions on the nesting of elements. Certainelements cannot contain other elements. The following restrictions apply to all

depths of nesting:

a: Cannot contain other a elements.pre: Cannot contain the img, object, big, small, sub, or sup elements.label: Cannot contain other label elements.

form: Cannot contain other form elements.

Entities

Some characters are part of XHTML, e.g. the character for 'less than' is

< . To display these characters we must insert character entities in the XHTML

source.

For example:

Less than (


7/21

Code indentationIndent code to enhance readability

Code indentation is a way of greatly enhancing code readability. By

indenting sections of code based on their function, or by the degree of nesting, it will

be easier to read and understand a piece of code.

Indent using tabs

Indent using tab characters, as opposed to white space. This will

ensure consistency across files and increase editing efficiency. Text editors such as

Dreamweaver allow the user to specify how many white space characters make up

one tab. This is usually set to 4 spaces.

Indent all nested blocks of code

Code fragments that necessarily reside inside parent tags should beindented. For every level of nesting, indent the code one tab further. Tables are the

cleanest example of nested blocks of code, but there are other instances where this

occurs. The following example with several nested div tags should provideguidelines:

A little indentation of nested blocks

CommentsDescriptive commentsThese are comments whose purpose is to describe functionality, or to

clarify the thinking behind a certain section of code. A simple comment or comment

block should be used for descriptive comments:

Simple Descriptive Comment Descriptive Comment Block

Structural comments


8/21

These are comments whose purpose is to delineate a region of code

with a clear beginning and ending. For these comments, use an initial commentbefore the block, and a closing comment after the block. The format should be as

follows:

Structural Comment Layout

.

.

.

OR

Comment all-important blocks of codeAdd comments to help explain all-important blocks of code. Major

modular code blocks (e.g., ) or functional elements (e.g., ) are strong

candidates. Descriptive comments are suitable unless the block of code is

sufficiently long, in which case structural commenting should be used.

Use comments to indicate major page elementsIf a page layout contains several key regions, indicate the code used to

markup these regions. For example, for a page that has primary navigation along thetop of the page, and secondary navigation in the left column, comment each of these

sections of XHTML using the structural format above.

Use comments wisely

At some point, comments begin to degrade readability, as well as

performance. Use them wisely.

Nesting Comments

If comments are nested, also indent them, but elements should not

indent from comments above them.

Example:

A little indentation of nested blocks


9/21


10/21

Document Template

DOCTYPEThe DOCYTPE declaration used for every HTML5 document is:

CSS ImportsUse external style sheets and not inline styling. There are two

methods of referencing external stylesheets:

Using linked stylesheets

Using the @import rule

@import "/css/style.css" />

Common areas of functionality should be split into appropriately

named imported stylesheets.

e.g.. styles for links, forms and buttons would be imported as:

@import "/css/links.css"

@import "/css/buttons.css"@import "/css/forms.css"

See section on Cascading Style Sheets for more details on CSS imports.

JavaScript IncludesAny JavaScript to be used should be 'included' to allow easier code and

document management:

Example structure of an HTML5 page


11/21

Layout1


12/21

CSS

UsageCascading Style Sheets (CSS) give the author of an HTML5 page the

ability to separate the styling and layout elements from the structure and content of

a document. They are of fundamental importance to the usability of a page foreveryone.

Indentation & FormattingStylesheet rules should be formatted as follows, with indentation

(using tabs) for clarity:

.styleName1 {attribute1: value1;

attribute2: value2;

.

.attributeN: valueN;

}

.styleName2 {

attribute1: value1;attribute2: value2;

.

.

attributeN: valueN;

}

Compliance and validityAll CSS code must be compliant according to the W3C

recommendation:

http://www.w3.org/TR/REC-CSS2/

A CSS validator should check validity

http://jigsaw.w3.org/css-validator/

Certain code editors also have built-in CSS validators.


13/21

ImportsAll CSS must be contained in files external to the main HTML5 page.

No inline styling should be used.

and @import are the two methods used to reference the CSS

from within the tag of an HTML5 page. is declared first, usually toreference an accessible, alternative stylesheet that will provide a browser friendly

version for non CSS2 compliant browsers. The @import method references

stylesheets for CSS2 compliant browsers and will override the CSS rules in the

stylesheet.

For example:

@import "/css/style.css" />

Naming conventionsUse descriptive class names and camel-case

Create class names that have context and are meaningful to the page

elements that they apply to, or to the styles that they represent. Use camel-case fornames containing multiple words.

For example:

div.paginationTitle {}

div.crumbTrailLink {

}

CSS Rules

CSS selectors are used to apply CSS rules to HTML5 elements.

Type selectors

A type selector matches every instance of the element type in thedocument tree.

For example:

The following rule matches all h1 elements in the document tree:


14/21

h1 {font-family: sans-serif;

}

Class selectorsFor all elements with a class attribute you can assign style information

to those elements.

For example:

.errorText {

color: red;

}

would style the following text red:

Error text copy

ID selectors

Use the ID attribute instead of class for CSS rules that are applied only

once on a page.

For example:

#leftNavigation {

width: 100%;

}

This rule will only match an element that has an ID value of

"leftNavigation".

Inheritance

Children in the document tree can inherit CSS values. This would

mean, for example, that if no color has been assigned to a class applied to the

element then it would inherit the color of its parent elements:

CSS:

body {

font-size: 100%;color: #000000;

}


15/21

p {font-size: 80%;

}

p.footerText {font-weight: bold;

}

HTML5:

Paragraph of footer text...

The text above inherits font-size from its parent (

) and color from

its grandparent () yet maintains its font size.

Multiple class inheritance

This is useful for applying styles from different classes without

declaring a new rule.

For example (following on from the above example):

CSS:

p.footerText a {

color: #CCCCCC;}

HTML5:

Paragraph of footer text...

CSS ResetA CSS file will contain a reset, font normalization and base styles. The

goal of the CSS reset file is to remove browser specific styles and then use the mainglobal CSS file to build the CSS from scratch so that elements will appear the same in

all browsers.

Font sizing percentages:


16/21

10px = 77%

11px = 8512px = 93

13px = 100

14px = 108

15px = 11616px = 123.1

17px = 131

18px = 138.5

19px = 146.5

20px = 153.9

A full list of the font size percentages: http://developer.yahoo.com/yui/3/cssfonts/.

CSS Hacks

Hacks can be used but as a last resort. The issue with hacks is thatthey are not future proof. A future browser (perhaps IE9 or later) could potentially

use a hack for IE7.

Example:

p {

color: red\9; /* IE8 and below */

*color: green; /* IE7 and below */_color: blue; /* IE6 */

}

CSS Conditional CommentsConditional comments should only be used if absolutely necessary.

Multiple stylesheets can be confusing and add extra requests.

Example:

This would be placed between the tags.Target IE6

Target IE7


17/21

Target IE8

Target IE 6 and LOWER

or


or


or


18/21

JavaScript

UsageJavaScript should only be used to enhance the user experience.

Accessibility can be restricted when JavaScript is used in the functionality of an

HTML5 page as cross browser support is varied and users may have JavaScriptdisabled.

Indentation & FormattingAs with the recommendations for HTML5 authoring, formatting

conventions with JavaScript are aimed at facilitating the creation of clean, readable

code.

Use semicolons to terminate all statements

JavaScript does not require the use of semicolons to terminate

statements, but it is a good rule to follow.

Enclose all control structure statements within braces

Braces are used in JavaScript to delineate blocks of code to be

executed. Use them for all control structures, even if there is only one statement to

be executed. As an example, consider an if statement with a single element:

ABBREVIATED:

if (something == true)ExecuteFunction();

PREFERRED:

if (something == true) {

ExecuteFunction();

}

Indent nested statements and control structures

Use a consistent treatment of indentation for nested statements andcontrol structures. Elements that are contained within a higher level structure

should be indented relative to that structure. Use tabs rather than white space. Thesample function in the previous section illustrates indentation of control structures.

CLEAR, CONSISTENT CODE:if (expression1) {

if (expression2) {statement1;

} else {


19/21

statement2;

}}

UNCLEAR, INCONSISTENT CODE:

if (expression1) {if (expression2) {statement1;

} else {

statement2;

}

}

JavaScript includes

Any JavaScript to be used should be 'included' to allow easier codeand document management:

JavaScript should be at the bottom of the HTML page (before the

ending tag) to ensure fast page loading.

CommentsAll functions should have concise comments describing the purpose of

the function.

For example:

/** Rollover function for turning an image 'on'.

* Pass in a handle to the image object.*

* All images must have a distinct name attribute

* which is used as an index in the global image* array imgsOn.

*/

function imgOn(img) {

if (document.images) {

img.src = imgsOn[img.name].src;

}

}


20/21

Naming ConventionsIt is very important to establish naming conventions in order to

enhance code readability. With a few guidelines, it is possible to author code that is

comprehensible to the developer world at large.

Use descriptive names for variables and functionsCreate variable and function names that represent the data they store

or the function they serve, respectively. For example, if you have a variable

representing the number of goals England score in a game, call it numGoals, rather

than ng.

Use camel-case for names containing multiple words or segmentsFor variable or function names that are composed of multiple words

or segments, capitalize the letter just after the segment boundary. Examples:targetWindow, hotObject, numGoals.

JavaScript ValidationWe will be validating the code using validators built-in to the code

editors or online with JSLint (http://jslint.com/).

jQueryFront-end developers will use the latest version of jQuery as the

default library. The current version is jQuery v1.4.4 (as of1/2011).


21/21

Cross-browser Testing

The list of browsers and operating systems for testing:

Mozilla Firefox 3.6.x (Windows 7/Mac OS 10.6)

Mozilla Firefox 4.x (Windows 7)

Internet Explorer 7 (Windows XP)

Internet Explorer 8 (Windows7)

Google Chrome 8.0.x (Windows 7)

Safari 5.0.x (Mac OS 10.6)

Date post:	07-Apr-2018
Category:	Documents
Upload:	wdvijay
View:	218 times
Download:	0 times