CODEWITHSUNDEEP
html
Fred A
Fred A

Reputation: 1764

<output> vs <ul> in displaying list items

I know that <ul> is the common tag used to display <li> item, but when i read here, it shows how the <output> tag also can be used to display the <li> item.

Currently in my project, i'm using <output> tag to display list items instead of <ul>, and i want to know if that is a wrong thing to do? I've read the <output> description, and i understood that <output> tag was supposed to display mathematical result, yet it can be used to display list, as shown in the link above.

I worried that my approach of using <output> to display list is wrong, though the result i got from it is just the way i want it to be.. can someone enlighten me the the difference between <output> and <ul> in terms of displaying a list items on page?

Upvotes: 1

Views: 312

Answers (4)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

This is a misunderstanding. The proposed output element in HTML drafts allows phrase content (text-level content) only, so it cannot contain a li element or a ul element, even syntactically.

Upvotes: 0

omgmog
omgmog

Reputation: 616

The example you linked outputs the following:

<output id="list">
    <ul>
        <li>Something</li>
    </ul>
</output>

The li are not direct children of the output element, which is where I think you may be getting confused.

The output element is merely meant for outputting the result of a form action (calculation, or in the case of the example you linked, a file upload).

On whatwg.org there is no mention of the output element being a list, so if you're going to be trying to output li eleemnts to it, make sure they're going inside a ul.

Upvotes: 1

Patrick Witt
Patrick Witt

Reputation: 21

For <output>

It shows the results of the calculation

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    0<input type="range" name="b" value="50" />100 +
    <input type="number" name="a" value="10" /> =
    <output name="result"></output>
</form>

While in <ul>

It is unordered list and it shows the list in unordered form i.e in meaningless form

<ul>
  <li>first item</li>
  <li>second item      <!-- Look, the closing </li> tag is not placed here! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  </li>                
  <li>third item</li>
</ul>

Upvotes: 1

ProfMax
ProfMax

Reputation: 129

the <li> elements can be included anywhere, <output> and <ul> are just tags that are used to designate areas of the page used for various forms of content. In general, if it's a list, use a list with <ul> or <ol>.

Note: <output> is used for automatic calculations and would behave strangely in a <form>.

Upvotes: 1

Related Questions