What Are Web Standards?
“The W3C develops open specifications (de facto standards) to enhance the interoperability of web-related products.” Basically, The
W3C (World Wide Web Consortium) creates recommendations in working groups that involve Consortium members and field experts. These groups submit recommendations to the W3C membership and director for formal approval.
These standards are used to define methods of adding structure to text files (HTML, XHTML, and XML), techniques for styling the structural markup (CSS), and the DOM (Document Object Model) that is used by scripting languages.
Why Use Web Standards?
Accessibility. The most important reason standards exist is to give your sites greater reach and accessibility. Writing your code to be semantic and standards compliant will make your site more transparent to search engines, robots, server-side and client-side scripting, and users with special needs.
When a site is written semantically (more on this later) and follows the standards it is accessible to the most browsers possible. Older browsers will be able to understand the basic structure of your document (even if they can’t do all the new styling), current browsers can do it all (except IE which doesn’t follow the standards for CSS and therefore requires hacks), and future browsers will also work. You’ve got all bases covered.
Another benefit to standards compliant documents is that they can be more easily converted into other formats. You can take a standards compliant web page and make a Word document easily. They are also easier to migrate to new systems, such as TV browsers, PDAs, cell phones, screen readers, Braille browsers, etc.
By using standards compliant markup in your sites, you are guaranteeing the largest possible market for your sites.
Semantics?
So, what do I mean when I talk about semantic markup? Here’s an example of a simple site that has a header, navigation, main text area and footer:
Non-Semantic Markup:
Code:
<html>
<head>
<title>Test</title>
<body>
<div id="header">
<div id="header_text">This is the Page Title</div>
</div>
<div id="nav">
<div class="nav_item">Item 1</div>
<div class="nav_item">Item 2</div>
<div class="nav_item">Item 3</div>
</div>
<div id="main_text">
<div class="main_text_title">Paragraph Title</div>
<div class="main_text_paragraph">This is some filler text...
This is some filler text... This is some filler text... <br />
This is some filler text... </div>
<div class="main_text_title">Paragraph Title</div>
<div class="main_text_paragraph">This is some filler text...
This is some filler text... This is some filler text... <br />
This is some filler text... </div>
</div>
<div id="footer">
<div id="footer_text">Copyright 2005 All Rights Reserved.</div>
</div>
</body>
</html>
Semantic Markup:
Code:
<html>
<head>
<title>Test</title>
<body>
<div id="header">
<h1>This is the Page Title</h1>
</div>
<div id="nav">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="main_text">
<h3>Paragraph Title</h3>
<p>This is some filler text... This is some filler text...
This is some filler text... <br />This is some filler text... </p>
<h3>Paragraph Title</h3>
<p>This is some filler text... This is some filler text...
This is some filler text... <br />This is some filler text... </p>
</div>
<div id="footer">
<p>Copyright 2005 All Rights Reserved.</p>
</div>
</body>
</html>
Whats the Difference?
I'm glad you asked. The difference is how the
structure of the document is created by the semantic markup. The First example would look like this on a text browser (or if the stylesheet didn't load):
This is the Page Title
Item 1
Item 2
Item 3
Paragraph Title
This is some filler text... This is some filler text... This is some filler text...
This is some filler text...
Paragraph Title
This is some filler text... This is some filler text... This is some filler text...
This is some filler text...
Copyright 2005 All Rights Reserved.
|
This is how the semantic document would look in the same browser (still no styling):
This is the Page TitleParagraph Title
This is some filler text... This is some filler text... This is some filler text...
This is some filler text...
Paragraph Title
This is some filler text... This is some filler text... This is some filler text...
This is some filler text...
Copyright 2005 All Rights Reserved.
|
Notice the difference? By using the appropriate tags to create a semantic structure for your document, you will create a site that 'makes sense' to text browsers, the DOM, screen readers, etc. And if for some reason your stylesheet doesn't load, your visitors still get to see a site that makes some visual sense. Which would you rather have?
Source:
http://www.webstandards.org/learn/faq/