By Jitendra Vyas


2010-01-29 10:43:06 8 Comments

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>

11 comments

@Rahul_Daksh 2020-05-18 12:26:58

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>

@Ciro Santilli 郝海东冠状病六四事件法轮功 2020-03-27 12:15:27

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

@Jonny Haynes 2010-01-29 11:15:26

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>

@user1046334 2013-02-22 10:12:45

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.

@Jonny Haynes 2013-03-19 09:28:28

@herby : Why not put it after the <ul>??

@user1046334 2013-03-19 19:23:10

@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.

@johnsnails 2016-06-15 11:01:35

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

@Jonny Haynes 2016-06-16 09:25:30

@johnsnails the code's invalid. Looks like a typo. I've raised a pull request to get it fixed.

@chharvey 2016-07-21 14:45:02

what about the <meta> tag with an itemprop attribute?

@Jonny Haynes 2016-07-22 11:15:26

@chharvey not valid according to the W3C validator

@jps 2015-04-12 20:37:32

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>

@Umair Hamid 2015-02-24 07:30:57

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>

@mikael1000 2018-08-16 23:32:17

Any reference for this?

@drdiv 2013-09-11 16:53:08

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>

@pixeltocode 2010-01-29 13:43:55

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

@Jonny Haynes 2013-03-19 09:30:22

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.

@gingerbreadboy 2010-01-29 11:16:04

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.

@chharvey 2016-07-21 14:56:42

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 2016-07-22 11:46:30

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?

@marcgg 2010-01-29 10:51:32

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 :)

@ЯegDwight 2010-01-29 10:49:41

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

@Y. Shoham 2010-01-29 10:45:22

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...

Related Questions

Sponsored Content

33 Answered Questions

[SOLVED] Is there a CSS parent selector?

  • 2009-06-18 19:59:36
  • jcuenod
  • 2092859 View
  • 3234 Score
  • 33 Answer
  • Tags:   css css-selectors

14 Answered Questions

[SOLVED] I need an unordered list without any bullets

  • 2009-06-22 13:57:53
  • praveenjayapal
  • 2083936 View
  • 2535 Score
  • 14 Answer
  • Tags:   html css

26 Answered Questions

[SOLVED] CSS center text (horizontally and vertically) inside a div block

  • 2011-04-18 13:22:47
  • Satch3000
  • 1862935 View
  • 885 Score
  • 26 Answer
  • Tags:   html css

6 Answered Questions

[SOLVED] In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

23 Answered Questions

[SOLVED] Make the cursor a hand when a user hovers over a list item

  • 2010-06-21 19:45:44
  • user246114
  • 1992142 View
  • 1984 Score
  • 23 Answer
  • Tags:   css

35 Answered Questions

[SOLVED] RegEx match open tags except XHTML self-contained tags

  • 2009-11-13 22:38:26
  • Jeff
  • 2897900 View
  • 1517 Score
  • 35 Answer
  • Tags:   html regex xhtml

47 Answered Questions

[SOLVED] How to disable text selection highlighting

51 Answered Questions

[SOLVED] How can I transition height: 0; to height: auto; using CSS?

  • 2010-08-18 02:50:35
  • Hailwood
  • 1078301 View
  • 2177 Score
  • 51 Answer
  • Tags:   css css-transitions

33 Answered Questions

[SOLVED] How can I make Bootstrap columns all the same height?

32 Answered Questions

[SOLVED] Transitions on the CSS display property

  • 2010-07-25 22:52:49
  • RichardTape
  • 1552265 View
  • 1487 Score
  • 32 Answer
  • Tags:   css css-transitions

Sponsored Content