What are web standards and
why should I care?

by Brian Rinaldi

The growing ubiquity of web-enabled devices has led to a mainstream proliferation of terminology that was once limited to the confines of technical journals for web developers and designers. Terms like HTML5, JavaScript, and web standards, for instance, have entered into the average technology user's lexicon, and many technology debates previously limited to the geek crowd now regularly enter the national news media discussion.

Nonetheless, the meaning and importance of these terms is rarely explained, which can often lead to misunderstandings. For example, oftentimes the term HTML5 is used to mean the set of technology and tools beyond the updated HTML5 specification, including JavaScript, CSS3, and related frameworks. Other times, it is simply used to refer to the new — and not yet finalized — HTML standard. The goal of this article is to help you make sense of the buzzwords and truly understand why web standards are important and how they are changing the world of web design and development as we know it. Specifically, I discuss some of the history of these terms as well as the current state of HTML5 and CSS3, and I explore how Adobe is contributing to and creating tools for these standards.

What are web standards?

Those who have been in web design and development as long as I have will remember that in the early and mid-1990s Netscape and Microsoft were engaged in the so-called "browser wars." During this time, one browser vendor would implement features that the other browser did not have, which led to websites that did not work properly in both major browsers. For example, you may recall seeing disclaimers indicating which browser was best for viewing a particular site.

The goal of creating web standards, such as the HTML standard, was to eliminate these discrepancies and formalize the de facto standards, enabling you to create sites that worked reasonably well across all browsers. Standards bodies such as the World Wide Web Consortium (W3C) were created as forums to establish agreement across the industry and among vendors. Other standards groups have formed since, most notably the HTML5-focused Web Hypertext Application Technology Working Group (WHATWG). While there is often political maneuvering involved, the goal of each of these standards bodies is to find agreement and thereby formulate standards, often referred to as specifications, across the industry on the technologies that drive the web, including HTML and CSS.

HTML5

The term HTML5 needs some clarification. In the media, it is often used to encompass a whole range of technologies from CSS3 and JavaScript to web video, web audio codecs, mobile development, and sometimes even various frameworks and libraries. In essence, HTML5 has inherited many of the meanings that were attributed to the well-worn catchphrase "Web 2.0." Some groups, like the WHATWG, have seemed to embrace this extension of the term, while others feel it can cause confusion.

At its core, HTML5 is an updated version of the specification for HTML, the core markup language of the web, and the successor to the HTML4 specification that has been in place since 1997. There are actually two versions of the specification, one maintained by the WHATWG and another by the W3C. From an average user perspective, the differences are not very substantive, and while neither specification is actually finalized, many of the features of HTML5 are already supported in recent versions of all browsers thanks to strong momentum and support across the industry.

A simple way to explain the difference between HTML4 and HTML5 is that the former was mostly geared toward the development of websites and the latter is focused on web applications. In addition, several of the changes and additions focus on the semantic meaning of the contents being marked up, such as indicating which sections are navigation or header and which contain the article. On top of about 30 new tags, HTML5 also added attributes to many, if not most, of the existing HTML tags. If you're looking for a detailed list of the differences between HTML4 and HTML5, you should check the W3C working draft.

Some of the most heavily publicized additions include the support for SVG graphics, the new <canvas> tag for displaying interactive graphical content, and the <video> tag for displaying video content, of course. If you've tried any of the impressive, community-created demos at Chrome Experiments, you've probably encountered heavy use of either SVG graphics or the <canvas> tag. On the other hand, if you've watched video in a browser on your iPad, you may have encountered the HTML5 <video> tag.

You can find many great resources if you are interested in learning more about HTML5's capabilities or perhaps leveraging them on an upcoming project. For example, Google sponsors a site called HTML5 Rocks that contains several articles and tutorials. Sites like HTML5 Please and CanIUse try to make sense of the browser support complexity. Adobe Developer Connection offers a growing list of tutorials and articles in the HTML5 and CSS3 Developer Center. And if you're interested in all the gory details of the HTML5 specification, I recommend the HTML5: Edition for Web Authors published by the W3C. While it goes into great detail on most features, it specifically omits those portions primarily relevant to browser vendors.

