UW-Whitewater XHTML and CSS Standards

All new web site development at UW-Whitewater must be coded to the following standards. This way all new sites at their conception will be compliant and have a similar and coding style. So that Web Support Team or a future administrator can easily follow and change the layout, design and structure of the site if they need too.

XHTML

All html coding must be at least XHTML 1.0 transitional compliant. Here are some quick guide lines and tips.

  1. Close all of your tags: img, br and input and other tags that do not have open and close tags associated with them must use the following syntax: <tag />.
  2. Names and attributes: all text inside of tags must be lowercase and have the following syntax:  <tag attribute=”value”> </tag> or <tag attribute=”value” />
  3. Including CSS Files: the proper way to include your css files is to import them within a style tag. The reason for this is that many older browsers can not read the import style and therefore don't falsely get your css that they were not meant to get in the first place. Proper syntax is like this:


  4. Including IE specific CSS: With the release of IE7 in November of 2006 it has become necessary to put all IE CSS hacks and directives in their own file. However using a standard CSS include or link won’t work as other browsers will see your IE only file, so nicely Microsoft has made a technique for singling out IE browsers. Below is the proper way to include this type of file:



  5. Clean Semantic Code: There are a number of meanings to having clean code. This is our official stance on clean coding practices.
    1. Unless it is absolutely necessary you should never put style information into the html code this is what CSS files are for.
    2. Deprecated tags should not be used this includes the font and center tags, also the attributes align and border are also off limits as CSS is the preferred approach.
    3. Tables: There is only one proper use of a table and that is for columns of data, layout should be done completely in div’s and span’s, when appropriately utilizing a table make sure you follow accessibility guidelines and provide summaries and TH tags to define what the table contains.
    4. While this pertains mostly to CSS it has grounds here as well, if you plan on reusing a CSS rule multiple times on a page you must use the class attribute, if you use the id attribute you pages will not validate because id's are required to be unique in XHTML.

Following these simple rules will not only help your pages validate, but also make it easier for you to change or update your layout in the future. 

Cascading Style Sheets (CSS)

With the advent of XHTML and CSS2 the ability of the web designer to effectively style web pages with out the need of tables arrived. All new official pages and sites built for the University must be made with these guidelines in mind.  The following is a list of the consideration you need to code CSS styles.

  1. All CSS files should validate against the W3C validation service which can be found here: http://jigsaw.w3.org/css-validator/.
  2. All CSS markup should be included in separate files in order to separate styling from the structure and the content of the page.
    1. This includes in-line style definitions which should be avoided, because they can lead to inaccuracies and cause debugging problems later on in the development cycle.
  3. While there is no official syntax for laying out your CSS files, good practice would be to logically display all general style definitions at the top of the page and work top to bottom down the page with your more layout specific definitions.
    1. Additionally documentation for style sheets is required. The amount of definition required should at a minimum separate out the different sections of your page for easy interpretation and modification later.
  4. All official web pages must appear to be nearly identical in all the tier 1 supported browsers; the official list can be found here.
  5. Naming conventions for user created styles should be done in either of these forms:  nameOfDefinition or name_of_definition but should remain consistent throughout your documents.
    1. Secondly naming conventions should reflect what the style is being applied to, for example: If you are defining the style for the footer of the page a name like “pageFooter” would be appropriate, but something like “div32” gives no association to what it is styling and should be avoided.
  6. In regards to so called “IE hacks” with Microsoft releasing IE 7 in November of 2006 all previous attempts to “hack IE” into do what you want will be rendered useless. The proper way to single out the IE browser is too create a IE only css file that contains bundles both directives for IE 7 and “hacks” for IE 5 and 6. This should be laid out with IE 7 on the top and the other “hacks” below so that it inherits your directives correctly.
    1. To insert this special file into your page please refer to the XHTML guidelines above.

Being that using CSS as a layout tool is more of an art than a science, if you have issues making your pages cross browser compliant the ICIT Web Support Team is available to help answer questions or problems you might be having.

508 Accessibility

Accessibility is required by law for all web pages, new and old. UW-Whitewater has an excellent tutorial and guidelines section located at: http://www.uww.edu/icit/services/web/accessibility/ that will help guide you through making your site compliant with these government guidelines.