Web Design Standards

Web standards are a way of defining an HTML based page in a uniform way, so that the contents of the document will be rendered correctly. There are a number of different standards certified by the W3C. Having a web site that conforms to the latest web design standards ensures that it will be able to be viewed by everyone, regardless of how they access your site, both now and in the future.

On another note, designing web sites that conform to web standards also tend to rank higher in search engines. When a site is designed properly, it makes it much easier for search engines to determine where your important content is, without all the excess information that can often be found in the site's source. This is especially important for sites with a large amount of content, creating a site which is semantically valid makes this process easy. This web directory is an example of using solid code in order to manage a large amount of information.

Difference between the web design standards

The latest HTML standard before XHTML came about was HTML 4.01. Here are some differences between the HTML & XHTML standards.

  • Elements much be properly nested without overlapping. In HTML you could write (<b><p>XXX</b></p>), in XHTML all elements must be opened / closed in the proper order. (e.g. <p><b>XXX</b></p>).
  • All elements must be closed with no exceptions. You cannot have a lone <p> or <br> any longer, every time a tag is opened, it must be properly closed (see above).
  • All attribute values within a tag must be enclosed by quotes. (e.g. <a border=1> is no longer valid, it must be <a border="1px">).
  • Implicitly empty tags such as <br> must be closed. This is a simple fix, use <br /> instead of just <br>; this tell the parser that the tags ends there, rather than just being a start of a tag.

Now that the differences between HTML and XHTML have been defined, we'll take a closer look at the differences between XHTML Strict & XHTML Transitional web design standards.

Web Design Standards: Strict vs Transitional

The easiest way to differentiate between these two web design standards is that strict does not allow anything do to with how the web page looks, and instead focuses on the content inside the page.

If you've never designed in strict before, the easiest way to get started is to create you document with all the elements you know you'll need with JUST the content. Name all your tags with proper classes & ids where necessary, so that without CSS you basically have a blank page with text. Then all of the design work will be done in your stylesheet. Although this seems difficult at first, once you understand the reasoning behind doing this it will make your design make easier to manage.

Elements & Attributes not allowed in Strict

  • font
  • center
  • iframe
  • u
  • strike
  • align
  • background
  • bgcolor
  • target
  • width
  • height
  • border
  • border

We have also created a number of css templates for you to get started.