Web Quality

Using the newest web standards improves the quality of your web site.

Use HTML 5

Writing your pages to the latest HTML5 standard, brings you as close as possible to perfection.

All HTML pages should contain a <!DOCTYPE> element to define which HTML version it conforms to.

The DOCTYPE gives important information to your browser so it can render your page faster and more consistently.

The DOCTYPE declaration also allows validating software to check the syntax of your page:

<!DOCTYPE html>

Use Separate CSS Files

Using Cascading Style Sheets (CSS) is the preferred way of separating content from style, in quality web pages.

Using CSS improves the quality of web sites and increases the readability for many different browsers.

Styles (sizes, fonts, colors, and more) should be set outside web pages, in separate CSS files. Using a separate CSS file will also greatly reduce your web site development costs.

With a separate CSS file you can change the style of HTML elements by rewriting one line of code. If you have used CSS inside your pages, you will have to edit all these pages.

Web Validation

A validator is a software program that can check your web pages against the web standards.

When using a validator to check HTML and CSS documents, the validator returns a list of errors found, according to your chosen standard.

Make sure you make it a habit to validate all your web pages before publishing.

The Title Element

The <title> element is one of the most important HTML elements. Its main function is to describe the content of a web page.

Even if the title is not a visible part of your web page, it is important to the quality of your web site because:

  • It will be visible in search engine lists
  • It is visible in the browser's title bar
  • It will be displayed in the user's bookmark

The title should be as short and descriptive as possible.

Make sure the title matches the content the user is looking for. Then it is more likely the user will click on the link to visit your web site.

Good title examples:

<title>HTML Tutorial</title>

<title>XML Introduction</title>

Bad title examples:


<title>Chapter 1</title>

<title>W3Schools has a collection of award winning, well organized, and easy to understand HTML, CSS, JavaScript, XML, and SQL tutorials with lots of working examples and source code. </title>

Heading Elements

The <h1> element is used to describe the main heading of a web page.

Because some web browsers display the <h1> element in a very large font by default, some web developers will use the <h2> element instead of the <h1> element for main headings. This will confuse most search engines and other software that will try to "understand" the structure of the web page.

Use <h1> for main headings, and <h2> and <h3> for lower level headings.

Try to structure your headings after this template:

Main heading

Some initial text

Level 2 heading

This is some text. This is some text. This is some text.

Level 3 heading

This is some text. This is some text. This is some text.

If you don't like the default size for headers, use CSS to change it.

Character Sets

All W3C standards (since 1996) defines an internal character set called Unicode (ISO 10646).

All modern web browsers are using this character set internally. Most documents transmitted over the Internet do not use the Unicode character set.

Because of this, browsers and servers must have a way to agree about the character set used in the communication between them.

Labeling each document with the proper character set, is important for the quality of your web site.

For your HTML pages, always use the following meta element inside the <head> element:

<meta charset="x">

Replace x with the character set you would like to use, like ISO-8859-1, UTF-8, or UTF-16.

Date Formats

Don't use dates like "04-03-02".

The date above could mean the 2nd of March, 2004. It could also mean the 4th of March, 2002. Or even the 3rd of April, 2002.

The International Standard Organization (ISO) has defined an international format for dates as "yyyy-mm-dd", where yyyy is the year, mm is the month, and dd is the day.

When you use this ISO format, you can expect most visitors to understand your dates.


Color Picker