MINOS Web Guide - Web Standards

Introduction

Even if you have made web pages in the past, chances are you are not using Web Standards. The reason is not your fault - you've probably been coding pages the way "everybody" does, by copying what they did. But the Web and coding practices have evolved, and Web Standards are the Future - actually, they are the Now. Browser makers have implemented Standards, and all of us web page creators should learn what using Standards means.

What are Web Standards?

In the technical sense, Web Standards means using XHTML and XML to write a web page, CSS to specify the page presentation, ECMAScript (standard JavaScript) for dynamic actions. It also means having browsers which interpret all these according to the W3C and which follow the W3C Document Object Model (DOM) (by Object Model they mean how the code is organized in C++ terms).

Standards also implies coding practices - HOW a web page is coded. It means using properly structured HTML/XHTML. For example, on this page, the page title is in <h1> tags, the section heading in <h2> tags, the sub-section heading in <h3> tags, and the text content in <p> tags. We don't use <font size=+2 color=tan><br>Introduction</br></font>, we use <h2>Introduction</h2>. How is the section heading made to appear in a bold color? That is declared in the Style Sheet, along with all other formatting controls that give the page its "look". If you view the source for this page, you WON'T see any commands that make the navigation bar blue, or put the blue map image into the background of the sidebar - again, all that is in the style sheet. This is called "separation of style from content" - we don't bog down the web page with style directives that have nothing to do with the content.

So, using Web Standards means using the right technical tools, and using appropriate coding practices.

What happened to HTML?

Notice it's missing from that list of technical standards items above. HTML-4 is the most recent version, and it was released in 1998. There is no HTML-5. Or, rather, what you might have called HTML-5 is XHTML 1.0. However, XHTML is not an upgrade of HTML, it is a re-write. XHTML is based on XML, while HTML was not. While you CAN be Standards compliant writing a page in HTML-4, there are some CSS-2 directives which HTML-4 doesn't understand. If you want to move forward and use all the current web page tools available, use XHTML/CSS2.

But there's no reason to panic. XHTML is (deliberately) very similar to HTML. The few differences are listed at XHTML Details - it's a short list.

Which Browsers are Standards Compliant?

All current versions of common browsers are Standards compliant, and most less common browsers also are, or are very close. Standards compliant browsers are the Gecko-driven ones (Mozilla, Firefox, and relatives), Netscape 6+, MSIE 5+/Mac, MSIE 6+/Win, Opera 7+. The latest version of Konquerer (March, 2005) claims "improved standard support" but I haven't tried it or read anything about it on the usual Standards sites that I visit. Safari, installed on MACs, uses the same KDL rendering engine as Konquerer, so it likely has a few issues with standards compliance. However, I know these pages on our site appear OK on Safari. Most of these Browsers have been around for a while now, and represent a very large fraction (like, 99%) of what is used to view our site. So writing new pages with non-Standards compliant methods is just being a dinosaur (no pun on Mozilla intended).

Getting People to be Standards Compliant

The Browsers are mostly all Standards compliant, but there are still a lot of new pages and sites being made using non-Standards compliant coding. This is the issue today in web development - changing old habits. YOU might be using some "bad old habits" and not even be aware of it, because it's the only way you ever knew to use HTML. There's a lot of history and baggage to the bad habits, which is why they are hard for some people to change.

In the next sub-section, I've summarized web coding history in a few paragraphs as background for why we should all use Web Standards. For a longer but more entertaining summary, you can read the Comic Strip version of why you should love Web Standards - visit the link below, and then come back to this later. The link is a seminar given to web development professionals a few years ago. It starts out asking "why tables should not be used for page layout" and you may think this doesn't apply to you, but stick with it - it's really a very good presentation. Everything it says is still true today - the Browsers are Standards compliant, and the next big job is to train people who write web pages. The seminar is longer than my thumbnail summary, but it is much more entertaining.

Seminar at www.hotdesign.com/seybold

Web Coding Practices - Some History

Standards are vital to any medium. For the Web, the W3C defines the standards for HTML, XHTML and how any browser is supposed to interpret them. The problem for many years was that browser makers "sort of" followed the Standards, but not entirely. No browser is faultless - this is not a Netscape versus Explorer issue - all major and most minor Browsers have at some point produced a version which did NOT follow crucial W3C standards. And, none of the browsers behaved in exactly the same way - the same web page would appear slightly, or not-so-slightly, different in different browsers. This was the era of the Browser Wars. Making themselves different from one another was part of their marketing strategy. The W3C was not entirely blameless either, having labeled things which were standards as "recommendations" - this wording allowed browser makers to form their own interpretations of how their browsers displayed HTML.

