Question

I am using HTML Tidy to output pretty HTML source and as a final encoding check.

However it is taking a very simple list such as:

<ul id="navigation">
            <a href="index.php"><li>Summary</li></a>
            <a href="#"><li>Upload</li></a>
            <a href="accounts.php"><li>Accounts</li></a>
        </ul>

and converting it to this monstrosity:

 <ul id="navigation">
        <li style="list-style: none">
          <a href="index.php"></a>
        </li>
        <li id="active">Summary
        </li>

        <li style="list-style: none">
          <a href="#"></a>
        </li>
        <li>Upload
        </li>
        <li style="list-style: none">
          <a href="accounts.php"></a>
        </li>
        <li>Accounts
        </li>

      </ul>

How do I gracefully tell it to leave my list alone?

I have searched these configuration options, however I often find they are not named intuitively or explained properly.

Answer 1

The only answer: give it valid markup to start with. The only legal child element of a ul is an li. An a element cannot be a child of a ul.

<ul id="navigation">
    <li><a href="index.php">Summary</a></li>
    <li><a href="#">Upload</a></li>
    <li><a href="accounts.php">Accounts</a></li>
</ul>

If you want the whole li to be clickable, style the a element as display: block:

#navigation li a {
    display: block;
}