Download - Web Standards Doc 20110126
-
8/6/2019 Web Standards Doc 20110126
1/21
Web Standards DocumentCIBO
-
8/6/2019 Web Standards Doc 20110126
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
-
8/6/2019 Web Standards Doc 20110126
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.
-
8/6/2019 Web Standards Doc 20110126
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 properlyclosed7. 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 -
8/6/2019 Web Standards Doc 20110126
5/21
CORRECT: Minimized tag syntax with white space
INCORRECT or UNPREDICTABLE RESULTS:
orElement 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
-
8/6/2019 Web Standards Doc 20110126
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 (
-
8/6/2019 Web Standards Doc 20110126
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/6/2019 Web Standards Doc 20110126
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
-
8/6/2019 Web Standards Doc 20110126
9/21
-
8/6/2019 Web Standards Doc 20110126
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
-
8/6/2019 Web Standards Doc 20110126
11/21
Layout1
-
8/6/2019 Web Standards Doc 20110126
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.
-
8/6/2019 Web Standards Doc 20110126
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:
-
8/6/2019 Web Standards Doc 20110126
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;
}
-
8/6/2019 Web Standards Doc 20110126
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:
-
8/6/2019 Web Standards Doc 20110126
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
-
8/6/2019 Web Standards Doc 20110126
17/21
Target IE8
Target IE 6 and LOWER
or
Target IE 7 and LOWER
or
Target IE 8 and LOWER
or
-
8/6/2019 Web Standards Doc 20110126
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 {
-
8/6/2019 Web Standards Doc 20110126
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;
}
}
-
8/6/2019 Web Standards Doc 20110126
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).
-
8/6/2019 Web Standards Doc 20110126
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)