Adobe has a team dedicated to contributing to the WebKit engine, which is one of the primary browser engines behind browsers such as Chrome and Safari. This means that Adobe — as a tools vendor — can not only help drive the development of the HTML5 specification but also represent the needs of its customers who are the content creators of the web. For an excellent overview of Adobe's contributions in this area, I suggest reading Adobe, standards, and HTML5 by Carl Cargill on Adobe Developer Connection.

CSS3

While the primary goal of HTML is to describe the structure of a web page, the goal of CSS — or Cascading Style Sheets — is to describe the presentation of that page. By separating the structure of the page from the presentation, CSS makes your web applications easier to maintain as well as easier to adapt to multiple screens.

CSS3 (or CSS Level 3 if you are looking at the W3C documentation) is actually a collection of specifications broken into modules. In practice, the various modules are in a variety of stages of development, ranging from pure exploration to full completion. Much like HTML5, however, most browsers currently implement many portions of the specifications that are otherwise not considered complete by the standards boards. (For a complete breakdown of where each module stands, the W3C has a table of specifications for CSS.)

CSS3 introduced several enhancements that offer designers the ability to truly realize the full creativity of their designs without compromising on the accessibility of the content or the maintainability of the page. In practice, this means less reliance on images to represent portions of the design that could otherwise be handled through standard text or layout. For example, CSS3 added support for drop shadows, rounded corners, improved font support, and 2D and 3D transforms and animations, among many other things. The Adobe Developer Center has a whole section dedicated to resources for learning CSS3. W3Schools also has a great set of beginner CSS3 tutorials that introduce you to the capabilities.

One benefit of using CSS3 to truly separate page presentation from structure, and even to leverage some of HTML5's semantic markup, is that you can create pages that more easily adapt to multiple screens — from desktop browsers to mobile phones to tablets. Lately, the concept of Responsive Web Design, created by Ethan Marcotte, has become increasingly popular. It attempts to leverage new and improved aspects of CSS3, such as media queries, to create fluid layouts that can theoretically adapt to any screen. Responsive Web Design has become so popular that it is now a standard among widely used CSS frameworks like Less Framework or full-stack front-end frameworks like Twitter's Bootstrap. For a good beginner's guide to Responsive Web Design, read Nick Pettit's tutorial.

Adobe has been an active contributor to CSS3 standards, submitting proposals for CSS shaders as well as CSS regions and exclusions that have received widespread support. Essentially, CSS shaders help you extend filter effects, including animations and transitions for creating complex visual effects. Meanwhile, CSS regions and exclusions help define more complex text flow across portions of the page or within and around shapes. These proposals further advance the capabilities and flexibility of web design in areas where Adobe has unique expertise.

More to come

Obviously I have only scratched the surface of both HTML5 and CSS3. You can find a wealth of resources to learn more. And the advancements coming from Adobe are just the beginning. New tools like Adobe Edge already utilize many of the web standards advancements discussed in this article to enable you to get a level of interaction from a standard HTML web page that was either incredibly complex or technically impossible in HTML4. Existing tools like Adobe Flash Professional will be adding features that leverage web standards, such as exporting to HTML5.

The innovation in web standards, both inside and outside Adobe, is moving at an incredible pace. In this transition period, not all standards are complete or implemented in every browser. However, continued enhancements are enabling web designers to fully implement their design vision and web developers to build complex, desktop-like applications. As these standards solidify and new tools arrive, web designers and developers will be able to better leverage these new capabilities. I will continue to cover web standards for Inspire, and in future articles, I'll examine some of the products, technologies, and tools as they develop.

‹ Back

---