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?
<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>
<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.
1) Under "Font Settings" on the left menu, the "Weight" dropdown shows no choices (and the dropdown arrow is truncated). 2) The "Error" category, normally under the "Highlight" category on the left menu, is completely missing.
This is true across the latest stable versions of Chrome, Firefox, and IE. It was working properly under jQuery UI 1.10.1.