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>

9 comments

@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

45 Answered Questions

[SOLVED] How to disable text selection highlighting

23 Answered Questions

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

  • 2011-04-18 13:22:47
  • Satch3000
  • 1712385 View
  • 798 Score
  • 23 Answer
  • Tags:   html css

31 Answered Questions

[SOLVED] Is there a CSS parent selector?

  • 2009-06-18 19:59:36
  • jcuenod
  • 1897568 View
  • 3039 Score
  • 31 Answer
  • Tags:   css css-selectors

47 Answered Questions

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

  • 2010-08-18 02:50:35
  • Hailwood
  • 976372 View
  • 2031 Score
  • 47 Answer
  • Tags:   css css-transitions

33 Answered Questions

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

4 Answered Questions

34 Answered Questions

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

  • 2009-11-13 22:38:26
  • Jeff
  • 2732461 View
  • 1356 Score
  • 34 Answer
  • Tags:   html regex xhtml

22 Answered Questions

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

  • 2010-06-21 19:45:44
  • user246114
  • 1907033 View
  • 1897 Score
  • 22 Answer
  • Tags:   css

27 Answered Questions

[SOLVED] I need an unordered list without any bullets

  • 2009-06-22 13:57:53
  • praveenjayapal
  • 2031586 View
  • 2448 Score
  • 27 Answer
  • Tags:   html css

Sponsored Content