A List of Mistakes

Yesterday we talked about bad CSS. Today, we’re going to talk about bad HTML.

Corey inherited a web page that, among other things, wanted to display a bulleted list of links. Now, you or I might reach for the ul element, which is for displaying bulleted lists. But we do not have the galaxy sized brains of this individual:

<table style="font-family: Verdana;">
  <tr>
     <td valign="top">
       •
     </td>
     <td>
       Google
       <br />
       <a href="http://www.google.com" target="_blank">http://www.google.com</a>
     </td>
    </tr>
    <tr>
     <td valign="top">
      •
     </td>
     <td>
       Yahoo
       <br />
       <a href="http://www.yahoo.com" target="_blank">http://www.yahoo.com/</a>
     </td>
   </tr>
   <tr>
     <td valign="top">
     •
     </td>
     <td>
       Bing
       <br />
       <a href="http://www.bing.com" target="_blank">http://www.bing.com</a>
     </td>
   </tr>
</table>

Here, they opted to use a table, where each list item is a row, and the bullet is a literal • symbol in the code.

For web developers of a certain age, we remember when laying out your entire page inside of tables was a common practice. This let you easily define distinct header, sidebar, and footer sections in an era before CSS and divs everywhere.

But they were never meant to be used like this.