What exactly is the HTML5 <command> tag and what is the browser support

Question

I've read the HTML5 spec for <command> and found the information on this element very vague.

I've tried it out and found that it is not working in Chrome (latest version) and it is working on Safari (even older ones), sorry no FF (don't shoot me please) - Mac only test.

I can't understand what is the use of this element or even if I'm using it correctly.

I thank you in advance for any clarification about it!

Vevina

It works on Fx 3.6 from Windows thanks @cyberkiwi – Vevina

<command> actually doesn't use its innerText/HTML. It's a self closing tag with its label in a n attribute: <command label="Click" /> (which makes it very unbackwardcompatible, unfortunately). – Shluh

Answer 1

It works on Firefox 3.6.13 from Windows by the way.

The command element is meant to encapsulate something that you can do. It can be rendered within a menu (since a menu presents items you can invoke).

The idea

It provides an abstraction layer between UI and commands, so that you can make multiple UI elements refer to the same command. This gives you the flexibility of having one command element, rendered in a menu, that is also invoked via a URL in the middle of the page as well as a button at the bottom of the page. Disabling the command disables all access paths (url/button/menu) to the action behind the command.

Where we are at - as of 26 Jan 2010

There is currently very scarce information as to how linking it to multiple elements will actually work _{(since browsers have only just started implementing it!)} but that is one of its intentions.

At the present moment, the only documented usage is to provide a semantically unique tag to specify (without using <input> or <button> elements) that it is a command within a <menu>, thereby allowing "real" menu rendering by the browser (when implemented).

Footcloth

@cybrekiwi Thanks for the quick answer! I got a little bit lost with It provides an abstraction layer between UI and commands, so that you can make multiple UI elements refer to the same command could you please give me a very quick example? Couldn't this be done before? – Vevina

Shouldn't the year be 2011 since that's the year when this was posted? – Perni

Answer 2

The <command> element is meant to be an abstraction to let you refer to the same "command" from multiple menu entries or buttons. AFAIK the idea is something like

<command id="doThat" onclick="doThat()"></command>
<input type="button" command="doThat" value="click me to do that">
<menu command="doThat">This does that too</menu>

Then, if you want to indicate that the user can not do that in the context, you could do

document.getElementById('doThat').disabled=true;

and both the button and the menu entry would become disabled. Or you could assign a shortcut key to the command element, and either menu and button would respond to the shortcut. Things like that.

I'm not sure but I think this part of HTML5 is unfinished and likely will be removed before HTML5 is released as a final specification? As-is, it is indeed unclear how it is intended to work.

Albuminate

whatwg.org/specs/web-apps/current-work/multipage/… – Albuminate

one question, forgive my ignorance, shouldn't it always be <menu><command></menu>? – Vevina

(To be more specific there, <command> might get removed if it doesn't see more implementation before HTML5's release. As far as I know, nobody implemented it so far. Try <command type="checkbox"> in Firefox, I don't think it's supported.) – Albuminate

And to answer the question I didn't see before commenting :) The spec says: "A command can be part of a context menu or toolbar, using the menu element, or can be put anywhere else in the page, to define a keyboard shortcut." – Albuminate

The 15 Aug 2011 Editor's Draft also says, "Command elements are not rendered unless they form part of a menu." Thus the <command> in your code above should not display. :-( – Haggi

It's also very, very useful to add contextmenus on mobile. Only somehow it's more important to get WebGL and 3D CSS working... – Shluh

Answer 3

command has been removed in favor of menuitem. Further info:

• http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-December/038472.html
• http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-menu-element

Blooming

And menuitem is now deprecated as well :-) developer.mozilla.org/en-US/docs/Web/HTML/Element/menuitem – Talishatalisman

Answer 4

User-agents define the <a /> tag as interactive, but this element was only designed to make an hypertext reference without any idea of click.

This user-agent behavior became a standard, which is not the same with the longdesc attribute of the <img /> tag.

Because HTML was designed to structure information and contents, not to make interactions, the new version of HTML (5) tries to "palliate" this lack and introduces the <command /> tag to have interactions on HTML non-informative contents as "read more" anchors in example.

Note that "A command can be explicitly part of a context menu or toolbar" should also say that the <command /> can be used in another context and does not require <form /> tag instead of <input /> or <button />.

_{Thank you to Spontifixus & Daniel Kutik for correcting this answer}

Smart

Answer 5

The lists.whatwg.org link went dead - the related discussion can be found on:

http://lists.w3.org/Archives/Public/public-whatwg-archive/2012Dec/0264.html

Subject "[whatwg] and friends", From: Ian Hickson , Date: Sat, 29 Dec 2012 01:23:20 +0000 (UTC)

Hypno