May 25th, 2005 
[Article] kiswa's Aricle Part 1: Standards and Semantics
I posted this article on another site a little while back. It was fairly well received there, and I thought I'd post it here to hopefully help people understand this subject. If there's anything you feel I've missed, or stated incorrectly, please let me know!
___________________________________________________________
Web Standards and Semantic Markup - What and Why
-
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 (at least with the coding if not the styling). You??ve got all the bases covered if you follow the standards.
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>
</head><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 (sorta, see note below):
Code:<html>
<head>
<title>Test</title>
</head><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>
Okay, technically this isn't really semantic code. It includes not entirely necessary code (all the div's). However, I did this because it prepares the semantic document for easy styling by using CSS. I'll go into that in more detail in a future article if you're interested, so let me know!
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 for any reason):
Quote:
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)*:
Quote:
This is the Page Title* Item 1
* Item 2
* Item 3Paragraph 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?
*The look of this version is 'typical' and would of course vary depending on what viewer is being used.
Source:
http://www.webstandards.org/learn/faq/
Next Time - kiswa's Article Part 2: DOCTYPE
___________________
www.kiswa.com
My attempt at articles for Neverside CodeBase: Part 1 Part 2 Part 3
(. )v( ) <- The Webstandards Owl
Last edited by Locke, May 26th, 2005 12:04 PM (Edited 9 times)
