converted to proposed typographic conventions
authorschepers
Thu, 17 Dec 2009 18:45:59 +0900
changeset 223 f8c541df10d3
parent 222 eb84ec0517d3
child 224 4603879899ac
converted to proposed typographic conventions
html/DOM3-Events.html
--- a/html/DOM3-Events.html	Thu Dec 03 14:33:53 2009 +0900
+++ b/html/DOM3-Events.html	Thu Dec 17 18:45:59 2009 +0900
@@ -6,46 +6,14 @@
     <title>Document Object Model (DOM) Level 3 Events Specification</title>
     <link rel="author" href="mailto:[email protected]" />
     <link rel="help" href="http://www.w3.org/DOM/" />
+    
     <link rel="alternate stylesheet" type="text/css" media="screen" title="geek" href="geek.css" />
     <link rel="stylesheet" type="text/css" href="./spec.css" />
+    
+    <link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/w3c-tr.css" />
     <link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-ED" />
     <!-- <link rel="local stylesheet" type="text/css" href="W3C-WD.css" /> -->
     <style type="text/css">
-      .issue {
-        background-color: #ff6347;
-        color: white;
-      }
-      
-      .issue a {
-        color: #ffd700;
-      }
-      
-      .note {
-        color:green;
-      }
-      
-      .warning {
-        color: #8b0000;
-      }
-      
-      .proposal {
-         border:1px solid green;
-         background-color: yellow;
-         color: green;
-      }
-      
-      .example {
-        border:1px solid #ffa500;
-        background-color: #fffacd;
-        padding: 1em;
-      }
-
-      .atrisk {
-        border:1px solid red;
-        background-color: #fff0f5;
-        color: gray;
-      }
-
       /* style for heading links */
       a[id]:hover:after { 
         content: "   #" attr(id) " ยง "; 
@@ -204,11 +172,11 @@
       </p>
       <h1 id="Overview-title">Document Object Model (DOM) Level 3 Events Specification</h1>
 <!-- @@@ -->
-      <h2 id="Overview-W3C-doctype">W3C Editor's Draft <span class="date">30 October 2009</span></h2>
+      <h2 id="Overview-W3C-doctype">W3C Editor's Draft <time datetime="2009-12-14">17 December 2009</time></h2>
       <dl>
         <dt>This version:</dt>
         <dd>
-          <a href="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html?rev=1.107">http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html?rev=1.107</a>
+          <a href="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html?rev=1.108">http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html?rev=1.108</a>
         </dd>
         <dt>Latest stable version:</dt>
         <dd>
@@ -216,7 +184,7 @@
         </dd>
         <dt>Previous version:</dt>
         <dd>
-          <a href="http://dev.w3.org/cvsweb/~checkout~/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html?rev=1.106">http://dev.w3.org/cvsweb/~checkout~/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html?rev=1.106</a>
+          <a href="http://dev.w3.org/cvsweb/~checkout~/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html?rev=1.107">http://dev.w3.org/cvsweb/~checkout~/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html?rev=1.107</a>
         </dd>
         <dt>Editor's Draft:</dt>
         <dd>
@@ -254,7 +222,7 @@
         knowledge of a patent which the individual believes contains <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
         Claim(s)</a> must disclose the information in accordance with <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
         6 of the W3C Patent Policy</a>.</p>
-      <p id="working-draft">This is the <span class="date">30 October 2009</span> Editor's Draft version of the "Document Object Model (DOM) Level 3 Events" specification.  This document was previously published as a W3C Note, pending further feedback from implementers, and is now being revised to reflect the current state of implementation.  It is expected that this specification will progress to Recommendation status.</p>
+      <p id="working-draft">This is an Editor's Draft version of the "Document Object Model (DOM) Level 3 Events" specification.  This document was previously published as a W3C Note, pending further feedback from implementers, and is now being revised to reflect the current state of implementation.  It is expected that this specification will progress to Recommendation status.</p>
       <p id="this-document-is-produced-by-the-web-app">This document is produced
         by the <a href="http://www.w3.org/2008/webapps/">Web Applications WG</a>,
         part of the <a href="http://www.w3.org/2006/rwc/Activity">Rich Web
@@ -641,7 +609,7 @@
             
             <dt id="conf-authors">Authors and content</dt>
             <dd>
-              <p>An author creates conforming DOM Level 3 Events content if that content uses the <a class="def" href="#glossary-event-type">event types</a> and <a href="#event-flow">Event dispatch and DOM event flow</a> model, consistent in a manner as defined in this specification.  An author should not use features of this specification marked as <a class="def" href="#glossary-deprecated">deprecated</a><!--  or <a class="def" href="#glossary-obsolete">obsolete</a> -->, but should rely instead upon replacement mechanisms defined in this specification and elsewhere.  Conforming content must use the semantics of the interfaces and <a class="def" href="#glossary-event-type">event types</a> as described in this specification, and must follow best practices as described in accessibility and internationalization guideline specifications. <span class="issue">@@ define specific guideline specifications.</span></p>
+              <p>An author creates conforming DOM Level 3 Events content if that content uses the <a class="def" href="#glossary-event-type">event types</a> and <a href="#event-flow">Event dispatch and DOM event flow</a> model, consistent in a manner as defined in this specification.  An author should not use features of this specification marked as <a class="def" href="#glossary-deprecated">deprecated</a><!--  or <a class="def" href="#glossary-obsolete">obsolete</a> -->, but should rely instead upon replacement mechanisms defined in this specification and elsewhere.  Conforming content must use the semantics of the interfaces and <a class="def" href="#glossary-event-type">event types</a> as described in this specification, and must follow best practices as described in accessibility and internationalization guideline specifications. <i class="issue" id="issue-guidelines"><strong>Issue:</strong> define specific guideline specifications.</i></p>
             </dd>
             
             <dt id="conf-specs">Specifications and host languages</dt>
@@ -671,15 +639,15 @@
             </li>
             <li id="extended-feature-string">The extended feature string for each event type defined in DOM Level 3 Events shall be the base feature string "<code>Events</code>", followed by the period character ("."), followed by the name of that event type, with the optional version string "<code>3.0</code>", indicating that the <a class="def" href="#glossary-user-agent">user agent</a> supports that specific event type in the manner described in the appropriate <a href="#conform-module">conformance section</a>.  For example, the feature string for the <a class="eventtype" href="#event-type-textInput"><code>textInput</code></a> event would be "<code>Events.textInput</code>", with the optional version string "<code>3.0</code>".
               <ul>
-                <li><span class="assert must">Because this specification does not retroactively define extended feature strings for DOM Level 2 Events, using the <a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-5CED94D7"><code>DOMImplementation.hasFeature()</code></a> method with extended feature strings with a version string "<code>2.0</code>" must return false.  <span class="warning"><strong>Warning:</strong> Because this mechanism for discrete feature strings was not defined in earlier DOM Events specifications, older user agents which support those specifications but not this one may report false negatives in terms of supporting particular features.  For example, a browser which supports the the <a class="eventtype" href="#event-type-click"><code>click</code></a> event type as defined in DOM Level 2 Events, but does not support this specification, is likely to return <code>false</code> to the method call <code>document.implementation.hasFeature("Events.click", "")</code>.  The author should not take this for definitive proof that the implementation does not support the <a class="eventtype" href="#event-type-click"><code>click</code></a> event type, but rather that other means of testing are required in that instance.  This method is best used as a means to detect positive results, not negative ones.  However, it is expected that this will prove of sufficient utility in many cases to justify its use.</span></li>
+                <li><span class="assert must">Because this specification does not retroactively define extended feature strings for DOM Level 2 Events, using the <a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-5CED94D7"><code>DOMImplementation.hasFeature()</code></a> method with extended feature strings with a version string "<code>2.0</code>" must return false.  <span class="warning"><strong>Warning!</strong> Because this mechanism for discrete feature strings was not defined in earlier DOM Events specifications, older user agents which support those specifications but not this one may report false negatives in terms of supporting particular features.  For example, a browser which supports the the <a class="eventtype" href="#event-type-click"><code>click</code></a> event type as defined in DOM Level 2 Events, but does not support this specification, is likely to return <code>false</code> to the method call <code>document.implementation.hasFeature("Events.click", "")</code>.  The author should not take this for definitive proof that the implementation does not support the <a class="eventtype" href="#event-type-click"><code>click</code></a> event type, but rather that other means of testing are required in that instance.  This method is best used as a means to detect positive results, not negative ones.  However, it is expected that this will prove of sufficient utility in many cases to justify its use.</span></li>
                 <li><span class="assert must">A <a class="def" href="#glossary-user-agent">user agent</a> which supports an event type in a manner conforming to DOM Level 2 Events but not conforming to DOM Level 3 Events must not report a positive result to that extended feature string, regardless of the value of the version string.</span></li>
                 <li><span class="assert must">A specification or <a class="def" href="#glossary-host-language">host language</a> which <a href="#conf-specs">conforms</a> to DOM Level 3 Events, and which extends this specification in a manner consistent with the <a href="#conf-extend">extension conformance criteria</a>, may define extended feature strings for event types defined in that specification.  These extended feature strings may be used with the feature string "<code>Events</code>"; for example, support for the SVG <code>zoom</code> event type might be tested using the method call <code>document.implementation.hasFeature("Events.zoom", "")</code>.<!-- These extended feature strings may be used with the <a href="#base-feature-string">base feature string</a> of that specification, or with the feature string "<code>Events</code>"; for example, support for the SVG <code>zoom</code> event type might be tested using the method call <code>document.implementation.hasFeature("Events.zoom", "")</code> or the hypothetical <code>document.implementation.hasFeature("SVG.events.zoom", "")</code>. --></span></li>
               </ul>
             </li>
-            <li>For backwards compatibility, each interface defined in DOM Level 3 Events also has a feature string, which may act as a base feature string or as an extended feature string.  If used as a base feature string, it must follow the conventions of the <a href="#base-feature-string">primary base feature string</a> (e.g., "<code>KeyboardEvents</code>", with the optional version string "<code>3.0</code>"); if used as an extended feature string, it must follow the conventions of the <a href="#extended-feature-string">extended feature strings for event types</a> (e.g., "<code>Events.KeyboardEvents</code>", with the optional version string "<code>3.0</code>").  In either case, the <a class="def" href="#glossary-user-agent">user agent</a> must only report a positive result if it supports that specific interface and all associated event types in the manner described in the appropriate <a href="#conform-module">conformance section</a>.  <span class="warning"><strong>Warning:</strong> because this is not as specific as testing for a specific event type and may thus be less likely to be accurate, authors are encouraged to use the feature strings for event types rather than interfaces.</span></li>
+            <li>For backwards compatibility, each interface defined in DOM Level 3 Events also has a feature string, which may act as a base feature string or as an extended feature string.  If used as a base feature string, it must follow the conventions of the <a href="#base-feature-string">primary base feature string</a> (e.g., "<code>KeyboardEvents</code>", with the optional version string "<code>3.0</code>"); if used as an extended feature string, it must follow the conventions of the <a href="#extended-feature-string">extended feature strings for event types</a> (e.g., "<code>Events.KeyboardEvents</code>", with the optional version string "<code>3.0</code>").  In either case, the <a class="def" href="#glossary-user-agent">user agent</a> must only report a positive result if it supports that specific interface and all associated event types in the manner described in the appropriate <a href="#conform-module">conformance section</a>.  <span class="warning"><strong>Warning!</strong> because this is not as specific as testing for a specific event type and may thus be less likely to be accurate, authors are encouraged to use the feature strings for event types rather than interfaces.</span></li>
           </ul>          
                     
-          <p class="warning"><strong>Warning:</strong> This specification does not provide a means to guarantee that any given element of a <a class="def" href="#glossary-host-language">host language</a> is capable of generating or dispatching an event of any given <a class="def" href="#glossary-event-type">event type</a> (e.g., an HTML <code>'img'</code> element may not dispatch a <a class="eventtype" href="#event-type-textInput"><code>textInput</code></a> event), or what the attributes of that event will be beyond those defined in this specification (e.g., the host language may add attributes to the event object).  A  <a class="def" href="#glossary-host-language">host language</a> may provide a different means to do so, including its own relevant feature strings.</p>
+          <p class="warning"><strong>Warning!</strong> This specification does not provide a means to guarantee that any given element of a <a class="def" href="#glossary-host-language">host language</a> is capable of generating or dispatching an event of any given <a class="def" href="#glossary-event-type">event type</a> (e.g., an HTML <code>'img'</code> element may not dispatch a <a class="eventtype" href="#event-type-textInput"><code>textInput</code></a> event), or what the attributes of that event will be beyond those defined in this specification (e.g., the host language may add attributes to the event object).  A  <a class="def" href="#glossary-host-language">host language</a> may provide a different means to do so, including its own relevant feature strings.</p>
           
         </div>
         
@@ -695,7 +663,7 @@
             <p class="example">This is an example.</p>
             <p class="atrisk">This is a feature at risk, which is likely to be removed from the specification.</p>
             <p class="proposal">This is a proposed new feature.</p>
-            <p class="issue">@@ This is an open issue.</p>
+            <p class="issue"><strong>Issue:</strong> This is an open issue.</p>
           </div>
           <p>Feedback on features at risk, new features, and open issues is especially appreciated.</p>
           
@@ -720,7 +688,7 @@
           <dd>The process by which an <a class="def" href="#glossary-event">event</a> can be handled by one of the target ancestors before being handled by the <a class="def" href="#glossary-proximal-event-target">proximal event target</a>.</dd>
 
           <dt id="glossary-character-value">character value</dt>
-          <dd>In the context of key values, a character value is a string representing a single Unicode character, such as a letter or symbol, as a UTF-16 character escape (e.g. <code class="value">'\u0041'</code> for the Latin Capital Letter A key, <code class="value charval">A</code>.). <span class="issue">@@ this may not be the best way to represent a character value, see notes in key values.  Also, is "character value" the best term?</span></dd>
+          <dd>In the context of key values, a character value is a string representing a single Unicode character, such as a letter or symbol, as a UTF-16 character escape (e.g. <code class="value">'\u0041'</code> for the Latin Capital Letter A key, <code class="value charval">A</code>.). <i class="issue" id="issue-character_value"><strong>Issue:</strong> this may not be the best way to represent a character value, see notes in key values.  Also, is "character value" the best term?</i></dd>
 
           <dt id="glossary-dead-key">dead key</dt>
           <dd>A dead key is a key or combination of key that produces no character by itself, but which in combination or sequence with another key produces a modified character, such as a character with diacritical marks (e.g. <code>&#xF6;</code>, <code>&#xE9;</code>, <code>&#xE2;</code>).</dd>
@@ -891,7 +859,7 @@
         <h3 class="div2"><a id="event-flow-cancelation" href="#event-flow-cancelation">3.2 Default actions and cancelable events</a></h3>
         <p>Event objects may have <a class="def" href="#glossary-default-action">default actions</a> associated with them.  These are actions the implementation must perform in combination with the dispatch of the event object.  An example is the [<cite><a class="noxref informative" href="#references-HTML5">HTML5</a></cite>] form element. When the user submits the form (e.g. by pressing on a submit button), the event <a class="eventtype" href="#event-type-submit"><code>submit</code></a> shall be dispatched to the element and the <a class="def" href="#glossary-default-action">default action</a> for this <a class="def" href="#glossary-event-type">event type</a> shall be generally to send a request to a Web server with the parameters from the form.</p>
         <p><a class="def" href="#glossary-default-action">Default actions</a> should be performed after the event dispatch has been completed, but in exceptional cases also immediately before the event is dispatched.</p>
-        <span class="issue">@@ insert example here: &lt;input type="checkbox"&gt;'s .checked handling comes to mind.
+        <span class="issue"><strong>Issue:</strong> insert example here: &lt;input type="checkbox"&gt;'s .checked handling comes to mind.
         .checked is changed just before 'click' event is dispatched, and if
         default action is prevented, .checked is set to its original value.</span>
         <p id="events-dt-cancelable-event">Some event objects are <em>cancelable</em>, meaning the <a class="def" href="#glossary-default-action">default action</a> can be prevented from occuring, or, if the <a class="def" href="#glossary-default-action">default action</a> is carried out before the dispatch, its effect may be reversed. Whether an event object is cancelable shall be indicated by the <a href="#events-event-type-canCancel"><code>Event.cancelable</code></a> attribute. Event listeners can cancel <a class="def" href="#glossary-default-action">default actions</a> of cancelable event objects by invoking the <a href="#events-event-type-preventDefault"><code>Event.preventDefault()</code></a> method, and determine whether an event has been canceled through the <a href="#events-event-type-defaultPrevented"><code>Event.defaultPrevented</code></a> attribute while the object is being dispatched, or from the return value of the <a href="#events-Events-EventTarget-dispatchEvent"><code>EventTarget.dispatchEvent()</code></a> method for event objects dispatched by the <a class="def" href="#glossary-DOM-application">DOM application</a> itself.</p>
@@ -1474,8 +1442,8 @@
                     <!-- <dt class="atrisk"><code class="method-name"><a id="events-Events-DocumentEvent-canDispatch">canDispatch</a></code> introduced in <strong class="since">DOM Level 3</strong></dt>
                     <dd class="atrisk">
                       <div class="method atrisk">Tests if the implementation can generate events of a specified type.  
-                        <br /><span class="issue">@@ what is the use case for this? Perhaps to test if an implementation supports a particular event, such as an event from an uncommon language, or a custom event?</span>
-                        <br /><span class="issue">@@ Or what does the "implementation can generate" mean? -Olli</span>
+                        <br /><i class="issue" id="issue-???"><strong>Issue:</strong> what is the use case for this? Perhaps to test if an implementation supports a particular event, such as an event from an uncommon language, or a custom event?</i>
+                        <br /><i class="issue" id="issue-???"><strong>Issue:</strong> Or what does the "implementation can generate" mean? -Olli</i>
                         
 <div class="parameters"><strong>Parameters</strong><div class="paramtable"><dl><dt><code class="parameter-name">namespaceURI</code> of type <code>DOMString</code></dt><dd>Specifies the <a href="#events-event-type-namespaceURI"><code>Event.namespaceURI</code></a> of the event.<br /></dd><dt><code class="parameter-name">type</code> of type <code>DOMString</code></dt><dd>Specifies the <a href="#events-event-type-type"><code>Event.type</code></a> of the event.<br /></dd></dl></div></div>
                         <div class="return"><strong>Return Value</strong><div class="returntable"><table summary="Layout table: the first cell contains the type of the return value, the second contains a short description" border="0"><tr><td><p><code>boolean</code></p></td><td><p><code>true</code> if the implementation can generate and dispatch this event type, <code>false</code> otherwise.</p></td></tr></table></div></div>
@@ -1509,7 +1477,7 @@
                       <div class="method">
                         Given a key value and the desired format, this method returns the equivalent key value in the specified format, if the key value exists in that format.
                         
-                        <p class="issue">@@ some disagreement on including this (see <a href="http://lists.w3.org/Archives/Public/www-dom/2009JulSep/0412.html">Re: convertKeyValue from Anne van Kesteren on 2009-09-22</a>)</p>
+                        <p class="issue"><strong>Issue:</strong> some disagreement on including this (see <a href="http://lists.w3.org/Archives/Public/www-dom/2009JulSep/0412.html">Re: convertKeyValue from Anne van Kesteren on 2009-09-22</a>)</p>
                         <div class="parameters"><strong>Parameters</strong>
                           <div class="paramtable">
                             <dl>
@@ -2379,7 +2347,7 @@
               <a class="eventtype noxref" href="#event-type-select"><code>select</code></a>
             </dt>
             <dd><table border="0" summary="This table contains information about the semantics of the given event type" cellpadding="2" cellspacing="0"><tr class="assert must"><th>Type</th><td class="eventname"><strong><code>select</code></strong></td></tr><tr class="assert must"><th>Interface</th><td><a href="#events-Events-UIEvent"><code>UIEvent</code></a> if generated from a user interface, <a href="#events-Events-Event"><code>Event</code></a> otherwise.</td></tr><tr class="assert must"><th>Bubbles</th><td>Yes</td></tr><tr class="assert must"><th>Target</th><td><code>Element</code></td></tr><tr class="assert must"><th>Cancelable</th><td>No</td></tr><tr class="assert must"><th>Default action</th><td>none</td></tr><tr class="assert must"><th>Context info</th><td><a href="#events-Events-UIEvent-view"><code>UIEvent.view</code></a> may be in use</td></tr></table>
-              A <a class="def" href="#glossary-user-agent">user agent</a> must dispatch this event when a user selects some text.  This specification does not provide contextual information to access the selected text. <span class="issue">@@ need to detail how the author can get at this information, perhaps through HTML5 <a href="http://dev.w3.org/html5/spec/editing.html#selection" title="7 User Interaction &#8212; HTML 5">text selection APIs</a></span> <!-- The <a class="def" href="#glossary-user-agent">user agent</a> must make the selected text passage available through the <a href="#events-Events-UIEvent-detail"><code>UIEvent.detail</code></a> attribute.  <span class="issue">@@ should the selection include the markup structure, or just the text-content?</span> --> This event is dispatched after the selection has occurred.
+              A <a class="def" href="#glossary-user-agent">user agent</a> must dispatch this event when a user selects some text.  This specification does not provide contextual information to access the selected text. <i class="issue"  id="issue-selected_text"><strong>Issue:</strong> need to detail how the author can get at this information, perhaps through HTML5 <a href="http://dev.w3.org/html5/spec/editing.html#selection" title="7 User Interaction &#8212; HTML 5">text selection APIs</a></i> <!-- The <a class="def" href="#glossary-user-agent">user agent</a> must make the selected text passage available through the <a href="#events-Events-UIEvent-detail"><code>UIEvent.detail</code></a> attribute.  <span class="issue"><strong>Issue:</strong> should the selection include the markup structure, or just the text-content?</span> --> This event is dispatched after the selection has occurred.
               <p class="note"><strong>Note:</strong> The <a class="eventtype" href="#event-type-select"><code>select</code></a> event may not be available for all elements in all languages.  For example, in [<cite><a class="noxref informative" href="#references-HTML5">HTML5</a></cite>], <a class="eventtype" href="#event-type-select"><code>select</code></a> events will only be dispatched on only form <code>input</code> and <code>textarea</code> elements.  Implementations may dispatch <a class="eventtype" href="#event-type-select"><code>select</code></a> events in any context deemed appropriate, including text selections outside of form controls, or image or markup selections such as in SVG.</p>
             </dd>
           </dl>
@@ -2514,7 +2482,7 @@
       </ol>
       
       
-      <p class="issue">@@ Behavior of focus events when interacting with focus()/blur() methods needs to be defined.  See [<a href="http://www.w3.org/2008/webapps/track/issues/102">ISSUE-102</a>]</p>
+      <p class="issue"><strong>Issue:</strong> Behavior of focus events when interacting with focus()/blur() methods needs to be defined.  See [<a href="http://www.w3.org/2008/webapps/track/issues/102">ISSUE-102</a>]</p>
 
       <h4 class="div3 needswork"><a id="events-uievent-doc-focus" href="#events-uievent-doc-focus">5.2.2.2 Document Focus and Focus Context</a></h4>
       <p>This event module includes event types for notification of changes in document <a class="def" href="#glossary-event-focus">focus</a>.  Depending on the environment, document focus may be distinct from <a class="def" href="#glossary-user-agent">user agent</a> focus and operating system focus; this is referred to as focus context.  For example, in a typical desktop browser environment, the operating system context focus may be on one of many different applications, one of which is the browser; when the browser has focus, the user may shift  the application context focus (such as with the tab key) among different browser user interface fields (e.g. the Web site location bar, a search field, etc.) before or after achieving document focus; once the document itself has focus, sequential shifting of focus will step through the focusable elements in the document.  The event types defined in this specification deal exclusively with document focus, and the <a class="def" href="#glossary-event-target">event target</a> identified in the event details must only be part of the document or documents in the window, never a part of the browser or operating system, even when switching from one focus context to another.</p>
@@ -2540,7 +2508,7 @@
           </dt>
           <dd><table border="0" summary="This table contains information about the semantics of the given event type" cellpadding="2" cellspacing="0"><tr class="assert must"><th>Type</th><td class="eventname"><strong><code>DOMFocusIn</code></strong></td></tr><tr class="assert must"><th>Interface</th><td><a href="#events-Events-FocusEvent"><code>FocusEvent</code></a></td></tr><tr class="assert must"><th>Bubbles</th><td>Yes</td></tr><tr class="assert must"><th>Target</th><td><code>Element</code></td></tr><tr class="assert must"><th>Cancelable</th><td>No</td></tr><tr class="assert must"><th>Default action</th><td>none</td></tr><tr class="assert must"><th>Context info</th><td><a href="#events-Events-UIEvent-view"><code>UIEvent.view</code></a> is in use.  The value of the <code class="attribute-name"><a href="#events-event-type-target">Event.target</a></code> and <code class="attribute-name"><a href="#events-Events-FocusEvent-relatedTarget">FocusEvent.relatedTarget</a></code> attributes is the <a class="def" href="#glossary-event-target">event target</a> receiving focus.</td></tr></table>
             A <a class="def" href="#glossary-user-agent">user agent</a> must dispatch this event when an <a class="def" href="#glossary-event-target">event target</a> receives focus. The focus shall be given to the element before the dispatch of this event type. This event type shall be dispatched after the event type <a class="eventtype" href="#event-type-focus"><code>focus</code></a>.
-            <p class="warning"><strong>Warning:</strong> the <a class="eventtype" href="#event-type-DOMFocusIn"><code>DOMFocusIn</code></a> event type is defined in this specification for reference and completeness, but this specification <a class="def" href="#glossary-deprecated">deprecates</a> the use of this event type in favor of the related event types <a class="eventtype" href="#event-type-focus"><code>focus</code></a> and <a class="eventtype" href="#event-type-focusin"><code>focusin</code></a>.</p>
+            <p class="warning"><strong>Warning!</strong> the <a class="eventtype" href="#event-type-DOMFocusIn"><code>DOMFocusIn</code></a> event type is defined in this specification for reference and completeness, but this specification <a class="def" href="#glossary-deprecated">deprecates</a> the use of this event type in favor of the related event types <a class="eventtype" href="#event-type-focus"><code>focus</code></a> and <a class="eventtype" href="#event-type-focusin"><code>focusin</code></a>.</p>
           </dd>
         </dl>
       </div>
@@ -2553,7 +2521,7 @@
           </dt>
           <dd><table border="0" summary="This table contains information about the semantics of the given event type" cellpadding="2" cellspacing="0"><tr class="assert must"><th>Type</th><td class="eventname"><strong><code>DOMFocusOut</code></strong></td></tr><tr class="assert must"><th>Interface</th><td><a href="#events-Events-FocusEvent"><code>FocusEvent</code></a></td></tr><tr class="assert must"><th>Bubbles</th><td>Yes</td></tr><tr class="assert must"><th>Target</th><td><code>Element</code></td></tr><tr class="assert must"><th>Cancelable</th><td>No</td></tr><tr class="assert must"><th>Default action</th><td>none</td></tr><tr class="assert must"><th>Context info</th><td><a href="#events-Events-UIEvent-view"><code>UIEvent.view</code></a> is in use.  The value of the <code class="attribute-name"><a href="#events-event-type-target">Event.target</a></code> and <code class="attribute-name"><a href="#events-Events-FocusEvent-relatedTarget">FocusEvent.relatedTarget</a></code> attributes is the <a class="def" href="#glossary-event-target">event target</a> losing focus.</td></tr></table>
   A <a class="def" href="#glossary-user-agent">user agent</a> must dispatch this event when an <a class="def" href="#glossary-event-target">event target</a> loses focus. The focus shall be taken from the element before the dispatch of this event type. This event type shall be dispatched after the event type <a class="eventtype" href="#event-type-blur"><code>blur</code></a>.
-  <p class="warning"><strong>Warning:</strong> the <a class="eventtype" href="#event-type-DOMFocusOut"><code>DOMFocusOut</code></a> event type is defined in this specification for reference and completeness, but this specification <a class="def" href="#glossary-deprecated">deprecates</a> the use of this event type in favor of the related event types <a class="eventtype" href="#event-type-blur"><code>blur</code></a> and <a class="eventtype" href="#event-type-focusout"><code>focusout</code></a>.</p>
+  <p class="warning"><strong>Warning!</strong> the <a class="eventtype" href="#event-type-DOMFocusOut"><code>DOMFocusOut</code></a> event type is defined in this specification for reference and completeness, but this specification <a class="def" href="#glossary-deprecated">deprecates</a> the use of this event type in favor of the related event types <a class="eventtype" href="#event-type-blur"><code>blur</code></a> and <a class="eventtype" href="#event-type-focusout"><code>focusout</code></a>.</p>
           </dd>
         </dl>
       </div>
@@ -2669,18 +2637,21 @@
                 <dt><code class="attribute-name"><a id="events-Events-MouseEvent-buttons">buttons</a></code> of type <code>unsigned short</code>, readonly</dt>
                 <dd>During mouse events caused by the depression or release of a mouse button, <code>buttons</code> shall be used to indicate which combination of mouse buttons are currently being pressed, expressed as a bitmask.  <span class="note"><strong>Note:</strong> This should not be confused with the <a class="noxref" href="#events-Events-MouseEvent-button">button</a> attribute.</span>
                 <code>0</code> must indicates no button is currently active.
-                <code>1</code> must indicate the primary button of the device (in general, the left button  or the only button on single-button devices, used to activate a user interface control or select text).
+                <code>1</code> must indicate the primary button of the device (in general, the left button or the only button on single-button devices, used to activate a user interface control or select text).
                 <code>2</code> must indicate the secondary button (in general, the right button, often used to display a context menu), if present.
                 <code>4</code> must indicate the auxiliary button (in general, the middle button, often combined with a mouse wheel).
-                Some pointer devices may provide or simulate more buttons.  To represent such buttons, the value must be doubled for each successive button (in the binary series <code>8</code>, <code>16</code>, <code>32</code>, ... ), and the buttons should alternate sides of the device, from left to right.  For example, with a 5-button mouse, the primary button (on the left) would have the value <code>1</code>, the secondary button (on the right) would have the value <code>2</code>, the auxiliary button (in the middle) would have the value <code>4</code>, the fourth button (on the left) would have the value <code>8</code>, and the fifth button (on the right) would have the value <code>16</code>.  Because no the sum of any set of button values is a unique number, an author can use a bitwise operation to determine how many buttons are currently being pressed and which buttons they are, for an arbitrary number of mouse buttons on a device, e.g. the value <code>3</code> indicates that the left and right button are currently both pressed, while the value <code>5</code> indicates that the left and middle button are currently both pressed.                  
-               
+                Some pointer devices may provide or simulate more buttons.  To represent such buttons, the value must be doubled for each successive button (in the binary series <code>8</code>, <code>16</code>, <code>32</code>, ... ), and the buttons should alternate sides of the device, from left to right.  For example, with a 5-button mouse, the primary button (on the left) would have the value <code>1</code>, the secondary button (on the right) would have the value <code>2</code>, the auxiliary button (in the middle) would have the value <code>4</code>, the fourth button (on the left) would have the value <code>8</code>, and the fifth button (on the right) would have the value <code>16</code>.  Because the sum of any set of button values is a unique number, an author can use a bitwise operation to determine how many buttons are currently being pressed and which buttons they are, for an arbitrary number of mouse buttons on a device, e.g. the value <code>3</code> indicates that the left and right button are currently both pressed, while the value <code>5</code> indicates that the left and middle button are currently both pressed.                  
+                </dd>
                 
                 <dt><code class="attribute-name"><a id="events-Events-MouseEvent-clientX">clientX</a></code> of type <code>long</code>, readonly</dt>
                 <dd>The horizontal coordinate at which the event occurred relative to the viewport associated with the event.<br /></dd>
+                
                 <dt><code class="attribute-name"><a id="events-Events-MouseEvent-clientY">clientY</a></code> of type <code>long</code>, readonly</dt>
                 <dd>The vertical coordinate at which the event occurred relative to the viewport associated with the event.<br /></dd>
+                
                 <dt><code class="attribute-name"><a id="events-Events-MouseEvent-ctrlKey">ctrlKey</a></code> of type <code>boolean</code>, readonly</dt>
                 <dd>Refer to the <a href="#events-Events-KeyboardEvent-ctrlKey"><code>KeyboardEvent.ctrlKey</code></a> attribute.<br /></dd>
+                
                 <dt><code class="attribute-name"><a id="events-Events-MouseEvent-metaKey">metaKey</a></code> of type <code>boolean</code>, readonly</dt>
                 <dd>Refer to the <a href="#events-Events-KeyboardEvent-metaKey"><code>KeyboardEvent.metaKey</code></a> attribute.<br /></dd>
                 <dt><code class="attribute-name"><a id="events-Events-MouseEvent-relatedTarget">relatedTarget</a></code> of type <a href="#events-Events-EventTarget"><code>EventTarget</code></a>, readonly</dt>
@@ -2899,7 +2870,7 @@
     <div class="div3">
       <h3 class="div3"><a id="events-mousewheelevents" href="#events-mousewheelevents">5.2.4 Mouse Wheel Event Types</a></h3>
       <p>This module defines the feature MouseWheelEvents 3.0 and depends on the feature MouseEvents 3.0.</p>
-      <p class="warning"><strong>Warning:</strong> the <a href="#events-Events-MouseWheelEvent">MouseWheelEvent interface</a> is defined in this specification for reference and completeness of legacy behavior, but this specification <a class="def" href="#glossary-deprecated">deprecates</a> the use of this interface in favor of the related <a href="#events-Events-WheelEvent">WheelEvent interface</a>.</p>
+      <p class="warning"><strong>Warning!</strong> the <a href="#events-Events-MouseWheelEvent">MouseWheelEvent interface</a> is defined in this specification for reference and completeness of legacy behavior, but this specification <a class="def" href="#glossary-deprecated">deprecates</a> the use of this interface in favor of the related <a href="#events-Events-WheelEvent">WheelEvent interface</a>.</p>
 
       <dl>
         <dt><strong>Interface <em><a id="events-Events-MouseWheelEvent">MouseWheelEvent</a></em></strong> (introduced in <strong class="since">DOM Level 3</strong>)</dt>
@@ -2974,7 +2945,7 @@
           <dd><table border="0" summary="This table contains information about the semantics of the given event type" cellpadding="2" cellspacing="0"><tr class="assert must"><th>Type</th><td class="eventname"><strong><code>mousewheel</code></strong></td></tr><tr class="assert must"><th>Interface</th><td><a href="#events-Events-MouseWheelEvent"><code>MouseWheelEvent</code></a></td></tr><tr class="assert must"><th>Bubbles</th><td>Yes</td></tr><tr class="assert must"><th>Target</th><td><a class="def" href="#glossary-defaultView"><code>defaultView</code></a>, <code>Document</code>, <code>Element</code></td></tr><tr class="assert must"><th>Cancelable</th><td>Yes</td></tr><tr class="assert must"><th>Default action</th><td>scroll (or zoom) the document</td></tr><tr class="assert must"><th>Context info</th><td><a href="#events-Events-MouseWheelEvent-wheelDelta"><code>MouseWheelEvent.wheelDelta</code></a>, <a href="#events-Events-MouseEvent-altKey"><code>MouseEvent.altKey</code></a>, <a href="#events-Events-MouseEvent-ctrlKey"><code>MouseEvent.ctrlKey</code></a>, <a href="#events-Events-MouseEvent-shiftKey"><code>MouseEvent.shiftKey</code></a>, <a href="#events-Events-MouseEvent-metaKey"><code>MouseEvent.metaKey</code></a>, and <a href="#events-Events-UIEvent-view"><code>UIEvent.view</code></a> are in use. <a href="#events-Events-MouseEvent-screenX"><code>MouseEvent.screenX</code></a>, <a href="#events-Events-MouseEvent-screenY"><code>MouseEvent.screenY</code></a>, <a href="#events-Events-MouseEvent-clientX"><code>MouseEvent.clientX</code></a>, <a href="#events-Events-MouseEvent-clientY"><code>MouseEvent.clientY</code></a>, and <a href="#events-Events-MouseEvent-button"><code>MouseEvent.button</code></a> are in use if the wheel is associated to a pointing device. <a href="#events-Events-MouseEvent-relatedTarget"><code>MouseEvent.relatedTarget</code></a> indicates the <a class="def" href="#glossary-event-target">event target</a> the pointing device is pointing at, if any. <a href="#events-Events-UIEvent-detail"><code>UIEvent.detail</code></a> is not in use.</td></tr></table>
             A <a class="def" href="#glossary-user-agent">user agent</a> must dispatch this event when a mouse wheel has been rotated around the y-axis, or when an equivalent input device (such as a mouse-ball, certain tablets or touchpads, etc.) has emulated such an action. 
             <p>The typical default action of the <a class="eventtype" href="#event-type-mousewheel"><code>mousewheel</code></a> event type is to scroll (or in some cases, zoom) the document by the indicated amount.  If this event is canceled, the implementation must not scroll or zoom the document (or perform whatever other implementation-specific default action is associated with this event type).</p>
-            <p class="warning"><strong>Warning:</strong> the <a class="eventtype" href="#event-type-mousewheel"><code>mousewheel</code></a> event type is defined in this specification for reference and completeness, but this specification <a class="def" href="#glossary-deprecated">deprecates</a> the use of this event type in favor of the related <a class="eventtype" href="#event-type-wheel"><code>wheel</code></a> event type.</p>
+            <p class="warning"><strong>Warning!</strong> the <a class="eventtype" href="#event-type-mousewheel"><code>mousewheel</code></a> event type is defined in this specification for reference and completeness, but this specification <a class="def" href="#glossary-deprecated">deprecates</a> the use of this event type in favor of the related <a class="eventtype" href="#event-type-wheel"><code>wheel</code></a> event type.</p>
           </dd>
         </dl>
       </div>
@@ -3082,7 +3053,7 @@
                 <dt><code class="attribute-name"><a id="events-Events-WheelEvent-deltaMode">deltaMode</a></code> of type <code>unsigned long</code>, readonly</dt>
                 <dd>The <code>deltaMode</code> attribute contains an indication of to indicate the units of measurement for the <a href="#glossary-delta"><code>delta</code></a> values.  The default value is <a href="#events-DOM_DELTA_PIXEL"><code class="constant-name">DOM_DELTA_PIXEL</code></a> (pixels).  The value of <code>deltaMode</code> may be different for each of <code class="attribute-name"><a href="#events-Events-WheelEvent-deltaX">deltaX</a></code>, <code class="attribute-name"><a href="#events-Events-WheelEvent-deltaY">deltaY</a></code>, and <code class="attribute-name"><a href="#events-Events-WheelEvent-deltaZ">deltaZ</a></code>, based on system configuration.<br />
 
-                        <p class="issue">@@ deltaMode is the proposed solution for <a href="http://www.w3.org/2008/webapps/track/issues/9" title="ISSUE-9 - Web Applications Working Group Tracker">ISSUE-9</a>.</p>
+                        <p class="issue"><strong>Issue:</strong> deltaMode is the proposed solution for <a href="http://www.w3.org/2008/webapps/track/issues/9" title="ISSUE-9 - Web Applications Working Group Tracker">ISSUE-9</a>.</p>
 
                       </dd>
               </dl>
@@ -3118,7 +3089,7 @@
             A <a class="def" href="#glossary-user-agent">user agent</a> must dispatch this event when a mouse wheel has been rotated around any axis, or when an equivalent input device (such as a mouse-ball, certain tablets or touchpads, etc.) has emulated such an action. 
             <p>The typical default action of the <a class="eventtype" href="#event-type-wheel"><code>wheel</code></a> event type is to scroll (or in some cases, zoom) the document by the indicated amount.  If this event is canceled, the implementation must not scroll or zoom the document (or perform whatever other implementation-specific default action is associated with this event type).</p>
 
-            <p class="issue">@@ / ?? A <a class="def" href="#glossary-default-action">default action</a> of <a class="def" href="#glossary-user-agent">user agent</a> generated event objects of this type causes implementations to dispatch a <a class="eventtype" href="#event-type-mousewheel"><code>mousewheel</code></a> event iff it supports that event type and <a href="#events-Events-WheelEvent-deltaY"><code>WheelEvent.deltaY</code></a> is non-zero. <span class="issue">(@@ is this still true? why are we doing this this way?  this doesn't make sense to me...)</span></p>
+            <p class="issue"><strong>Issue:</strong> / ?? A <a class="def" href="#glossary-default-action">default action</a> of <a class="def" href="#glossary-user-agent">user agent</a> generated event objects of this type causes implementations to dispatch a <a class="eventtype" href="#event-type-mousewheel"><code>mousewheel</code></a> event iff it supports that event type and <a href="#events-Events-WheelEvent-deltaY"><code>WheelEvent.deltaY</code></a> is non-zero. <i class="issue" id="issue-deltaY">(<strong>Issue:</strong> is this still true? why are we doing this this way?  this doesn't make sense to me...)</i></p>
           </dd>
         </dl>
       </div>
@@ -3361,37 +3332,37 @@
                           <code class="constant-name">DOM_KEY_LOCATION_LEFT</code>
                         </a>
                       </dt>
-                      <dd>The key activated shall be in the left key location (there is more than one possible location for this key). Example: the left <code class="value">'Control'</code> key on a PC 101 Key US keyboard.</dd>
+                      <dd>The key activated shall be in the left key location (there is more than one possible location for this key). <i class="example"><strong>Example:</strong> the left <code class="value">'Control'</code> key on a PC 101 Key US keyboard.</i></dd>
                       <dt>
                         <a id="events-DOM_KEY_LOCATION_NUMPAD">
                           <code class="constant-name">DOM_KEY_LOCATION_NUMPAD</code>
                         </a>
                       </dt>
-                      <dd>The key activation originated on the numeric keypad or with a virtual key corresponding to the numeric keypad. Example: the <code class="value">'1'</code> key on a PC 101 Key US keyboard located on the numeric pad.</dd>
+                      <dd>The key activation originated on the numeric keypad or with a virtual key corresponding to the numeric keypad. <i class="example"><strong>Example:</strong> the <code class="value">'1'</code> key on a PC 101 Key US keyboard located on the numeric pad.</i></dd>
                       <dt>
                         <a id="events-DOM_KEY_LOCATION_RIGHT">
                           <code class="constant-name">DOM_KEY_LOCATION_RIGHT</code>
                         </a>
                       </dt>
-                      <dd>The key activation shall be in the right key location (there is more than one possible location for this key). Example: the right <code class="value">'Shift'</code> key on a PC 101 Key US keyboard.</dd>
+                      <dd>The key activation shall be in the right key location (there is more than one possible location for this key). <i class="example"><strong>Example:</strong> the right <code class="value">'Shift'</code> key on a PC 101 Key US keyboard.</i></dd>
                       <dt>
                         <a id="events-DOM_KEY_LOCATION_STANDARD">
                           <code class="constant-name">DOM_KEY_LOCATION_STANDARD</code>
                         </a>
                       </dt>
-                      <dd>The key activation shall not be distinguished as the left or right version of the key, and did not originate from the numeric keypad (or did not originate with a virtual key corresponding to the numeric keypad). Example: the <code class="value">'Q'</code> key on a PC 101 Key US keyboard.</dd>
+                      <dd>The key activation shall not be distinguished as the left or right version of the key, and did not originate from the numeric keypad (or did not originate with a virtual key corresponding to the numeric keypad). <i class="example"><strong>Example:</strong> the <code class="value">'Q'</code> key on a PC 101 Key US keyboard.</i></dd>
                       <dt>
                         <a id="events-DOM_KEY_LOCATION_MOBILE">
                           <code class="constant-name">DOM_KEY_LOCATION_MOBILE</code>
                         </a>
                       </dt>
-                      <dd>The key activation originated on a mobile device, either on a physical keypad or a virtual keyboard. Example: the <code class="value">'#'</code> key or softkey on a mobile device.</dd>
+                      <dd>The key activation originated on a mobile device, either on a physical keypad or a virtual keyboard. <i class="example"><strong>Example:</strong> the <code class="value">'#'</code> key or softkey on a mobile device.</i></dd>
                       <dt>
                         <a id="events-DOM_KEY_LOCATION_JOYSTICK">
                           <code class="constant-name">DOM_KEY_LOCATION_JOYSTICK</code>
                         </a>
                       </dt>
-                      <dd>The key activation originated on a game controller or a joystick on a mobile device. Example: the <code class="value">'DownLeft'</code> key on a game controller.</dd>
+                      <dd>The key activation originated on a game controller or a joystick on a mobile device. <i class="example"><strong>Example:</strong> the <code class="value">'DownLeft'</code> key on a game controller.</i></dd>
                     </dl>
                   </dd>
                 </dl>
@@ -3462,7 +3433,7 @@
           </dd>
         </dl>
         
-        <p class="warning" id="keycode-charcode"><strong>Warning:</strong>  Legacy keyboard event implementations may include two additional attributes, <code>keyCode</code> and <code>charCode</code>.  The <code>keyCode</code> attribute indicates a numeric value associated with a particular key on a computer keyboard, while the <code>charCode</code> attribute indicates the <acronym title="American Standard Code for Information Interchange">ASCII</acronym> value of the character associated with that key (which may or may not be the same as the <code>keyCode</code> value) and is applicable only to keys that produce a <a class="def" href="#glossary-character-value">character value</a>.  In practice, <code>keyCode</code> and <code>charCode</code> are inconsistent across platforms and even the same implementation on different operating systems or using different localizations.  DOM Level 3 Events  does not define behavior for either <code>keyCode</code> or <code>charCode</code>; authors should use <a href="#events-Events-KeyboardEvent-key"><code>KeyboardEvent.key</code></a> instead, in conforming DOM Level 3 Events implementations.  <em>For more information, see the informative table in <a href="#keyset-keyCode-charCode">Key values, keyCode, and charCode</a>.</em></p>
+        <p class="warning" id="keycode-charcode"><strong>Warning!</strong>  Legacy keyboard event implementations may include two additional attributes, <code>keyCode</code> and <code>charCode</code>.  The <code>keyCode</code> attribute indicates a numeric value associated with a particular key on a computer keyboard, while the <code>charCode</code> attribute indicates the <acronym title="American Standard Code for Information Interchange">ASCII</acronym> value of the character associated with that key (which may or may not be the same as the <code>keyCode</code> value) and is applicable only to keys that produce a <a class="def" href="#glossary-character-value">character value</a>.  In practice, <code>keyCode</code> and <code>charCode</code> are inconsistent across platforms and even the same implementation on different operating systems or using different localizations.  DOM Level 3 Events  does not define behavior for either <code>keyCode</code> or <code>charCode</code>; authors should use <a href="#events-Events-KeyboardEvent-key"><code>KeyboardEvent.key</code></a> instead, in conforming DOM Level 3 Events implementations.  <em>For more information, see the informative table in <a href="#keyset-keyCode-charCode">Key values, keyCode, and charCode</a>.</em></p>
                 
         <p>Depending on the character generation device, keyboard events may or may not be generated.</p>
         <p>The keyboard event types are listed below.</p>
@@ -3498,7 +3469,7 @@
           <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a></li>
         </ol>
         
-        <p class="warning"><strong>Warning:</strong> Because of hardware limitations, on some keyboard devices, the order between the text event and keyboard events may differ.  For example, some mobile devices may dispatch the <a class="eventtype" href="#event-type-textInput"><code>textInput</code></a> event after the <a class="eventtype" href="#event-type-keyup"><code>keyup</code></a> event.</p>
+        <p class="warning"><strong>Warning!</strong> Because of hardware limitations, on some keyboard devices, the order between the text event and keyboard events may differ.  For example, some mobile devices may dispatch the <a class="eventtype" href="#event-type-textInput"><code>textInput</code></a> event after the <a class="eventtype" href="#event-type-keyup"><code>keyup</code></a> event.</p>
                 
 <text id="text_1" x="10" y="25" font-size="18" fill="crimson" text-anchor="middle"></text>
 
@@ -3529,7 +3500,7 @@
                <p>The default action of the <a class="eventtype" href="#event-type-keypress"><code>keypress</code></a> event depends upon the key and the context: if the key is associated with a character, and if there currently focused element in the document can receive text (such as a form input or an editable text block), the default action is to dispatch a <a class="eventtype" href="#event-type-textInput"><code>textInput</code></a> event with the character as the value of the <a href="#events-Events-TextEvent-data"><code>TextEvent.data</code></a> attribute; if the key is associated with a <a class="def" href="#glossary-text-composition-system">text composition system</a>, the default action is to launch that system; if the key is the <code>tab</code> key, the default action is to dispatch a <a class="eventtype" href="#event-type-focusout"><code>focusout</code></a>, <a class="eventtype" href="#event-type-blur"><code>blur</code></a>, and <a class="eventtype" href="#event-type-DOMFocusOut"><code>DOMFocusOut</code></a> events with the currently focused element (if any) as the value of the <a href="#events-event-type-target">Event.target</a> attribute, followed by a <a class="eventtype" href="#event-type-focusin"><code>focusin</code></a>, <a class="eventtype" href="#event-type-focus"><code>focus</code></a>, and <a class="eventtype" href="#event-type-DOMFocusIn"><code>DOMFocusIn</code></a> events with the new focused element as the value of the <a href="#events-event-type-target">Event.target</a> attribute; if the key is the <code class="value">'Enter'</code> key and the current focus is on a state-changing element, the default action is to dispatch a <a class="eventtype" href="#event-type-DOMActivate"><code>DOMActivate</code></a> event; if the key is associated with any other event type, such as the <a class="eventtype" href="#event-type-scroll"><code>scroll</code></a> event, the default action is to dispatch an event of that type.  If this event is canceled, the associated events types must not be dispatched, and the associated actions must not be performed.</p>
 
               <p class="note"><strong>Note:</strong> the <a class="eventtype" href="#event-type-keypress"><code>keypress</code></a> event is traditionally associated with detecting a <a class="def" href="#glossary-character-value">character value</a> rather than a physical key, and may not be available on all keys in some configurations.</p>
-              <p class="warning"><strong>Warning:</strong> the <a class="eventtype" href="#event-type-keypress"><code>keypress</code></a> event type is defined in this specification for reference and completeness, but this specification <a class="def" href="#glossary-deprecated">deprecates</a> the use of this event type.</p>
+              <p class="warning"><strong>Warning!</strong> the <a class="eventtype" href="#event-type-keypress"><code>keypress</code></a> event type is defined in this specification for reference and completeness, but this specification <a class="def" href="#glossary-deprecated">deprecates</a> the use of this event type.</p>
             </dd>
           </dl>
         </div>
@@ -3553,7 +3524,7 @@
       <div class="div3">
         <h3 class="div3"><a id="events-compositionevents" href="#events-compositionevents">5.2.8 Composition Events Types</a></h3>
         <p>This module defines the feature CompositionEvents 3.0 and depends on the feature UIEvents 3.0.</p>
-        <p>Composition Events provide a means for inputing text in a supplementary or alternate manner than by Keyboard Events, in order to allow the use of characters that may not be commonly available on keyboard. For examples, Composition events may be used to add accents to characters despite their absence from standard US keyboards, to build up logograms of many Asian languages from their base components or categories, to select word choices from a combination of key presses on a mobile device keyboard, or to convert voice commands into text using a speech recognition processor.  Refer to <a href="#keyset">Keyboard events and key values</a> for examples on how Composition Events are used in combination with keyboard events.</p>
+        <p>Composition Events provide a means for inputing text in a supplementary or alternate manner than by Keyboard Events, in order to allow the use of characters that may not be commonly available on keyboard. For example, Composition events may be used to add accents to characters despite their absence from standard US keyboards, to build up logograms of many Asian languages from their base components or categories, to select word choices from a combination of key presses on a mobile device keyboard, or to convert voice commands into text using a speech recognition processor.  Refer to <a href="#keyset">Keyboard events and key values</a> for examples on how Composition Events are used in combination with keyboard events.</p>
         <p>Conceptually, a composition session consists of one <a class="eventtype" href="#event-type-compositionstart"><code>compositionstart</code></a> event, one or more <a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a> events, and one <a class="eventtype" href="#event-type-compositionend"><code>compositionend</code></a> event, with the value of the <a href="#events-Events-CompositionEvent-data">data</a> attribute persisting between each "stage" of this event chain during each session.  While a composition session is active, keyboard events should not be dispatched to the DOM (i.e., the <a class="def" href="#glossary-text-composition-system">text composition system</a> "swallows" the keyboard events), and only <a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a> events may be dispatched to indicate the composition process.</p>
         <p>Not all <a class="def" href="#glossary-ime">IME</a> systems or devices expose the necessary data to the DOM, so the active composition string (the "Reading Window" or "candidate selection menu option") may not be available through this interface, in which case the selection may be represented by the empty string.</p>
         <dl>
@@ -3645,7 +3616,7 @@
               A <a class="def" href="#glossary-user-agent">user agent</a> must dispatch this event when a <a class="def" href="#glossary-text-composition-system">text composition system</a> is invoked in preparation for composing a passage of text.  This event type is device-dependent, and may rely upon the capabilities of the text conversion system and how it is mapped into the operating system.  When a keyboard is used to feed an input method editor, this event type is generated after a <code>keydown</code> event, but speech or handwriting recognition systems may send this event type without keyboard events.  Some implemenations may populate the <a href="#events-Events-CompositionEvent-data"><code>data</code></a> attribute of the <a class="eventtype" href="#event-type-compositionstart"><code>compositionstart</code></a> event with the text currently selected in the document (for editing and replacement); otherwise, the value of the <a href="#events-Events-CompositionEvent-data"><code>data</code></a> attribute shall be <code>null</code>.  
               
               <p>This event is dispatched immediately before a <a class="def" href="#glossary-text-composition-system">text composition system</a> is launched.  The default action of this event is to launch the appropriate <a class="def" href="#glossary-text-composition-system">text composition system</a>.  If this event is canceled, the <a class="def" href="#glossary-text-composition-system">text composition system</a> must not be launched.</p>
-              <p>(<span class="issue">@@ see <a href="http://lists.w3.org/Archives/Public/www-dom/2009JulSep/0143.html" title="Extra notes on composition events from Daniel Danilatos on 2009-08-07 ([email protected] from July to September 2009)">Extra notes on composition events</a> for more details.</span>)</p>
+              <p>(<i class="issue" id="issue-composition_events"><strong>Issue:</strong> see <a href="http://lists.w3.org/Archives/Public/www-dom/2009JulSep/0143.html" title="Extra notes on composition events from Daniel Danilatos on 2009-08-07 ([email protected] from July to September 2009)">Extra notes on composition events</a> for more details.</i>)</p>
             </dd>
           </dl>
         </div>
@@ -3657,7 +3628,7 @@
               <a class="eventtype noxref" href="#event-type-compositionupdate"><code>compositionupdate</code></a>
             </dt>
             <dd><table border="0" summary="This table contains information about the semantics of the given event type" cellpadding="2" cellspacing="0"><tr class="assert must"><th>Type</th><td class="eventname"><strong><code>compositionupdate</code></strong></td></tr><tr class="assert must"><th>Interface</th><td><a href="#events-Events-CompositionEvent"><code>CompositionEvent</code></a></td></tr><tr class="assert must"><th>Bubbles</th><td>Yes</td></tr><tr class="assert must"><th>Target</th><td><code>Element</code></td></tr><tr class="assert must"><th>Cancelable</th><td>No</td></tr><tr class="assert must"><th>Default action</th><td>none</td></tr><tr class="assert must"><th>Context info</th><td><a href="#events-Events-UIEvent-view"><code>UIEvent.view</code></a>, and <a href="#events-Events-CompositionEvent-data"><code>CompositionEvent.data</code></a>.</td></tr></table>
-              A <a class="def" href="#glossary-user-agent">user agent</a> should dispatch this event when a <a class="def" href="#glossary-text-composition-system">text composition system</a> updates its active text passage with a new character, which is added to the string in <a href="#events-Events-CompositionEvent-data"><code>CompositionEvent.data</code></a>.  Note that some <a class="def" href="#glossary-text-composition-system">text composition systems</a> may not expose this information to the DOM, in which case this event will not fire during the composition process.  If the composition session is canceled, this event will be fired immediately before the <a class="eventtype" href="#event-type-compositionend"><code>compositionend</code></a> event, and the <a href="#events-Events-CompositionEvent-data"><code>CompositionEvent.data</code> attribute will be set to <code>null</code><span class="issue">(@@ "null" or "empty string"? What's the distinction?)</span>.</a></dd>
+              A <a class="def" href="#glossary-user-agent">user agent</a> should dispatch this event when a <a class="def" href="#glossary-text-composition-system">text composition system</a> updates its active text passage with a new character, which is added to the string in <a href="#events-Events-CompositionEvent-data"><code>CompositionEvent.data</code></a>.  Note that some <a class="def" href="#glossary-text-composition-system">text composition systems</a> may not expose this information to the DOM, in which case this event will not fire during the composition process.  If the composition session is canceled, this event will be fired immediately before the <a class="eventtype" href="#event-type-compositionend"><code>compositionend</code></a> event, and the <a href="#events-Events-CompositionEvent-data"><code>CompositionEvent.data</code> attribute will be set to <code>null</code><i class="issue" id="issue-null_vs_empty-string">(<strong>Issue:</strong> "null" or "empty string"? What's the distinction?)</i>.</a></dd>
           </dl>
         </div>
 
@@ -3677,14 +3648,17 @@
         <div class="div3">
           <h4 class="adiv3"><a id="handwriting" href="#handwriting">5.2.8.2 Handwriting Recognition Systems</a></h4>
           <p>The following example describes a possible sequence of events when composing a text passage "text" with a handwriting recognition system, such as on a pen tablet, as modeled using Composition Events.</p>
-          <p class="issue">@@ needs more investigation, particularly with regard to pen-tablet events.</p>
-          <ol>
-            <li><a class="eventtype" href="#event-type-compositionstart"><code>compositionstart</code></a>: <code class="value">''</code></li>
-            <li><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a>: <code class="value">'test'</code><span class="issue">@@ what's going on here? is there a "reject" option that's being exemplified?</span></li>
-            <li><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a>: <code class="value">'text'</code></li>
-            <li><a class="eventtype" href="#event-type-compositionend"><code>compositionend</code></a>: <code class="value">'text'</code></li>
-            <li><a class="eventtype" href="#event-type-textInput"><code>textInput</code></a>: <code class="value">'text'</code> (<code>"inputMode"</code>: <code class="value">'DOM_INPUT_METHOD_HANDWRITING'</code>)</li>
-          </ol>
+          <p class="issue"><strong>Issue:</strong> needs more investigation, particularly with regard to pen-tablet events.</p>
+          <div class="example" id="example-???">
+            <p><strong>Example:</strong></p>
+            <ol>
+              <li><a class="eventtype" href="#event-type-compositionstart"><code>compositionstart</code></a>: <code class="value">''</code></li>
+              <li><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a>: <code class="value">'test'</code><i class="issue" id="issue-compositionupdate"><strong>Issue:</strong> what's going on here? is there a "reject" option that's being exemplified?</i></li>
+              <li><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a>: <code class="value">'text'</code></li>
+              <li><a class="eventtype" href="#event-type-compositionend"><code>compositionend</code></a>: <code class="value">'text'</code></li>
+              <li><a class="eventtype" href="#event-type-textInput"><code>textInput</code></a>: <code class="value">'text'</code> (<code>"inputMode"</code>: <code class="value">'DOM_INPUT_METHOD_HANDWRITING'</code>)</li>
+            </ol>
+          </div>
         </div>
                 
       </div>
@@ -3696,7 +3670,7 @@
           <p class="issue">?What happens to event listeners on an element when it is removed from the tree, or moved elsewhere in the tree?</p> -->
         <p>Many single modifications of the tree can cause multiple mutation events to be dispatched. Rather than attempt to specify the ordering of mutation events due to every possible modification of the tree, the ordering of these events is left to the implementation.</p>
 
-        <p class="warning"><strong>Warning:</strong>  The <a href="#events-Events-MutationEvent">MutationEvent interface</a> was introduced in DOM Level 2 Events, but has not yet been completely and interoperably implemented across <a class="def" href="#glossary-user-agent">user agents</a>.  In addition, there have been critiques that the interface, as designed, introduces a performance and implementation challenge.  A new specification is under development with the aim of addressing the use cases that mutation events solves, but in more performant manner.  Thus, this specification describes mutation events for reference and completeness of legacy behavior, but <a class="def" href="#glossary-deprecated">deprecates</a> the use of both the <a href="#events-Events-MutationEvent"><code>MutationEvent</code></a> interface and the <a href="#events-Events-MutationNameEvent"><code>MutationNameEvent</code></a> interface.</p>
+        <p class="warning"><strong>Warning!</strong>  The <a href="#events-Events-MutationEvent">MutationEvent interface</a> was introduced in DOM Level 2 Events, but has not yet been completely and interoperably implemented across <a class="def" href="#glossary-user-agent">user agents</a>.  In addition, there have been critiques that the interface, as designed, introduces a performance and implementation challenge.  A new specification is under development with the aim of addressing the use cases that mutation events solves, but in more performant manner.  Thus, this specification describes mutation events for reference and completeness of legacy behavior, but <a class="def" href="#glossary-deprecated">deprecates</a> the use of both the <a href="#events-Events-MutationEvent"><code>MutationEvent</code></a> interface and the <a href="#events-Events-MutationNameEvent"><code>MutationNameEvent</code></a> interface.</p>
 
 
         <dl>
@@ -3822,7 +3796,7 @@
             </dt>
             <dd><table border="0" summary="This table contains information about the semantics of the given event type" cellpadding="2" cellspacing="0"><tr class="assert must"><th>Type</th><td class="eventname"><strong><code>DOMSubtreeModified</code></strong></td></tr><tr class="assert must"><th>Interface</th><td><a href="#events-Events-MutationEvent"><code>MutationEvent</code></a></td></tr><tr class="assert must"><th>Bubbles</th><td>Yes</td></tr><tr class="assert must"><th>Target</th><td><a class="def" href="#glossary-defaultView"><code>defaultView</code></a>, <code>Document</code>, <code>DocumentFragment</code>, <code>Element</code>, <code>Attr</code></td></tr><tr class="assert must"><th>Cancelable</th><td>No</td></tr><tr class="assert must"><th>Default action</th><td>none</td></tr><tr class="assert must"><th>Context info</th><td>None</td></tr></table>
     This is a general event for notification of all changes to the document. It can be used instead of the more specific mutation and mutation name events listed below. It may be dispatched after a single modification to the document or, at the implementation's discretion, after multiple changes have occurred. The latter use should generally be used to accommodate multiple changes which occur either simultaneously or in rapid succession. The target of this event shall be the lowest common parent of the changes which have taken place. This event shall be dispatched after any other events caused by the mutation(s) have occurred.
-    <p class="warning"><strong>Warning:</strong> the <a class="eventtype" href="#event-type-DOMSubtreeModified"><code>DOMSubtreeModified</code></a> event type is defined in this specification for reference and completeness, but this specification <a class="def" href="#glossary-deprecated">deprecates</a> the use of this event type.</p>
+    <p class="warning"><strong>Warning!</strong> the <a class="eventtype" href="#event-type-DOMSubtreeModified"><code>DOMSubtreeModified</code></a> event type is defined in this specification for reference and completeness, but this specification <a class="def" href="#glossary-deprecated">deprecates</a> the use of this event type.</p>
             </dd>
           </dl>
         </div>
@@ -3835,7 +3809,7 @@
             </dt>
             <dd><table border="0" summary="This table contains information about the semantics of the given event type" cellpadding="2" cellspacing="0"><tr class="assert must"><th>Type</th><td class="eventname"><strong><code>DOMNodeInserted</code></strong></td></tr><tr class="assert must"><th>Interface</th><td><a href="#events-Events-MutationEvent"><code>MutationEvent</code></a></td></tr><tr class="assert must"><th>Bubbles</th><td>Yes</td></tr><tr class="assert must"><th>Target</th><td><code>Element</code>, <code>Attr</code>, <code>Text</code>, <code>Comment</code>, <code>CDATASection</code>, <code>DocumentType</code>, <code>EntityReference</code>, <code>ProcessingInstruction</code></td></tr><tr class="assert must"><th>Cancelable</th><td>No</td></tr><tr class="assert must"><th>Default action</th><td>none</td></tr><tr class="assert must"><th>Context info</th><td><a href="#events-Events-MutationEvent-relatedNode"><code>MutationEvent.relatedNode</code></a> holds the parent node of the node that has been inserted or, in case of <code>Attr</code> nodes, the <code>ownerElement</code> of the <code>Attr</code> node.</td></tr></table>
               A <a class="def" href="#glossary-user-agent">user agent</a> must dispatch this event when a node has been added as a child of another node or, in case of <code>Attr</code> nodes, has been added to an <code>Element</code>. This event shall be dispatched after the insertion has taken place. The <a class="def" href="#glossary-proximal-event-target">proximal event target</a> of this event shall be the node being inserted.
-              <p class="warning"><strong>Warning:</strong> the <a class="eventtype" href="#event-type-DOMNodeInserted"><code>DOMNodeInserted</code></a> event type is defined in this specification for reference and completeness, but this specification <a class="def" href="#glossary-deprecated">deprecates</a> the use of this event type.</p>
+              <p class="warning"><strong>Warning!</strong> the <a class="eventtype" href="#event-type-DOMNodeInserted"><code>DOMNodeInserted</code></a> event type is defined in this specification for reference and completeness, but this specification <a class="def" href="#glossary-deprecated">deprecates</a> the use of this event type.</p>
             </dd>
           </dl>
         </div>
@@ -3848,7 +3822,7 @@
             </dt>
             <dd><table border="0" summary="This table contains information about the semantics of the given event type" cellpadding="2" cellspacing="0"><tr class="assert must"><th>Type</th><td class="eventname"><strong><code>DOMNodeRemoved</code></strong></td></tr><tr class="assert must"><th>Interface</th><td><a href="#events-Events-MutationEvent"><code>MutationEvent</code></a></td></tr><tr class="assert must"><th>Bubbles</th><td>Yes</td></tr><tr class="assert must"><th>Target</th><td><code>Element</code>, <code>Attr</code>, <code>Text</code>, <code>Comment</code>, <code>CDATASection</code>, <code>DocumentType</code>, <code>EntityReference</code>, <code>ProcessingInstruction</code></td></tr><tr class="assert must"><th>Cancelable</th><td>No</td></tr><tr class="assert must"><th>Default action</th><td>none</td></tr><tr class="assert must"><th>Context info</th><td><a href="#events-Events-MutationEvent-relatedNode"><code>MutationEvent.relatedNode</code></a> holds the parent node of the node being removed or, in case of <code>Attr</code> nodes, the <code>ownerElement</code> of the <code>Attr</code> node.</td></tr></table>
               A <a class="def" href="#glossary-user-agent">user agent</a> must dispatch this event when a node is being removed from its parent node or, in case of <code>Attr</code> nodes, removed from its <code>ownerElement</code>. This event shall be dispatched before the removal takes place. The <a class="def" href="#glossary-proximal-event-target">proximal event target</a> of this event shall be the node being removed.
-              <p class="warning"><strong>Warning:</strong> the <a class="eventtype" href="#event-type-DOMNodeRemoved"><code>DOMNodeRemoved</code></a> event type is defined in this specification for reference and completeness, but this specification <a class="def" href="#glossary-deprecated">deprecates</a> the use of this event type.</p>
+              <p class="warning"><strong>Warning!</strong> the <a class="eventtype" href="#event-type-DOMNodeRemoved"><code>DOMNodeRemoved</code></a> event type is defined in this specification for reference and completeness, but this specification <a class="def" href="#glossary-deprecated">deprecates</a> the use of this event type.</p>
             </dd>
           </dl>
         </div>
@@ -3861,7 +3835,7 @@
             </dt>
             <dd><table border="0" summary="This table contains information about the semantics of the given event type" cellpadding="2" cellspacing="0"><tr class="assert must"><th>Type</th><td class="eventname"><strong><code>DOMNodeRemovedFromDocument</code></strong></td></tr><tr class="assert must"><th>Interface</th><td><a href="#events-Events-MutationEvent"><code>MutationEvent</code></a></td></tr><tr class="assert must"><th>Bubbles</th><td>No</td></tr><tr class="assert must"><th>Target</th><td><code>Element</code>, <code>Attr</code>, <code>Text</code>, <code>Comment</code>, <code>CDATASection</code>, <code>DocumentType</code>, <code>EntityReference</code>, <code>ProcessingInstruction</code></td></tr><tr class="assert must"><th>Cancelable</th><td>No</td></tr><tr class="assert must"><th>Default action</th><td>none</td></tr><tr class="assert must"><th>Context info</th><td>None</td></tr></table>
               A <a class="def" href="#glossary-user-agent">user agent</a> must dispatch this event when a node is being removed from a document, either through direct removal of the node or removal of a subtree in which it is contained; <code>Attr</code> nodes are considered part of an <code>Element</code>'s subtree. This event shall be dispatched before the removal takes place. The <a class="def" href="#glossary-proximal-event-target">proximal event target</a> of this event type shall be the node being removed. If the node is being directly removed, the event type <a class="eventtype" href="#event-type-DOMNodeRemoved"><code>DOMNodeRemoved</code></a> must occur before this event type.
-              <p class="warning"><strong>Warning:</strong> the <a class="eventtype" href="#event-type-DOMNodeRemovedFromDocument"><code>DOMNodeRemovedFromDocument</code></a> event type is defined in this specification for reference and completeness, but this specification <a class="def" href="#glossary-deprecated">deprecates</a> the use of this event type.</p>
+              <p class="warning"><strong>Warning!</strong> the <a class="eventtype" href="#event-type-DOMNodeRemovedFromDocument"><code>DOMNodeRemovedFromDocument</code></a> event type is defined in this specification for reference and completeness, but this specification <a class="def" href="#glossary-deprecated">deprecates</a> the use of this event type.</p>
             </dd>
           </dl>
         </div>
@@ -3874,7 +3848,7 @@
             </dt>
             <dd><table border="0" summary="This table contains information about the semantics of the given event type" cellpadding="2" cellspacing="0"><tr class="assert must"><th>Type</th><td class="eventname"><strong><code>DOMNodeInsertedIntoDocument</code></strong></td></tr><tr class="assert must"><th>Interface</th><td><a href="#events-Events-MutationEvent"><code>MutationEvent</code></a></td></tr><tr class="assert must"><th>Bubbles</th><td>No</td></tr><tr class="assert must"><th>Target</th><td><code>Element</code>, <code>Attr</code>, <code>Text</code>, <code>Comment</code>, <code>CDATASection</code>, <code>DocumentType</code>, <code>EntityReference</code>, <code>ProcessingInstruction</code></td></tr><tr class="assert must"><th>Cancelable</th><td>No</td></tr><tr class="assert must"><th>Default action</th><td>none</td></tr><tr class="assert must"><th>Context info</th><td>None</td></tr></table>
               A <a class="def" href="#glossary-user-agent">user agent</a> must dispatch this event when a node has been inserted into a document, either through direct insertion of the node or insertion of a subtree in which it is contained; <code>Attr</code> nodes are considered part of an <code>Element</code>'s subtree. This event shall be dispatched after the insertion has taken place. The <a class="def" href="#glossary-proximal-event-target">proximal event target</a> of this event shall be the node being inserted. If the node is being directly inserted, the event type <a class="eventtype" href="#event-type-DOMNodeInserted"><code>DOMNodeInserted</code></a> must occur before this event type.
-              <p class="warning"><strong>Warning:</strong> the <a class="eventtype" href="#event-type-DOMNodeInsertedIntoDocument"><code>DOMNodeInsertedIntoDocument</code></a> event type is defined in this specification for reference and completeness, but this specification <a class="def" href="#glossary-deprecated">deprecates</a> the use of this event type.</p>
+              <p class="warning"><strong>Warning!</strong> the <a class="eventtype" href="#event-type-DOMNodeInsertedIntoDocument"><code>DOMNodeInsertedIntoDocument</code></a> event type is defined in this specification for reference and completeness, but this specification <a class="def" href="#glossary-deprecated">deprecates</a> the use of this event type.</p>
             </dd>
           </dl>
         </div>
@@ -3887,7 +3861,7 @@
             </dt>
             <dd><table border="0" summary="This table contains information about the semantics of the given event type" cellpadding="2" cellspacing="0"><tr class="assert must"><th>Type</th><td class="eventname"><strong><code>DOMAttrModified</code></strong></td></tr><tr class="assert must"><th>Interface</th><td><a href="#events-Events-MutationEvent"><code>MutationEvent</code></a></td></tr><tr class="assert must"><th>Bubbles</th><td>Yes</td></tr><tr class="assert must"><th>Target</th><td><code>Element</code></td></tr><tr class="assert must"><th>Cancelable</th><td>No</td></tr><tr class="assert must"><th>Default action</th><td>none</td></tr><tr class="assert must"><th>Context info</th><td><a href="#events-Events-MutationEvent-attrName"><code>MutationEvent.attrName</code></a> and <a href="#events-Events-MutationEvent-attrChange"><code>MutationEvent.attrChange</code></a> are in use. The value of <a href="#events-Events-MutationEvent-relatedNode"><code>MutationEvent.relatedNode</code></a> indicates the <code>Attr</code> node that has been modified, added, or removed. If the <code>Attr</code> node has been added, <a href="#events-Events-MutationEvent-newValue"><code>MutationEvent.newValue</code></a> shall be in use. If the <code>Attr</code> node has been removed, <a href="#events-Events-MutationEvent-prevValue"><code>MutationEvent.prevValue</code></a> shall be in use. If the <code>Attr</code> node has been modified, <a class="noxref" href="#events-Events-MutationEvent-newValue"><code>MutationEvent.newValue</code></a> and <a class="noxref" href="#events-Events-MutationEvent-prevValue"><code>MutationEvent.prevValue</code></a> are in use.</td></tr></table>
               A <a class="def" href="#glossary-user-agent">user agent</a> must dispatch this event after an <code>Attr.value</code> has been modified and after an <code>Attr</code> node has been added to or removed from an <code>Element</code>. The <a class="def" href="#glossary-proximal-event-target">proximal event target</a> of this event shall be the <code>Element</code> node where the change occurred. It is implementation dependent whether this event type occurs when the children of the <code>Attr</code> node are changed in ways that do not affect the value of <code>Attr.value</code>.
-              <p class="warning"><strong>Warning:</strong> the <a class="eventtype" href="#event-type-DOMAttrModified"><code>DOMAttrModified</code></a> event type is defined in this specification for reference and completeness, but this specification <a class="def" href="#glossary-deprecated">deprecates</a> the use of this event type.</p>
+              <p class="warning"><strong>Warning!</strong> the <a class="eventtype" href="#event-type-DOMAttrModified"><code>DOMAttrModified</code></a> event type is defined in this specification for reference and completeness, but this specification <a class="def" href="#glossary-deprecated">deprecates</a> the use of this event type.</p>
             </dd>
           </dl>
         </div>
@@ -3900,7 +3874,7 @@
             </dt>
             <dd><table border="0" summary="This table contains information about the semantics of the given event type" cellpadding="2" cellspacing="0"><tr class="assert must"><th>Type</th><td class="eventname"><strong><code>DOMCharacterDataModified</code></strong></td></tr><tr class="assert must"><th>Interface</th><td><a href="#events-Events-MutationEvent"><code>MutationEvent</code></a></td></tr><tr class="assert must"><th>Bubbles</th><td>Yes</td></tr><tr class="assert must"><th>Target</th><td><code>Text</code>, <code>Comment</code>, <code>CDATASection</code>, <code>ProcessingInstruction</code></td></tr><tr class="assert must"><th>Cancelable</th><td>No</td></tr><tr class="assert must"><th>Default action</th><td>none</td></tr><tr class="assert must"><th>Context info</th><td><a href="#events-Events-MutationEvent-prevValue"><code>MutationEvent.prevValue</code></a>, and <a href="#events-Events-MutationEvent-newValue"><code>MutationEvent.newValue</code></a> are in use.</td></tr></table>
               A <a class="def" href="#glossary-user-agent">user agent</a> must dispatch this event after <code>CharacterData.data</code> or <code>ProcessingInstruction.data</code> have been modified, but the node itself has not been inserted or deleted.  The <a class="def" href="#glossary-proximal-event-target">proximal event target</a> of this event shall be the <code>CharacterData</code> node or the <code>ProcessingInstruction</code> node.
-              <p class="warning"><strong>Warning:</strong> the <a class="eventtype" href="#event-type-DOMCharacterDataModified"><code>DOMCharacterDataModified</code></a> event type is defined in this specification for reference and completeness, but this specification <a class="def" href="#glossary-deprecated">deprecates</a> the use of this event type.</p>
+              <p class="warning"><strong>Warning!</strong> the <a class="eventtype" href="#event-type-DOMCharacterDataModified"><code>DOMCharacterDataModified</code></a> event type is defined in this specification for reference and completeness, but this specification <a class="def" href="#glossary-deprecated">deprecates</a> the use of this event type.</p>
             </dd>
           </dl>
         </div>
@@ -3911,7 +3885,7 @@
       <div class="div3">
         <h3 class="div3"><a id="events-mutationnameevents" href="#events-mutationnameevents">5.2.10 Mutation Name Event Types</a></h3>
         <p>This module defines the feature MutationNameEvents 3.0 and depends on the features MutationEvents 3.0 and Core 3.0.</p>
-        <p class="warning"><strong>Warning:</strong>  The <code>MutationNameEvents</code> interface, introduced in an earlier draft of this specification, derives from the <a href="#events-mutationevents"><code>MutationEvent</code></a> interface, which is deprecated in this specification.  Thus, this specification describes the mutation name event types for completeness, but <a class="def" href="#glossary-deprecated">deprecates</a> their use.</p>
+        <p class="warning"><strong>Warning!</strong>  The <code>MutationNameEvents</code> interface, introduced in an earlier draft of this specification, derives from the <a href="#events-mutationevents"><code>MutationEvent</code></a> interface, which is deprecated in this specification.  Thus, this specification describes the mutation name event types for completeness, but <a class="def" href="#glossary-deprecated">deprecates</a> their use.</p>
         <dl>
           <dt><strong>Interface <em><a id="events-Events-MutationNameEvent">MutationNameEvent</a></em></strong> (introduced in <strong class="since">DOM Level 3</strong>)</dt>
           <dd>
@@ -3982,7 +3956,7 @@
             </dt>
             <dd><table border="0" summary="This table contains information about the semantics of the given event type" cellpadding="2" cellspacing="0"><tr class="assert must"><th>Type</th><td class="eventname"><strong><code>DOMElementNameChanged</code></strong></td></tr><tr class="assert must"><th>Interface</th><td><a href="#events-Events-MutationNameEvent"><code>MutationNameEvent</code></a></td></tr><tr class="assert must"><th>Bubbles</th><td>Yes</td></tr><tr class="assert must"><th>Target</th><td><code>Element</code></td></tr><tr class="assert must"><th>Cancelable</th><td>No</td></tr><tr class="assert must"><th>Default action</th><td>none</td></tr><tr class="assert must"><th>Context info</th><td><a href="#events-Events-MutationNameEvent-prevNamespaceURI"><code>MutationNameEvent.prevNamespaceURI</code></a>, and <a href="#events-Events-MutationNameEvent-prevNodeName"><code>MutationNameEvent.prevNodeName</code></a> are in use.</td></tr></table>
               A <a class="def" href="#glossary-user-agent">user agent</a> must dispatch this event after the <code>namespaceURI</code> and/or the <code>nodeName</code> of an <code>Element</code> node have been modified (e.g., the element was renamed using <code>Document.renameNode()</code>). The <a class="def" href="#glossary-proximal-event-target">proximal event target</a> of this event shall be the renamed <code>Element</code> node.
-              <p class="warning"><strong>Warning:</strong> the <a class="eventtype" href="#event-type-DOMElementNameChanged"><code>DOMElementNameChanged</code></a> event type is defined in this specification for reference and completeness, but this specification <a class="def" href="#glossary-deprecated">deprecates</a> the use of this event type.</p>
+              <p class="warning"><strong>Warning!</strong> the <a class="eventtype" href="#event-type-DOMElementNameChanged"><code>DOMElementNameChanged</code></a> event type is defined in this specification for reference and completeness, but this specification <a class="def" href="#glossary-deprecated">deprecates</a> the use of this event type.</p>
             </dd>
           </dl>
         </div>
@@ -3995,7 +3969,7 @@
             </dt>
             <dd><table border="0" summary="This table contains information about the semantics of the given event type" cellpadding="2" cellspacing="0"><tr class="assert must"><th>Type</th><td class="eventname"><strong><code>DOMAttributeNameChanged</code></strong></td></tr><tr class="assert must"><th>Interface</th><td><a href="#events-Events-MutationNameEvent"><code>MutationNameEvent</code></a></td></tr><tr class="assert must"><th>Bubbles</th><td>Yes</td></tr><tr class="assert must"><th>Target</th><td><code>Element</code></td></tr><tr class="assert must"><th>Cancelable</th><td>No</td></tr><tr class="assert must"><th>Default action</th><td>none</td></tr><tr class="assert must"><th>Context info</th><td><a href="#events-Events-MutationNameEvent-prevNamespaceURI"><code>MutationNameEvent.prevNamespaceURI</code></a>, and <a href="#events-Events-MutationNameEvent-prevNodeName"><code>MutationNameEvent.prevNodeName</code></a> are in use. The value of <a href="#events-Events-MutationEvent-relatedNode"><code>MutationEvent.relatedNode</code></a> contains the renamed <code>Attr</code> node.</td></tr></table>
               A <a class="def" href="#glossary-user-agent">user agent</a> must dispatch this event after the <code>namespaceURI</code> and/or the <code>nodeName</code> of a <code>Attr</code> node have been modified (e.g., the attribute was renamed using <code>Document.renameNode()</code>). The <a class="def" href="#glossary-proximal-event-target">proximal event target</a> of this event shall be the <code>Element</code> node whose <code>Attr</code> has been renamed.
-              <p class="warning"><strong>Warning:</strong> the <a class="eventtype" href="#event-type-DOMAttributeNameChanged"><code>DOMAttributeNameChanged</code></a> event type is defined in this specification for reference and completeness, but this specification <a class="def" href="#glossary-deprecated">deprecates</a> the use of this event type.</p>
+              <p class="warning"><strong>Warning!</strong> the <a class="eventtype" href="#event-type-DOMAttributeNameChanged"><code>DOMAttributeNameChanged</code></a> event type is defined in this specification for reference and completeness, but this specification <a class="def" href="#glossary-deprecated">deprecates</a> the use of this event type.</p>
             </dd>
           </dl>
         </div>
@@ -4087,7 +4061,7 @@
         <p>Key values can be used to detect the value of a key which has been pressed, using the <a href="#events-Events-KeyboardEvent-key"><code>KeyboardEvent.key</code></a> attribute.  Authors can retrieve the <a class="def" href="#glossary-character-value">character value</a> of upper- or lower-case letters, number, symbols, or other character-producing keys, and also the <a class="def" href="#glossary-key-name">key name</a> of control keys, modifier keys, function keys, or other keys that do not generate characters; these values can be used for monitoring particular input strings, for detecting and acting on modifier key input in combination with other inputs (such as a mouse), for creating virtual keyboards, or for any number of other purposes.</p>  
         
         <p>Key values can also be used by authors in string comparisons, as values for markup attributes (such as the HTML <code>accesskey</code>) in conforming <a class="def" href="#glossary-host-language">host languages</a>, or for other related purposes.   A conforming <a class="def" href="#glossary-host-language">host language</a> should allow authors to use either of the two equivalent string values for a key value: the <a class="def" href="#glossary-character-value">character value</a>, or the <a class="def" href="#glossary-key-name">key name</a>.</p>
-    		<p class="issue">@@ mention that author should use case-insensitive matching to capture both "t" and "T" for hotkeys, etc.?</p>
+    		<p class="issue"><strong>Issue:</strong> mention that author should use case-insensitive matching to capture both "t" and "T" for hotkeys, etc.?</p>
 
         
         <p class="note"><strong>Note:</strong> While implementations are recommended to use the most relevant value for a key independently of the platform or keyboard layout mappings, authors should not make assumption on the ability of keyboard devices to generate them.  When using keyboard events and key values for shortcut-key combinations, authors should <q>consider using numbers and function keys (F4, F5, and so on) instead of letters</q> ([<cite><a class="noxref informative" href="#references-DWW95">DWW95</a></cite>]) given that most keyboard layouts will provide keys for those.</p>
@@ -4116,7 +4090,10 @@
           
           <p>With legacy keyboard event attributes such as <code>keyCode</code> and <code>charCode</code>, authors are forced to filter key input using cryptic, platform- and implementation-specific numeric codes, with poor internationalization, such as the following pseudocode:</p>
 
-<pre class="example"><code>
+        <div class="example" id="example-keyCode_charCode">
+          <p><strong>Example:</strong></p>
+<pre><code>
+  
   if ( ( event.charCode == 45 || event.charCode == 36 ) ||
        ( event.charCode >= 48 && event.charCode <= 57 ) || 
        ( event.charCode >= 96 && event.charCode <= 105 ) ) {
@@ -4132,10 +4109,13 @@
     <em>...</em> 
   } 
 </code></pre>
+        </div>
 
           <p>With key values and regular expressions, however, authors can support selective and intuitive ranges for key-based input, in a cross-platform manner with advanced internationalization support, such as the following pseudocode:</p>
 
-<pre class="example"><code>
+          <div class="example" id="example-regex">
+            <p><strong>Example:</strong></p>
+<pre><code>
   if ( event.key == "-" || 
        event.key.match("\p{Sc}") || 
        event.key.match("\p{N}") ) {
@@ -4150,6 +4130,8 @@
     <em>...</em> 
   } 
 </code></pre>
+          </div>
+
 
           <p>In addition, because Unicode categorizes each assigned <a class="def" href="#glossary-unicode-code-point">code point</a> into a group of code points used by a particular human writing system, even more advanced capabilities are possible.  For example, an author can match characters from a particular human script (e.g. Tibetan) using a regular expression such as <code class="example inline">\p{Tibetan}</code>, to filter out other characters, or discover if a <a class="def" href="#glossary-unicode-code-point">code point</a> is in a certain code block (range of code points), using a regular expression like <code class="example inline">\p{InCyrillic}</code>.</p>
 
@@ -4161,30 +4143,40 @@
           <p>Keyboard input uses modifier keys to change the normal behavior of a key.  Like other keys, modifier keys generate <a class="eventtype" href="#event-type-keydown"><code>keydown</code></a> and <a class="eventtype" href="#event-type-keyup"><code>keyup</code></a> events, as shown in the example below. Some modifiers are activated while the key is being pressed down or maintained pressed such as <code class="value">'Alt'</code>, <code class="value">'Control'</code>, <code class="value">'Shift'</code>, <code class="value">'AltGraph'</code>, or <code class="value">'Meta'</code>. Others modifiers are activated depending on their state such as <code class="value">'CapsLock'</code>, <code class="value">'NumLock'</code>, or <code class="value">'Scroll'</code>. Change in the state happens when the modifier key is being pressed down. The <a href="#events-Events-KeyboardEvent"><code>KeyboardEvent</code></a> interface provides convenient attributes for some common modifiers keys: <a href="#events-Events-KeyboardEvent-ctrlKey"><code>KeyboardEvent.ctrlKey</code></a>, <a href="#events-Events-KeyboardEvent-shiftKey"><code>KeyboardEvent.shiftKey</code></a>, <a href="#events-Events-KeyboardEvent-altKey"><code>KeyboardEvent.altKey</code></a>, <a href="#events-Events-KeyboardEvent-metaKey"><code>KeyboardEvent.metaKey</code></a>. Some operating systems simulate the <code class="value">'AltGraph'</code> modifier key with the combination of the <code>"Alt</code> and <code class="value">'Control'</code> modifier keys. Implementations are encouraged to use the <code class="value">'AltGraph'</code> modifier key.</p>
 
           <p>The following example describes a possible sequence of keys to generate the Unicode character Q (Latin Capital Letter Q, <a class="def" href="#glossary-unicode-code-point">Unicode code point</a> <code class="value">'\u0051'</code>) on a PC/AT US keyboard using a US mapping:</p>
-          <ol>
-            <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'Shift'</code>, <code class="attribute-name"><a href="#events-Events-MouseEvent-shiftKey">shiftKey</a></code></li>
-            <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'Q'</code> (<code class="value">'\u0051'</code>, Latin Capital Letter Q key), <code class="attribute-name"><a href="#events-Events-MouseEvent-shiftKey">shiftKey</a></code></li>
-            <li><a class="eventtype" href="#event-type-textInput"><code>textInput</code></a>: <code class="value">'Q'</code></li>
-            <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'Q'</code> (<code class="value">'\u0051'</code>, Latin Capital Letter Q key), <code class="attribute-name"><a href="#events-Events-MouseEvent-shiftKey">shiftKey</a></code></li>
-            <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'Shift'</code></li>
-          </ol>
+          <div class="example" id="example-keyvalue_Q">
+            <p><strong>Example:</strong></p>
+            <ol>
+              <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'Shift'</code>, <code class="attribute-name"><a href="#events-Events-MouseEvent-shiftKey">shiftKey</a></code></li>
+              <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'Q'</code> (<code class="value">'\u0051'</code>, Latin Capital Letter Q key), <code class="attribute-name"><a href="#events-Events-MouseEvent-shiftKey">shiftKey</a></code></li>
+              <li><a class="eventtype" href="#event-type-textInput"><code>textInput</code></a>: <code class="value">'Q'</code></li>
+              <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'Q'</code> (<code class="value">'\u0051'</code>, Latin Capital Letter Q key), <code class="attribute-name"><a href="#events-Events-MouseEvent-shiftKey">shiftKey</a></code></li>
+              <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'Shift'</code></li>
+            </ol>
+          </div>
+          
 
           <p>The following example describes an alternate sequence of keys to the example above, where the <code class="value">'Shift'</code> key is released before the <code class="value">'Q'</code> key.  The key value for the key labeled <code class="value">'Q'</code> will revert to its unshifted value for the <a class="eventtype" href="#event-type-keyup"><code>keyup</code></a> event, after the production of the <a class="eventtype" href="#event-type-textInput"><code>textInput</code></a> event, thus:</p>
-          <ol>
-            <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'Shift'</code>, <code class="attribute-name"><a href="#events-Events-MouseEvent-shiftKey">shiftKey</a></code></li>
-            <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'Q'</code> (<code class="value">'\u0051'</code>, Latin Capital Letter Q key), <code class="attribute-name"><a href="#events-Events-MouseEvent-shiftKey">shiftKey</a></code></li>
-            <li><a class="eventtype" href="#event-type-textInput"><code>textInput</code></a>: <code class="value">'Q'</code></li>
-            <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'Shift'</code></li>
-            <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'q'</code> (<code class="value">'\u0071'</code>, Latin Small Letter Q key)</li>
-          </ol>
+          <div class="example" id="example-keyvalue_Q_keyup">
+            <p><strong>Example:</strong></p>
+            <ol>
+              <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'Shift'</code>, <code class="attribute-name"><a href="#events-Events-MouseEvent-shiftKey">shiftKey</a></code></li>
+              <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'Q'</code> (<code class="value">'\u0051'</code>, Latin Capital Letter Q key), <code class="attribute-name"><a href="#events-Events-MouseEvent-shiftKey">shiftKey</a></code></li>
+              <li><a class="eventtype" href="#event-type-textInput"><code>textInput</code></a>: <code class="value">'Q'</code></li>
+              <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'Shift'</code></li>
+              <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'q'</code> (<code class="value">'\u0071'</code>, Latin Small Letter Q key)</li>
+            </ol>
+          </div>
 
           <p>The following example describes a possible sequence of keys that does not generate a Unicode character (using the same configuration):</p>
-          <ol>
-            <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'Control'</code>, ctrlKey</li>
-            <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'v'</code> (<code class="value">'\u0076'</code>, Latin Small Letter V key), ctrlKey</li>
-            <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>:  <code class="value">'v'</code> (<code class="value">'\u0076'</code>, Latin Small Letter V key), ctrlKey</li>
-            <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'Control'</code></li>
-          </ol>
+          <div class="example" id="example-Keyvalue_noUnicode">
+            <p><strong>Example:</strong></p>
+            <ol>
+              <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'Control'</code>, ctrlKey</li>
+              <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'v'</code> (<code class="value">'\u0076'</code>, Latin Small Letter V key), ctrlKey</li>
+              <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>:  <code class="value">'v'</code> (<code class="value">'\u0076'</code>, Latin Small Letter V key), ctrlKey</li>
+              <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'Control'</code></li>
+            </ol>
+          </div>
           <p>In some cases, modifier keys change the key value value for a key event.  For example, on some MacOS keyboards, the  key labeled <code class="value">'delete'</code> functions the same as the <code class="value">'Backspace'</code> key on the Windows OS when unmodified, but when modified by the <code class="value">'Fn'</code> key, acts as the <code class="value">'Del'</code> key, and the value of the key value must match the most appropriate function of the key in its current modified state.</p>
         </div>
     <!-- div3 Modifiers -->
@@ -4195,27 +4187,33 @@
           <p>Some keyboard input uses <a class="def" href="#glossary-dead-key">dead keys</a> for the input of composed character sequences. Unlike the handwriting sequence, in which users enter the base character first, keyboard input requires to enter a special state when a <a class="def" href="#glossary-dead-key">dead key</a> is pressed and emit the character(s) only when one of a limited number of "legal" base character is entered.  (NOTE: the MacOS and Linux operating systems use input methods to process <a class="def" href="#glossary-dead-key">dead keys</a>.)
                           </p>
           <p>The <a class="def" href="#glossary-dead-key">dead keys</a> are represented in the key values set using combining diacritical marks. The sequence of keystrokes "\u0302" (Combining Circumflex Accent key) and "\u0065" (Latin Small Letter E key) will likely produce (on a PC/AT french keyboard using a french mapping and without any modifier activated) the Unicode character &#xEA; (Latin Small Letter E With Circumflex), as preferred by the Unicode Normalization Form <em>NFC</em>:</p>
-          <ol>
-            <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'\u0302'</code> (Combining Circumflex Accent key)</li>
-            <li><a class="eventtype" href="#event-type-compositionstart"><code>compositionstart</code></a>: <code class="value">''</code></li>
-            <li><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a>: <code class="value">''</code><span class="issue">@@ (value undefined - to be discussed)</span></li>
-            <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'\u0302'</code> (Combining Circumflex Accent key)</li>
-            <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'e'</code> (<code class="value">'\u0065'</code>, Latin Small Letter E key) <span class="issue">@@ shouldn't this be <code class="value">'&#xE9;'</code>?</span></li>
-            <li><a class="eventtype" href="#event-type-compositionend"><code>compositionend</code></a>: <code class="value">'&#xE9;'</code></li>
-            <li><a class="eventtype" href="#event-type-textInput"><code>textInput</code></a>: <code class="value">'&#xE9;'</code> (<code>"inputMode"</code>: <code class="value">'DOM_INPUT_METHOD_IME'</code>)</li>
-            <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'e'</code> (<code class="value">'\u0065'</code>, Latin Small Letter E key)</li>
-          </ol>
+          <div class="example" id="example-deadkey">
+            <p><strong>Example:</strong></p>
+            <ol>
+              <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'\u0302'</code> (Combining Circumflex Accent key)</li>
+              <li><a class="eventtype" href="#event-type-compositionstart"><code>compositionstart</code></a>: <code class="value">''</code></li>
+              <li><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a>: <code class="value">''</code><i class="issue" id="issue-compositionupdate_value_undefined"><strong>Issue:</strong> (value undefined - to be discussed)</i></li>
+              <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'\u0302'</code> (Combining Circumflex Accent key)</li>
+              <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'e'</code> (<code class="value">'\u0065'</code>, Latin Small Letter E key) <i class="issue" id="issue-keydown_e"><strong>Issue:</strong> shouldn't this be <code class="value">'&#xE9;'</code>?</i></li>
+              <li><a class="eventtype" href="#event-type-compositionend"><code>compositionend</code></a>: <code class="value">'&#xE9;'</code></li>
+              <li><a class="eventtype" href="#event-type-textInput"><code>textInput</code></a>: <code class="value">'&#xE9;'</code> (<code>"inputMode"</code>: <code class="value">'DOM_INPUT_METHOD_IME'</code>)</li>
+              <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'e'</code> (<code class="value">'\u0065'</code>, Latin Small Letter E key)</li>
+            </ol>
+          </div>
           <p>This process may be aborted when a user types an unsupported base character (that is, a base character for which the which the active diacritical mark is not available) after pressing a <a class="def" href="#glossary-dead-key">dead key</a>:</p>
-          <ol>
-            <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'\u0302'</code> (Combining Circumflex Accent key)</li>
-            <li><a class="eventtype" href="#event-type-compositionstart"><code>compositionstart</code></a>: <code class="value">''</code></li>
-            <li><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a>: <code class="value">''</code><span class="issue">@@ (undefined - to be discussed)</span></li>
-            <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'\u0302'</code> (Combining Circumflex Accent key)</li>
-            <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'q'</code> (<code class="value">'\u0071'</code>, The Latin Small Letter Q key)</li>
-            <li><a class="eventtype" href="#event-type-compositionend"><code>compositionend</code></a>: <code class="value">''</code></li>
-            <li><a class="eventtype" href="#event-type-textInput"><code>textInput</code></a>: <code class="value">'q'</code> (<code>"inputMode"</code>: <code class="value">'DOM_INPUT_METHOD_KEYBOARD'</code>)</li>
-            <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'q'</code> (<code class="value">'\u0071'</code>, The Latin Small Letter Q key)</li>
-          </ol>
+          <div class="example" id="example-deadkey_abort">
+            <p><strong>Example:</strong></p>
+            <ol>
+              <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'\u0302'</code> (Combining Circumflex Accent key)</li>
+              <li><a class="eventtype" href="#event-type-compositionstart"><code>compositionstart</code></a>: <code class="value">''</code></li>
+              <li><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a>: <code class="value">''</code><i class="issue" id="issue-compositionupdate_undefined"><strong>Issue:</strong> (undefined - to be discussed)</i></li>
+              <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'\u0302'</code> (Combining Circumflex Accent key)</li>
+              <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'q'</code> (<code class="value">'\u0071'</code>, The Latin Small Letter Q key)</li>
+              <li><a class="eventtype" href="#event-type-compositionend"><code>compositionend</code></a>: <code class="value">''</code></li>
+              <li><a class="eventtype" href="#event-type-textInput"><code>textInput</code></a>: <code class="value">'q'</code> (<code>"inputMode"</code>: <code class="value">'DOM_INPUT_METHOD_KEYBOARD'</code>)</li>
+              <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'q'</code> (<code class="value">'\u0071'</code>, The Latin Small Letter Q key)</li>
+            </ol>
+          </div>
         </div>
     <!-- div3 DeadKeys -->
     
@@ -4226,42 +4224,48 @@
           <p>Keyboard events correspond to the events generated by the input device after the keyboard layout mapping but before the processing of the input method editor.</p>
           <p>The following example describes a possible sequence of keys to generate the Unicode character &#x5E02; (Kanji character, part of CJK Unified Ideographs) using Japanese input methods. This example assumes that the input method editor is activated and in the Japanese-Romaji input mode. The keys <code class="value">'Convert'</code> and <code class="value">'Accept'</code> may be replaced by others depending on the input device in use and the configuration of the IME, e.g. it could be respectively <code class="value">'\u0020'</code> (Space key) and <code class="value">'Enter'</code>. <span class="note"><strong>Note:</strong> <code class="value">'&#x8A69;'</code> ("poem") and <code class="value">'&#x5E02;'</code> ("city") are homophones, both pronounced "shi", so the user must use the <code class="value">'Convert'</code> key to select the proper option.</span></p>
   		    </p>
-          <ol>
-            <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'s'</code> (<code class="value">'\u0073'</code>, Latin Small Letter S key)</li></li>
-            <li><a class="eventtype" href="#event-type-compositionstart"><code>compositionstart</code></a>: <code class="value">''</code></li>
-            <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'s'</code> (<code class="value">'\u0073'</code>, Latin Small Letter S key)</li></li>
-            <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'i'</code> (<code class="value">'\u0069'</code>, Latin Small Letter I key)</li>
-            <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'i'</code> (<code class="value">'\u0069'</code>, Latin Small Letter I key)</li>
-            <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'Convert'</code></li>
-            <li><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a>: <code class="value">'&#x8A69;'</code></li>
-            <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'Convert'</code></li>
-            <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'Convert'</code></li>
-            <li><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a>: <code class="value">'&#x5E02;'</code></li>
-            <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'Convert'</code></li>
-            <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'Accept'</code></li>
-            <li><a class="eventtype" href="#event-type-compositionend"><code>compositionend</code></a>: <code class="value">'&#x5E02;'</code></li>
-            <li><a class="eventtype" href="#event-type-textInput"><code>textInput</code></a>: <code class="value">'&#x5E02;'</code> (<code>"inputMode"</code>: <code class="value">'DOM_INPUT_METHOD_IME'</code>)</li>
-            <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'Accept'</code></li>
-          </ol>
+          <div class="example" id="example-compo">
+            <p><strong>Example:</strong></p>
+            <ol>
+              <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'s'</code> (<code class="value">'\u0073'</code>, Latin Small Letter S key)</li></li>
+              <li><a class="eventtype" href="#event-type-compositionstart"><code>compositionstart</code></a>: <code class="value">''</code></li>
+              <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'s'</code> (<code class="value">'\u0073'</code>, Latin Small Letter S key)</li></li>
+              <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'i'</code> (<code class="value">'\u0069'</code>, Latin Small Letter I key)</li>
+              <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'i'</code> (<code class="value">'\u0069'</code>, Latin Small Letter I key)</li>
+              <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'Convert'</code></li>
+              <li><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a>: <code class="value">'&#x8A69;'</code></li>
+              <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'Convert'</code></li>
+              <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'Convert'</code></li>
+              <li><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a>: <code class="value">'&#x5E02;'</code></li>
+              <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'Convert'</code></li>
+              <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'Accept'</code></li>
+              <li><a class="eventtype" href="#event-type-compositionend"><code>compositionend</code></a>: <code class="value">'&#x5E02;'</code></li>
+              <li><a class="eventtype" href="#event-type-textInput"><code>textInput</code></a>: <code class="value">'&#x5E02;'</code> (<code>"inputMode"</code>: <code class="value">'DOM_INPUT_METHOD_IME'</code>)</li>
+              <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'Accept'</code></li>
+            </ol>
+          </div>
           
           <p>IME composition may also be canceled as in the following example, with conditions identical to the previous example.  The key "Cancel" may also be replaced by others depending on the input device in use and the configuration of the IME, e.g. it could be "\u001B" (Escape key).</p>
-          <ol>
-            <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'s'</code> (<code class="value">'\u0073'</code>, Latin Small Letter S key)</li></li>
-            <li><a class="eventtype" href="#event-type-compositionstart"><code>compositionstart</code></a>: <code class="value">''</code></li>
-            <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'s'</code> (<code class="value">'\u0073'</code>, Latin Small Letter S key)</li></li>
-            <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'i'</code> (<code class="value">'\u0069'</code>, Latin Small Letter I key)</li>
-            <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'i'</code> (<code class="value">'\u0069'</code>, Latin Small Letter I key)</li>
-            <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'Convert'</code></li>
-            <li><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a>: <code class="value">'&#x8A69;'</code></li>
-            <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'Convert'</code></li>
-            <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'Convert'</code></li>
-            <li><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a>: <code class="value">'&#x5E02;'</code></li>
-            <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'Convert'</code></li>
-            <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'Cancel'</code></li>
-            <li><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a>: <code class="value">''</code></li>
-            <li><a class="eventtype" href="#event-type-compositionend"><code>compositionend</code></a>: <code class="value">''</code></li>
-            <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'Cancel'</code></li>
-          </ol>
+          <div class="example" id="example-compo_cancel">
+            <p><strong>Example:</strong></p>
+            <ol>
+              <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'s'</code> (<code class="value">'\u0073'</code>, Latin Small Letter S key)</li></li>
+              <li><a class="eventtype" href="#event-type-compositionstart"><code>compositionstart</code></a>: <code class="value">''</code></li>
+              <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'s'</code> (<code class="value">'\u0073'</code>, Latin Small Letter S key)</li></li>
+              <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'i'</code> (<code class="value">'\u0069'</code>, Latin Small Letter I key)</li>
+              <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'i'</code> (<code class="value">'\u0069'</code>, Latin Small Letter I key)</li>
+              <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'Convert'</code></li>
+              <li><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a>: <code class="value">'&#x8A69;'</code></li>
+              <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'Convert'</code></li>
+              <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'Convert'</code></li>
+              <li><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a>: <code class="value">'&#x5E02;'</code></li>
+              <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'Convert'</code></li>
+              <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'Cancel'</code></li>
+              <li><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a>: <code class="value">''</code></li>
+              <li><a class="eventtype" href="#event-type-compositionend"><code>compositionend</code></a>: <code class="value">''</code></li>
+              <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'Cancel'</code></li>
+            </ol>
+          </div>
           <p>NOTE: Some <a class="def" href="#glossary-ime">input method editors</a> (such as on the MacOS operating system) may set an empty string to the composition data attribute before canceling a composition.</p>
           <h5 class="adiv4">
             <a id="keyset-IME_keys" href="#keyset-IME_keys">6.2.4.1 Input Method Editor mode keys</a>
@@ -4276,26 +4280,32 @@
           <h4 class="adiv3"><a id="keyset-cancelable_keys" href="#keyset-cancelable_keys">6.2.5 Default actions and cancelable keyboard events</a></h4>
           
           <p>Canceling the <a class="def" href="#glossary-default-action">default action</a> of a <a class="eventtype" href="#event-type-keydown"><code>keydown</code></a> event must not affect its respective <a class="eventtype" href="#event-type-keyup"><code>keyup</code></a> event, but it must prevent the respective <a class="eventtype" href="#event-type-textInput"><code>textInput</code></a> event from being generated. The following example describes a possible sequence of keys to generate the Unicode character Q (Latin Capital Letter Q) on a PC/AT US keyboard using a US mapping:</p>
-          <ol>
-            <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'Shift'</code>, <code class="attribute-name"><a href="#events-Events-MouseEvent-shiftKey">shiftKey</a></code></li>
-            <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'Q'</code> (<code class="value">'\u0051'</code>, Latin Capital Letter Q key), <code class="attribute-name"><a href="#events-Events-MouseEvent-shiftKey">shiftKey</a></code></li>
-            <li><em>The <a class="def" href="#glossary-default-action">default action</a> of the <a class="eventtype" href="#event-type-keydown"><code>keydown</code></a> event is prevented, e.g. by invoking <a href="#events-event-type-preventDefault"><code>Event.preventDefault()</code></a> during the dispatch of the keydown event object</em></li>
-            <li><em>No <a class="eventtype" href="#event-type-textInput"><code>textInput</code></a> event is generated</em></li>
-            <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'Q'</code> (<code class="value">'\u0051'</code>, Latin Capital Letter Q key), <code class="attribute-name"><a href="#events-Events-MouseEvent-shiftKey">shiftKey</a></code></li>
-            <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'Shift'</code></li>
-          </ol>
+          <div class="example" id="example-cancel_keys">
+            <p><strong>Example:</strong></p>
+            <ol>
+              <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'Shift'</code>, <code class="attribute-name"><a href="#events-Events-MouseEvent-shiftKey">shiftKey</a></code></li>
+              <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'Q'</code> (<code class="value">'\u0051'</code>, Latin Capital Letter Q key), <code class="attribute-name"><a href="#events-Events-MouseEvent-shiftKey">shiftKey</a></code></li>
+              <li><em>The <a class="def" href="#glossary-default-action">default action</a> of the <a class="eventtype" href="#event-type-keydown"><code>keydown</code></a> event is prevented, e.g. by invoking <a href="#events-event-type-preventDefault"><code>Event.preventDefault()</code></a> during the dispatch of the keydown event object</em></li>
+              <li><em>No <a class="eventtype" href="#event-type-textInput"><code>textInput</code></a> event is generated</em></li>
+              <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'Q'</code> (<code class="value">'\u0051'</code>, Latin Capital Letter Q key), <code class="attribute-name"><a href="#events-Events-MouseEvent-shiftKey">shiftKey</a></code></li>
+              <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'Shift'</code></li>
+            </ol>
+          </div>
 
           <p>If the key is a modifier key, the keystroke must still be taken into account for the modifiers states. The following example describes a possible sequence of keys to generate the Unicode character Q (Latin Capital Letter Q) on a PC/AT US keyboard using a US mapping:</p>
-          <ol>
-            <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'Shift'</code>, <code class="attribute-name"><a href="#events-Events-MouseEvent-shiftKey">shiftKey</a></code></li>
-            <li><em>The <a class="def" href="#glossary-default-action">default action</a> of the <a class="eventtype" href="#event-type-keydown"><code>keydown</code></a> event is prevented, e.g. by invoking <a href="#events-event-type-preventDefault"><code>Event.preventDefault()</code></a> during the dispatch of the keydown event object</em></li>
-            <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'Q'</code> (<code class="value">'\u0051'</code>, Latin Capital Letter Q key), <code class="attribute-name"><a href="#events-Events-MouseEvent-shiftKey">shiftKey</a></code></li>
-            <li><a class="eventtype" href="#event-type-textInput"><code>textInput</code></a>: <code class="value">'Q'</code></li>
-            <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'Q'</code> (<code class="value">'\u0051'</code>, Latin Capital Letter Q key), <code class="attribute-name"><a href="#events-Events-MouseEvent-shiftKey">shiftKey</a></code></li>
-            <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'Shift'</code></li>
-          </ol>
+          <div class="example" id="example-cancel_mod">
+            <p><strong>Example:</strong></p>
+            <ol>
+              <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'Shift'</code>, <code class="attribute-name"><a href="#events-Events-MouseEvent-shiftKey">shiftKey</a></code></li>
+              <li><em>The <a class="def" href="#glossary-default-action">default action</a> of the <a class="eventtype" href="#event-type-keydown"><code>keydown</code></a> event is prevented, e.g. by invoking <a href="#events-event-type-preventDefault"><code>Event.preventDefault()</code></a> during the dispatch of the keydown event object</em></li>
+              <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'Q'</code> (<code class="value">'\u0051'</code>, Latin Capital Letter Q key), <code class="attribute-name"><a href="#events-Events-MouseEvent-shiftKey">shiftKey</a></code></li>
+              <li><a class="eventtype" href="#event-type-textInput"><code>textInput</code></a>: <code class="value">'Q'</code></li>
+              <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'Q'</code> (<code class="value">'\u0051'</code>, Latin Capital Letter Q key), <code class="attribute-name"><a href="#events-Events-MouseEvent-shiftKey">shiftKey</a></code></li>
+              <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'Shift'</code></li>
+            </ol>
+          </div>
           
-          <p class="issue">@@ does this make sense? shouldn't the shift modifier attribute be canceled? needs testing...</p>
+          <p class="issue"><strong>Issue:</strong> does this make sense? shouldn't the shift modifier attribute be canceled? needs testing...</p>
 
           <!-- <p>If the key is a modifier key, the keystroke must not be taken into account for the modifiers states. The following example describes a possible sequence of keys to generate the Unicode character Q (Latin Capital Letter Q) on a PC/AT US keyboard using a US mapping:</p>
           <ol>
@@ -4308,14 +4318,17 @@
           </ol> -->
 
           <p>If the key is part of a sequence of several keystrokes, whether it is a <a class="def" href="#glossary-dead-key">dead key</a> or it is contributing to an Input Method Editor sequence, the keystroke shall be ignored (not taken into account) only if the <a class="def" href="#glossary-default-action">default action</a> is canceled on the <a class="eventtype" href="#event-type-keydown"><code>keydown</code></a> event. Canceling a <a class="def" href="#glossary-dead-key">dead key</a> on a <a class="eventtype" href="#event-type-keyup"><code>keyup</code></a> event has no effect on <a class="eventtype" href="#event-type-textInput"><code>textInput</code></a> events. The following example uses the keystrokes <code class="value">'\u0302'</code> (Combining Circumflex Accent key) and <code class="value">'e'</code> (<code class="value">'\u0065'</code>, Latin Small Letter E key) (on a PC/AT french keyboard using a french mapping and without any modifier activated):</p>
-          <ol>
-            <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'\u0302'</code> (Combining Circumflex Accent key)</li>
-                <li><em>The <a class="def" href="#glossary-default-action">default action</a> of the <a class="eventtype" href="#event-type-keydown"><code>keydown</code></a> event is prevented, e.g. by invoking <a href="#events-event-type-preventDefault"><code>Event.preventDefault()</code></a> during the dispatch of the keydown event object</em></li>
-            <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'\u0302'</code> (Combining Circumflex Accent key)</li>
-            <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'e'</code> (<code class="value">'\u0065'</code>, Latin Small Letter E key) <span class="issue">@@ shouldn't this be <code class="value">'&#xE9;'</code>?</span></li>
-            <li><a class="eventtype" href="#event-type-textInput"><code>textInput</code></a>: <code class="value">'a'</code> <span class="issue">@@ shouldn't this be <code class="value">'&#xE9;'</code>?</span></li>
-            <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'e'</code> (<code class="value">'\u0065'</code>, Latin Small Letter E key) <span class="issue">@@ shouldn't this be <code class="value">'&#xE9;'</code>?</span></li>
-          </ol>
+          <div class="example" id="example-default_action_cancel">
+            <p><strong>Example:</strong></p>
+            <ol>
+              <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'\u0302'</code> (Combining Circumflex Accent key)</li>
+                  <li><em>The <a class="def" href="#glossary-default-action">default action</a> of the <a class="eventtype" href="#event-type-keydown"><code>keydown</code></a> event is prevented, e.g. by invoking <a href="#events-event-type-preventDefault"><code>Event.preventDefault()</code></a> during the dispatch of the keydown event object</em></li>
+              <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'\u0302'</code> (Combining Circumflex Accent key)</li>
+              <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="value">'e'</code> (<code class="value">'\u0065'</code>, Latin Small Letter E key) <i class="issue" id="issue-keydown_e2"><strong>Issue:</strong> shouldn't this be <code class="value">'&#xE9;'</code>?</i></li>
+              <li><a class="eventtype" href="#event-type-textInput"><code>textInput</code></a>: <code class="value">'a'</code> <i class="issue" id="issue-textInput_a"><strong>Issue:</strong> shouldn't this be <code class="value">'&#xE9;'</code>?</i></li>
+              <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="value">'e'</code> (<code class="value">'\u0065'</code>, Latin Small Letter E key) <i class="issue" id="issue-keyup_e"><strong>Issue:</strong> shouldn't this be <code class="value">'&#xE9;'</code>?</i></li>
+            </ol>
+          </div>
         </div>
     <!-- div3 cancelable_keys -->
     
@@ -4338,20 +4351,22 @@
         				<li>If the primary current function of the key is to serve as a function key, then:
         					<ol>
         						<li>If there exists an appropriate key value in the <a href="#keyset-keyvalues">key values set</a>, that the key value shall be a string consisting of that key value as a <a class="def" href="#glossary-key-name">key name</a>.</li>
-        						<li>If there is no appropriate key value in the <a href="#keyset-keyvalues">key values set</a>, then a key value must be devised.  The key value should be as human friendly as possible and must not contain whitespace characters.  The value must be composed only of characters in the ranges <abbr title="0-9">\u0030..\u0039</abbr>, <abbr title="A-Z">\u0041..\u005A</abbr>, or <abbr title="a-z">\u0061..\u007A</abbr>, and must begin with a character in the range <abbr title="A-Z">\u0041..\u005A</abbr>.  <br/><span class="issue">Why should we not allow names in other ranges (Chinese, for example)?</span></li>
+        						<li>If there is no appropriate key value in the <a href="#keyset-keyvalues">key values set</a>, then a key value must be devised.  The key value should be as human friendly as possible and must not contain whitespace characters.  The value must be composed only of characters in the ranges <abbr title="0-9">\u0030..\u0039</abbr>, <abbr title="A-Z">\u0041..\u005A</abbr>, or <abbr title="a-z">\u0061..\u007A</abbr>, and must begin with a character in the range <abbr title="A-Z">\u0041..\u005A</abbr>.  <br/><i class="issue" id="issue-ranges">Why should we not allow names in other ranges (Chinese, for example)?</i></li>
         					</ol>
         				</li>
         			</ol>
         		</li>
         	</ol>
 
-        	<p>Examples:</p>
-        	<ul>
-        		<li>On a PC/AT US keyboard with a two-handed Dvorak keyboard mapping, the key labeled <code class="value">'Q'</code> maps to the key values <code class="value">'5'</code> (unmodified) and <code class="value">'%'</code> (shifted).  The primary function of this key is to generate the character <code class="value">'\u0035'</code>.  Since this character is in general category <abbr title="Number, Decimal Digit">Nd</abbr>, the key value for the unmodified key shall be <code class="value">'5'</code>.</li>
-        		<li>On a French PC keyboard with a standard French mapping, the primary function of the <code class="value">'^'</code> key is as a <a class="def" href="#glossary-dead-key">dead key</a> for the circumflex diacritical mark.  This corresponds to the combining Unicode character <code class="value">'\u0302'</code>.  Since this character is in general category <abbr title="Mark, Nonspacing">Mn</abbr>, the key value shall be <code class="value">'\u0302'</code>.</li>
-        		<li>On a Korean PC keyboard with a standard Korean mapping, the primary function of the <code class="value">'Ha/En'</code> key is to switch between Hangul and English input.  The predefined key value list has an appropriate entry for this key, <code class="value">'HangulMode'</code>, so this shall be the key value.</li>
-        		<li>On some models of mobile devices, the primary function of the key with a picture of a calendar on it is to launch the calendaring program. Since there is no Unicode character that corresponds to this function, and there is no appropriate entry in the predefined key value list, a new value may be devised, such as <code class="value">'Calendar'</code>.</li>
-        	</ul>
+          <div class="example" id="example-keyvalues">
+            <p><strong>Examples:</strong></p>
+          	<ul>
+          		<li>On a PC/AT US keyboard with a two-handed Dvorak keyboard mapping, the key labeled <code class="value">'Q'</code> maps to the key values <code class="value">'5'</code> (unmodified) and <code class="value">'%'</code> (shifted).  The primary function of this key is to generate the character <code class="value">'\u0035'</code>.  Since this character is in general category <abbr title="Number, Decimal Digit">Nd</abbr>, the key value for the unmodified key shall be <code class="value">'5'</code>.</li>
+          		<li>On a French PC keyboard with a standard French mapping, the primary function of the <code class="value">'^'</code> key is as a <a class="def" href="#glossary-dead-key">dead key</a> for the circumflex diacritical mark.  This corresponds to the combining Unicode character <code class="value">'\u0302'</code>.  Since this character is in general category <abbr title="Mark, Nonspacing">Mn</abbr>, the key value shall be <code class="value">'\u0302'</code>.</li>
+          		<li>On a Korean PC keyboard with a standard Korean mapping, the primary function of the <code class="value">'Ha/En'</code> key is to switch between Hangul and English input.  The predefined key value list has an appropriate entry for this key, <code class="value">'HangulMode'</code>, so this shall be the key value.</li>
+          		<li>On some models of mobile devices, the primary function of the key with a picture of a calendar on it is to launch the calendaring program. Since there is no Unicode character that corresponds to this function, and there is no appropriate entry in the predefined key value list, a new value may be devised, such as <code class="value">'Calendar'</code>.</li>
+          	</ul>
+          </div>
     	  </div>
         	  
         <div>
@@ -4367,7 +4382,7 @@
       	  
           
           <div id="js-escape" class="issue">
-          	<p>@@ Javascript escaped characters may have issues:</p>
+          	<p><strong>Issue:</strong> Javascript escaped characters may have issues:</p>
           	<ul>
           	  <li>may not be suitable for Java or C, which use different escaping mechanisms (could be solved with a normalizing methods such as <a href="#events-Events-DocumentEvent-convertKeyValue"><code>DocumentEvent.convertKeyValue</code></a>)</li>
           	  <li>based on UTF-16 encoding, in that it uses surrogate pairs for values outside the Basic Multilingual Plane</li>
@@ -5237,7 +5252,7 @@
             <dd>The Combining Katakana-Hiragana Semi-Voiced Sound Mark (Dead Semivoiced Sound) key.</dd>
 
             <dt><a id="keyset-key-Unidentified"><code class="value keyname">'Unidentified'</code></a></dt>
-            <dd>This key value is used when an implementations is unable to identify another key value, due to either hardware, platform, or software constraints.  <span class="warning"><strong>Warning:</strong> Conforming implementation must only use this key value when there is no way for the implementation to detect the key value, and does not indicate a conforming implementation by itself.</span></dd>
+            <dd>This key value is used when an implementations is unable to identify another key value, due to either hardware, platform, or software constraints.  <span class="warning"><strong>Warning!</strong> Conforming implementation must only use this key value when there is no way for the implementation to detect the key value, and does not indicate a conforming implementation by itself.</span></dd>
 
           </dl>
         </div>