<html><!-- #BeginTemplate "/Templates/layout-articles.dwt" -->
<!-- DW6 --> 
<head>
<!-- #BeginEditable "doctitle" --> 
<title>XHTML - Kicking And Screaming Into The Future</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META NAME="title" content="XHTML - Kicking And Screaming Into The Future">
<META NAME="description" content="XHTML - Kicking And Screaming Into The Future">
<META NAME="keywords" content="xhtml, free web templates, web template, site layouts, page layouts, page sets, graphic sets, web design, linkware, money, financial, floral, computer, hi tech, technology, skyline, building, patriotic, american, flag, automotive, christmas, baby, restaurant, halloween, sports, business">
<META NAME="rating" content="general">
<META NAME="distribution" CONTENT="global">
<META NAME="resource-type" CONTENT="document">
<META NAME="last-modified" CONTENT="2007/09/29">
<META NAME="robots" content="index,follow">
<META NAME="revisit-after" content="10_days">
<!-- #EndEditable --> 
<LINK REL=stylesheet HREF="http://www.afreewebtemplate.com/style.css" TYPE="text/css">
<script language="javascript">
function mailpage()
{
mail_str = "mailto:?subject=Check out this page called " + document.title;
mail_str += "&body=I thought you might be interested in this page called " + document.title;
mail_str += ". You can view it at, " + location.href.toString(); 
location.href = mail_str;
}
</script>
</head>
<body bgcolor="#E6E6FF" topmargin="0">
<STYLE type="text/css">
<!--
BODY
{
scrollbar-face-color: #001F5B;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #001F5B;
scrollbar-darkshadow-color: #001F5B;
scrollbar-shadow-color: #001F5B;
scrollbar-arrow-color: #BECFF1;
scrollbar-track-color: #BECFF1;
}
-->
</STYLE>
<!-- Kontera ContentLink™  --> 
<script type="text/javascript">
var dc_UnitID = 14;
var dc_PublisherID = 11120;
var dc_AdLinkColor = 'blue';
var dc_adprod='ADL';
</script>
<script type="text/javascript" src="http://kona.kontera.com/javascript/lib/KonaLibInline.js"></script>
<!-- Kontera ContentLink™  --> 
<table border="0" cellpadding="0" cellspacing="0" width="1000" align="center">
  <tr> <!-- Shim row, height 1. --> 
    <td><img src="../images/shim.gif" width="202" height="1" border="0"></td>
    <td><img src="../images/shim.gif" width="201" height="1" border="0"></td>
    <td><img src="../images/shim.gif" width="468" height="1" border="0"></td>
    <td><img src="../images/shim.gif" width="129" height="1" border="0"></td>
    <td><img src="../images/shim.gif" width="1" height="1" border="0"></td>
  </tr>
  <tr valign="top"> <!-- row 1 --> 
    <td colspan="4"><img name="layout_r1_c1" src="../images/layout_r1_c1.gif" width="1000" height="21" border="0"></td>
    <td><img src="../images/shim.gif" width="1" height="21" border="0"></td>
  </tr>
  <tr valign="top"> <!-- row 2 --> 
    <td rowspan="2" colspan="2"><a href="../index.html"><img name="layout_r2_c1" src="../images/layout_r2_c1.gif" width="403" height="90" border="0" alt="Home"></a></td>
    <td> 
      <div align="center"><a href="http://www.hooverwebdesign.com/flash_albums.html" target="_blank"><img name="layout_r2_c3" src="../images/468x60_flash_gallery.gif" width="468" height="60" border="0" alt="Flash Photo Gallery"></a></div>
    </td>
    <td rowspan="2"><img name="layout_r2_c4" src="../images/layout_r2_c4.gif" width="129" height="90" border="0"></td>
    <td><img src="../images/shim.gif" width="1" height="60" border="0"></td>
  </tr>
  <tr valign="top"> <!-- row 3 --> 
    <td><img name="layout_r3_c3" src="../images/layout_r3_c3.gif" width="468" height="30" border="0"></td>
    <td><img src="../images/shim.gif" width="1" height="30" border="0"></td>
  </tr>
  <tr valign="top"> <!-- row 4 --> 
    <td colspan="4"><img name="layout_r4_c1" src="../images/layout_r4_c1.gif" width="1000" height="41" border="0" usemap="#hoover_r2_c2Map"> 
      <map name="hoover_r2_c2Map"> <area shape="rect" coords="826,1,920,27" href="../links.html" alt="Related Links" title="Related Links"> 
        <area shape="rect" coords="730,-2,824,28" href="../resources.html" alt="Web Design Articles" title="Web Design Articles"> 
        <area shape="rect" coords="633,1,728,29" href="index.html" alt="Premium Web Templates" title="Premium Web Templates"> 
        <area shape="rect" coords="439,3,535,29" href="../terms.html" alt="Template Terms of Use" title="Template Terms of Use"> 
        <area shape="rect" coords="348,-2,438,26" href="../free-templates1.html" alt="Free Web Templates" title="Free Web Templates"> 
        <area shape="rect" coords="250,2,344,28" href="../index.html" alt="A Free Web Template Home" title="A Free Web Template Home"> 
        <area shape="rect" coords="538,1,632,29" href="../freegraphics/index.html" alt="Free Web Templates" title="Free Web Templates"> 
      </map></td>
    <td><img src="../images/shim.gif" width="1" height="41" border="0"></td>
  </tr>
  <tr valign="top"> <!-- row 5 --> 
    <td colspan="4"><img name="layout_r5_c1" src="../images/layout_r5_c1.gif" width="1000" height="1" border="0"></td>
    <td><img src="../images/shim.gif" width="1" height="1" border="0"></td>
  </tr>
  <tr valign="top"> <!-- row 6 --> 
    <td background="../images/layout_r6_c1.gif" bgcolor="#FFFFFF"> 
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr background="../images/layout_r6_c1.gif" valign="top"> 
          <td> 
            <table width="100%" border="0" cellspacing="1" cellpadding="0" bordercolor="#CCCCCC" bordercolorlight="#999999" bordercolordark="#666666">
              <tr> 
                <td colspan="2" bgcolor="#6699CC"><b><font color="#FFFFFF">Freebies</font></b></td>
              </tr>
              <tr> 
                <td bgcolor="#6699CC" width="1%" height="20">&nbsp;</td>
                <td width="99%" height="20"> <a href="../free-templates1.html">Free 
                  Web Templates</a> </td>
              </tr>
              <tr> 
                <td width="1%" bgcolor="#6699CC">&nbsp;</td>
                <td width="99%"><a href="../freegraphics/index.html">Free Web Graphics</a></td>
              </tr>
              <tr> 
                <td width="1%" bgcolor="#6699CC">&nbsp;</td>
                <td width="99%"><a href="index.html">Free Web Design 
                  Articles</a></td>
              </tr>
            </table>
            <table width="100%" border="0" cellspacing="1" cellpadding="0" bordercolor="#CCCCCC" bordercolorlight="#999999" bordercolordark="#666666">
              <tr> 
                <td colspan="2" bgcolor="#6699CC"><b><font color="#FFFFFF">Help 
                  &amp; Information</font></b></td>
              </tr>
              <tr> 
                <td bgcolor="#6699CC" width="1%" height="20">&nbsp;</td>
                <td width="99%" height="20"><a href="../index.html">Home</a></td>
              </tr>
              <tr> 
                <td bgcolor="#6699CC" width="1%" height="20">&nbsp;</td>
                <td width="99%" height="20"> <a href="../terms.html">Terms of Use</a></td>
              </tr>
              <tr> 
                <td width="1%" bgcolor="#6699CC">&nbsp;</td>
                <td width="99%"><a href="http://www.hooverwebdesign.com/templates">Premium 
                  Web Templates</a></td>
              </tr>
              <tr> 
                <td bgcolor="#6699CC">&nbsp;</td>
                <td><a href="../link-exchange.html">Link Exchange Form</a></td>
              </tr>
              <tr> 
                <td width="1%" bgcolor="#6699CC">&nbsp;</td>
                <td width="99%"><a href="../website-builders.html">Online Website 
                  Builders</a></td>
              </tr>
              <tr> 
                <td width="1%" bgcolor="#6699CC">&nbsp;</td>
                <td width="99%"><a href="../resources.html">Website Resources</a></td>
              </tr>
              <tr> 
                <td width="1%" bgcolor="#6699CC">&nbsp;</td>
                <td width="99%"><a href="../links.html">Web Links</a></td>
              </tr>
              <tr> 
                <td width="1%" bgcolor="#6699CC">&nbsp;</td>
                <td width="99%"><a href="../contact.html">Contact Us</a></td>
              </tr>
            </table>
            
          </td>
        </tr>
      </table>
    </td>
    <td bgcolor="#FFFFFF" colspan="3"> 
      <table width="100%" border="0" cellspacing="0" cellpadding="5">
        <tr> 
          <td> 
            <div align="center"></div>
            <table width="100%" border="0" cellspacing="0" cellpadding="5" bgcolor="#FFFFFF">
              <tr> 
                <td width="50%"> 
                  <p>&nbsp; <img src="../images/icon-book.gif" width="29" height="29" align="absmiddle"> 
                    Learn Website Design Tricks and Tips. <a href="http://www.afreewebtemplate.com/articles/">Click 
                    here</a>.</p>
                </td>
                <td width="50%" valign="bottom"> 
                  <div align="right"> </div>
                  </td>
              </tr>
            </table>
            <div align="center"> </div>
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr> 
                <td valign="top"> 
                  <div align="center"> </div>
                  </td>
              </tr>
            </table>
            <table width="98%" border="0" cellspacing="0" cellpadding="5" bordercolor="#CC6666" align="center">
              <tr valign="top"> 
                <td> 
                  <div align="center"> 
                    <h1>Free Website Design Web Templates<b><font face="Arial, Helvetica, sans-serif"><b><font face="Arial, Helvetica, sans-serif"><font size="2"><br>
                      <br>
                      </font><b><font face="Arial, Helvetica, sans-serif"><font size="2"><img src="../images/icon-article.gif" width="18" height="16" align="absmiddle"> 
                      <a href="index.html">Related articles</a> <img src="../images/icon-graphics.gif" width="18" height="16" align="absmiddle"> 
                      <a href="../freegraphics/index.html">Add graphics to your 
                      template</a> <img src="../images/icon-friend.gif" width="18" height="16" align="absmiddle"> 
                      <a href="javascript:mailpage()">Send this page to a friend</a> 
                      <br>
                      <script type="text/javascript"><!--
