What is HTML Coding Standards

Stored in: Web Designing and Tagged:

World Wide Web Consortium (W3C) It is a group creates standards for technologies used on the web. Each part of the different technologies has a set of specifications (standards) set out for web designers and browsers to follow so everything on the web gets along. Each broseser interprets HTML standards in different way.

Doctype & Content Type

Unless specifically requested, I always set the doctype of every site to XHTML 1.0 Strict. In the last few years I have standardised on this, and have never been confronted with a site that can only be built using a ‘lesser’ alternative. Using XHTML 1.0 Strict allows for a greater degree of separation between content, style, and behaviour.

I set the content type to text/html, with the character set of ISO-8859-1 or UTF-8 if the site is likely to need localising into languages that contain foreign characters.

HTML Tags

<head>

Usuallly every one place a standard set of tags in the head of any HTML document.

Import CSS files in the head of the document through <style> tags.

The meta description and keywords should be present in the header. Meta description tag is used by most major search engines in the listing of the site in question, and so should contain a short sentence describing the site. Meta keywords are usually ignored by search engines, but can be added anyway if desired.

<body>
Place an id attribute on every body tag to uniquely identify it within the site. It can optionally also include a class to identify it within a section of a site. This is useful for CSS targeting. For example, an id of ‘home’ placed on the body tag means any CSS styles that start with the declaration #home will only apply to this page of the site.

I always immediately follow the body tag with a <div> element with the id of wrapper, which contains all page content. This is to enable further control over page layout via CSS.

There are times when it is necessary to place a container outside of the wrapper. One example of this is where content is to be vertically centred, as in this case the wrapper is surrounded by a <div> element with an id of horizon. The horizontal positioning of this element can be controlled by CSS.

Standard Structure
My standard structure for an html page changes on a per-project basis, but it generally follows this convention:

For pages with multiple columns, the maincontent container can have a class that describes how many columns it contains, and any related information. A few examples are onecol, twocol, twocoleven, twocolwide and threecol. Placing these class names on the container allows specific CSS styles to be applied to different page layouts, which is advantageous for large site builds.

HTML Elements and Attributes

Any extra html attributes (e.g. class, id) that are applied to elements should have a structural meaning. I do not use any style-focused attributes that have been deprecated in HTML strict.

I only use inline styles within the html when elements are dynamically inserted into the page via server-side script, such as to apply background-images and positioning.

I tend to declare all attributes using double quotes ( ” ) rather than single quotes ( ‘ ).

<img />
I only use images in html when they are directly relevant to the content of the page. If an image is to be used for decoration only, I apply it as a background image to an element via CSS.

Whenever using an inline image, I use the following attributes:

src
alt – description of the image for non-visual browsers
width
height
title (optional) – extra information about the image
If an image is directly next to a title or content which accurately describes its content, then an alt attribute of alt=”” is acceptable.

I always attempt to set a width and height attribute on each image. This means when a page is rendering, even before the image has been downloaded it’s dimensions have been registered in the browser, reducing the amount of jumping of page elements.

tabindex and accesskeys
The main navigation of a page should use tabindex values to aid keyboard movement around the page.

Access keys should also appear on main page navigation. These access keys should follow a standard convention, and I generally number them 0-9. If further access keys are required for the main navigation, I use a-z.

title attribute
The title attribute can be used on images and links for additional information, and I use it to where appropriate.

For main navigational items, the title attribute should really be used as much as possible, as it can also help provide additional information for search engine rankings.

form elements
All forms should use <fieldset/> and <legend/> elements, as they will not validate if you don’t use these elements.

I always add an additional class for any form <input/> elements to identify them for styling. This class should be the same as the type attribute, for example <input type=”text” class=”text” />

Classes & IDs

All class and ID names should have a semantic meaning relating to their content.

IDs should be used for unique page elements, and elements that re-occur throughout the site (although only once per page). For example, the header, footer, navigation, and main content sections should each have unique IDs that are consistent throughout the site.

Classes should be used for repeated elements within an individual page.

The combination of classes and IDs on individual elements is useful where generic styles (applied by the class) are extended by styles applied to each id.

Clearfix
My preferred method to correctly clear floated elements is to use a class of clearfix on the parent element. It should only be applied to this parent element, and not the floated elements within (unless they too require it). I prefer this method to the float nearly everything technique.

hr
To style horizontal rules in a cross-browser compatible manner, I wrap them in a div element: <div class=”hr”><hr/></div>. The horizontal rule can then be hidden with CSS, while the div element can be styled in a manner that all browsers can render correctly.

tables
HTML tables should only be used for tabular data, not to position the content of the page.

Where possible I split table content using the <thead> and <tbody> elements to differentiate between the head and main body of table content.

The <th> table heading element should be used to correctly mark up headings.

A class can be placed on every alternate row of table content to allow styles to be applied to these rows, such as a different background colour.

HTML comments
I only ever use HTML comments sparingly to separate and describe elements within page content, but I always remove them before the code goes live. For large, complex sites it is sometimes necessary to leave in HTML comments.

Validation

I validate all HTML through the W3C HTML validation tool.

I find that using the Firefox Web developer toolbar is the quickest way to do this, as it provides a keyboard shortcut to quickly test as you go along.

Removing all HTML validation errors is the simplest and quickest way to eliminate 90% of all rendering errors, and are usually the reason why browsers render page content differently.

Testing

I test every website to ensure it is accessible and functioning properly when accessed from a variety of different platforms, operating systems and browsers.

I also test all websites against the original design (using my javascript grid overlay), to ensure it is pixel perfect in most browsers.

The JavaScript functionality of the site is also tested across browsers, to ensure any behaviours degrade gracefully, and replacement content is provided for users without JavaScript.

No Comments

Comments are closed.

Archives

Meta

Categories