60

Can we use any other TAG in <ul> along with <li>?

like

<ul>
Some text here or <p>Some text here<p> etc
<li>item 1</li>
Some text here or <p>Some text here<p> etc
<li>item 1</li>
</ul>
1
  • 1
    What are you trying to achieve with this? I could understand it if you were using <ol> and trying to get a list continuation, but there doesn't seem to be any point putting a paragraph inside an unordered list wrapper (as well as it being invalid, obv).
    – bobince
    Jan 29, 2010 at 11:24

11 Answers 11

63

For your code to be valid you can't put any tag inside a <ul> other than an <li>.

You can however, put any block level element inside the <li>, like so:

<ul>
        <li>
            <h2>...</h2>
            <p>...</p>
            <p>...</p>
        </li>
</ul>
7
  • What about script, noscript, ev. ins and del? I want to mark some intervals with something that is not really rendered, but that may put into ul.
    – user1046334
    Feb 22, 2013 at 10:12
  • @herby : Why not put it after the <ul>?? Mar 19, 2013 at 9:28
  • @JonnyHaynes: I want something for marking begin and end of the interval. For example a range of lis inside ul. I have used empty <script>s and it works for me.
    – user1046334
    Mar 19, 2013 at 19:23
  • What are your thoughts on why around line 180, it has non-li elements directly inside a UL element? github.com/google/web-starter-kit/blob/master/app/index.html
    – johnsnails
    Jun 15, 2016 at 11:01
  • 1
    @johnsnails the code's invalid. Looks like a typo. I've raised a pull request to get it fixed. Jun 16, 2016 at 9:25
14

According to the W3C Recommendation, the basic structure of a list must be:

<UL>
   <LI> ... first list item...
   <LI> ... second list item...
   ...
</UL>

You can put p tags only inside of li tags, not as direct children of ul. The W3C Recommendation expressly states:

lists are made up of sequences of list items defined by the LI element

6

You can use template tag and it is totally legal. For example:

<ul>
<template>Some text here or <p>Some text here<p> etc</template>
<li>item 1</li>
<template>Some text here or <p>Some text here<p> etc</template>
<li>item 1</li>
</ul>
2
  • Any reference for this?
    – mikael1000
    Aug 16, 2018 at 23:32
  • 3
    It is given in MDN Allowed tags are LI, SCRIPT and TEMPLATE Jul 10, 2021 at 12:42
5

While you could have other tags inside (and it might work just fine), you shouldn't because it's not w3c-compliant. It also makes very little semantic sense.

Just create a simple page and run it throught the validator ( http://validator.w3.org/ ) and you'll see for yourself :)

2

No, this would be invalid markup. However, if you're trying to achieve a different look and feel for some of the lines, you can do this by adding a specific classname to any li tag instead. See below:

<ul>
    <li class="foobar">Label</li>
    <li>Some text here</li>
    <li>Some text here</li>
    <li class="foobar">Label</li>
    <li>Some text here</li>
    <li>Some text here</li>
</ul>
1

You can write such mark up but you shouldn't as it is non-compliant and you may get strange and unexpected results in different browsers.

2
  • 1
    no offense but this answer is not really helpful. I'm sure the OP knows they are physically capable of typing the markup; I'm sure they asked the question to find out whether it was valid or not.
    – chharvey
    Jul 21, 2016 at 14:56
  • 1) Well in all objective honesty, this answer could have been more helpful had you provided a link or example code or something. 2) My assumptions about the OP are not that far-fetched. It's clear in their code they are aware they can type the markup, and any reasonable person can infer as to why they asked the question. 3) And you're right, my comment probably wasn't that helpful—next time I'll just downvote without justifying?
    – chharvey
    Jul 22, 2016 at 11:46
1

we can't put any tag inside ul other than li. However, we can put other tags inside li, like this::

<ul>
<li>
  <div>
    <h2>Some Dummmy text</h2>
    <p> some content </p>
    --- 
    ---
  </div>
<li/>
<li><li/>
<li><li/>
----
----
</ul>
0

if your doing this to style a part of the list-element, you could do this

<ul>
  <li>normal text <span>bold text</span></li>
  <li>normal text <span>bold text</span></li>
</ul>

and then use the CSS

ul li {font-size: 12px; font-weight: normal;}
ul li span {font-size: 12px; font-weight: bold;}

hope this helps

1
  • 1
    Downvote: Why use a span with font-weight: bold; when you could easily and more importantly, it'll be more semantic to use the <strong> tag. Mar 19, 2013 at 9:30
0

Knockout.js specific answer, you can use the following comment syntax.

<ul>
    <li class="header">Header item</li>
    <!-- ko foreach: myItems -->
        <li>Item <span data-bind="text: $data"></span></li>
    <!-- /ko -->
</ul>

<script type="text/javascript">
    ko.applyBindings({
        myItems: [ 'A', 'B', 'C' ]
    });
</script>
0

HTML5 quote

https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-element says that ul has:

Content model: Zero or more li and script-supporting elements.

"Content model" means what we can put inside the element.

Therefore, from this we understand that only li things like script are allowed.

Compare that to an element like div which https://html.spec.whatwg.org/multipage/grouping-content.html#the-div-element says:

If the element is not a child of a dl element: flow content.

The definition of "flow content" is then a huge list that contains most tags:

a, abbr, address, ..., text

Also note how text is present in there. We then see its definition https://html.spec.whatwg.org/multipage/dom.html#text-content

Text, in the context of content models, means either nothing, or Text nodes. Text is sometimes used as a content model on its own, but is also phrasing content, and can be inter-element whitespace (if the Text nodes are empty or contain just ASCII whitespace).

"Inter-element whitespace is then defined as:

ASCII whitespace is always allowed between elements. User agents represent these characters between elements in the source markup as Text nodes in the DOM. Empty Text nodes and Text nodes consisting of just sequences of those characters are considered inter-element whitespace.

and "ASCII whitespace" as https://html.spec.whatwg.org/multipage/dom.html#text-content

ASCII whitespace is U+0009 TAB, U+000A LF, U+000C FF, U+000D CR, or U+0020 SPACE.

From all of this, besides the previously mentioned li and script tags, I believe only the above whitespaces are allowed within a ul.

The HTML5 validator agrees with that theory: https://validator.w3.org/nu/#textarea

-1

No. If it's list, it has list-items in it. I can't see any use for list with non-list-items in it; it's not list...

Not the answer you're looking for? Browse other questions tagged or ask your own question.