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:
- <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>:
- <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.