identifying the document

The Doctype which is placed at the top of the page, (in order for it to work nothing should be placed above it, not even a comment) is used to identify the document as (X)HTML or XML  which in turn implies that it meets certain standards. The Doctype was introduced with HTML 2.0 in 1995. In 1997 HtML4 was released, it had 3 different specifications which were:

• Strict: Did not allow any deprecated element or frames
• Transitional: excludes only frames
• Frameset: which allows almost anything
  

Now there were standards, the main problem for the browsers was how to display non-standard html. If the browser strictly inforced the new standards then many older websites would not display correctly. This lead to the development of Doctype Switching.

doctype switching

With the release of IE5 for the Mac, programmers found a way for the older none standards' websites to still work. If the Doctype specified one of the new specifications the browser would render the HTML in Standards Mode. If not it would render in Quirks Mode. Here is a list showing the different DocTypes and which browser triggers which mode. There was also an additional mode class Almost Standard Mode. Almost Standard was to address a problem of sizing of table cells and whitespace. This problem lay with some browsers. There was also a major problem in the way Internet Explorer interpreted the box model. The standard for the box model is for the padding to add to the size of the space used by the box. For example:
.box{
width: 500px;
padding: 20px;
}
The space required for this box would be 540px wide. All browsers used this standard except IE. For IE the space used would always be 500px. After adding the padding the area for the content would be reduced. Internet Explorer 6 and 7 could only work in the Almost Standard Mode. Unfortuately when IE8 was released there were more problems. Pages originally created for IE6 and 7 did not display correctly in IE8. More work arounds had to be made.

Click here for current list of Doctypes

the dom

The DOM, Document Object Model is a programming interface for HTML and XML documents.

The DOM standards are defined by W3C specifications.

The DOM provides a structured representation of the elements (objects) in html and xml documents, and how they relate to each other. These objects can then be manipulated within the page by the user without accessing the server.

The DOM allows the interactivity of a scripting language such as javaScript. 

All browsers use a DOM in-order to allow scripting languages to interact with elements within the web page, but not all comply with all of the DOM standards defined by the W3C specifications.

In 1998 W3C met with the browser companies to work on a standardize DOM in the hope that this standard would be used by all. It provided a complete model for an entire html or xml document but although web browser companies adopted these standards for the most part, they still did not completely conform to this recommendation for a number of years. By 2005 large parts were supported by most browsers but still not completely supported by all. Support gets better every year.

The DOM was written as a set of levels but by 2013 is decribed as The DOM Living Standard.
DOM Level 1 was recommended by W3C, 1998
DOM Level 2, 2000.
DOM Level 3, 2004
DOM Level 4 working draft
DOM Living Standard. 2013

javascript

JavaScript is a scripting language designed primarily for adding interactivity to Web pages. Its scripts can be included within the html. It allows for user manipulation of content without the need of reloading the page, this is known as Client-Side scripting (there is also Server-Side javaScript).

internet explorer, netscape different scripts

Internet Explorer had its own version of javaScript called jScript which was included in IE3 and released August 1996. One of the main problems in the beginning was that Netscape and Internet Explorer each had a different scripting language which were not compatible. This was ONE of the reasons that many web designers created at least two different versions of each web site.

standardization

The World Wide Web Consortium (W3C) got together with Netscape Communications and Microsoft along with other companies to develop a standard for scripting languages called ECMA. The first standard was published in 1997. Later versions of javaScript and jScript implemented the ECMAScript standard. Although ECMAScript is being used it is still commonly called javaScript.
ECMA International

Originally there were not any style sheets for html but even from the beginning there had been the intent to introduce them. When Tim Berbers-Lee wrote his browser/edition (for NeXT computer) it included a simple style sheet. Pei-Yuan Wei introduce the browser Viola in 1992 which included in-line graphics, scripting, tables, and a style sheet. In 1993 Mosaic, the browser that thrust the web into the limelight, came out, this led to Netscape which introduce some styling elements within the page. There were other style sheets, among them was one from Robert Raisch of Reilly Publishing which had been written in 1993.

tables

Very early-on designers discovered that they could subvert Tables for the layout of the web page which lead to aesthetics taking precedence over accessibility. The mark-up became more and more complex. Designers created complicated table structures. Images were sliced to fit into these structures. Tables were nested into cells often to the point of breaking the entire design. Even after a solution, (CSS) had been implimented many designers still stuck to Tables for their layout. It would take years to change this course and unfortunatly even today some designers still cling to Tables. Today if designer wants to create sites that meet with web standards (and they should) then Tables are only to be used for tabular data.

