Web standards, simply put, are the basic rules that all Web designers, coders, and programmers should understand and follow when designing and building webpages. While these standards mostly deal with coding and other behind-the-scenes issues, they can also greatly affect a sites design and influence how visitors access the content on different sites. Above all, standards help ensure that everyone (including nonhuman Web robots and spiders) can access every webpage on the Internetregardless of their browser, device, or operating system. In this article, youll learn where Web standards came from, why you should use them, and where you can go to find out more about them.
The birth of Web standards
In the early days of the Internet (back in 1989), before there were things like search engines, e-commerce, blogs, and social networking, the World Wide Web was a bit of a free for all where each website followed the coding whims of the person who made it. For example, some HTML coders used all caps for their tags to help easily see the difference between tags and content, while other coders used camelCase for their tags, and still others used all lowercase letters. In addition, some websites were composed entirely of graphic images placed snugly inside cells of a table and others were made using a combination of graphics, text, and tables.
On one hand, this do-it-yourself coding environment allowed for unlimited freedom and creativity. On the other hand, having no rules to follow frequently resulted in an anything goes policy, which often made Internet users frustrated and confused about how they should navigate through a site to find the information they were looking for. To be fair, the Internet did start as more of an information sharing space rather than a place to sell and buy stuff, chat with friends, and express yourself. However, as more people and companies began using the Web to market and sell their products and services, and more kinds of devices (such as handhelds and screen readers for the visually impaired) were being used to access the Web, it became clear that certain coding rules and standards would need to be established to help control all the chaos.
So in 1994, thats what Tim Berners-Lee did. Berners-Lee, if you didnt know, is the University of Oxford-educated mastermind who created the Internet as a global information sharing initiative while working at CERN (the European Organization for Nuclear Research) in 1989. Over the next several years, his specs for HTTP, URIs (Uniform Resource Identifiers), and HTML were refined and improved upon as this new technology spread quickly around the world.
By the early 90s, when many middle-class families owned at least one computer and many businesses had a Web presence, Berners-Lee founded the World Wide Web Consortium (W3C) as an international vendor-neutral group committed to creating Web standards that allowed for device-independent Web access. The W3Cs mission is to lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth of the Web.
The World Wide Web Consortium
Since the W3Cs founding, more than 100 W3C recommendations for Web design and applications, architecture, Semantic Web, XML technology, Web services and browsers, and authoring tools have been published on the W3C website. There have also been standards proposed for accessibility, internationalization, mobile Web, developing economies, and eGovernment. In fact, in 2009 Berners-Lee launched a new organization called the World Wide Web Foundation to help support and coordinate further development of the Web to benefit humanity.
A few of the early, more monumental W3C Web standards included things such as making uniform HTML/XHTML coding rules, recommending the inclusion of a DOCTYPE in the head of the code, and the promotion of using cascading style sheets (CSS) to separate webpage form (presentation) from webpage content.
The W3C homepage
Here are some specific examples of each early Web standard:
Uniform HTML and XHTML Coding: To improve the presentation of webpages on Internet-capable devices, standards to HTML and XHTML now follow stricter coding rules to improve the accessibility of pages across browsers (Internet Explorer [IE], Firefox, Opera, Safari, Chrome, etc.); operating systems (Mac, PC, Linux, Unix); and other devices (screen readers, handhelds, printers, etc.) that access the Internet.
Use of DOCTYPEs: By adding a DOCTYPE tag at the top of the code of all HTML and XHTML pages, the browser can interpret a webpage as an application in the XML programming language and thereby present that data within the Internet-capable device as it was coded. This standard is especially important because XML lets programmers create their own proprietary markup languages through which additional information can be exchanged on the Web.
Other important standards focus on accessibility issues geared toward making all Web content accessible to the widest possible audience across the widest array of devices. According to the W3C, people with disabilities make up roughly 10% of the Internets population. Simple coding changes can often make the biggest impact, such as requiring image tags to include alternate text attributes, link tags to have descriptive title and target attributes, and form elements to use tab order and hot keys to assist with navigation through a site without a mouse or standard keyboard.
Working with Web standards
One of the earliest and most important Web standards recommended by the W3C is the use of CSS instead of the heavy HTML formatting tags that designers, coders, and programmers used before. With the old method, formatting markup had to be wrapped around every block of text, every graphic, and each object or element displayed on the page. (Imagine managing a 30-page website and having to change all the fonts from Arial to Verdana!) Back then, it would have meant opening and editing every single page, line by line. By contrast, that same change today would only mean editing a few lines in your external CSS file.
Easily link your webpages to one or more external CSS files
With CSS, you can quickly create site-wide styles for the tags used to mark up your content, define custom styles to selectively style elements, and create styles that will automatically be applied to an elements ID. Not only does CSS separate your presentation markup from your content, it also centralizes all the style information into one discrete location (an external CSS file that is linked in the to all the pages in your site) and drastically reduces the file size of your webpages, thereby making your pages load faster in a browser.
Thankfully, nearly all the popular browsers and Web editing software manufacturers are on board with Web standards, each working hard (and competitively) to help provide Web designers, coders, programmers, and Internet users with the best experience they can.
In fact, for several years now, the top HTML and WYSIWYG code editorsfor example, Dreamweaver and ExpressionWebhave supported Web standards by automatically writing standards-compliant code. Whats more, the newest and most popular browsers (with the exception of IE) now render properly coded webpages near identically.
Dreamweaver and ExpressionsWeb write standards-compliant code
Unfortunately, this does not mean that if you use a good HTML or WYSIWYG software program that youll be immune from coding errors. The sad truth is that youll still have to deal with things like display and compatibility problems with CSS and various scripts, IE-only features, and browser-specific coding issues. The good news is youre not the only one out there doing it. In all likelihood, someone on the Internet has already figured out the solution to your very problem and is willing to share it. For CSS-related issues, check out the Adobe CSS Advisor (http://bit.ly/6MsXLN).
Adobe CSS Advisor provides solutions to common CSS and browser-compatibility issues
Besides presentation consistency and device independence, another really smart reason to build standards-compliant websites is better search engine optimization (SEO), which can both help improve search engine results page rankings and make the content within the site easier to find for Web visitors. Standards-compliant sites provide a more consistent experience to the widest audience of users across the widest variety of devices and platforms.
Web standards for Flash, HTML5, and CSS3
As cool and interactive as they can be, Flash movies are single objects that are embedded into a webpage, which means that none of the content contained within them can be bookmarked, selected, copied, or saved the way you can with content in a regular webpage. They also cant contain any meta tag information like keywords or descriptionswhich means that search engines cant index any of the content to help visitors find that content.
HTML5which is the new and smarter version of HTMLis now starting to be supported by the newest and most popular browsers. HTML5 introduces a bunch of new semantic elements like
As for CSS3, according to the good folks over at www.sitepoint.com, all the major non-IE browsers now support many useful CSS3 properties, as long as (for now) its used with proprietary code (e.g., -moz or -webkit). One amazing thing you can do right now with CSS3 is set multiple backgrounds for a single div element.
Whats more, new CSS3 properties are being introduced with each browser update so that eventually CSS3 can be used without proprietary code. As for IE browsers (for now), IE8 renders CSS2 predictably, and there are whispers that IE9 might get in the game. For details and information about working with CSS3, visit www.css3.com.
Where can I learn more?
There are dozens of sites on the Web to help designers, coders, and developers learn the rules of the Internet road. Each is dedicated in some form to helping create standards for structural markup, presentation, scripting, and programming languages, as well as object models and other markup languages, such as SVG. There are also plenty of books and free online tutorials such as Designing with Web Standards by Jeffrey Zeldman.
Another useful resource is the Max Designs Web standards checklist (www.maxdesign.com.au/articles/checklist), which can guide you toward using a valid and accessible markup style with CSS to create websites that are accessible, usable, and search engine friendly.
If youd like to learn more about Web and accessibility standards, check out the following sites:
Web standards and accessibility resources
World Wide Web Consortium (W3C) www.w3.org
World Wide Web Foundation www.webfoundation.org
Web Standards Project www.webstandards.org
Web Standards Group http://webstandardsgroup.org
Web Accessibility Initiative www.w3.org/WAI
Equality & Human Rights Commission www.equalityhumanrights.com
Section 508 www.section508.gov
Web Accessibility in Mind http://webaim.org
Tutorials, references, statistics, and forums
The jQuery Project www.jquery.com
HTML5 Demos www.html5demos.com
HTML5 Reset www.html5reset.org
CSS-Tricks (HTML5 Innershiv) http://css-tricks.com/html5-innershiv
Introduction to CSS3 www.w3.org/TR/css3-roadmap
Web Safe Font Tester www.fonttester.com/web_safe_fonts.html
Web Style Guide www.webstyleguide.com/wsg3/index.html
960 Grid System http://960.gs
HTML/XHTML code validators
W3C Markup Validator http://validator.w3.org
W3C Link Checker http://validator.w3.org/checklink
W3C Log Validator www.w3c.org/QA/Tools?LogValidator
WDG HTML Validator www.htmlhelp.com/tools/validator
CSE HTML Validator www.htmlvalidator.com
CSS code validators
W3C CSS Validator http://jigsaw.w3.org/css-validator
WDG CSS Check www.htmlhelp.com/tools/csscheck
Web Accessibility Evaluation (WAVE) Tool www.wave.webaim.org/index.jsp
SortSite Testing Tool www.powermapper.com/products/sortsite
HiSoftware Cynthia Says Portal www.contentquality.com
W3C Code & Accessibility Validators www.w3.org/WAI/ER/tools/complete.html
Browser compatibility verification
Adobe BrowserLab https://browserlab.adobe.com
Spoon Browser Sandbox www.spoon.net/browsers
Web conferences and Web design events
An Event Apart www.aneventapart.com
South By Southwest http://2007.sxsw.com/interactive