google_ad_client = "pub-8746590042519546";
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = "728x90_as";
google_ad_type = "text";
//2008-01-21: myprintablegreetings.com
google_ad_channel = "6444342160";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "0000FF";
google_color_text = "000000";
google_color_url = "0000FF";
//-->
</script>
                                            <script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
                      </font></font></b></font></b></font></b></h1>
                  </div>
                </td>
              </tr>
              <tr> 
                <td valign="top" width="66%"> 
                  <div align="center"> 
                    <div align="center"> 
                      <div align="center"> 
                        <div align="center"> 
                          <div align="center"> </div>
                          <div align="center"> 
                            <div align="center"> 
                              <div align="center"> 
                                <div align="center"> 
                                  <div align="center"> 
                                    <div align="center"> </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div align="center"> </div>
                        <div align="center"> 
                          <div align="center"> </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div align="center"></div>
                  <div align="center"> </div>
                  <div align="center"> </div>
                  <!-- #BeginLibraryItem "/Library/free-temps-navigation.lbi" -->
<div align="center"> <font face="Arial, Helvetica, sans-serif" size="2"><b> &gt;&gt; 
  [ <a href="http://www.afreewebtemplate.com/free-templates1.html">1</a> ] [ <a href="http://www.afreewebtemplate.com/free-templates2.html">2</a> 
  ] [ <a href="http://www.afreewebtemplate.com/free-templates3.html">3</a> ] [ <a href="http://www.afreewebtemplate.com/free-templates4.html">4</a> 
  ] [ <a href="http://www.afreewebtemplate.com/free-templates5.html">5</a> ] [ <a href="http://www.afreewebtemplate.com/free-templates6.html">6</a> 
  ] [ <a href="http://www.afreewebtemplate.com./free-templates7.html">7</a> ] [ <a href="http://www.afreewebtemplate.com/free-templates8.html">8</a> 
  ] [ <a href="http://www.afreewebtemplate.com/free-templates9.html">9</a> ] [ <a href="http://www.afreewebtemplate.com/free-templates10.html">10</a> 
  ] [ <a href="http://www.afreewebtemplate.com/free-templates11.html">11</a> ] [ <a href="http://www.afreewebtemplate.com/free-templates12.html">12</a> 
  ] [ <a href="http://www.afreewebtemplate.com./free-templates13.html">13</a> ] [ <a href="http://www.afreewebtemplate.com/free-templates14.html">14</a> 
  ] &lt;&lt; </b></font></div>