css

first draft of Cascading HTML Style Sheets

Håkon Wium Lie wrote the proposal for CSS which came out in October 1994 right before the first version of Netscape. He presented it at a Web Conference in November 1994. The following year CSS was presented again and at this time Bert Bosb also presented style sheets. At this time there were a number of possiblities, but CSS took into account that on the Web the style of a document couldn't be designed by either the author or the reader on their own, but that their wishes had to be combined, or 'cascaded,' in some way; and, in fact, not just the reader's and the author's wishes, but also the capabilities of the display device and the browser w3c . Some wanted a complex programming language and felt that CSS was too simple. It was simplicity that would win out in the end. Designers would be able to create beautifull presentations without having to first learn a programing language. Håkon Wium Lie along with Bert Bosb, developed CSS1 which became a W3C Recommendation  in 1996. Håkon W Lie along with Bert Bos wrote the book: Cascading Style Sheets, Designing for the Web.

separate the styles from the stucture

The main purpose of CSS is to separate the styles from the structure of the page. This separation can improve content accessibilty and provides more control. In addition:

• Css allows multiply pages to share the same styles.
• Css allows for different types of styles (Media Types) and rendering methods.
• Css allows for different styles (Media Queries) depending upon the size or the device on which the page is viewed.

the cascade

Cascade Rules

A key feature of CSS is that style sheets can cascade. That is, several different style sheets can be attached to a document and all of them can influence the document’s presentation. In this way, an author can create a style sheet to specify how the page should look, while a reader can attach a personal style sheet to adjust the appearance of the page for human or technological limitations, such as poor eyesight or a personal preference for a certain font. Håkon W Lie and Bert Bosb

cascade rule one

Sort by Importance
Find all the declarations that apply to each selector. As each page loads the browser checks every element on the page to see if a rule matches it.

If there are any conflicts in your css, there is an order of importance in which some selectors are more important than others:

• an ID will win out over a class
• a class will win out over a tag

cascade rule two

Sort by weight
The styles are checked in the following order, each subsequent style sheet has a greater weight than the previous.

• Default: Browser
• User: Style Sheet
• Author: Style Sheet - Linked
• Author: Style Sheet - Embedded in the head of the web page
• Author: Style Sheet - Inline within the body of the web page

The information in the Inline style sheet would have the most weight.

cascade rule three

Sort by Specificity

• Determines how specific the selector is.

The most specific has the most weight.

standards support

Opera 3.5* which was released in 1998 was the first browser that had almost total CSS1 support. At that time Netscape 4 and IE4 had recently been release but their support for CSS1 was limited at best. In March 2000 IE5 for the Mac was released and was considered the best IE browser so far when it came to meeting standards, but far from perfect. Here is A List Apart article on IE5 for the Mac. Netscape eventually left the scene but for years there were problems with IE's interpretation of CSS, one of the main problem was how it displayed the box model which was different than any other browser, the space used for the box remained the same as the width it did not change when padding was added and the space for the content was reduced.

internet explorer

Browers were reviewed in 1998 and the following are some of the problems that were found with Internet Explorer's compliance with the standards. This should give you some idea of what web designers were up against.
The Box Model
Display Properties
Float and Clear
Alternative Style Sheet
Inhertance with tables
Tiled Backgrounds
Pseudo elements
White Space
Vertical Align

*Opera was not free in the beginning which probably accounts for why it was not popular. Free versions were issued in 2000 which included sponsored ads. Opera's popularity would start to grow.

zen garden

http://www.csszengarden.com
The website Zen Garden created by Dave Shea came out in 2003. This site encourages designers to use CSS and submit a web page to be used as an example on the Zen Garden site. The only requirement was that all sites would contain the same html and use standards compliant CSS. For the first time many web designers they were able to experience the power of CSS. This site play a large part in pushing designers to use CSS. There is also the Zen Garden book which was released in 2005.

browsers

The first major version of Firefox was release in 2002 and Safari in 2003. Chrome was not release until 2008. These browsers were more standards compliant but for the rest of this decade there would be some juggerling to get a site to be display pretty much the same in all browsers.

 

reset

