"A site built to Web Standards should be lean, clean, CSS-based, accessible, usable and search engine friendly."
Russ Weakley
Co-Chair, Web Standards Group
Web Standards is a broad term that encompasses several aspects of modern web design. Designing with Web Standards means adhering to specifications and recommendations set forth by the W3C such as XHTML and CSS.
[Sidenote: HTML 4.01 in this respect is also considered a standard. However, HTML 4.01 is the last version of HTML to be developed, and it is aging. Focus at the W3C has moved on to XHTML and CSS. XHTML 1.0 and XHTML 1.1 exist today, while XHTML 2.0 is currenty under development. CSS 2.1 exists today, with CSS 3.0 coming soon, alongside XHTML 2.0.]
Web Standards also encompasses a collection of best practices that designers should apply, but aren't necessarily required to, such as semantic markup and accessibility. Though, when applying these best practices to your work, the results, as you'll come to find, will speak for themselves.
These are aging techniques as browser makers are more standards compliant than ever.
Have you ever debugged a misaligned cell 4 tables deep? How many times have you found yourself saying
"If I add 3 more spacer GIFs, it will be perfect?" How many sites have you redesigned where you've had
to edit each and every <font> tag?
Before Web Standards, "Tag Soup," that troublesome mass of HTML, wasn't disadvantagious. "Tag Soup" and Nested Tables were solutions to a greater problem plaguing designers: the desire for more adaptable control. Web Standards not only fills that void, it gives the Web more meaning.
Web Standards isn't a new idea. A noticible push towards Web Standards began as early as 1998, and truly gained momentum in 2001. For the past 5 years, designers have been begging browser makers for better support of W3C specifications, and accessibility experts agree a majority of the web is inaccessible to those with disabilities. We designed poorly because the internet landscape was constantly changing.
Web Standards isn't a new idea. A noticible push towards Web Standards began as early as 1998, and truly gained momentum in 2001. For the past 5 years, designers have been begging browser makers for better support of W3C specifications, and accessibility experts agree a majority of the web is inaccessible to those with disabilities. We designed poorly because the internet landscape was constantly changing.
Note that "works in any browser" does not mean "looks the same in every browser." This is A Good Thing. Your site will be accessed by a wide variety of devices on several operating systems, with monitors of different sizes (or no monitor at all), by users that may have customized their default text size and other preferences. Web Standards makes this possible.
Redesigns are very labor-intensive because of "Tag Soup"
It's tricky work for you, and expensive for them.
Nested Table & "Tag Soup" approaches of web design arose from the early beginnings of the web as a marketing space. Entrepreneurs capitalized on the technology faster than browser makers (and even the W3C) could keep up with.
Every time a user browses to a new page, the entire page of "Tag Soup" (structure & presentation) is retrieved from the web server. This creates unnecessarily higher bandwidth usage for the business and the viewer.
The benefits of separating presentation from structure are numerous. Development times are significantly reduced for designers. Browser caching not only gives visitors a faster experience (especially over dial-up), it eases business expenses in the areas of hosting and bandwidth costs.
On the web, content is king. Visitors to most web sites aren't interested in your lastest rollover technique, the masthead graphic with the latest trend or the giant BUY NOW button. They came to your site for information. Simple questions like What time do you open? How do I get there? When is the next show? How much is it? How did other people like it? What services do you offer? What's your phone number? are extremely common.
Separating sturcture (content) from presentation allows the information contained in your site to be available to anyone that wants it, on any device. Those that happen to use a capable device have the added bonus of a visual - or audible - style.
Because the content is only accompanied by semantic markup, search engines have an easier time indexing and ranking your pages. Search engines don't care how your site looks. More than any other visitor, they want your content.
"As much as possible, the tags surrounding the content of a document should describe what that content is and/or what it is for."
Jason Kottke
Semantic markup gives content meaning and logical hierarchy regardless of browser or user agent. This means that any device can access your page and view your content.
Search Engines like semantic markup because it allows their spiders to parse the content in a logical fashion.
Semantic Markup is also beneficial when a site needs to be changed, or redesigned completely.
<h#>Heading</h#>
<b><font size="+3">Heading</font></b><br />
<strong> and <em><b>, <i>, and <br> as much as possible
<th>, <caption> and the summary attribute
Headings are used to announce a topic or section. They are more than just a larger font size. Also, search engines often place ranking emphasis on heading content.
Tables are used for marking up tabular data, similar to an Excel spreadsheet.
Lists are used to formally group related items together.
<div> and <span> are the least semantic structural tags we use.
And we use them constantly. However, when properly id'd and/or classed with CSS, they can imply meaning.
Each of these sites contain massive amounts of information. These specific links are meant to reinforce some of the topics discussed in this presentation, educate you further on topics of web standards, provide evidence of their benefits, or give you a first hand look at Web Standards in action. You may browse each site further if you'd like, but I don't expect you to.
However, please do browse the CSS Zen Garden as much as possible. It's absolutely wonderful.