AMP: Building Accelerated Mobile Pages

Using list tags <ul> and <li> with <amp-list>

While amp-list is a powerful component, there's a small drawback to using it out-of-the-box: you can't control the list container markup. By default, amp-list will wrap the whole list with a div container like this:

<div role="list">...</div>

Then, for each item in the list, it will apply the content of your template, adding role="list-item". This will be fine in many circumstances. But if you really want to use <ul> or <ol> and <li> lists, then you're stuck. You could add <li> to your template, but there's no way to give the list an <ol> or <ul> parent.

There is a workaround, however. We can modify the server JSON response so that now items will be a single element array, and its only element ...