Jquery UI Tabs and Semantic HTML: adding headings inside the unordered list items

Jquery UI Tabs and Semantic HTML: adding headings inside the unordered list items

By default, the jQuery UI tabs widget uses an unordered list to present its tabs.  When using tabs for a sites' main navigation, each tab represents a major section.  However, my understanding of proper semantic HTML--including how search engines give meaning to data--dictates that headings be used to denote major sections.

Is it possible and semantically valid to put headings within unordered list items?

E.g., with this basic HTML:

  1. <h1 ><a href="homepage.htm">Website Title</a></h1>

    <div id="tabs">
        <ul>
            <li><a href="#fragment-1"><span>Tab 1</span></a></li>
            <li><a href="#fragment-2"><span>Tab 2</span></a></li>
            <li><a href="#fragment-3"><span>Tab 3</span></a></li>
        </ul>
        <div id="fragment-1">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod         tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </div>
        <div id="fragment-2">
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod         tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </div>
        <div id="fragment-3">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod         tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </div>
    </div>

    </body>



















Adding <h2> tags inside the <li>:

  1. <h1 ><a href="homepage.htm">Website Title</a></h1>

    <div id="tabs">
        <ul>
            <li><h2><a href="#fragment-1"><span>Tab 1</span></a></h2></li>
            <li><h2><a href="#fragment-2"><span>Tab 2</span></a></h2></li>
            <li><h2><a href="#fragment-3"><span>Tab 3</span></a></h2></li>
        </ul>
        <div id="fragment-1">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod         tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </div>
        <div id="fragment-2">
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod         tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </div>
        <div id="fragment-3">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod         tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </div>
    </div>

















If so, why wouldn't you include them?  This assumes that the headings can styled with CSS to match the original look of the unordered list.