This article explores the benefits of web standards for developers including valid, sematic and accessible markup, as well as who benefits most from these practices.
1. The Web Standards
"Web standards are intended to be a common base... a foundation for the world wide web so that browsers and other software understand the same basic vocabulary".
The W3C (World Wide Web Consortium) and other standards bodies have established technologies for creating and interpreting web-based content. The actual standards are:
1.1. Structural Languages
1.2. Presentation Languages
1.3. Object Models
1.4. Scripting Languages
1.5. Additional Presentation Languages (Markup)
2. What are Web Standards about?
These 'Web Standards' are designed to:
- deliver the greatest benefits to the greatest number of web users
- ensure the long-term viability of any web document
- simplify code and lower the cost of production
- deliver sites that are accessible to more people and more types of Internet devices
- continue to function correctly as browsers evolve, and as new devices come to market
For web designers and developers, Web Standards are about using standards (Structural, presentational, Object and Scripting languages) and best practices (valid, semantic and accessible code) to benefit your users, your clients and yourself.
3. A mindset change
Traditional website development is an extension of the printed media - designed to make sites look pixel-perfect in the 5-6 main browsers. Common characteristics include:
- Table-based layouts
- Presentation within the content (font tags)
- Invalid code
- Inaccessible code
- Semantically incorrect code
3.2. "Web Standards" website
Web Standards are about accepting the web as a broad communication tool that can be accessed by a wide variety of users and a variety of devices. Common characteristics include:
- Semantically correct markup
- Valid code
- Accessible code (for humans and devices)
- Cascading Style Sheets (CSS) to separate content from presentation
4. Semantically correct markup
Semantically correct markup uses html elements for their given purpose. Well structured HTML has semantic meaning for a wide range of user agents (browsers without style sheets, text browsers, PDAs, search engines etc.)
You should use standard HTML elements for your markup and avoid styling HTML elements to look like other HTML elements. In simple terms, this means:
- for headings, use heading elements starting with H1
- for paragraphs of text, use a paragraph element
- for lists, use a list elements
5. What is valid code?
Validation is a process of checking your documents against a formal standard, like those published by the W3C. A document that has been checked and passed is considered valid.
5.1. Why use valid code?
- Valid code will render faster than code with errors
- Valid code will render better than invalid code
- Browsers are becoming more standards compliant, and it is becoming increasingly necessary to write valid and standards compliant HTML
5.2. How do you check if your code is valid
- W3C Markup Validation Service
- W3C CSS Validation Service
- WDG HTML Validator
- Many software products now have inbuilt validation tools
5.3. How do you make your code valid?
- Start with the right doctype
- Be aware of doctype modes (standards compliant, quirks mode etc)
- Use a character set
- Close HTML elements
- Use alt tags for images
- Avoid HTML hacks
- Use HTML validators regularly
- Fix any bugs you find before you go live
- Make validation part of your normal work process
6. Why use accessible code?
- Allows your site to be accessible to a larger audience (vision impaired, motor skill impaired, cognitive impaired)
- Allows your site to be accessed by wider range of devices (hand helds, screen readers, text browsers, search engines)
- Is a requirement for Federal and State Government sites
6.1. How do you make your code accessible?
- Provide text equivalents for non-text elements
- Use accessible data tables (identify row and column headers)
- Use accessible forms (label for, id, fieldset, legend)
- Use markup rather than images to convey information.
- Provide visible skip menus
- Provide access keys
- Use style sheets with relative units to control layout and presentation
- Make sure documents can be read without style sheets
- Provide metadata to add semantic information
7. Why use CSS to separate content from presentation?
The aim for web developers is to remove all presentation from the html code, leaving it clean and semantically correct.
- More accessible to a wider variety of devices
- Easier to make site-wide changes - one css file rather than all pages
- Smaller files/ faster download - less code on the page
- Less code on the page - easier to code
- Allows users to customise to their own needs - style switchers
- More control over code - can deliver code in preferred order for screen readers
8. A CSS based site in action
One of the powerful aspects of CSS is that content can be re-purposed to suit your needs - without changing a line of html code.
9. How do your VISITORS benefit from Web Standards?
- Files will download faster (less code, no overall tables, valid code)
- Content is accessible to wider range of users (normal users, blind users, vision impaired users, dislexic users, motor skill impaired users etc)
- Content is accessible to wider range of devices (screen readers, browsers, text based browsers, hand helds, search robots, printers, fridges etc)
- Allows users to customize site appearance (style switchers)
- Provides print friendly versions for all pages
10. How do your CLIENTS benefit from Web Standards?
- Easier to maintain (less code, modular code)
- Cheaper hosting costs (less code)
- Better search engine ranking
- Content can be restyled easily without changing code
- Provides users with customization
- Provides print versions without replicating content
- Improves accessibility (essential for Government clients)
11. How do YOU benefit from Web Standards?
- Easier to code (modular code)
- Easier to maintain (less code, modular code)
- Less device dependent coding (stable across wider variety of devices)
- Provides a competitive edge as more of the world moves to using Web Standards.
12. What are the downsides
- Steep learning curve
- Browser compatibility issues
- Some layouts can be achieved much more easily using tables than CSS
13. How do you achieve Web Standards?
Web Standards are not a black and white issue. All developers should be aiming to gradually move towards Web Standards-based sites.
The move from traditional to Web Standards based development takes time and practice. Rather than jump in and quickly becoming frustrated, set achievable goals and gradually move towards Web Standards. For example:
13.1. Basic changes
- Add a correct doctype to all pages
- Add alt text to all images
- Add meaningful page titles
13.2. Intermediate changes
- valid code
- semantically correct code
- replacing inline font tags and inline colour with CSS
- accessible forms, data tables and skip menus
13.3. Advanced changes
- Basic positioning with CSS (padding, margins etc) while using overall table for layout
- full positioning with CSS - no tables for layout
13.4. Practice CSS layouts
- read CSS tutorials and books to get an understanding of practical CSS
- set aside time to learn CSS positioning without external pressure
- practice a variety of CSS layouts until you are confident
Web Standards deliver:
- faster file download
- accessible code to wider range of users and devices
- user customization
- easy implementation of print friendly versions
- cheaper hosting costs
- better search engine ranking
- faster and more efficient site maintenace
- a competitive edge over competitors
Web Standards benefit your users, your clients and yourself.
15. Web Standards resources
15.1. Web Standards
15.2. Semantic code