Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,256
Total Threads: 81,171
Total Posts: 566,848
There are 36 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Business and Website Management     Articles From The Experts :

Web Standards and Semantic Markup - What and Why

Thread title: Web Standards and Semantic Markup - What and Why
Closed Thread    
    Thread tools Search this thread Display Modes  
02-10-2005, 01:55 PM
#1
kiswa is offline kiswa
Status: Junior Member
Join date: Feb 2005
Location: Florida
Expertise:
Software:
 
Posts: 91
iTrader: 0 / 0%
 

kiswa is on a distinguished road

  Old  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. 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 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.
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/

02-10-2005, 02:10 PM
#2
kiswa is offline kiswa
Status: Junior Member
Join date: Feb 2005
Location: Florida
Expertise:
Software:
 
Posts: 91
iTrader: 0 / 0%
 

kiswa is on a distinguished road

  Old

This being my first ever article, please let me know if I need to edit for clarity at any point. Also, was this helpful?

02-10-2005, 02:54 PM
#3
Travis is offline Travis
Status: Member
Join date: Jul 2004
Location:
Expertise:
Software:
 
Posts: 445
iTrader: 0 / 0%
 

Travis is on a distinguished road

  Old

I would say this would be helpful for those that do not know much about standards and want to know why they should code to standards. Probably could have elaborated more on accessability but overall it's quite good.

02-10-2005, 03:56 PM
#4
Hexation is offline Hexation
Status: Member
Join date: Jul 2004
Location: USA
Expertise:
Software:
 
Posts: 456
iTrader: 0 / 0%
 

Hexation is on a distinguished road

Send a message via AIM to Hexation Send a message via MSN to Hexation

  Old

Im currently learning all this in my XHTML and CSS classes, nice article.

02-10-2005, 06:37 PM
#5
kiswa is offline kiswa
Status: Junior Member
Join date: Feb 2005
Location: Florida
Expertise:
Software:
 
Posts: 91
iTrader: 0 / 0%
 

kiswa is on a distinguished road

  Old

Yay, that means I made sense!

Glad it was helpful, even if only to the two of you.

04-04-2005, 03:15 PM
#6
kiswa is offline kiswa
Status: Junior Member
Join date: Feb 2005
Location: Florida
Expertise:
Software:
 
Posts: 91
iTrader: 0 / 0%
 

kiswa is on a distinguished road

  Old

I'm amazed this left the first page so soon. No one else finding it useful?

04-04-2005, 03:27 PM
#7
jamesyfx is offline jamesyfx
Status: Member
Join date: Jan 2005
Location: Manchester
Expertise: Design
Software: TextEdit
 
Posts: 1,009
iTrader: 0 / 0%
 

jamesyfx is on a distinguished road

Send a message via MSN to jamesyfx

  Old

Well, I was almost doing it right before I read this.

I was using spans instead of the regular h1 h2 etc for headings.

Closed Thread    


Thread Tools
Display Modes

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed