views:

266

answers:

12

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.

+12  A: 

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.

Gregory Pakosz
My point about validation was unclear - what I meant to communicate is that my question is not "is this valid?", but "what will this break?" Do you have any examples of what this would break for end users?
jball
Suppose nobody is able to provide you a situation when it breaks TODAY, why would you rely on something that is allowed to break tomorrow? It's not valid, hence there is no guarantee it keeps being displayed properly.
Gregory Pakosz
I will be adding in the `<ul>` tags where they are missing. I'm just curious as to whether it could be causing issues that we don't know about.
jball
Fair enough -- in fact there are enough browser quirks out there even when the markup is valid to take the risk to throw garbage in the soup
Gregory Pakosz
Suprisingly enough, it looks like konqueror is the only browser that decided to not display it mostly like an unordered list. Though the left margin jumps in many of the browsers are pretty horrible.
jball
+1 for browsershots
Yar
A: 

Unexpected rendering behaviors on different browsers ? SEO ?

Bahadir Cambel
Sent from my iPhone.
Yar
+4  A: 

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

Tatu Ulmanen
I can and will be using `<ul>` tags. The question is more about what would this structure break for the end users?
jball
A: 

It would be up to the browser's implementation to decide what to do with it. If you really want to do this, test it out in all the browsers you want to support before using it.

Also note that the browsers' behaviours might change in the future.

Cameron
A: 

Dangerous? It won't blow anything up. It may cause issues if the layout is in any way important to you.

You just won't know how the browser will render it.

mark123
To be fair, I don't know how most browsers will display valid markup either.
jball
A: 

I cant really imagine why you wouldnt want to put the <ul> or <ol> tags in, they define the list. You then have control on how the list is displayed, not leaving it for the browser to decide, which is important. Missing them out is just writing invalid markup, yeah it will work in some browsers, but id definitely keep them in.

cast01
+1  A: 

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.

Joseph Silvashy
A: 
uotonyh
A: 

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

BalusC
A: 

As a web designer/developer you know you're way off when you start writing HTML that even Frontpage or Microsoft Word wouldn't generate.

Adhering to standards is a two-way street. If we want browser developers to create fast, reliable and consistent rendering engines we need to meet them half-way by creating consistent, clean and well-formed HTML.

pygorex1
+8  A: 

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.

alt text

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.

NerdStarGamer
+2  A: 

This is echoing everybody else's answer, in part: with any markup, there's an empirical question of whether it works or not on the browsers that you are testing it on. You tested it on all your browsers, and your happy. That's cool and is a huge part of the work.

But beyond that, there's also the hypothetical question of how well it might work on browser-platform combinations that you haven't tested, either because:

  1. you didn't include them in the test set
  2. they don't exist yet or
  3. they're not available for testing (web-crawlers, for instance)

For this set, which always becomes relevant sooner or later, you should follow standards -- when possible -- and use the enclosing UL or OL tags (in this case).

It's also worth mentioning that it makes the LI tags easier to track down if you are doing scripting, or if someone is doing scripting on your page (e.g., Greasemonkey).

Yar