CODEWITHSUNDEEP
html
SheaFace
SheaFace

Reputation: 51

Does <li> always need to be nested between <ul> and <ol>? not <nav>

I know this question has been asked in various ways specifically with 'nav'

But I keep coming across web pages where 'li' is a child of 'section' or 'article' with no preceding 'ul or 'ol' parent elements. This is usually done in paragraphs. Is this a "correct" method? If so what other elements is it acceptable to omit the 'ol' and 'ul'.

'section' 'li' lorem epsom carpe julgulerum '/li'

( I know "correct" can be debatable especially when taking screen readers into account)

Thank you.

Upvotes: 4

Views: 4421

Answers (4)

Ilya Streltsyn
Ilya Streltsyn

Reputation: 13536

The pages where li elements are nested directly in the section, article, or even nav elements clearly have incorrect markup. Both WHATWG and W3C (both published and upcoming version) standards state that li elements can be used only in context of the list elements (either ol or ul, the WHATWG standard also adds the menu option while the W3C standard doesn't have the menu element anymore). There are no other contexts where this element can be used.

However, since the HTML standard is designed to be error-resistant and resilient, it also has the rules for the browsers how to deal with the incorrect markup. This is why the definition of the li element has the (rather confusing) "otherwise" part, which describes what the browser should do if it encounters this element in the context where it can not be used. The page with such incorrect markup would still be displayable and mostly functional, but it would be not as accessible as the page with the correct markup (e.g. screenreaders would not be able to announce that there is the list and how many items it contains).

The ul and ol element containing li elements can be contained in any sectioning element (and in general, in any element whose content model is "Flow content"). The li elements themselves technically can contain any "Flow content" (including sections and headings), but the W3C standard has the following note about it:

While it is conforming to include heading elements (e.g., h2) and Sectioning content inside li elements, it likely does not convey the semantics that the author intended. A heading starts a new section, so a heading in a list implicitly splits the list into spanning multiple sections. Sectioning content explicitly creates a new section and so splits the list into spanning multiple sections.

So if you have a list which has different sections/articles in its items, it's recommended to test this page for accessibility, to make sure that the way screenreaders present the information matches the author's intent.

Upvotes: 1

Liam
Liam

Reputation: 29694

I don't think it's quite as cut and dried as MDN make out. According to the WHATWG living standard:

Contexts in which this element can be used:

Inside ol elements.

Inside ul elements.

Inside menu elements.

But then later on it states:

The li element represents a list item. If its parent element is an ol, ul, or menu element, then the element is an item of the parent element's list, as defined for those elements. Otherwise, the list item has no defined list-related relationship to any other li element.

Which seems to suggest it would be legitimate to have an li not contained in one of these elements.

Looking at the user agent style sheet in Chrome it seems that all the "list styling" is contained in the parent element:

ul, menu, dir {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

and an li is simply an item with a display:list-item component:

li {
    display: list-item;
    text-align: -webkit-match-parent;
}

So it would seem to be legitimate to use a li outside of a list if you require an item with a display of list-item. How useful this would be outside of a list is open to debate.

Your other question:

'li' is a parent of 'section' or 'article'. Is this "correct"?

Yes an <li> can contain any other HTML. Just in the same way as any container can.

Upvotes: 2

Damini Mahawer
Damini Mahawer

Reputation: 207

If you just use li tag without nesting inside ul tag or ol tag the rendered result will be an unordered list with bullet icons preceding li tag. This is not a standard format though it gives exact same output as you use it nested inside ol tag or ul tag.

Upvotes: -1

KittMedia
KittMedia

Reputation: 7466

According to the Mozilla Developer Network page:

The HTML <li> element is used to represent an item in a list. It must be contained in a parent element: an ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>).

So yes, you need to nest any <li> element inside a list or menu. However a <li> element may contain nearly every other element inside. And also yes, an <article> or a <section> may be contained inside a <li>.

Upvotes: 4

Related Questions