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 div
s everywhere.
But they were never meant to be used like this.