Today there are still minor differences between browsers and one way to reduce these inconsistancies is to use a reset for your CSS. The reset deals mainly with margins, padding and border widths (browsers can have a different default for these elements) so that you can start from scratch at zero but other elements can be added. Eric Meyers created a reset which you can find here, this one is used by the majority of web designers. The first known reset was Tantek Çelik’s UndoHTML.css, which he created in 2004.

law-suites

Although originally Section 508 only applied to federal agencies there is now an expectation that its requirements extend far beyond the government. There have been a number of law-suites against companies whose websites were not Section 508 compliant one of the most prominent cases was The National Federation for the Blind vs Target.

Regardless of your client or expected user you should make sure that your project complies with Section 508 standards.

jaws

JAW is a screen reader for those with Disabilities
Video: Aaron Cannon giving a demonstration of JAWS, Job Access With Speech which shows the important of using the correct Headings <1> - <6>.

See test for JAWS

excerpted standards from section 508

The following standards are excerpted from Section 508 of the Rehabilitation Act.
The information in the right two columns is not part of the official Section 508 document and is given as a guideline only.

Section 508	Description
Documents shall be organized so they are readable without requiring an associated style sheet.	Organization of information within the code	Place the information in the code in a logical sequence so that the information will make sense when read from top to bottom. Style sheets can be used but the web page still needs to be understandable without the style sheet.
A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.	Other content that is not accessible to users with disabilities	You are required to create a text-only version. You are required to up-date this version whenever you update the main version
When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assisted technology.	scripts	All scripts (e.g. Javascript) are either directly accessible to assisted technologies and the keyboard or an alternative method of accessing equivalent functionality is provided (e.g. a standard link). OR Information within the script is text based.
Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.	Headings , titles, sub-headers	Use Heading to show hierarchy. Must use at least <h1> for the title of the page. Must use <h2> for the title of each paragraph section. Use other <h3> - <h6> when necessary Use color only as decoration and not to emphasis a concept, point, etc or importance. Use <strong> or <emphasis> to make a point. But not for titles and subtitles.
Row and column headers shall be identified for data tables.	tables	Tables: Row and Column titles must be identified using, the <th> tag
When electronic forms are designed to be completed on-line, the form shall allow people using assisted technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.	FORMS	All form elements must have text labels which are associated with them in the markup. : labels, id,
Frames shall be titled with text that facilitates frame identification and navigation.	Frames	Give a title to each frame which describes its purpose and/or content
Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.	Flicker, which can cause seizures	There cannot be any elements on the page that flicker at a rate of 2 to 55 cycles per second.
Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.	Image Maps	Client-side image maps are used and appropriate alt text is provided for the image as well as each hot spot region.
Redundant text links shall be provided for each active region of a server-side image map.		Server-side image map: You need to provide separate text links in addition to the server side map. Cannot use client-side image map as the replacement.
A text equivalent for every non-text element shall be provided (e.g., via “alt”, “longdesc”, or in element content).	Image	Must include an “alt” tag with a description that conveys the content.
	Flash Video Audio Graphs Charts JavaApplet	A detailed text description needs to be included either in the body of the of the page or you need to include a link to a separate page that has a detailed description. Or longdesc, attribute alt.
