Web Standards: How You Can Benefit
By Justin Garrity, Pop Art, Inc.

HTML was created to be flexible and forgiving. To prevent web browsers, the software applications that display web pages, from becoming obsolete with each updated release of HTML, they were built to ignore unfamiliar HTML tags. This way, as new tags were added to the HTML lexicon, browsers remained “backward compatible” and web pages that used the newest version of HTML could render in older browsers.

Everything changed in the mid ’90s, when the race for browser market share went into hyperdrive.

Netscape and Microsoft began pitting their browsers against one another. These companies exploited the “ignore unfamiliar tags” loophole in HTML and created proprietary new HTML tags outside of the original, simple HTML lexicon. Each introduced flashier tags into its own browser, knowing that the competition’s browser would just ignore these tags. With each new tag, a browser could appeal to new users by enabling functionality its competitor didn’t have.

At the same time, another movement was gaining momentum: the commercialization of the web. As the web transformed from a space to post scientific and educational hyperlinked documents into a new medium for interacting with consumers, commercial interests found that simple, text-based documents failed to convey sophisticated marketing messages. They demanded visually rich websites with pages laid out just like those created for traditional print media. This pushed the limits of basic HTML.

To transfer sophisticated designs and layouts to the web, programmers hijacked the HTML <TABLE> tag in a manner unintended by the creators of HTML. The tag <TABLE> was originally intended to mainly display tables of data. Designers realized that if they wrapped the text and graphics within a web page inside table cells and then made the table borders invisible, they could control the exact positioning of each element. At the time, most web designers were really print designers; giving them a familiar grid to work within made the transition to web design easier.

Using tables was simple and very clever, and once they controlled page layout, HTML tags no longer had to be considered a design constraint. Designers started to ignore this semantic markup in order to achieve aesthetically pleasing layouts and push the web as a marketing medium. However, this clever solution didn’t come without costs; it introduced a host of new problems:

• Poor accessibility for the visually impaired and otherwise disabled
• Difficulty rendering web content on mobile devices
• Barriers to search engine attempts to index the site
• Infusing the content with the presentation markup so that it was nearly impossible to change one without affecting the other
• Bloated HTML file sizes, resulting in slower page loads

Luckily, a better solution for web page layout was in the works.

Web Standards

To prevent HTML tags from being hijacked and to prevent browser developers from introducing proprietary tags, the World Wide Web Consortium (W3C) formalized a set of recommended specifications and programming languages. Extensible HyperText Markup Language (XHTML) and Cascading Style Sheets (CSS) became two powerful tools for standardizing the web.

XHTML extends and enhances HTML, while simplifying and reducing the number of standard tags that make up the core of the language. XHTML uses very strict parsing rules and only identifies the semantic nature of content, for example headlines, paragraphs, tables, and so on. A major goal of defining the new set of standard tags was to remove any attributes that specifically instructed the browser how to display content.

Using the semantic identifications provided by XHTML, CSS instructs the web page how to visually render each of the page’s elements. Assigning the same visual instructions across many pages within a site by loading an external file enables leaner code, drastically reducing each page’s file size. Other benefits include the ability to:
• Create complex and visually interesting page layouts by easily moving page elements around on the page

• Transform simple bulleted lists into tabbed, drop down, fly out, or expanding menus

• Attach background graphics to elements, create textures and layers that work in planes instead of tables

Due to browsers taking a while to catch up to support this powerful combination and the examples set forth by some adventurous CSS pioneers, it wasn’t until these last couple of years that creating a site using CSS and XHTML was even a viable option.

Benefits

The benefits of using standards-based design are immense:

• Reduced cost. Each web page has a dramatically reduced file size due to leaner HTML. This reduces the cost associated with hosting the site.
• Zippier experience. When CSS files are loaded externally, the browser caches them, which results in a faster page load.
• Search engine visibility. Because the site code is leaner, there is a higher proportion of page content to HTML tags, which appeals to search engine spiders. As a result, pages created using web standards often rank much higher in search results.
• Accessibility. Web standards are written with accessibility in mind. XHTML and CSS incorporate accessibility requirements into the development of the website from the start, instead of adding it on as an afterthought.
• Mobile devices. Using a CSS style sheet specifically for mobile devices means that there’s no need to create a separate website. Visitors can easily access a site from their PDAs, web-enabled mobile phones, and any other device with Internet connectivity.  In addition, browsers can render XHTML files with less processing power than is needed to render HTML files - an important feature for mobile devices that have less computing power than desktops.
• Easy Maintenance. With web standards, the presentation layer is separate from the content. Updating a single CSS file quickly changes the look and feel of a website, so a complete web redesign is no longer required.

Invest In Web Standards

Is your web site Standards compliant? The next time you are building or redesigning a web site, make sure that it follows Web Standards and explore the many ways the web is growing to benefit you.

About the writer: