Whats is a UL/OL for?

HTML & CSS
1

I am writing a PHP web util. one of it MANY functions will be to automate the general purpose building of lists ( for use as lists, content synapses, menus, etc)
It struck me that I could add a header option as well… ( for example a Navigation list could say “MENU” at the beginning…)

But I wondered where would be the semantically correct way to do do this?

I could make a <hx>Menu<hx> outside the UL… but wouldnt that mean the header doesn’t NOT belong to the list?

I also thought about putting the <hx> WITHIN the UL/OLs, after all isnt that what that block level of the list is for?

Thinking about this again, I thought that I wouldn’t even need the hx tags if I put “Menu” within the UL/OLs

about now , I had developed a headache… ;/ but I thought that I may need something to help with possible styling… so maybeit should be : “<uL><span>Menu</span>…”

I would love to get some opinions on which way you code your lists…

2

A header tag is a header for any contents below the header tag, until a header tag of the same or a higher level is reached. Just like a header tag above a paragraph tag is the header for that paragraph, a header above a list tag is the header for that list. Therefore, your initial suggestion is the semantical one.

Furthermore, a menu is almost always an unordered list, in that the sequence of the links in the menu would rarely be important to understanding the menu. While the ‘Home’-link is not usually placed in the middle of the menu, it would still be obvious that it would take the user to the front page.

For your need, this is what I would do:

<h*>Menu</h*>
<ul>
 <li><a href="...">Menu item</a>
 <li><a href="...">Menu item</a>
</ul>

Are you sure you need the ‘Menu’ header, though? A menu should be easily identifiable for any user, and should not require a header. One might argue that adding a ‘Menu’ header (which can be hidden using CSS) will allow screen reader users to quickly reach the menu by using the Skip to next header-function. On the other hand, I rarely see this, and must admid that I don’t do it myself.

3

Christian, I know that it’s not an absolute requirement to use the ending </li> tags in HTML 4, but shouldn’t we do it anyway?

[highlight=“HTML 4 Strict”]<li><a href=“…”>Menu item</a></li>



(Which brings up the obvious question of [I]why [/I]we should do it when it isn't a strict requirement.... Hopefully, someone with more esoteric knowledge than mine can answer this one definitively.)
4

There are no inherent technical benefits to closing end tags in HTML. There are, however, some considerations to take:

[list][]Internet Explorer has a bug, in which the parser does not close an open p tag when the next block-level tag is table. This means that the table will be treated as if it was inside the p, even though this is semantically impossible. Therefore, p tags should always be closed (or at least when they occur before a table).
[]Most of the table sub-elements have optional end tags, but omitting them can make the code excessively difficult to read.
[*]The bandwidth used to transmit the few extra bytes is no longer significant, and adding end tags has no technical disadvantages.[/list]

I usually do add end tags to all items, but for simple lists, I sometimes don’t, since I don’t know any bugs which effect omitted li end tags.

By the way, this is a great example of a non-verbose HTML 4.01 Strict table: :slight_smile:

<table>
 <thead>
  <tr>
   <th colspan=3>Header
 <tfoot>
  <tr>
   <th colspan=3>Footer
 <tbody>
  <tr>
   <th scope=col rowspan=2>Subheader
   <td rowspan=2>Data
   <td>Data
  <tr>
   <td>Data
</table>
5

We should do it so we get a “warm feeling” inside or something, and then can “pretend” it will easily convert to XHTML - if we are really that way inclined. It will be there within the DOM anyway… basically like mentioned above it is more for safety and ‘code consistency’ reasons.

Personally, I always close them as it’s one of things I didn’t like about HTML (that you could Omit several start or end tags) when teaching myself in '99.

6

I hear you. I still want to close the IMG tag, though I know intellectually it doesn’t make semantic sense to close it (it isn’t enclosing anything).

7

@dresden_phoenix

http://www.w3.org/TR/html401/struct/lists.html

8

Thanks,
but I suppose the problem is that i am not actually concerned with CSS yet. This is more how to create a PHP that writes proper semantic code. ANd thanks for the HX tip, thats, very good to know!

I guess I was wondering when it was ok to putt content in a UL that is not in an LI

9

Sorry, your title mislead me :slight_smile:

If the heading tag ‘heads’ the entire list (each list item), then it would make most sense to leave the <hx> tag outside of the list.

If each list item needs its own heading, then you would nest individual <hx> tags inside each <li>.

10

coop,
Again, quite handy to know. but I am still curious what us the UL for ???
is it simply a container that can only have LI as children (not even span/text?)

11

An [ul|ol] may only contain <li> elements as direct children.

As you may already know, you can nest arbitrary elements inside each <li> element, but never as direct children of the [ul|ol] elements.

12

Thanks :slight_smile: