Why is this UL and inline JS giving errors during HTML validation?

Question

I've just run the homepage of a site I'm working on through the w3c HTML validator and it's come back with 3 errors and 2 warnings. I've taken a look at them but can't see why they would be causing a problem. I've pasted them in below (I've removed URL's/strings etc as the site isn't quite ready to be made public yet). This is being validated against XHTML Transitional by the way.

The UL comes back with the following error: end tag for "ul" which is not finished <ul id='tabs'></ul>

<ul id='tabs'> 
<li> 
    <a href="/en/folder/folder/search?categories[]=cat1" class="tab1" title="tab_title">
        <img alt="img_alt" src="img_src" /> 
        <span> 
            tab1_text
        </span> 
    </a>
</li> 
<li> 
    <a href="/en/folder/folder/search?categories[]=cat2" class="tab2" title="tab_title">
        <img alt="img_alt" src="img_src" /> 
        <span> 
            tab2_text
        </span> 
    </a>
</li> 
<li> 
    <a href="/en/folder/folder/search?categories[]=cat3" class="tab3" title="tab_title">
        <img alt="img_alt" src="img_src" /> 
        <span> 
            tab3_text
        </span> 
    </a>
</li> 
<li> 
    <a href="/en/folder/folder/search?categories[]=cat4" class="tab4" title="tab_title">
        <img alt="img_alt" src="img_src" /> 
        <span> 
            tab4_text
        </span> 
    </a>
</li> 
<li> 
    <a href="/en/folder/folder/search?categories[]=cat5" class="tab5" title="tab_title">
        <img alt="img_alt" src="img_src" /> 
        <span> 
            tab5_text
        </span> 
    </a>
</li> 
<li> 
    <a href="/en/folder/folder/search?categories[]=cat6" class="tab6" title="tab_title">
        <img alt="img_alt" src="img_src" /> 
        <span> 
            tab6_text
        </span> 
    </a>
</li> 
<li> 
    <a href="/en/folder/folder/search?categories[]=cat7" class="tab7" title="tab_title">
        <img alt="img_alt" src="img_src" /> 
        <span> 
            tab7_text
        </span> 
    </a>
</li> 
<li> 
    <a href="/en/folder/folder/search?categories[]=cat8" class="tab8" title="tab_title">
        <img alt="img_alt" src="img_src" /> 
        <span> 
            tab8_text
        </span> 
    </a>
</li> 
</ul>

For the inline javascript, I'm getting 2 errors and 2 warnings all for the same thing - I have a simple if statement with && and the validator appears to be seeing this as HTML rather than javascript: character "&" is the first character of a delimiter but occurred as data and xmlParseEntityRef: no name

<script type='text/javascript'>
    if (weather_data != null && weather_data['data'] != null){
    display_weather();
}
</script>

The javascript is placed just before the body close tag at the end of the document. If you need to see the full source then let me know and I can send it over.

Answer 1

Not sure about the UL problem, but you might want to put CDATA around your script.

see http://www.w3schools.com/xml/xml_cdata.asp

Answer 2

XML doesn't support intrinsic CDATA so ampersands have special meaning in XHTML that they don't have in HTML, but you are probably serving your XHTML as text/html so see the compatibility guidelines for Embedded Style Sheets and Scripts

As for:

end tag for "ul" which is not finished

given

<ul id='tabs'></ul>

A list has to at least one list item in it. I'm guessing that you are populating it with JavaScript (hence your second example of a ul), but the validator doesn't care about that.

Answer 3

To validate the inline Javascript, you need to wrap the contents in CDATA tags, and add JS comments, to make it validate:

<script type='text/javascript'>
//<![CDATA[
if (weather_data != null && weather_data['data'] != null){
  display_weather();
}
//]]>
</script>

I checked the HTML list fragment you posted in the W3C validator and it validated successfully as HTML 4.01 Strict and XHTML 1.0 Strict. So the problem is somewhere else. Can you post a link to your entire page?