<!-- #EndLibraryItem --> 
                  <div align="center"><img src="../images/lines.gif" width="517" height="1"> 
                  </div>
                  <div align="center"> 
                    <div align="center"> 
                      <div align="center"> 
                        <div align="center"> 
                          <div align="center"><!-- #BeginEditable "content" --> 
                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                              <tr> 
                                <td valign="top"> 
                                  <div align="center"> </div>
                                  <table width="100%" border="0" cellspacing="0" cellpadding="5">
                                    <tr valign="top"> 
                                      <td height="881"> 
                                        <h1 align="center"><font face="Arial, Helvetica, sans-serif" size="2"> 
                                          </font>XHTML - Kicking And Screaming 
                                          Into The Future</h1>
                                        <p align="left"><font face="Arial, Helvetica, sans-serif" size="2"><!-- #BeginLibraryItem "/Library/adsense-300x250.lbi" --> 
<script language="JavaScript" type="text/javascript">
<!--
ctxt_ad_partner = "1917901875";
ctxt_ad_section = "10687";
ctxt_ad_bg = "";
ctxt_ad_width = 336;
ctxt_ad_height = 280;
ctxt_ad_bc = "FFFFFF";
ctxt_ad_cc = "FFFFFF";
ctxt_ad_lc = "0000FF";
ctxt_ad_tc = "000000";
ctxt_ad_uc = "999999";
// -->
</script>
<script language="JavaScript" src="http://ypn-js.overture.com/partner/js/ypn.js">
</script><!-- #EndLibraryItem --></font></p>
                                        <p>XHTML, the standard, was first released 
                                          back in 2000. Roughly five years later 
                                          we begin to see major websites revised 
                                          to use this standard. Even the favorite 
                                          whipping boy of standards-compliance 
                                          punditry, Microsoft, presents their 
                                          primary homepages, msn.com and microsoft.com 
                                          in XHTML. Standards compliant XHTML 
                                          sites are still the minority. The reason 
                                          is simple. When the W3C released the 
                                          new standard, the rest of the web running 
                                          on HTML did not cease to function. Nor 
                                          will the rest of the web, written in 
                                          various flavors of HTML, cease to function 
                                          any time soon. Without any pressing 
                                          need to conform to the new standard, 
                                          designers continue to use old, familiar 
                                          methods. These methods will perform 
                                          in any modern browser, so why bother 
                                          switching? </p>
                                        <p>These sentiments are similar to ones 
                                          I experienced. A kind of &quot;if it's 
                                          not broke, don't fix it&quot; mentality 
                                          sets in. Whether HTML was &quot;broken&quot; 
                                          or not is a different argument. To the 
                                          casual Internet user, their standards 
                                          are fairly direct. If a site displays 
                                          without noticeable error and functions 
                                          to their satisfaction, these standards 
                                          are met. Whatever additional steps the 
                                          browser took to make such display possible 
                                          is irrelevant to most users. This kind 
                                          of mentality is difficult to overcome 
                                          in designers accustomed to their old 
                                          methods. </p>
                                        <p>Technical obstacles to adopting XHTML 
                                          may be quite steep as well, especially 
                                          as regards large, existing websites 
                                          with complex scripting. Yet the time 
                                          may eventually come where yesterday's 
                                          &quot;tried and true&quot; HTML is little 
                                          more than an ancient language, unable 
                                          to be interpreted by modern electronic 
                                          devices. Whether one agrees with the 
                                          direction the W3C takes in the development 
                                          of HTML is irrelevant, you are just 
                                          along for the ride. With some perseverance, 
                                          getting the hang of XHTML is possible. 
                                          In form, it is not as different from 
                                          HTML as Japanese is from English. Knowing 
                                          HTML grants a basic knowledge of the 
                                          language, it simply becomes a matter 
                                          of learning a particular dialect. Even 
                                          an original nay-sayer such as myself 
                                          managed to do it. </p>
                                        <p>Benefits of XHTML <br>
                                          There are 2 primary benefits to using 
                                          XHTML. First is the strict nature of 
                                          valid XHTML documents. &quot;Valid&quot; 
                                          documents contain no errors. Documents 
                                          with no errors can be parsed more easily 
                                          by a browser. Though the time saved 
                                          is, admittedly, negligible from the 
                                          human user's point of view, there is 
                                          a greater efficiency to the browser's 
                                          performance. Most modern browsers will 
                                          function well in what's usually referred 
                                          to as &quot;quirks&quot; mode, where, 
                                          in the absence of any on-page information 
                                          about the kind of HTML they are reading, 
                                          present a &quot;best guess&quot; rendering 
                                          of a page. The quirks mode will also 
                                          forgive many errors in the HTML. Modern 
                                          browsers installed on your home computer 
                                          have the luxury of size and power to 
                                          deal with these errors. When browser 
                                          technology makes the leap to other appliances 
                                          it may not have the size and power to 
                                          be so forgiving. This is where the strict, 
                                          valid documents demanded by the XHTML 
                                          standard become important. </p>
                                        <p>The second benefit is in the code itself, 
                                          which is cleaner and more compact than 
                                          common, &quot;table&quot; based layout 
                                          in HTML. Though XHTML retains table 
                                          functionality, the standard makes clear 
                                          tables are not to be used for page layout 
                                          or anything other than displaying data 
                                          in a tabular format. This is generally 
                                          the primary obstacle most designers 
                                          have with moving to XHTML. The manner 
                                          in which many designers have come to 
                                          rely on to layout and organize their 
                                          pages is now taboo. Simple visual inspection 
                                          of XHTML code reveals how light and 
                                          efficient it is in comparison to a table 
                                          based HTML layout. XTHML makes use of 
                                          Cascading Style Sheets (CSS), which, 
                                          when called externally, remove virtually 
                                          all styling information from the XHTML 
                                          document itself. This creates a document 
                                          focused solely on content. </p>
                                        <p>XHTML makes use of &quot;div&quot; 
                                          tags to define content areas. How these 
                                          &quot;divisions&quot; are displayed 
                                          is controlled by CSS. This is known 
                                          as CSS-P, or CSS Positioning. Trading 
                                          in &quot;table&quot; tags for &quot;divs&quot; 
                                          can be tough. Learning a new way of 
                                          accomplishing an already familiar task 
                                          is generally difficult. Like learning 
                                          to use a different design program or 
                                          image editor, frustration can be constant. 
                                          Looking at &quot;divs&quot; as a kind 
                                          of table cell might be helpful, though 
                                          they are not entirely equivalent. As 
                                          required by the XHTML standard, always 
                                          make sure there is a DOCTYPE definition 
                                          at the top of the document. This is 
                                          not only required by the standard, but 
                                          it will force Internet Explorer 6, currently 
                                          the most common browser, to enter its 
                                          &quot;standards compliance&quot; mode. 
                                          IE6 and Firefox, both operating in standards 
                                          compliance mode will display XHTML in 
                                          much the same way. Not identical, but 
                                          far better than IE6 operating in quirks 
                                          mode. Learning how to iron out the final 
                                          differences between displays is the 
                                          final obstacle and can require a bit 
                                          of tweaking in the CSS. </p>
                                        <p>Clean code has multiple benefits. It 
                                          creates a smaller page size which, over 
                                          time, can save costs associated with 
                                          transfer usage. Though the size difference 
                                          may appear small, for someone running 
                                          a highly trafficked site, even saving 
                                          a few kilobytes of size can make a big 
                                          difference. Further, some believe search 
                                          engines may look more kindly on standards 
                                          complaint pages. This is only a theory, 
                                          though. In a general sense, any page 
                                          modification that makes the content 
                                          easier to reach and higher in the code 
                                          is considered wise. Search engines, 
                                          so it is believed, prefer to reach content 
                                          quickly, and give greater weight to 
                                          the first content they encounter. Using 
                                          XHTML and &quot;div&quot; layout allows 
                                          designers to accomplish this task more 
                                          easily. </p>
                                        <p>Conclusions <br>
                                          XHTML is the current standard set by 
                                          the W3C. The W3C continues development 
                                          of XHTML, and XHTML 2.0 will replace 
                                          the current standard in the future. 
                                          Learning and using XHTML today will 
                                          help designers prepare for tomorrow. 
                                          Valid XTHML produces no errors that 
                                          might slow down a browser, and the code 
                                          produced is clean and efficient. This 
                                          saves in file size and helps designers 
                                          better accomplish their search engine 
                                          optimization goals. Learning XHTML is 
                                          primarily about learning a new way to 
                                          lay out pages. Though frustrating at 
                                          first, the long term benefits far outweigh 
                                          any initial inconvenience. </p>
                                        <p>About the author:<br>
                                          Eric Lester worked in the IT industry 
                                          for 5 years, acquiring knowledge of 
                                          hosting, website design, before serving 
                                          for 4 years as the webmaster for Apollo 
                                          Hosting, <a href="http://www.apollohosting.com" target="_blank">http://www.apollohosting.com</a> 
                                          Apollo Hosting provides website hosting, 
                                          ecommerce hosting, vps hosting, and 
                                          web design services to a wide range 
                                          of customers.<font size="2" face="Arial, Helvetica, sans-serif"> 
                                          </font></p>
                                        </td>
                                    </tr>
                                  </table>
                                  <div align="left">&lt;&lt; <a href="index.html">Return 
                                    to Articles Home Page</a><font face="Arial, Helvetica, sans-serif" size="2"> 
                                    </font>&nbsp; &nbsp; </div>
                                </td>
                              </tr>
                            </table>
                            <script language="javascript">
