Chapter-11(HTML5) by ashish2expert


More Info
         11.1. The details element

The <details> element represents a disclosure widget from which the user can obtain
additional information or controls. The <summary> element which is child of this element, if
any represents the summary or legend of the details.

Attributes support:

open:- This Boolean attribute indicates that both the summary and the additional
information is to be shown to the user. If the attribute is absent, only the summary is to be


The following example shows the details element being used to hide technical details in a
progress report.

<section class="progress window">

<h1>Copying "Really Achieving Your Childhood Dreams"</h1>


 <summary>Copying... <progress max="375505392" value="97543282"></progress>


 <dt>Transfer rate:</dt> <dd>452KB/s</dd>

 <dt>Local filename:</dt> <dd>/home/rpausch/raycd.m4v</dd>

 <dt>Remote filename:</dt> <dd>/var/www/lectures/raycd.m4v</dd>

 <dt>Duration:</dt> <dd>01:16:27</dd>

 <dt>Color profile:</dt> <dd>SD (6-1-6)</dd>

 <dt>Dimensions:</dt> <dd>320×240</dd>




The following shows how a details element can be used to hide some controls by default:

<summary><label for=fn>Name & Extension:</label></summary>

<p><input type=text id=fn name=fn value="Pillar Magazine.pdf">

<p><label><input type=checkbox name=ext checked> Hide extension</label>


       11.2. The summary element

The <summary> element represents summary, caption, or legend for the rest of the contents
of <summary> element’s parent <details> element.

       11.3. The command element

This element represents a command that the user can invoke. 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.

Attributes support:

type:- The type attribute indicates the kind of command. Possible values in this state are:

   •   command:- This keyword maps to the command state.

   •   checkbox:- This keyword maps to the checkbox state.

   •   radio:- maps to the radio state.

Missing value default is the command state.

label:- The label attribute give the name of the command as shown to the user. This attribute
must be specified and must have a value that is not the empty string.

icon:- This attribute gives a picture that represent the command. If this attribute is specified,
the attribute’s value must contain a valid non-empty URL potentially surrounded by spaces.

disabled:- This Boolean attribute, if present, indicates that the command is not available in
the current state.

checked:- This Boolean attribute , if present, indicates that the command is selected. The
attribute must be omitted unless the type attribute is in either the checkbox state or the
radio state.
radiogroup:- The radiogroup attribute gives the name of the group of commands that will be
toggled when the command itself is toggled, for commands whose type attribute has the
value "radio". The scope of the name is the child list of the parent element. The attribute
must be omitted unless the type attribute is in the Radio state.

NOTE:- Command elements are not rendered unless they form a part of menu.

        11.4. The menu element

The <menu> element represents a list of commands.

NOTE:- The <menu> and <ul> both represents an unordered list of items. They differ in the
way that the <ul> element only contains items to display while <menu> element contains
interactive items to act on.

Attributes support:

type:- This attribute has three states in this element.

   •    context:- the commands of a context menu; the user can only interact with the
        commands if that context menu is activated

   •    toolbar:- a list of active commands that the user can immediately interact with

   •    list:- an unordered list of items (each represented by an <li> element), each of which
        represents a command that the user can perform or activate, or, if the element has no
        li element children, flow content describing available commands

label:- Gives the label of the menu.


<menu type="toolbar">


 <menu label="File">

 <button type="button" onclick="fnew()">New...</button>

 <button type="button" onclick="fopen()">Open...</button>

 <button type="button" onclick="fsave()">Save</button>

 <button type="button" onclick="fsaveas()">Save as...</button>



<menu label="Edit">

 <button type="button" onclick="ecopy()">Copy</button>

 <button type="button" onclick="ecut()">Cut</button>

 <button type="button" onclick="epaste()">Paste</button>




<menu label="Help">

 <li><a href="help.html">Help</a></li>

 <li><a href="about.html">About</a></li>




To top