Prevent HTML Tidy adding li elements

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;
}

Answer 2

It's actually trying to correct your markup to make it conform to standards, your <li> tags should be around the <a> tags, not the other way around, maybe if you fix up that then it won't try to add extra items to the list.

You can remove the style part though, just modify your css to have:

ul.navigation li
{
    list-style: none;
}

Answer 3

Your list is invalid markup; an ul element may only contain li elements. Tidy is actually applying the most sensible general approach to fixing such broken markup: it turns any non-li content to an li element for which the list bullter is suppressed.

So manually change markup like

<a href="index.php"><li>Summary</li></a>

to

<li><a href="index.php">Summary</a></li>

which is probably what you want. This may require changes to CSS or JavaScript code, if they expect the current markup.

Answer 4

Move your <a> tags into <li>-s:

<li><a href="index.php">Summary</a></li>