CODEWITHSUNDEEP
htmlhtml-listshtml-heading
Joel Micah Donovan
Joel Micah Donovan

Reputation: 321

Should HTML list items contain <h#> tags?

I'm trying to figure out if this is good coding style. I know it is valid, at least under HTML5, but I want to know whether its semantic meaning matches my intention.

<ol>
  <li>
    <h2>The First Item</h2>
    <p>a descriptive paragraph</p>
  </li>
  <li>
    <h2>The Second Item</h2>
    <p>a descriptive paragraph</p>
  </li>
  <li>
    <h2>The Third Item</h2>
    <p>a descriptive paragraph</p>
  </li>
</ol>

I'm using an ordered list because there is a logically sequential ordering to the items, but each item seems like it deserves a heading. Semantically, does this code make sense? Should I use some other kind of tag to denote the headers of the list items? Should I throw out the list entirely and only use the header tags? What is the best practice here?

Upvotes: 3

Views: 3754

Answers (5)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201628

It is valid in any version of HTML. But validity is a formal concept that allows all kinds of nonsense, too.

In practice, ol means a numbered list of items. It is not an abstract concept of a list, an ordered sequence. For example, a paragraph is logically a sequence of statements, and consecutive paragraphs constitute a sequence at a higher level. Even the letters of a word are an ordered sequence. We still don’t use ol for them. We use ol to set off an itemized list of fairly short items with browser-generated numbering, as in a recipe or a shopping list or a list of arguments supporting an idea. There is no specific upper limit on the length of an item, except in the sense that the longer they get, the less they are suitable for presenting them as a numbered list.

Thus, the odds are that if your list items need headings, you shouldn’t be using a list. On the practical side, if you use h2 as the first element inside an li of a ol, then the item number will by default appear in a much smaller font than the heading (and in normal weight, not bold). Whenever the default rendering is ridiculously odd, you should ask yourself whether you are using HTML markup the way it was really meant to be used.

The example consists of paragraphs preceded by their headings. There is no practical or theoretical reason why it should have markup other than just h2 or p, unless you need to treat the combination of a heading and a paragraph as unit, or the entire construct as a unit, for the purposes of styling or scripting. If you need that, use div, e.g.

<div class="foo">
  <div class="bar">
    <h2>The First Item</h2>
    <p>a descriptive paragraph</p>
  </div>
  <div class="bar">
    <h2>The Second Item</h2>
    <p>a descriptive paragraph</p>
  </div>
  <div class="bar">
    <h2>The Third Item</h2>
    <p>a descriptive paragraph</p>
  </div>
</div>

Replace foo and bar by names that reflect the content, or by generic names like section and subsection. (This depends partly on taste and coding style, partly on whether you intend to use similar markup for content with varying meanings.)

Alternatively, you could use section markup as per HTML5 drafts, but it causes problems because some old browsers don’t recognize at all, and it has no actual benefits in terms of functionality or appearance (though this, like anything, might change).

Using div with classes lets you style them easily (or process them in JavaScript), with no burden of special default rendering (as a numbered list with margins) that you would first need to prevent.

If you want the items to be numbered, the most robust way is the most obvious way: put the numbers into the headings, e.g. <h2>1 The First Item</h2>. If you think that flexibility in authoring, namely the possibility of reordering the parts, adding and removing the parts, without manually changing the numbers, is important enough to justify lack of numbers in oldest browsers, you can use CSS (automatic numbering and generated content) to insert the numbers numbers.

Upvotes: 6

user1752759
user1752759

Reputation: 643

If your list is not in a particular order, then use an unordered list. You may even consider using nested lists but in this case however, I would go with using a definition list.

http://jsfiddle.net/SmqFK/

Upvotes: 0

Jon P
Jon P

Reputation: 19792

Ask yourself if it is really a list. If so, in my opinion what you are doing is fine. Also look at CSS Counters and numbering: http://webdesign.about.com/od/css2/a/aa032807.htm

Upvotes: 0

DA.
DA.

Reputation: 40671

Semantically it's a bit redundant but it's perfectly fine if it makes sense with your content.

Upvotes: 1

Ben
Ben

Reputation: 673

It really depends what you are trying to accomplish. html is all about getting things to look good. Anyway, it seems fine to me. I also like this little tag.

<ol>
  <li>
      <fieldset>
        <legend><b>The Fist Item:</b></legend>
        a descriptive paragraph
      </fieldset>
  </li>
</ol>

Upvotes: -5

Related Questions