Is using without enclosing tags dangerou

Question

What are the dangers of inserting <li>...</li> into a page without enclosing the item(s) in a <ul> block? For example:

<div style="border:solid 1px red;">
    <li>Item</li>
    <li>Another Item</li>
    <li>Yet Another Item</li>
</div>

Validation is the least of my concerns, I'm wondering what this might break in browsers for the end user's ability to view the page as intended.

Answer 1

I can't see why it wouldn't display correctly, while it's not meant to exist on it's own it'll render fine.

You should probably put it in a <ul> there are no benefits to the markup you are using over not doing it properly.

Answer 2

Using invalid markup like your example can cause unexpected behavior in different pages. If you use valid markup, browsers will (or should) display your content based on the spec. But if you use invalid markup, the browser will try and interperet the markup and display the page how it thinks you meant it to be. Sometimes they will display it how you want, sometimes not. Here's an example from Firefox 3.5 on a Mac.

The first list is your code, but with the proper <ul> tag replacing the <div> tag. The second list is your code exactly. Notice that the second list is missing the default margins on the left and bullets.

Basically, nothing will die if you use invalid markup like this, but it's really bad practice since it will lead to unexpected and inconsistent results.

Answer 3

That's the same as using <td> tags inside <p>. Sure, it might work somehow on some browsers, but it will definitely be broken. The behaviour of such construct is undefined, there are no guarantees on how it will work on different browsers. Not to speak of accessibility, screen reader programs would be quite perplexed about this kind of structure.

Why can't you use a proper <ul> or <ol> tag? It can be styled and handles the same way as a <div>.

Answer 4

It's not valid markup at all. If it gets displayed correctly, it's only a matter of luck.

As you seem to define dangerous by "break in browsers for the end user's ability to view the page as intended", then yes it's dangerous.

Browsers are trying their best to compensate for invalid markup but there is no guarantee at all your page gets displayed correctly.

You say validation is the least of your concerns, please reconsider and have a look at Why Validate?. If you care about your page being displayed correctly with no quirks, then validate.

Finally, HTML Tidy may help you fixing existing html.

EDIT: I submitted your fragment to browsershots.org to see how it gets rendered by different browsers.

Answer 5

Most browsers will probably take that and run with it, but there are two different list-types avaiable: Unordered <ul> and ordered lists <ol>, where an ordered list has numbers for each item.

Instead of using <li> tags, you could use a "•" bullet character (&bull;), and then a <br /> at the end of each line.

Answer 6

I wouldn't rely on unspecified behaviour. Just replace that <div> by <ul> and use CSS to style it.