Jai Marathe: HTML Coding Standards

Page Title:

At the top of the file you’ll have a title tag:

For Example

<title>Centre for Human Resources</title>

The template was designed with the title tag set to “Page Title,” – a note for you to remember to insert the title of the page between the title open and end tag; i.e.

For Example

<title>Page Title</title>

Set to…

<title>Staff / Contacts</title>

<title>Links</title>

<title>Income Protection Benefits</title>

Remember, a page title is not the file name; i.e., index.htm is a file name for page titled “CHR Home.”

Formatting:

All HTML documents must use two spaces for indentation and there should be no trailing whitespace. XHTML syntax must be used (this is more a Genshi requirement) and all attributes must use double quotes around attributes.

For Example

</video>

HTML5 elements should be used where appropriate reserving <div> and <span> elements for situations where there is no semantic value (such as wrapping elements to provide styling hooks).

Doctype and layout:

All documents must be using the HTML5 doctype and the <html> element should have a "Lang" attribute. The <head> should also at a minimum include "viewport" and "charset" Meta tags.

For Example

<!doctype html>

<head>

<title>Example Site</title>

</head>

</html>

Form:

Form fields must always include a <label> element with a "for" attribute matching the "id" on the input. This helps accessibility by focusing the input when the label is clicked, it also helps screen readers match labels to their respective inputs.

For Example

<label for="field-email">email</label>

Each <input> should have an "id" that is unique to the page. It does not have to match the "name" attribute.

Forms should take advantage of the new HTML5 input types where they make sense to do so; placeholder attributes should also be included where relevant. Including these can provided enhancements in browsers that support them such as tailored inputs and keyboards.

For Example

<div>

<label for="field-email">Email</label>

</div>

<div>

<label for="field-phone">Phone</label>

</div>

<div>

<label for="field-url">Homepage</label>

</div>

Wufoo provides an excellent reference for these attributes.

Including Meta data

Classes should ideally only be used as styling hooks. If you need to include additional data in the html document, for example to pass data to JavaScript, then the HTML5 data- attributes should be used.

For Example

<a class="btn" data-format="csv">Download CSV</a>

These can then be accessed easily via jQuery using the .data () method.

For Example

jQuery('.btn').data('format'); //=> "csv"

// Get the contents of all data attributes.

jQuery('.btn').data(); => {format: "csv"}

One thing to note is that the JavaScript API for datasets will convert all attribute names into camel Case. So "data-file-format" will become file Format.

For Example

<a class="btn" data-file-format="csv">Download CSV</a>

Will become:

jQuery('.btn').data('file Format'); //=> "csv"

jQuery('.btn').data(); => {file Format: "csv"}

Targeting Internet Explorer

Targeting lower versions of Internet Explorer (IE), those below version 9, should be handled by the style sheets. Small fixes should be provided inline using the .i.e. specific class names. Larger fixes may require a separate style sheet but try to avoid this if at all possible.

Adding IE specific classes

For Example

<!doctype html>

<html Lang="en">

Note:

Only add lines for classes that are actually being used. These can then be used within the CSS:

For Example

.clear: before,

.clear: after {

content: "";

display: table;

}

.clear: after {

clear: both;

}

.ie7 .clear {

zoom: 1; /* For IE 6/7 (trigger has Layout) */

}

Paragraph

Don’t include line breaks within <p> blocks. i.e.

Do This

<p>New paragraph, blah</p>

And not

<p>Blah foo blah

New paragraph, blah</p>

IDs and Classes

IDs and classes should contain lowercase letters and words should be separated with a hyphen.

Default Skeleton

The following mark up should be used as the base skeleton for most HTML documents. Variations are allowed, but the IDs should be preserved if possible:

For Example

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</header>

</ul>

</div>

</footer>

</div>

</body>

</html>

Best Practices:

Use clear and precise names for IDs and classes.
Choose names according to semantic meaning rather than presentation.
Avoid using unnecessary classes and wrapper elements.
Validate HTML. A validator can often help a developer track down styling or scripting bugs.
Valid HTML also increases the likelihood that a page will be displayed correctly in current and future browsers.

Primary vs. Secondary Pages

Primary Pages

The main page, “CHR Home” and main page for each Service Area: “Benefits, Director’s Office, Employment, HRIS, Payroll, Training & Professional Development, and Workers’ Compensation” are your primary pages. These pages will have page headers, “Centre for Human Resources,” as the first header <H1> and <H2> set to the Service Area names.

For Example

<H1>Centre for Human Resources</H1>

<H2>Benefits</H2>

The example above is the Benefits home page, where the file name is index.htm and Page Title is Benefits. The header bar will have the first header of Centre for Human Resources and the second header Benefits. Below this area is a bread crumbs trail with links to:

BUSINESS AND FINANCIAL AFFAIRS > ADMINISTRATION > CENTER FOR HUMAN RESOURCES>

Finally, under the bread crumb trail is the marquee or message ticker.

Secondary Pages

Any page linked to the home page is considered a secondary page. Different formatting rules apply to it. An example is the Benefits, Staff / Contact page. The top header should be “Benefits” for the Service Area and “Staff / Contacts” for the secondary page name. In addition, the page title should also be “Staff / Contacts.” Remember the file name is staff.htm, but the page title is “Staff / Contents.” The html code follows:

For Example

<title>Staff / Contacts</title>

<H1>Benefits</H1>

<H2>Staff / Contacts<H2>

Below the header is the bread crumbs trail. In this case you will need to add a link back to the calling page. For example, the Benefits page has a link to Staff / Contacts. Therefore, we must include a link to the Benefits page, or calling page in the bread crumbs trail for the secondary page, Staff Contacts. In this example, the bread crumb should be:

Business and Financial Affairs > Administration > Centre for Human Resources > Benefits >

Secondary pages do not have the marquee or message ticker. When building new secondary pages from the template, remember to delete the ticker. Search for the marquee tag and delete:

For Example

Please Visit Us Again! &nbsp ; We Are Always Happy To Help.

</marquee>

The body of the page should begin with an <H3> tag if required. Recall in the header we have <H1> followed by <H2>. For people with disabilities, an example may be someone with a broken who cannot use the mouse to advance through the page; using header tags allows the disabled person to hit the “tab” key to advance the cursor to the next header tag.

This is especially important to blind people, who use screen-reader technology. To advance to the next page section, they will hit the “tab” key, without suffering the screen reader, which will read-aloud every sentence on that page.

Format Pages using CSS Classes not Tables

An important rule for accessibility is to apply all page-formatting with CSS properties and remove all formatting from the page content (text). An example is two column texts. Don’t format the text using a two-columned table embedded in your html. Tables are used to display data, not to be used to format the page. Rather use CSS classes to define two columns and apply it to your text.

For Example

<ul>

<li>Emotional wellness</li>

<li>Marital/relationship issues</li>

<li>Family issues</li>

<li>Communication skills</li>

</ul>

</div>

<ul>

<li>Stress management</li>

<li>Alcohol and drug issues</li>

<li>Work-related issues</li>

<li>Grief issues</li>

</ul>

</div>

Jai Marathe

HTML Coding Standards

No comments:

Post a Comment