How To Use Web Standards To Build Sites for Any Device

When Tim Berners-Lee first created ENQUIRE (the precursor to the web), he had a vision of an information super highway freely traveled by all. While still in its infancy, the World Wide Web promised an unfettered access to information, community and, yes, business opportunities. However, as the web was slowly taking shape, that freedom appeared to be threatened from within, and there was a good chance that the internet we enjoy today might collapse under its own potential.

W3C and the Web Standards Project

Not long after the web was introduced to the world, Netscape and Microsoft (two of the prime movers in software development) began a steadily escalating browser war. In an effort to outdo the other, each firm was introducing new elements to their underlying software and designing new ways to fetch and process online content. The result was two competing browsers that were growing less and less compatible. This had the potential to turn the dream of an unfettered internet into a convoluted nightmare, effectively denying users access to the full range of online content while driving up the costs of website design and development.

In response to the ongoing browser wars, and the potential fracturing of the internet project, Berners-Lee formed the World Wide Web Consortium (W3C). Its job was to craft a set of universally accepted protocols and guidelines for the internet. These would become the rule book which would guide the work of programmers and software developers in the future, hopefully ensuring the continued growth and accessibility of the internet.

In 1998, an independent group of web designers and developers formed the Web Standards Project (WaSP). Its mission was to refine and promote the W3C’s list of best practices and end the browser wars once and for all. WaSP was successful, and the vision of a freely traveled information highway was largely realized. Today, WaSP continues to work toward keeping the internet free, open, and accessible to all.

The Importance of Web Standards

It would be difficult to overestimate the importance of the Web Standards Project and the guidelines that they promote. For the internet to realize its full potential, it must be guided by some common principles. These “web standards” provide a set of fundamental, and it is hoped universal, guidelines by which content for the internet is created and disseminated. The need for these web standards is clear, and they address some key aspects of programming and web design.

• Efficient Code — web standards brings efficient coding to web design. If all programming was limited to HTML, the result would be bloated and ungainly files that require longer than necessary download times. This not only affects the user’s online experience, but it can actually increase the cost of accessing online content for those users who pay for downloads by the megabyte.
• Coding Compatibility — whether it’s a web page, an add-on, or a software application, almost every piece of programming passes through the hands of many different designers. Having an accepted standard of coding ensures that all programmers are speaking the same “language,” and that code remains streamlined and efficient regardless of the author.
• Simplified Maintenance — this further supports the value of standardized coding practices. Lean and efficient code is easier, and less expensive, to update and maintain. With style and layout information specified in one place (ie CSS elements) updates do not need to be applied to every page of an active site.
• Device Compatibility — the adherence to web standards ensures that online content can be quickly and efficiently reformatted for different browsers and devices. This is particularly important now that mobile devices have become so popular with online users.
• Search Engine Compatibility — all web developers want their online content to be easily searchable by Google and other search engines. In order for any search engine to rank and return relevant content in a user search it must scan that content with a web crawler. If that web crawler cannot interpret the content, rankings will naturally suffer. By following the approved standards set down by the W3C, developers can more easily ensure that the content they produce can be quickly and accurately scanned by the search engine bots.
• Accessibility — finally, web standards also addresses the issue of accessibility for the visually impaired. Users with visual impairments often use screen readers to access content on the web. These readers literally read the web page aloud. Adherence to the accepted web standards governing semantic structure ensures that can easily decipher online content, keeping the web open and accessible to the visually impaired. This is one of the few aspects of the web standards project that has been codified into law.

The W3C Standards

While WaSP addresses a diverse array of issues, the key guidelines originally set forth by the W3C have become the universally accepted core of the web standards rule book. These form the foundation on which the continued growth and accessibility of the internet depend, and they can be broken down into a few basic topics.

• Markup Languages are systems for adding information to a document that is separate from the text itself. The web standards guidelines govern the use of HTML and its subsequent variations (including HTML5 and XHTML). As a markup language, the HTML variants are used to modify different types of content in an online document. The elements that make up these languages specify how each bit of content should be rendered in a web browser (ie headings, paragraphs, bullet lists, etc). While the basic markup elements define the actual content, the use of additional attributes serve to provide more specific information about that content.
• HTML (Hypertext Markup Language) is the oldest web coding language. As such, it is the most common markup language used by web developers, and still forms a significant part of all online content. The use of HTML is governed by a set of syntax rules which, though fairly efficient, are also fairly lax. Elements are not case sensitive, closing tags are not strictly regulated, and shortcuts can be used for certain attributes. While basic HTML was the standard for many years, it has undergone several revisions, including HTML 2.0 and HTML 3.0. Its latest iteration is HTML5.
• HTML5 is the latest iteration of the basic HTML markup language. It introduces some new rules and features, while discarding some of the elements from previous versions. HTML5 introduced new semantic elements and control attributes as well as several Application Programming Interfaces (API) that support drag and drop features, geolocation, and local storage that eliminates the use of cookies.
• XHTML stands for eXtensible HyperText Markup Language. It combines the structural attributes of HTML with the features of an XML application. XHTML is typically used when online content needs to be reprocessed for compatibility with mobile devices or outlying browser designs. The addition of XML elements makes it quicker and easier for content to be reprocessed than standard HTML. XHTML also brings stricter semantic rules to the language. Elements and attributes in XHTML are case sensitive, all elements must be closed, and attribute values must be enclosed by quotes.
• CSS (Cascading Style Sheets) provide the mechanism by which changes in the appearance or position of online content can be assigned to a document’s HTML or XHTML elements. The use of CSS defines the overall appearance of a website, and allows it to be remodeled quickly and efficiently. In short, the use of CSS allows web developers to more artfully control the formatting and layout of a document. This allows web developers to easily change backgrounds, alter fonts and text sizes, and reposition content on a web page. While much of this is possible with basic HTML, the use of CSS allows programmers and web developers to produce content that is underpinned by a more streamlined and efficient code.
• JavaScript is an object-oriented scripting language. It is primarily used to add behavior to a web page. It can be used to validate data on a form, provide drag-and-drop functions, enable button functions, and animate page elements. JavaScript is instrumental in making web pages more interactive, allowing them to more accurately respond to user events such as mouse clicks, page navigation, and inputted searches.