A method shall be provided that permits users to skip repetitive navigation links.	Skip repetitive navigation links	This provides users with assisted technology to skip the repetitive navigation links that appear at the top or side of the page and go straight to the content. As this link is included only to be used by screen-readers it does not have to be visible. Create a 1 pixel by 1 pixel gif with a transparent background. Create an anchor on the page directly above your main content: <a name=”skip” id="skip"></a> Place the link directly under “body” (it needs to be in a div. <a href=”#skip id="skip"”><img src=”blank.gif” width=”1″ height=”1″ border=”0″ alt=”skip navigation and go to content” /></a>
These are just some of the main points. This page is only an introduction to Section 508 visit: http://www.section508.gov/index.cfm?fuseAction=stdsdoc for more information.

associations

1994 - w3c

http://www.w3.org/standards

The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards. Led by Web inventor Tim Berners-Lee and CEO Jeffrey Jaffe, W3C's mission is to lead the Web to its full potential. w3c

1998 - the web standards project (WaSP) 

http://www.webstandards.org
List of members

Founded in 1998, The Web Standards Project (WaSP) fights for standards that reduce the cost and complexity of development while increasing the accessibility and long-term viability of any site published on the Web. We work with browser companies, authoring tool makers, and our peers to deliver the true power of standards to this medium. WaSP

2004 - whatwg community

http://www.whatwg.org

The Web Hypertext Application Technology Working Group (WHATWG) is a growing community of people interested in evolving the Web. It focuses primarily on the development of HTML and APIs needed for Web applications. The WHATWG was founded by individuals of Apple, the Mozilla Foundation, and Opera Software in 2004, after a W3C workshop. Apple, Mozilla and Opera were becoming increasingly concerned about the W3C’s direction with XHTML, lack of interest in HTML and apparent disregard for the needs of real-world authors. So, in response, these organizations set out with a mission to address these concerns and the Web Hypertext Application Technology Working Group was born. whatwg

books

Designing with Web Standards

There have also been a number of books on web design and standards but the one that stands out the most and seems to have had a direct result on designers adhering to web standards is Designing with Web Standards by Jeffrey Zeldman first publish in 2003. The third addition, 2009 was written in collaboration with Eric Meyers.

Zen Garden

The Zen Garden was released in 2005. For more information see below under websites.

websites

A List Apart
By far one of the most important websites to influence web designers is A List Apart which explores the design, development, and meaning of web content, with a special focus on web standards and best practices List.
Jeffrey Zeldman founded the site in 1998 and is the Executive Creative Director

http://www.csszengarden.com
The website Zen Garden created by Dave Shea came out in 2003. This site encouraged designers to use CSS. This site played a large part in pushing designers to use CSS.

timeline

Year	event
1991	WWW went Online The WWW program was developed between 1989 and 1990 by Tim Berners-Lee and it went Online in 1991.
1992	Pei-Yuan Wei"s introduce the browser Viola in 1992 which included in-line graphics, scripting, tables, and a style sheet
1993	Mosaic Browser Mosaic Browser Released, which was created by Marc Andreessen and a team of students from NCSA at the University of Illinois.
1994	W3C Founded Tim Berners-Lee founded the World Wide Web Consortium, (W3C) at the Massachusetts Institute of Technology, in collaboration with CERN, with support from DARPA and the European Commission
1994	CSS Håkon W Lie proposes the Cascading HTML Style Sheets language.
1996	Håkon Wium Lie along with Bert Bosb, developed CSS1 which became a W3C Recommendation  in 1996.
1996	Internet Explorer was the first browser to support CSS and this was before Lie's recommendation. But this support was limited and there were some major problems with some elements. Web Designers would be struggling with this for a long, long time. Way more than a decade.
1996	Doctype Todd Fahrner proposed using the DOCTYPE of an HTML document as the basis for deciding whether a browser should implement a strictly standards based approach to rendering a page.
1997	javaScript Standardization of javaScript begins. Netscape submits JavaScript to ECMA International for standardization
1997	Internet Explorer Microsoft released its first browser, Internet Explorer, which was based on source code licensed from Spyglass, itself derived from NCSA Mosaic.
1997	Netscape 4 It featured CSS support
1997	Html 3 - 4 HTML 3.2 was the first version developed and standardized by the W3C.
1998	DOM Level 1 was recommended by W3C, 1998 DOM Level 2, 2000. DOM Level 3, 2004 DOM Level 4 working draft DOM Living Standard. 2013
1998	Opera 3.5 Opera 3.5 was the first browser that had almost total CSS1 support.
1998	CSS 2 CSS2 introduced a large number of new features.
1998	The Web Standards Project (WaSP) WaSP fights for standards that reduce the cost and complexity of development.
1998	A List Apart A List Apart is publish which is by far one of the most important websites to influence web designers. Founded by Jeffery Zeldman
2000	Section 508 Federal Law which requires that all technology created for the Federal Government must be accessable to all who have disabilitities.
2003	Designing with Web Standards Designing with Web Standards stands out and seems to have had a direct result on designers adhering to web standards. Author: Jeffery Zeldman 2nd edition written joinly with Eric Meyers was published in 2009.
2003	ZenGarden The Zen Garden website encouraged designers to use CSS. This site played a large part in pushing designers to use CSS. Founded by Dave Shea. A book by the same name came out in 2005
2004	WHATWG Community The Web Hypertext Application Technology Working Group (WHATWG) is a growing community of people interested in evolving the Web.