Using headings inside lists

What are the dos and donts of using for example <h2> elements inside <li></li> tags?

Just make sure the heading levels make sense (i.e., don’t use an H4 after an H2 etc).

List items are block level elements and can contain any number of block or inline children.

Usually a list contains ‘inline’ elements. Although, this is not always the case, you can use ‘block’ level elements. I wouldn’t get too carried away with nesting though.


<ul>
	<li>Apples</li>
	<li>Oranges</li>
	<li>Blueberries</li>
	<li>Grapes</li>
</ul>

A series of names, words, or other items written, printed, or imagined one after the other: a shopping list; a guest list; a list of things to do.

In theory a list is just a group of related information. Therefore, as long as your content is related any amount of elements would be fine in my opinion.

For it to make sense properly each of the <li> elements would need to start with an <h2> and then be followed by the content to which the heading referred before starting the next <li> with its new heading for the next entry.

<ul>
<li><h2>heading</h2>
<p>some content</p></li>
<li><h2>heading</h2>
<p>some content</p></li>
<li><h2>heading</h2>
<p>some content</p></li>
</ul>

Cheers guys for your input!

<h2>Shoe Brands</h2>

<ul>
	<li>
		<h3>New Balance</h3>
		<p>.....</p>
	</li>
	
	<li>
		<h3>Nike's</h3>
		<p>.....</p>
	</li>
	
	<li>
		<h3>Adidas</h3>
		<p>.....</p>
	</li>			
</ul>

The main heading shouldn’t be in the <ul> itself as the heading is not part of the list (for example a shopping list - the heading “shopping list” isn’t on the list)

The only headings that should be in the list itself are subheadings as cooper shows above.

A little chart always helps:

Shopping List

  • Dairy
    • Milk
    • Cheese
      • Parmesan
      • Swiss
  • Frozen
    • Meat
    • Garlic Bread

Looking at the chart above its extremely easy to understand how it should be structured.