And then the Web itself evolved - leapt forward, actually, just as the Browser Wars began - from something used mainly by academia to more commercial applications. The Web was created by geeky scientists who thought in terms of text-based information, not graphics filled visually enticing web sites. When the Web became more commercial, those enterprises needed the visual "WOW". They viewed the Web as another type of print medium and sought approaches to web page layout and presentation that would give them the same sort of control over appearance like they have on a printed page. A seminal web development publication back in the mid-90's demonstrated how to use HTML, by way of tables, to tightly control web page layout - made the process of creating a web site more like the graphics arts process of creating a printed magazine.

Now, the W3C never intended HTML tables to be used in this way - it was a clever work-around. But the technique spread quickly, because the Browsers at the time did not allow this level of control using any other method. The resulting "neat-o" web sites attracted attention and increased attention is what the marketing section of a commercial enterprise is paid for, after all. From that starting point, a lot more clever techniques were developed to use HTML and Javascript to make web pages visually interesting. The cleverness usually involved using code in a manner it was never designed to be used for. Sometimes these techniques made a web page appear the same in the different browsers, but usually not. The pursuit of pixel-level control over the appearance of a web page in all browsers led to still more clever tricks and work-arounds (browser detection scripts, serving up pages customized to look best in a particular browser).

To it's credit, the W3C could see that an improved means of visual enhancement of web pages was needed, and they responded - before 2000, they began developing the standards for Style Sheets (CSS). But the browsers ignored much of this at first. Web developers could not use CSS if browsers ignored the code. So - the web reached the later 90's with browsers which all behaved slightly different, and the clever work-arounds, or hacks, to compensate for the browsers became entrenched. Web authoring programs, like DreamWeaver or Photoshop, had many of the hacks built into them! But life was not easy for the web page designer. You could not write a single page which would look or behave exactly the same on any two browsers. And every time a browser released a new version, the pages you just finished working on would break or look bad. Companies spent a lot of time and money just trying to keep up - sometimes by making entire duplicate sites tailored for specific browsers. Sites like ours didn't keep up at all.

In 1998 the Web Standards Project, www.webstandards.org, an entirely voluntary and non-profit coalition of web designers, started to argue that the state of affairs would ultimately destroy the Web - it would take more time and effort to maintain web pages than the average commercial enterprise was able to spend. And the situation was at a point where Netscape, Microsoft and other browser-makers listened. And they responded, in favor of Standards. The result is that the versions of Browsers out since late 2002 or so ALL follow the W3C Standards. The Browser Wars ended. There were still a few quirks and differences in Style Sheet interpretation, but the situation was very, very much improved.

The main problem NOW is the education of web developers and page authors. Many of them are still using those clever techniques developed back in the late 1990s. You needed those techniques when Netscape 4.7 and Explorer 5 were the main browsers, but with today's browsers those techniques just create unnecessary problems.

What's the Advantage?

So all that history is well and good, but why should you change YOUR habits? You are comfortable writing in HTML-2 style, with practices that worked well for Netscape 4.7, and even if the result in today's browsers can be a bit quirky - it still displays, right? It looks OK in YOUR browser, and to heck with the rest, right?

Stability and Simplicity

The main advantage was mentioned above - use Cascading Style Sheets, CSS, to their full implementation and achieve total separation between markup and presentation. Markup means using <h1> to distinguish a title phrase from <p> paragraph content. Presentation means telling the Browser to render the stuff in the <h1> tags as bold blue in 16px, left justified, and to render the stuff in the <p> tags as regular black in 12px, justified, with 10px margins. Only the markup is in the html web page file - the presentation directives are not in the page.

What that means is that your web page, with it's content (the IMPORTANT thing, after all), becomes a much more STABLE entity. You create a new page following Web Standards today, and first off, since all the major browsers are following the Web Standards, you can be assured that your page will appear pretty much the same in all of them, on any platform. And a year from now, when Browser X releases a new version, it STILL follows the Standards, and your web page STILL displays as you wish. No more running around updating pages because the latest browser "broke" your page layout.

If you structure a web page appropriately - declaring block areas for Header, Menu, Content, Footer, etc - then when you want to have a new look, you need only play around with a new Style Sheet. The Style Sheet gets applied to ALL your pages. You can change the entire look of a web site by changing ONE FILE. When Browser X releases an update, you might be inclined to take advantage of some new CSS property, but that means, again, changing only the Style Sheet, not changing every page on your site.

Smaller Files

In truth, most MINOS web page authors didn't get into the fancy hacks, and didn't use tables to control the page layout. They made plain pages with a little visual markup. But the visual markup was still contained in the page. I'm talking here about <FONT>, <B>, and <BR> tags, and forcing spaces using &nbsp;. You did that to tell the browser what size and type-face to make your text, or used break tags to force a line break to space lines apart, because your paragraphs were too close together. Our site's template pages used nested tables to control the placement of text on the page - margins, justification, etc.

