Introduction: Why Standards?
Web standards are essentially Web technologies, recommended by the World Wide Web Consortium (W3C) and other groups and standards bodies, for creating and interpreting Web-based content. Standards are designed to deliver the greatest benefit to the greatest number of Web users and user agents, while ensuring the long-term visability of any document published on the Web.
The advantages of standards-based Web design are numerous:
- greater accessibility
- less bandwidth
- smaller files, faster downloads
- increased productivity
- reduced maintenance
- forward compatibility
- precise control over presentation
- separation of style from structure
- graceful degradation
- facilitated transition to XML
Markup (Structural) Languages: The Road to XML
Marking up text is a methodology for encoding data with information about itself, based on a standard to define what a valid markup is, and a standard to define what the markup means. Think about HTML: it defines a set of tags and the rules for displaying text.
Historical background
- 1960s. IBM creates GML and then SGML (Standardized Generalized Markup Language).
- 1986. SGML becomes an ISO standard.
- 1989. Tim Berners-Lee creates HTML.
- 1998. XML 1.0 specification becomes a standard.
- 2000. W3C introduces XHTML 1.0—which is HTML rewritten using XML syntax.
DOCTYPE
There are various structural languages out there on the Web. Use the correct DOCTYPE (short for "document type declaration") to tell the validator which version of (X)HTML you're using.
- HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> - HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"> - XHTML Transitional
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> - XHTML Strict
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> - XML
<?xml version="1.0"?>
<!DOCTYPE greeting SYSTEM "hello.dtd">
<greeting>Hello, world!</greeting>
Get a sample XML document.
CSS (Cascading Style Sheets)
As a tool for academia to facilitate communication among scientists, engineers, and others, the original purpose for HTML was to provide a means of presenting textual information through a computer monitor over a network. It was never intended to be a means of giving style to a Web page.
Today, the World Wide Web is vastly different from the original concept. Presentation is a very important part of document design. One of the movements of HTML 4.01—and Web design in general—is the separation of presentation (layout) and content (textual information). Style sheets facilitate this separation by enabling you to control the way a page is laid out and viewed in a browser. Another movement is towards open standards of code, which enable Web pages to be read on various platforms and devices. View CSS2 specification.
Modern Browsers
Web standards are best supported by "modern" browsers, that is, standards-compliant browsers, such as Firefox 1.5 (download Firefox) and Opera 9.0 (download Opera).
Liquid Design
Liquid design means that the Web page adapts itself to the available space, the same way water takes the shape of the glass it is in. Liquid design is used in order to make Web pages more accessible and user-friendly without the use of tables.
Media Types
The CSS2 standard enables you to apply different style sheets, depending on the agent or device that renders your document. For example, you can have one style sheet defining screen styles, and another for print styles. There are seven different media types. Get the W3C specification on media types.
Get a table charting relationships between media types and media groups.
Get a copy of the screen, print, and aural style sheets for Lib 212.
Validators
Run your pages through W3C validators to make sure that your document is well-formed and compliant.
W3C (X)HTML validator. http://validator.w3.org/
W3C CSS validator. http://jigsaw.w3.org/css-validator/
Accessibility Checkers
Run your pages through accessibility checkers to ensure the code complies with the recommendations of W3C's Web Access Initiative (http://www.w3.org/WAI).
- Bobby. http://bobby.watchfire.com/bobby/html/en/index.jsp
- Cynthia Says Portal. http://www.contentquality.com/Default.asp
- WAVE Web Aceessibility Tool. http://www.wave.webaim.org/index.jsp
Checklist for Good Coding Practices
From Max Design
- Use correct DOCTYPE.
- Use CSS-driven relative font size for general content - which allows users to control the size of the page content.
- Have alternative text for all images and decorative/positioning graphics include null "ALT" attributes - which is important for text-based or screen-reading browsers.
- Provide additional navigation aids.
- Have meaningful page titles.
- Identify the content language.
- Have detailed and descriptive metadata.
- Provide hidden links in the top of each page to allow users with text-based or screen-reading browsers to jump to the preferred content on the page.
- Where possible, present main content first within the source (regardless of how the page is displayed) - again for text-based and screen-reading browsers.
Additional Links
CSS
- http://www.meyerweb.com/eric/css/edge/
- http://www.csszengarden.com/
- http://www.mako4css.com/index.htm
- http://www.westciv.com/index.html
Liquid design
Valid DOCTYPES
Web Standards