Web Coding Standards

The template HTML validates using XHTML 1.0 transitional. For more information about XHTML, see:

New York Public Library Online Style Guide XHTML benefits
W3C recommendation

The XHTML and CSS coding included with the Web template pages follows standards developed by the W3C and University policies such as Publishing Information on the World Wide Web and Accessibility of Information Technology.

Units should code their pages based on these standards, policies, and best practices.

The template CSS shows 12 errors when validated. These errors are caused by workarounds in the style sheets that compensate for browser differences.

XHTML tools

The conversion from HTML to XHTML can be made easier by using tools available in many software packages. Examples:

Dreamweaver—a free XHTML conversion extension can be downloaded
BBEdit
TextMate

Semantic markup

What is it? Here's a succinct definition found on an old BBC site:

"Semantic markup is HTML that describes the content, rather than the manner, in which the content is presented. It allows the meaning to be delivered to users regardless of the browser they use, so that content can be provided to the widest possible audience." BBC Standards and Guidelines

The Web templates strive to be as semantically accurate as possible. Writing semantic code includes everything from using heading tags properly to naming CSS styles based on content description rather than how the style is positioning or coloring content. For example, instead of naming a style "red_box," use a name that describes what that red box is used for, like "callout."

To make sure you continue to use good semantic markup, consider a tool like the Web Standards Advisor (this is not an endorsement). Another handy (free) tool is W3C's Semantic Data Extractor. It allows you to view an outline of your page based on your heading tags. (You'll need to comment out the "mainnav" and "maincontent" anchor links for the extractor to work properly.) To read more about semantic markup, check out Semantics in HTML 5 from A List Apart.

Page titles

Page titles are used for naming the browser window and also display as the link to your pages in search results. Page titles should be clear and consistent and include reference to the specific material on the page. The templates use the following convention (with appropriate modifications based on unit structure): "Page Name : Unit Name : University of Minnesota." The period is included to indicate to a screen reader the end of a phrase.

Accessibility note: The page title is the first thing a screen reader user hears when they come to your site. Make sure your pages have unique titles.

Metadata

Metadata is used to describe the information on your site. It should capture the who, what, when, where, why, and how of your data to enable search engines and preserve the usefulness of your data over time. Proper use of metadata should also facilitate any future move into UMContent (the University's supported content management system).

Below are the current metadata attributes included in the template coding. Information about standardized metadata is available from the Dublin Core Metadata Initiative, with specific metadata descriptions available at Dublin Core Metadata Terms.

"author"—designates the author, typically the University unit publishing the site.
"content-type"—indicates the type of data sent to the browser. It is used by browsers to know what to do with the data that they receive.
"description"—describes the contents of the page. Sometimes used as a summary for the page in search engines.
"keywords"—keywords in the page or related to the page content. Occasionally used by search engines to rank pages in search results.

Note: Developers should not use the same "description" and "keywords" on all pages of a site. These are unique identifiers that help search engines to properly catalog individual pages.

Page body

The HTML examples of the templates use various coding techniques to achieve different layouts. To aid in accessibility, University Web designers are encouraged to use heading tags appropriately [see Accessibility].

Many best practices for Web sites can be attributed to accessibility. Web Accessibility Standards on the University's AIT Web site is a good place to begin. Other best practices:

Label links clearly. For example, a link that goes to a page titled "Resources" should use the word Resources as all or part of the link name instead of something like "click here for more information."
Label downloads appropriately. Specify the type of file and the file size. For example: Download the Driven to Discover Brand Guidelines (960 K PDF)

Template coding

For coding standards used throughout the Web templates, see the links to the coding comments at Web template sections and coding comments.