Can we use any other TAG inside along with ?

Question

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>

Answer 1

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>

Answer 2

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

Answer 3

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

Answer 4

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>

Answer 5

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>

Answer 6

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.

Answer 7

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>

Answer 8

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

Answer 9

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

Answer 10

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>

Answer 11

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