Introduction
HTML5 provides web developers a new way to represent commands which need to be executed. This support comes in the form of the “command” markup element.
The HTML5 specification describes command as an abstraction behind UI elements like menu items, buttons and links (http://www.w3.org/TR/html51/interactive-elements.html#commands).
Once defined, the command can be reused across controls allowing reusability of frequently used logic.
The “command” markup element has a “type” attribute which can take one of the following values:
Another attribute on the “command” markup element is the “action” which indicates the effect of invoking the command will have.
Let us look at how a command markup element is declared in HTML5.
A simple command element of type “command” can be declared as under:
<command type=”command” label=”click” onclick=”click()”>Click the command
</command>
We can see that in the above declaration that the command element is declared like a button element.
A command of type “radio” can be declared under a container element like “menu” as under:
<menu type=”toolbar”>
<command type=”radio” radiogroup=”alignment” checked=”checked” label=”Left” icon=”left.png” onclick=”setAlign(‘left’)” />
</menu>
We can see in the above declaration that the command markup element has a checked and radiogroup attributes (which are typically associated with radio elements).
Browser Support
Today, no major browser supports the command markup element, hence we cannot see the command markup element in action.
Sample web page using command markup element
Here is a sample HTML5 web page which uses the command markup element.
<!DOCTYPE html>
<html>
<meta charset=”utf-8″>
<title>Command sample</title>
<body>
<command type=”command” label=”click” onclick=”click()”>Click the command</command>
<menu type=”toolbar”>
<command type=”radio” radiogroup=”alignment” checked=”checked” label=”Left” icon=”left.png” onclick=”setAlign(‘left’)” />
</menu>
<article>
<header>
<h1>Command sample</h1>
<p>Demo showing command markup element in HTML5</p>
</header>
<footer>
<h1></h1>
<p>HTML Goodies</p>
</footer>
</article>
<script type=”text/javascript”>
function click()
{
alert(“You have clicked me”);
}
</script>
</body>
</html>
In the above example, we have two instances of the command markup element, one of the command type and the other of the radiobutton type.
Because of the lack of support for command markup element in any of the mainstream, browsers, we have to wait to test this out.
Commands can be used without an id attribute, but in that case, they are anonymous commands.
The following HTML5 elements can be used to define a command:
If the command element does not have a defined activation behavior, the “click” event is invoked as the “Action” of the command.
Summary
In this article, we learned about the basics of the “command” markup element. You can download a copy of the sample code from <download link>.
The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.
Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved
Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.
