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 site’s 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 Internet—regardless of their browser, device, or operating system. In this article, you’ll 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, that’s what Tim Berners-Lee did. Berners-Lee, if you didn’t 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 W3C’s 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 W3C’s 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.
• Use of CSS: Separating content (HTML) from presentation (CSS) and user interaction (JavaScript, jQuery, PHP, and other programming languages) allows designers, coders, and programmers to simplify their code and consolidate their presentation markup in one place.

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 Internet’s 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.

In addition to laying out Web standards, the W3C website is chock full of detailed information about HTML, DHTML, XHTML, XML, CSS, JavaScript, jQuery, Ajax, Ruby on the Rails, ARIA, and more. You’ll even find details on browser compatibility, document formats, Web graphic formats, and CSS, as well as more obscure documentation on developing technologies like HTML5 and CSS3 that have yet to be fully implemented across the Web. Definitely spend some time exploring this site. The more you understand about Web standards, the better you’ll be at designing and building standards-compliant websites.

Working with Web standards
Web standards have really helped make the job of building websites easier. This is especially true when you learn the right way to do things from the start. For example, when building webpages, it’s useful to follow a particular logical workflow. First, you get your content on the page and then you mark it up with proper semantic HTML (semantic means that you use the right tags to match the meaning of your content, e.g., “<h1> for Heading 1s”). After that, you add your CSS to style the content, and lastly, you add any JavaScript and other programming languages as needed to create page interactivity and present dynamic data.

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 element’s 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 editors—for example, Dreamweaver and ExpressionWeb—have supported Web standards by automatically writing standards-compliant code. What’s 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 you’ll be immune from coding errors. The sad truth is that you’ll 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 you’re 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 can’t contain any meta tag information like keywords or descriptions—which means that search engines can’t index any of the content to help visitors find that content.

As a workaround to building entire sites from Flash, some developers have begun shifting to including Flash modules inside of regular sites and using JavaScript, jQuery, and HTML5 to create page interactivity, both of which are easy enough to learn, standards-compliant, and search engine friendly. For an interesting read on Flash Web standards, visit www.webmonkey.com/2010/02/use_web_standards_with_flash.

HTML5—which is the new and smarter version of HTML—is now starting to be supported by the newest and most popular browsers. HTML5 introduces a bunch of new semantic elements like “