Rethinking HTML Markup

2011-11-10

As the HTML standard evolves we are supposed to follow it faithfully. But the newest markup standard and official recommendations don't always make sense. For example, we are told to use list elements (ul, ol, li) to encapsulate anything that looks like a list. Using the recommended list markup, a list of words might look like:

<ul>
<li>kiwi>/li>
<li>orange</li>
<li>banana</li>
</ul>

In this case, the application of list markup makes sense. We need exactly this many elements to divide up the words into a list. Consider now the case of a list of links using the recommended markup:

<ul>
<li>
<a>kiwi</a>
</li>
<li>
<a>orange</a>
</li>
<li>
<a>banana</a>
</li>
</ul>

Here things have gotten less readable and more verbose. HTML markup is hierarchal. Conceptually, the children of any parent element automatically represent list items. In keeping, any parent that contains children automatically represents a list. We don't need the extra markup of the ul and li tags. Instead, we can and should go against official advice and simply write something like:

<div>
<a>kiwi</a>
<a>orange</a>
<a>banana</a>
</div>