Well, all that visual markup is extra code to download. Believe it or not, getting rid of all that presentational stuff often makes the html file half the size it was before. Pages download faster. It is true that the CSS file now contains all this visual stuff, and that it can be a file the same size as an average HTML file, and it too must be downloaded. But the CSS file gets downloaded once for each web site, and cached by your browser on your machine - subsequent pages from the same site, which use the same CSS file, don't have to download it again. Web Standards sites really do, on average, download faster.

Simpler Page Code

Since all that visual markup is removed from the web page, the HTML file is also easier to edit - you don't have to crawl through all those formatting and table tags to find the actual content. A Web Standards compliant page typically contains basic markup tags only: <p>, <h1>, <a>, <ul,li> html tags - and the occasional table where a table of data is needed. Many MINOS web page editors never, in fact, went beyond learning these basic tags - they never learned those hacks from the 90's. And these people can rejoice - just keep coding your pages that way. You'll never have to learn any of the old fancy stuff. The style sheet will take care of appearances.

You DO, however, need to use correct XHTML code.

If, in the past, you have used a web editing program, like Front Page or GoLive, you might be better off now using a simpler text editor. The reason one used those programs was so you could view how the page would render as you were editing it - because otherwise all that old style table-hack code made it hard to predict whether the result was what you wanted. But with Web Standards, the html file is much simpler. It is easy to edit with a simple text editor. In addition, Front Page does NOT understand Web Standards, and it is likely to generate code which is not Standards compliant - it will stick in FONT tags, for example, whether you asked for them or not.

Accessibility

This means making a site accessible to those who, for whatever reason, are not using your standard PC screen monitor running one of the usual list of Browsers. It means making a site usable for: disabled people who use screen readers; for a guy at the airport viewing the web on his Palm Pilot or on his cell phone. For both these examples, old-style table-driven web page layouts, with java-script driven navigation drop-down menus, are very difficult, if not impossible, to use.

Accessibility is also a law: U.S. Section 508 of the Workforce Investment Act, a 2001 update to the 1973 Rehabilitation Act, which is intended to end discrimination against people who have disabilities. The law applies to websites which are a part of activities sponsored or funded by the Federal Government. This appears to apply to us, although I admit I have not heard a peep from anyone at FNAL on this point.

So what does it mean in terms of making web pages? Well, by following Web Standards, one goes a long way towards also adhering to web Accessibility guidelines. All the presentation frills are in the Style Sheet; what's left in the web page is very straight-forward <h>,<p>,<ul-li>, etc. tags. Any user agent - a web-enabled phone or standard browser or a screen reader - understands that code. An important part of Standards, and Accessibility, is to use those tags in the correctly structured manner. This means, as mentioned earlier, using <h> tags as text headers and <p> tags to hold paragraph text, and not using bold-face <p> text in place of the <h> tags.

Web Search Engines

Using correctly structured markup also makes for more efficient web crawling. For web crawlers? But just think - the Google search engine is the biggest blind user on the web. Search engines expect your code to be properly structured, such that the most important topics on the page are within <h1> tags, sub-topics in <h2> tags and content in <p> tags. Structured markup conveys information about the organization of the content, information which search engines are designed to pick up on. If you use correctly structured markup your pages will get better search rankings due to better search engine indexing.

Style and Appearance

Some people write off Web Standards because they say it forces all page design into the same boring "boxy" layouts. Some people say that web page Accessibility is impossible to achieve, and therefore can just be ignored. These are, mostly, the same people still using 90's style web coding practices. And, for the most part, they haven't really tried changing their coding habits. If they did, they would find out that just about ANY existing web page can be re-written using Web Standards and it will appear EXACTLY the SAME. This includes fancy stuff like active roll-over effects and drop-down menu lists. Such people need to start re-educating themselves, and the References below are a good starting point.

References

There's lots of books and lots of web sites dealing with Web Standards and the use of CSS-2. A very few are listed here - they lead to others.

  • Designing with Web Standards, by Jeffery Zeldman. One of the founders of the Web Standards Project, he expands on the above reasons (which I took from his book in any case), plus more.
  • the Web Standards site, www.webstandards.org
  • A List Apart - a site with lots of helpful articles on implementing Standards and CSS, from simple to fairly complex. These articles show how just about any fancy web page effect you made using the old methods can be replicated using Standards, and usually in a simpler way
  • Books - Eric Meyer on CSS, and More Eric Meyer on CSS, both by Eric Meyer. He gives examples of starting with a table-based HTML-4 layout, and converting it to XHTML and CSS, retaining the page appearance and features, while making the code simpler
  • Eric Meyer's web site, which holds all sorts of interesting things
  • Building Accessible Web Sites, by Joe Clark - there are those who argue that adhering to Accessibility guidelines forces one to make plain and boring pages, but read this and find out that it doesn't have to be that way

Fermi National Accelerator Laboratory Magnet Logo