Ease of Maintenance

Moving to standards-oriented markup means that the documents become much easier to edit as they get smaller. Consider the following small little infobox.

Thanks to CSS, we can make it look exactly like that using the following markup:

<div class="arrowlist hardware">
   <h3>Hardware</h3> 
   <ul>
      <li>45 <a href="/powermac/">Power Mac</a> G4s</li>
      <li>3 15&#148; <a href="/powerbook">PowerBook</a> G4s</li>
      <li>6 <a href="/ibook/">iBooks</a></li>
      <li>1 Power Macintosh G4 Dual 1Ghz Server with external, 
      third-party RAIDs</li>
   </ul>
</div>

And this is what the same piece of the document used to look like when everything is driven by HTML-based layout.

<TABLE WIDTH="160" BORDER="0" CELLPADDING="0" CELLSPACING="0">
   <TR VALIGN="TOP" ALIGN="LEFT">
      <TD WIDTH="10"><IMG SRC="/www.apple.com/main/elements/spacer.gif" WIDTH="10" HEIGHT="1" BORDER="0" ALT=""></TD>
      <TD WIDTH="150" CLASS="L12G"><BR>
         <B>Hardware</B><BR>
         <TABLE WIDTH="150" BORDER="0" CELLPADDING="2" CELLSPACING="0">
            <TR VALIGN="TOP" ALIGN="LEFT">
               <TD WIDTH="10"><A HREF="/powermac/"><IMG SRC="/www.apple.com/main/elements/arrowa1a5a9.gif" WIDTH="5" HEIGHT="10" BORDER="0" ALT=""></A></TD>
               <TD WIDTH="140" CLASS="G10">45 <A HREF="/powermac/">Power Mac</A> G4s<BR></TD>
            </TR>
            <TR VALIGN="TOP" ALIGN="LEFT">
               <TD><A HREF="/powerbook/"><IMG SRC="/www.apple.com/main/elements/arrowa1a5a9.gif" WIDTH="5" HEIGHT="10" BORDER="0" ALT=""></A></TD>
               <TD>3 15&#148; <A HREF="/powerbook">PowerBook</A> G4s<BR></TD>
            </TR>
            <TR VALIGN="TOP" ALIGN="LEFT">
               <TD><A HREF="/ibook/"><IMG SRC="/www.apple.com/main/elements/arrowa1a5a9.gif" WIDTH="5" HEIGHT="10" BORDER="0" ALT=""></A></TD>
               <TD>6 <A HREF="/ibook/">iBooks</A><BR></TD>
            </TR>
            <TR VALIGN="TOP" ALIGN="LEFT">
               <TD><IMG SRC="/www.apple.com/main/elements/arrowa1a5a9.gif" WIDTH="5" HEIGHT="10" BORDER="0" ALT=""></TD>
               <TD>1 Power Macintosh G4 Dual 1Ghz Server with external, third-party RAIDs<BR></TD>
            </TR>
         </TABLE>
      </TD>
   </TR>
</TABLE>

Which one would you rather have to edit?