Using <h3> within <ol> with ng-repeat

Issue

<ol ng-repeat="item in ctrl.items">
       <h3 ng-bind-html="item.title"></h3>
       <li ng-repeat="description in item.items" ng-bind-html="description">  </li>
</ol>

This is how it is rendered on screen:

**Title1**
   1. Desciption1
   2. Description2
**Title2**
   1. Description1

But as per the HTML standards, ol should only contain li, not h3.

Any idea how we can achieve this?

Solution

Why don't you just wrap this construction in one more block? Placing h3 tag in this case will be correct enough.

<div ng-repeat="item in ctrl.items">
    <h3 ng-bind-html="item.title"></h3>
    <ol>
          <li ng-repeat="description in item.items" ng-bind-html="description"></li>
    </ol>
</div>

In other case, if you would like to create list of lists and you really want to use <ol> for both you can do in the next way:

<ol ng-repeat="item in ctrl.items">
    <li>
        <h3 ng-bind-html="item.title"></h3>
        <ol>
            <li ng-repeat="description in item.items" ng-bind-html="description"></li>
        </ol>
    </li>
</ol>

In this way you have nested lists, but all h3 tags are inside the li tag, not inside the oldirectly. That is fine. HTML syntax rules allow headings tags in the li elements. I would prefer to use first variant, because it looks clearer and more understandable. But second one also is a valid HTML structure according to W3 validator:

Answered By - Artem Arkhipov