Lists and the hr or seperator elements

Hi,
  I would like to suggest an alternative for <hr/> element or the 
suggested <seperator/> element for the following reason.

  In the past, I have used the <hr/> element for breaking up sections of 
lists (currently ul) used for navigation menus, similar to the way 
Netscape and other Mozilla based browsers store bookmark seperators in 
bookmarks.html, except I used <ul>.
  Just like menus in most applications use a seperator, for example:

File
  New
  Open
  _____
  Save
  etc...

  I have used a similar structure in my navigation menus, such as this 
example:
<ul>
    <li><a href="assessment/">Assessment</a>
        <ul>
            <li><a href="assessment/assignment1/">Assignment 1</a></li>
            <li><a href="assessment/assignment2/">Assignment 2</a></li>
            <li><hr/></li>
            <li><a href="assessment/exam/">Final Exam</a></li>
            <li><hr/></li>
            <li><a href="assessment/classtests/">Class Tests</a></li>
        </ul>
    </li>
    <!-- rest of menu omitted -->
</ul>

  In this example, there is a logical reason for seperation of 
assignments from exams, however, the use of a full nested list was 
inappropriate, since nested lists would produce a sub-menu style, 
whereas this is just a logical grouping of related items.  This method 
could be applied to <nl> using the <hr/> or <seperator/> elements 
(whichever is available), though, I believe this isn't as structured as 
it probably should be, thus I have thought of an alternative for use 
with lists.

  If there was a <ligroup> (list item group) tag available, then list 
items could then be logically grouped, thus providing a similar 
structure to that of <optgroup> for <select> in current HTML forms.
For example:

<!ELEMENT ligroup (label?, li+)>

<nl>
    <label href="assessment/">Assessment</label>
    <ligroup>
        <label>Assignments</label>
        <li href="assessment/assignment1/">Assignment 1</li>
        <li href="assessment/assignment2/">Assignment 2</li>
    </ligroup>
    <ligroup>
        <label>Exams</label>
        <li href="assessment/exam/">Final Exam</li>
    </ligroup>
    <ligroup>
        <li href="assessment/classtests/">Class Tests</li>
    </ligroup>
</nl>

  This would then allow a style sheet to be applied to display a line 
along the border to visually seperate, or even more fancy styles with 
background images, and allow non-visual agents to understand the grouping.
which would be rendered like:

NOTE: Suggested Style Only, to avoid making
      this appear as a presentation element,
      the style could be completely controlled
      with css.  The important factor is that
      it logically groups the list items.

Assessment
  _Assignments_
  Assignment 1
  Assignment 2
  ____Exams____
  Final Exam
  _____________
  Class Tests

  The <label> element within a <ligroup> tag appears along the border 
(much like the menus in the ICQ program).  If the label was omitted, the 
line would be solid as above.   I realise that some may argue that the 
label should be compulsory, which, ofcourse, is open for discussion.

  Current CSS capable user agents would render the <label> content below 
the border, which would still be understandable (if it were styled 
differently from the links using CSS)

  This <ligroup> tag could be applied to <ul>, <ol> and <nl>.  <dl> 
doesn't use <li> tags, so I don't think it would work unless a 
<dlgroup>, or similar, was introduced aswell.  Currently there is no 
other way to do this with div or any other element, since lists can only 
contain <li> or other lists.

NOTE: In spite of all this rambling I have done,
      if someone can find a way to do the same
      effect using pure nested lists and CSS
      class selectors, then this <ligroup> tag
      would be completely redundant.

  In conclusion, If grouping was introduced with <ligroup> or similar, 
then I do not believe there would be any structural reason to keep 
either <hr/> or the suggested <seperator/> tags since the line can be 
produced with CSS for lists, or any other element using styles.

CYA
...Lachy

Received on Thursday, 30 October 2003 01:55:42 UTC