function mailpage()
{
mail_str = "mailto:?subject=Check out this page called " + document.title;
mail_str += "&body=I thought you might be interested in this page called " + document.title;
mail_str += ". You can view it at, " + location.href.toString(); 
location.href = mail_str;
}
</script>
                            <!-- #EndEditable --></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
              </tr>
            </table>
            
          </td>
        </tr>
      </table>
      <div align="center"><b> <br>
        If you use our free web templates, please link back to us a <a href="http://www.afreewebtemplate.com">http://www.afreewebtemplate.com</a>.</b></div>
    </td>
    <td><img src="../images/shim.gif" width="1" height="393" border="0"></td>
  </tr>
  <tr valign="top"> <!-- row 8 --> 
    <td colspan="4"><img name="layout_r8_c1" src="../images/layout_r8_c1.gif" width="1000" height="13" border="0"></td>
    <td><img src="../images/shim.gif" width="1" height="13" border="0"></td>
  </tr>
</table>
<!-- #BeginLibraryItem "/Library/bottom.lbi" -->
<div align="center"><font size="1" face="Arial, Helvetica, sans-serif"><a href="../index.html"><font size="2">Home</font></a><font size="2"> 
  | <a href="../free-templates1.html">Free Web Templates</a> | <a href="../freegraphics">Free 
  Web Graphics</a> | <a href="../articles">Web Design Articles</a> | <a href="../resources.html">Resources</a><br>
  © 2002-2009 <a href="../index.html">A Free Web Template</a>. All Rights Reserved.</font></font><font color="#FFFFFF" size="2" face="Arial, Helvetica, sans-serif"> 
  </font></div>
<!-- #EndLibraryItem --> 
</body>
<!-- #EndTemplate --></html>

