[whatwg] Web Applications 1.0 and Menu Labels
Matthew Raymond
mattraymond at earthlink.net
Sun Sep 19 11:37:53 PDT 2004
MENU LABELS AND THE <A> ELEMENT:
I was looking at the example in the "2.1. Tutorial" section of Web
Applications 1.0[1] when I noticed something. Here's a snipped version
of the example:
<menubar>
<li>
<a href="#file">File</a>
<menu id="file">
<li><button type="button" onclick="fnew()">New...</button></li>
<li><button type="button" onclick="fopen()">Open...</button></li>
</menu>
</li>
</menubar>
Notice that the <a> element is being used in place of a
<menulabel>[2]. This doesn't really make sense because it overloads the
semantics of <a> without reason. Consider the above example with
<menulabel> added:
<menubar>
<li>
<menulabel><a href="#file">File</a></menulabel>
<menu id="file">
<li><button type="button" onclick="fnew()">New...</button></li>
<li><button type="button" onclick="fopen()">Open...</button></li>
</menu>
</li>
</menubar>
The above example degrades in exactly the same way. The difference
is that only <menulabel> is used to label menus. As a result, webmasters
don't have to memorize an additional rule about the use of <a>.
Furthermore, since there's no apparent reason to have a hyperlink inside
a menu label, the UAs would need to ignore <a> elements inside
<menulabel> elements anyways.
THE <MENULABEL> AND <LABEL> ELEMENTS:
I noticed that <menulabel> in the WA1 spec is associated with the
immediate menu item:
"The semantic of the menulabel element is that it labels its
following sibling element, which must be a menu element. [...] A
menulabel whose next sibling element is not a menu element is
semantically [meaningless]."[3]
I like this method of association, and I'd like to see it used with
<label> as well. I've already seen people using markup like the
following in HTML4 web pages:
<label>Text</label><input type="text" name="text1">
So, by associating otherwise unassociated <label> elements such as
the one above with controls that are immediate siblings, we add semantic
meaning to many web pages that already use this kind of
association-by-proximity. I'd also like to see <menulabel> use the
association methods available with <label>, like implicit association...
<menubar id="appmenu">
<menulabel label="File">
<menu>
<command label="New..." onclick="fnew()"/>
<command label="Open..." onclick="fopen()"/>
<command label="Save" onclick="fsave()" id="save"/>
<command label="Save as..." onclick="fsaveas()"/>
</menu>
</menulabel>
</menubar>
...Or using the |for| attribute...
<menubar id="appmenu">
<menulabel label="File" for="file"/>
<menulabel label="Edit" for="edit"/>
<menulabel label="Help" for="help"/>
<menu id="file">
<command label="New..." onclick="fnew()"/>
<command label="Open..." onclick="fopen()"/>
<command label="Save" onclick="fsave()" id="save"/>
<command label="Save as..." onclick="fsaveas()"/>
</menu>
<menu id="edit">
<command label="Copy" onclick="ecopy()"/>
<command label="Cut" onclick="ecut()"/>
<command label="Paste" onclick="epaste()"/>
</menu>
<menu id="help">
<a href="help.html">Help</a>
<a href="about.html">About</a>
</menu>
</menubar>
<MENULABEL>, <COMMAND> ATTRIBUTES AND SUBMENUS:
There are surprisingly few examples in the WA1 specification
regarding submenus. Logically, a menu system with submenus might look
like this:
<menubar id="appmenu">
<menulabel label="File">
<menu>
<menulabel label="New...">
<menu>
<command label="New Document" onclick="fnew_document()"/>
<command label="New Image" onclick="fnew_image()"/>
<command label="New Database" onclick="fnew_database()"/>
</menu>
</menulabel>
<command label="Open..." onclick="fopen()"/>
<command label="Save" onclick="fsave()" id="save"/>
<command label="Save as..." onclick="fsaveas()"/>
</menu>
</menulabel>
</menubar>
As you can see, in this scenario, <menulabel> is at the same level
as <command> element.[4] It will naturally have some of the
characteristics of <command>. Therefore, some of the attributes of
<command> may need to be transferred to <menulabel> when it's used to
open a submenu rather than a menu. Here are some of the attributes we
should look at...
|title| - Some programs do have values like this for submenu labels.
|icon| - I'm not sure if this is necessary, but might be nice.
|hide| - You may not always want a submenu label visible.
|disabled| - You may not always want a submenu label enabled.
|default| - If the menu is being used for navigation, you may want
the submenu label to be shown as a default if the page you are currently
on is within the submenu (and also set as the default). I actually
worked on an in-house application where my supervisor specifically asked
for this kind of feature.
At any rate, I think there's still a lot to work on with the markup
for menus. Let's kick this conversation into high gear.
[1]<http://www.whatwg.org/specs/web-apps/current-work/#tutorial>
[2]<http://www.whatwg.org/specs/web-apps/current-work/#using>
[3]<http://www.whatwg.org/specs/web-apps/current-work/#the-menulabel>
[4]<http://www.whatwg.org/specs/web-apps/current-work/#the-command0>
More information about the whatwg
mailing list