These are the basic fundamentals of programming and web design as laid out by the W3C and the Web Standards Project. More than simply a set of ‘best practices’, adherence to their use ensures the continued development and expansion of the World Wide Web.

Online Tutorials

The Web Standards Project, and the guidelines that the W3C has codified, provide a rich field for study. There are many online tutorials that will serve as an introduction to web standards, and their importance to modern software development and web design.

• Why We Need Web Standards: this brief video, prepared by Jeffrey Zeldman (one of the co-founders of the Web Standards Project) provides a short introduction to the concept of web standards and why they are essential to a growing and open internet. While Zeldman does not go into any details on the specifics of web standards, this video proves an informative starting point for those interested in the subject.
• Web Standards and Development: prepared by the University of Washington, this tutorial focuses on the technical applications of web standards for programming and web design. The tutorial examines the proper uses of HTML, XHTML, XML, and CSS, with exercises and examples illustrating best practices as set down by the Web Standard Project.
• Accessible HTML/XHTML Forms: this tutorial comes directly from the Web Standards Project. It examines the use of HTML and XHTML in the design and development of web content that is compatible with screen readers and braille computers. With web accessibility now being codified into law in many countries, this is an essential read for all web developers.
• Common Ideas Between HTML and XHTML: again, this comes directly from the Web Standards Project. The tutorial discusses the evolution of HTML and the differences between basic HTML and XHTML.
• How to Achieve Web Standards and Quality on Your Website: this guide was prepared by the W3C, and it addresses all of the basic concerns of web standards and how they apply to the design of a quality website. The article covers HTML, XHTML, and CSS. Discussing best practices and tools that can be used to validate the content of a website to ensure that it is meeting the accepted standards of the Web Standards Project.

Books

While online tutorials can provide a general introduction to web standards, those wishing to become more fully versed in the accepted protocols of web design and software development will want to explore the subject further. The following books are invaluable resources for both web developers and the general public.

• Designing with Web Standards (2009) by Zeldman and Marcotte: Jeffrey Zeldman was a co-founder of the Web Standards Project, and here he delivers one of the definitive works on web standards and their application to web design. Written in an engaging and easy to understand style, Zeldman and Marcotte look at the importance of web standards, the application of HTML5 and CSS3 in web design, and authoring techniques for standards compliant web sites that load faster and provide a more fully realized user experience.
• CSS Mastery: Advanced Web Standards Solutions (2009) by Collinson et al: primarily aimed at intermediate and advanced web designers, this book looks at the role of cascading style sheets in modern web design and how to apply best practices to meet web standards compliance. The book contains numerous examples of how to use CSS3 effectively, along with guides on how to identify and fix many CSS related design problems.
• Web Accessibility: Web Standards and Regulatory Compliance (2006) by Rutter et al: recommended by the Web Standards Project, this book examines the legal obligations of web developers to ensure that their content is fully accessible to users with visual impairments. The authors look at both the moral and legal aspects of compliance, and provide coding examples to illustrate best practices.
• Web Design in a Nutshell (2006) by Jennifer Niederst: this desktop reference provides a handy guide for programmers and software developers. Niederst discusses best practices for web design, and how they have changed from the earliest days of the internet. Topics range from basic HTML structure to incorporating CSS and JavaScript for enhanced presentation and behavior.
• JavaScript: Visual QuickStart Guide (2014) by Smith and Negrino: this book looks at the role of JavaScript in web design for standards compliant browsers. Utilizing screenshots and detailed examples the authors provide a simple guide for beginner and intermediate scripters on incorporating JavaScript into web design project that meet the standards of the W3C.

Summary

A free and open internet would not be possible without the adoption of a well defined set of protocols and guidelines for web design and development. More than simply a set of best practices, these universally accepted web standards help web designers to create fast and effective user-friendly web content, while ensuring that that content remains easily searchable by search engines and web surfers. W3C’s web standards are the foundation of good web design, and through their continued refinement will ensure that the internet remains free, open, and accessible to all.

Further Reading and Resources

We have more guides, tutorials, and infographics related to coding for the web:

• An Introduction to JavaScript: learn all about this client-side language that makes webpages more interactive.
• HTML for Beginners — Ultimate Guide: if you want to become a web developer, this is the place to start.
• CSS — Intro, Guides, and Resources: learn all about webpage layout.

Web Design Trends You’ll Never Forget

Just because we have web standards doesn’t mean websites always look are act in an appealing way. In our infographic Web Design Trends You’ll Never Forget we run through some old designs that people thought were great.

Web Design Trends You’ll Never Forget