| 1990's | Exciting but ARRGGHHH!! Browser Wars! |
W3C HTML "Recommendations" (voluntary) since 1996 |
| 2000+ | Web Standards Project
|
Worked with browser vendors towards W3C recs (still voluntary)
|
Web Origins
The Web originated in the scientific and academic sector where users were interested in the content of the information rather than the presentation. Web pages simply had text with basic images. Imagine reading typewritten term papers on your computer, and that's essentially what you were presented with in the early days of the web.
Browser Wars
As the general public began discovering the Web, authors focused on presentation to give websites aesthetic appeal. The stylistic limitations of HTML became a source of continuing frustration. To gain marketshare, browser vendors began offering proprietary features, tags, and attributes to support the presentational needs of web designers. Each new release of a browser would introduce a unique tag or attribute that wasn't supported on competing browsers.
While the intentions have been good—to improve the presentation of Web pages—the techniques for doing so have had unfortunate side effects. These techniques increase the complexity of Web pages, suffer from interoperability problems, and create hardships for people with disabilities. Web page incompatibilities were on the rise.
For the web designer, considerable effort is expended on testing to ensure that a design renders consistently across all browsers and user agents. Presentational information is located in every page increasing the size and clutter of the coded files. This makes websites difficult to modify and maintain.
For the user, webpages are inconsistently rendered from browser to browser, often with ugly, unreadable results. Users have been forced to install additional browsers to ensure that they could view certain webpages.
Introduction of Web Standards
Top 10 Benefits of Standards-based Coding 1
- Deliver to multiple user agents
- Improve performance
- Serve all browsers
- Separate content and presentation
- Build fluid pages
- Confirm your code is good
- Streamline production
- Distribute content more easily
- Make it accessible
- Do less work.
Enter the World Wide Web Consortium (W3C) and the Web Standards Project (WaSP). Recognizing the value of the Web in enabling communication, commerce, and sharing knowledge, one of W3C's and WaSP's primary goals is to make these benefits available to all people, whatever their hardware, software, network infrastructure, native language, culture, geographical location, or physical or mental ability. This is accomplished by setting standards that reduce the cost and complexity of development while increasing the accessibility and long-term viability of any site published on the Web. They work with browser companies, authoring tool makers, and developers. Work in areas like Web accessibility, internationalization, device independence, and mobile Web are particularly important to the Web-enabled world of the future.
Components of Standards-based Web Design
The primary goal of standards-based Web design is to separate content from presentation. The essential components of a standards-based web design are structural markup, style sheets, and the document object model.
Structural markup specifies the content of the page. All the content on the page is further defined by its purpose in the document. Examples are paragraphs, headings, lists, etc. Note that the designer does not specify how the content appears on the page, just its purpose.
Style sheets represent a major breakthrough for Web page designers, expanding their ability to improve the appearance of their pages by superseding the limited presentation mechanisms in HTML.
Authors may separate style sheets from HTML documents. This offers several benefits:
- Authors and Web site managers may share style sheets across a number of documents (and sites).
- Authors may change the style sheet without requiring modifications to the document.
- User agents may load style sheets selectively (based on media descriptions).
Style sheets streamline the code, and allows designers to customize the page for display on anything ranging from a large hi-res monitor to a small web-capable cellphone.
Accessibility is a major goal of standards-based web design. Style sheets can deliver a page to someone with special needs. For example, visually impaired individuals can configure their browsers so that text is large, and the color and background are adjusted for greatest readability. A person who uses a speech-synthesized browser will hear the text as it was intended to be read; e.g., with emphasize where appropriate.
The Document Object Model (DOM) is a hierarchical interface that allows programs and scripts to dynamically access and update the content, structure and style of documents. The DOM defines the attributes associated with each document object - for the purposes of this class this includes such things as text, images, links, div containers - and how those objects and attributes can be manipulated.
HTML=Document Structure | CSS=Document Design
Presentational Markup
This was the old way of writing markup; coding for appearance. This presentation markup included such travesties as placeholder graphics and the most notorious; tables for page design. Besides using tags in ways they were not intended to be used, this presentational markup clutter slowed down the loading of the pages.
Example
Code:
<font color="red">
<font size="5">
<b>Presentatational Markup</b>
<br><br>
</font>
</font>
<font color="black">
<font size="2">
This is the old way of coding for appearance.
</font>
</font>
Browser View:
This is the old way of coding for appearance.
Notice that it still works ...sigh...
Semantic Markup
This is the new way; coding for proper structure. The HTML document is populated with content and correctly used markup elements. It loads quickly and displays correctly in a variety of devices. The design comes later from CSS.
<div id="header">
<h3>Semantic Markup</h3>
</div>
<div id="content">
<p>This is the new way, where the tags are use for their
intended purpose! The design will come from CSS. What a
concept!
</p>
</div>
The goal: separate the structure | from the design or presentation.
Thus, it is important that your HTML document be well formed (structured correctly) and valid (use only XHTML, no useless or deprecated tags). The HTML document contains only the markup and the content. The CSS can then be applied on top of that structure to control the presentation. Note that presentation can include how it looks as well as how it sounds.
References:
-
Web Standards Project
- See the white paper
Developing with Web Standards
.
Recommendations and Best Practices.
- See Developing with Web Standards
Structure and presentation
.
- See the Resources page for information on
code validators
.
__________
1 Do you know how hard it is to reverse the order of a list - starting with 10 and working down? Something that should be so easy is very difficult. CSS, JavaScript, deprecated tags—yech! Finally, I gave up because I didn't have the time. David Letterman is lucky he is on TV and not on the web!