A Single Article
Read it, comment, and share it with your friendsList headers: an idea
A couple weeks ago I thought of a solution to a nuisance I often have with lists in XHTML. My problem is that I can never find a good way to give a list a header. There seems to be 2 current ways of doing this, but neither one is very good. I thought of a way to fix this.
The problem is that right now I have two ways of marking a list such as:
Numbers
- one
- two
- three
The first way is to put the header outside the UL:
<h3>Numbers</h3>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
The other way is to put the header as a list item:
<ul>
<li><h3>Numbers</h3></li>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
The first method is better, but neither one is good. Putting the header outside the list means that it is not clear that the header is related specifically to the list, and putting the header inside the list means that the headers appears to be on the level of the list items, not a title for them.
So I figured, if tables can have their own headers, why not lists? My idea is a tag such as:
<lh>Numbers</lh>
This would be used as such:
<ul>
<lh>Numbers</lh>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
It could be used in a UL, OL, or DL. I think it would be very semantic and make it easy for users and coders alike to identify the relationship between a list and its title.
The question is, would this be practical? Could I suggest this as a potential tag for XHTML 2.0? Has something like it already been suggested?
Will we possibly use this instead? <h3 rel="list_numbers">Numbers</h3><ul title="list_numbers">...</ul> ?
Share your thoughts.
Get a Trackback link
5 Comments
Responses to my articleGreat idea, Christian, but you’ve been scooped: LH was part of the 1993 HTML3 specification in the UL, OL, and DL definitions, such as:
http://www.w3.org/MarkUp/html3/deflists.html
LH appears to have disappeared from the specs between HTML 3.0 and 3.2, but I wasn’t able to discover when or why it was deprecated. LH seems like a good idea to me.
Paul
Well, it looks like one way or another XHTML 2.0 will have a more semantic solution for this. I’m just curious now as to why the “lh” tag was dropped. It was a good tag!
I wholeheartedly agree with the need for . I was, in fact, looking for the “proper” way to add a list header when i found this post. I guess for now, i will use your first solution.
Yes, there was a listheading tag! I dont know what happened to it either?!
However, there is another alternative to the suggestions above.
However, at first glance the first way has less semantic meaning. The thought is to add a class or id to one element in the list. e.g.
(ul)
(li class=”important”)emphasis(/li)
(li)data(/li)
(/ul)
I checked around and it appears to be completely valid with the w3c!
I guess it boils down to deciding whether you need more control over the word or the semantic content of your page. (since crawlers read headings differently when indexing)
Another alternative that I just thought of, would be a hybrid of the two!!
Although using the (em) tag does not carry the same weight as a heading tag semanticly, it still holds more weight just text! Search engines, from what I understand, view (em) as more important than text, yet less the headers. I would think that by using both tricks, one can almost solve both problems. First ass a class or id to the first item in the list that you want to mark as the heading treating it with CSS styles, and then around the text itself add the (em) tags. e.g.
(ul)
(li class=”important”)(em)emphasis(em)(/li)
(li)data(/li)
(/ul)
To clean this up, we can use the (em) as a reference point in our CSS style sheet and get rid of class tag. e.g.
.mylist em (weight:bolder; color:blue;)
and then the xhtml can look like this.
(ul class=”mylist”)
(li)(em)emphasis(em)(/li)
(li)data(/li)
(/ul)
I would almost be willing to bet that 80% of the time the word that is getting emphasized in a list would actually have less importance than a heading. Therefore it actually makes more sense semanticly to not mark it as a heading!
(when I reference semantics in this comment, it’s referring to using the right things for the right job, and how the data is perceived by search engines and screen readers. Example is only use the heading tags for things that are actually headings. and so on)
have comments or suggestions, I would love to hear em’ . . .
Cheers,
Lokin
The only thing is that when you put the header in the list, you are putting it on the same level as the items in the list. I don’t like that, it doesn’t make sense.
Leave a comment
Share your thoughts with the worldYou can use Markdown, or you can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>Please keep comments respectful and on topic.
This form is guarded by Akismet, so don't waste your time trying to submit spam. It won't work. Ever.