Compare Revisions

Global attributes

Revision 333511:

Revision 333511 by ronj on

Revision 333811:

Revision 333811 by vikashagrawal1990 on

Title:
Global attributes
Global attributes
Slug:
HTML/Global_attributes
HTML/Global_attributes
Tags:
"NeedsCleanup","NeedsTechnicalReview","HTML","NeedsBrowserCompatibility","MakeBrowserAgnostic"
"NeedsCleanup","NeedsTechnicalReview","HTML","NeedsBrowserCompatibility","MakeBrowserAgnostic"
Content:

Revision 333511
Revision 333811
n15    <dl>n15    <p>
16      <dt>
17        <a name="attr-accesskey" id="attr-accesskey">accesskey</a
>> 
18      </dt>
19      <dd>
20        <p class="note">
21          This attribute provides a hint for generating a keyboar
>d shortcut for the current element. This attribute consists of a  
>space-separated list of characters (one single Unicode code point 
>). The browser should use the first one that exists on the comput 
>er keyboard layout.<br> 
22          {{ HTMLVersionInline(4) }} In previous versions of HTML
>, only one character could be specified. Also it wasn't a global  
>attribute and could be applied only to {{ HTMLElement("a") }}, {{ 
> HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElem 
>ent("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("lege 
>nd") }} and {{ HTMLElement("textarea") }}. 
23        </p>
24        <div class="note">
25          <strong>Usage note:</strong> The operation to activate 
>the accesskey depends on browser and its platform. 
26          <table class="standard-table">
27            <tbody>
28              <tr>
29                <th>
30                  &nbsp;
31                </th>
32                <th>
33                  Windows
34                </th>
35                <th>
36                  Linux
37                </th>
38                <th>
39                  Mac
40                </th>
41              </tr>
42              <tr>
43                <th>
44                  Firefox
45                </th>
46                <td colspan="2" rowspan="1">
47                  Alt + Shift + a key
48                </td>
49                <td>
50                  <ul>
51                    <li>Firefox 14 or newer, Control + Alt + a ke
>y 
52                    </li>
53                    <li>Firefox 13 or older, Control + a key
54                    </li>
55                  </ul>
56                </td>
57              </tr>
58              <tr>
59                <th>
60                  Internet Explorer
61                </th>
62                <td>
63                  Alt + a key
64                </td>
65                <td colspan="2" rowspan="1">
66                  N/A
67                </td>
68              </tr>
69              <tr>
70                <th>
71                  Google Chrome
72                </th>
73                <td colspan="2" rowspan="1">
74                  Alt + a key
75                </td>
76                <td>
77                  Control + Alt + a key
78                </td>
79              </tr>
80              <tr>
81                <th>
82                  Safari
83                </th>
84                <td>
85                  Alt + a key
86                </td>
87                <td>
88                  N/A
89                </td>
90                <td>
91                  Control + Alt + a key
92                </td>
93              </tr>
94              <tr>
95                <th>
96                  Opera
97                </th>
98                <td colspan="3" rowspan="1">
99                  Shift + Esc opens a contents list which are acc
>essible by accesskey, then, can choose an item by a key 
100                </td>
101              </tr>
102            </tbody>
103          </table>Note that Firefox can customize the required mo
>difier key by user's preferences. 
104        </div>
105        <table class="fullwidth-table">
106          <tbody>
107            <tr>
108              <td>
109                Normative document
110              </td>
111              <td>
112                <a class="external" href="http://www.whatwg.org/s
>pecs/web-apps/current-work/multipage/editing.html#the-accesskey-a 
>ttribute" rel="external nofollow" target="_blank" title="http://w 
>ww.whatwg.org/specs/web-apps/current-work/multipage/editing.html# 
>the-accesskey-attribute">HTML5, section 8.5</a> ({{ HTMLVersionIn 
>line(4) }}: <a class="external" href="http://www.w3.org/TR/REC-ht 
>ml40/interact/forms.html#adef-accesskey" title="http://www.w3.org 
>/TR/REC-html40/interact/forms.html#adef-accesskey">HTML4.01, sect 
>ion 17.11.2</a>) 
113              </td>
114            </tr>
115          </tbody>
116        </table>
117      </dd>
118      <dt>
119        <a name="attr-class" id="attr-class">class</a>
120      </dt>
121      <dd>
122        This attribute is a space-separated list of the classes o
>f the element. Classes allows CSS and Javascript to select and ac 
>cess specific elements via the <a href="/En/CSS/Class_selectors"  
>title="https://developer.mozilla.org/En/CSS/Class_selectors">clas 
>s selectors</a> or functions like the DOM&nbsp;method <code title 
>="dom-document-getElementsByClassName"><a href="/en/DOM/document. 
>getElementsByClassName" title="https://developer.mozilla.org/en/D 
>OM/document.getElementsByClassName">document.getElementsByClassNa 
>me()</a></code>. 
123        <div class="note">
124          <p>
125            <strong>Usage note:</strong> Though the specification
> doesn't put requirements on the name of classes, web developers  
>are encouraged to use names that describe the semantic purpose of 
> the element, rather to the presentation of the element (e.g., <e 
>m>attribute</em> to describe an attribute rather than <em>italics 
>,</em> although an element of this class may be presented by <em> 
>italics</em>). Semantic names remain logical even if the presenta 
>tion of the page changes. 
126          </p>
127        </div>
128        <table class="fullwidth-table">
129          <tbody>
130            <tr>
131              <td>
132                Normative document
133              </td>
134              <td>
135                <a class="external" href="http://www.whatwg.org/s
>pecs/web-apps/current-work/multipage/elements.html#classes" rel=" 
>external nofollow" target="_blank" title="http://www.whatwg.org/s 
>pecs/web-apps/current-work/multipage/elements.html#classes">HTML5 
>, section 3.2.3.7</a> ({{ HTMLVersionInline(4) }}: <a class="exte 
>rnal" href="http://www.w3.org/TR/REC-html40/struct/global.html#ad 
>ef-class" title="http://www.w3.org/TR/REC-html40/struct/global.ht 
>ml#adef-class">HTML4.01, section 7.5.2</a>) 
136              </td>
137            </tr>
138          </tbody>
139        </table>
140      </dd>
141      <dt>
142        <a name="attr-contenteditable" id="attr-contenteditable">
>contenteditable</a> {{ HTMLVersionInline(5) }} {{ Gecko_minversio 
>n_inline("1.9") }} 
143      </dt>
144      <dd>
145        This enumerated attribute indicates if the element should
> be editable by the user. If so, the browser modifies its widget  
>to allow editing. The attribute must take one of the following va 
>lues: 
146        <ul>
147          <li>
148            <span style="font-family: Courier New;">true</span> o
>r the <em>empty string</em>, which indicates that the element mus 
>t be editable; 
149          </li>
150          <li>
151            <span style="font-family: Courier New;">false</span>,
> which indicates that the element must not be editable. 
152          </li>
153        </ul>
154        <p>
155          If this attribute is not set, its default value is <em>
>inherited</em> from its parent element. 
156        </p>
157        <div class="note">
158          <p>
159            <strong>Usage note:</strong> This attribute is an <em
>>enumerated&nbsp;</em>one and not a <em>Boolean</em> one. This me 
>ans that the explicit usage of one of the values <span style="fon 
>t-family: Courier New;">true</span>, <span style="font-family: Co 
>urier New;">false</span> or the empty string is mandatory and tha 
>t a shorthand like <code>&lt;label&nbsp;contenteditable&gt;Exampl 
>e&nbsp;Label&lt;/label&gt;</code> is not allowed. The correct usa 
>ge is <code>&lt;label&nbsp;contenteditable="true"&gt;Example&nbsp 
>;Label&lt;/label&gt;</code>. 
160          </p>
161        </div>
162        <table class="fullwidth-table">
163          <tbody>
164            <tr>
165              <td>
166                Normative document
167              </td>
168              <td>
169                <a class="external" href="http://www.whatwg.org/s
>pecs/web-apps/current-work/multipage/editing.html#attr-contentedi 
>table" rel="external nofollow" target="_blank" title="http://www. 
>whatwg.org/specs/web-apps/current-work/multipage/editing.html#att 
>r-contenteditable">HTML5, section 8.7</a> 
170              </td>
171            </tr>
172          </tbody>
173        </table>
174      </dd>
175      <dt>
176        <a name="attr-contextmenu" id="attr-contextmenu">contextm
>enu</a> {{ HTMLVersionInline(5) }} {{ Gecko_minversion_inline("9. 
>0") }} 
177      </dt>
178      <dd>
179        This attribute is related to the new <a class="external" 
>href="http://www.whatwg.org/specs/web-apps/current-work/multipage 
>/interactive-elements.html" title="http://www.whatwg.org/specs/we 
>b-apps/current-work/multipage/interactive-elements.html">HTML5 In 
>teractive Commands</a>. 
180      </dd>
181      <dd>
182        <p>
183          A <em>context menu</em> is a menu that appears upon use16      A <em>context menu</em> is a menu that appears upon user in
>r interaction, such as a right-click. HTML5 now allows us to cust>teraction, such as a right-click. HTML5 now allows us to customiz
>omize this menu. Here are some implementation examples, including>e this menu. Here are some implementation examples, including nes
> nested menus.>ted menus.
184        </p>17    </p>
185        <div id="ContextMenu_Example">18    <div id="ContextMenu_Example">
186          <p>19      <p>
187            The following HTML...20        The following HTML...
188          </p>21      </p>
189          <pre class="brush:html; highlight:[2,3,4,5,10,11,12,13,22      <pre class="brush:html; highlight:[2,3,4,5,6,7,11,12,13,14,
>15,16,17,18]">>16,17,18,19]">
n213          <div style="display:none">n46      <div style="display:none">
214            <pre class="brush:css">47        <pre class="brush:css">
n220          </div>n53      </div>
221          <p>54      <p>
222            ...used with this JavaScript...55        ...used with this JavaScript...
223          </p>56      </p>
224          <pre class="brush:js">57      <pre class="brush:js">
t236          <p>t69      <p>
237            ...will result in:70        ...will result in:
238          </p>71      </p>
239          <div>72      <div>
240            {{EmbedLiveSample("ContextMenu_Example",550,200)}}73        {{EmbedLiveSample("ContextMenu_Example",550,200)}}
74      </div>
75    </div>
76    <dl>
77      <dt>
78        <a name="attr-accesskey" id="attr-accesskey">accesskey</a
 >>
79      </dt>
80      <dd>
81        <p class="note">
82          This attribute provides a hint for generating a keyboar
 >d shortcut for the current element. This attribute consists of a 
 >space-separated list of characters (one single Unicode code point
 >). The browser should use the first one that exists on the comput
 >er keyboard layout.<br>
83          {{ HTMLVersionInline(4) }} In previous versions of HTML
 >, only one character could be specified. Also it wasn't a global 
 >attribute and could be applied only to {{ HTMLElement("a") }}, {{
 > HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElem
 >ent("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("lege
 >nd") }} and {{ HTMLElement("textarea") }}.
84        </p>
85        <div class="note">
86          <strong>Usage note:</strong> The operation to activate 
 >the accesskey depends on browser and its platform.
87          <table class="standard-table">
88            <tbody>
89              <tr>
90                <th>
91                  &nbsp;
92                </th>
93                <th>
94                  Windows
95                </th>
96                <th>
97                  Linux
98                </th>
99                <th>
100                  Mac
101                </th>
102              </tr>
103              <tr>
104                <th>
105                  Firefox
106                </th>
107                <td colspan="2" rowspan="1">
108                  Alt + Shift + a key
109                </td>
110                <td>
111                  <ul>
112                    <li>Firefox 14 or newer, Control + Alt + a ke
 >y
113                    </li>
114                    <li>Firefox 13 or older, Control + a key
115                    </li>
116                  </ul>
117                </td>
118              </tr>
119              <tr>
120                <th>
121                  Internet Explorer
122                </th>
123                <td>
124                  Alt + a key
125                </td>
126                <td colspan="2" rowspan="1">
127                  N/A
128                </td>
129              </tr>
130              <tr>
131                <th>
132                  Google Chrome
133                </th>
134                <td colspan="2" rowspan="1">
135                  Alt + a key
136                </td>
137                <td>
138                  Control + Alt + a key
139                </td>
140              </tr>
141              <tr>
142                <th>
143                  Safari
144                </th>
145                <td>
146                  Alt + a key
147                </td>
148                <td>
149                  N/A
150                </td>
151                <td>
152                  Control + Alt + a key
153                </td>
154              </tr>
155              <tr>
156                <th>
157                  Opera
158                </th>
159                <td colspan="3" rowspan="1">
160                  Shift + Esc opens a contents list which are acc
 >essible by accesskey, then, can choose an item by a key
161                </td>
162              </tr>
163            </tbody>
164          </table>Note that Firefox can customize the required mo
 >difier key by user's preferences.
241          </div>165        </div>
166        <table class="fullwidth-table">
167          <tbody>
168            <tr>
169              <td>
170                Normative document
171              </td>
172              <td>
173                <a class="external" href="http://www.whatwg.org/s
 >pecs/web-apps/current-work/multipage/editing.html#the-accesskey-a
 >ttribute" rel="external nofollow" target="_blank" title="http://w
 >ww.whatwg.org/specs/web-apps/current-work/multipage/editing.html#
 >the-accesskey-attribute">HTML5, section 8.5</a> ({{ HTMLVersionIn
 >line(4) }}: <a class="external" href="http://www.w3.org/TR/REC-ht
 >ml40/interact/forms.html#adef-accesskey" title="http://www.w3.org
 >/TR/REC-html40/interact/forms.html#adef-accesskey">HTML4.01, sect
 >ion 17.11.2</a>)
174              </td>
175            </tr>
176          </tbody>
177        </table>
178      </dd>
179      <dt>
180        <a name="attr-class" id="attr-class">class</a>
181      </dt>
182      <dd>
183        This attribute is a space-separated list of the classes o
 >f the element. Classes allows CSS and Javascript to select and ac
 >cess specific elements via the <a href="/En/CSS/Class_selectors" 
 >title="https://developer.mozilla.org/En/CSS/Class_selectors">clas
 >s selectors</a> or functions like the DOM&nbsp;method <code title
 >="dom-document-getElementsByClassName"><a href="/en/DOM/document.
 >getElementsByClassName" title="https://developer.mozilla.org/en/D
 >OM/document.getElementsByClassName">document.getElementsByClassNa
 >me()</a></code>.
184        <div class="note">
185          <p>
186            <strong>Usage note:</strong> Though the specification
 > doesn't put requirements on the name of classes, web developers 
 >are encouraged to use names that describe the semantic purpose of
 > the element, rather to the presentation of the element (e.g., <e
 >m>attribute</em> to describe an attribute rather than <em>italics
 >,</em> although an element of this class may be presented by <em>
 >italics</em>). Semantic names remain logical even if the presenta
 >tion of the page changes.
187          </p>
188        </div>
189        <table class="fullwidth-table">
190          <tbody>
191            <tr>
192              <td>
193                Normative document
194              </td>
195              <td>
196                <a class="external" href="http://www.whatwg.org/s
 >pecs/web-apps/current-work/multipage/elements.html#classes" rel="
 >external nofollow" target="_blank" title="http://www.whatwg.org/s
 >pecs/web-apps/current-work/multipage/elements.html#classes">HTML5
 >, section 3.2.3.7</a> ({{ HTMLVersionInline(4) }}: <a class="exte
 >rnal" href="http://www.w3.org/TR/REC-html40/struct/global.html#ad
 >ef-class" title="http://www.w3.org/TR/REC-html40/struct/global.ht
 >ml#adef-class">HTML4.01, section 7.5.2</a>)
197              </td>
198            </tr>
199          </tbody>
200        </table>
201      </dd>
202      <dt>
203        <a name="attr-contenteditable" id="attr-contenteditable">
 >contenteditable</a> {{ HTMLVersionInline(5) }} {{ Gecko_minversio
 >n_inline("1.9") }}
204      </dt>
205      <dd>
206        This enumerated attribute indicates if the element should
 > be editable by the user. If so, the browser modifies its widget 
 >to allow editing. The attribute must take one of the following va
 >lues:
207        <ul>
208          <li>
209            <span style="font-family: Courier New;">true</span> o
 >r the <em>empty string</em>, which indicates that the element mus
 >t be editable;
210          </li>
211          <li>
212            <span style="font-family: Courier New;">false</span>,
 > which indicates that the element must not be editable.
213          </li>
214        </ul>
215        <p>
216          If this attribute is not set, its default value is <em>
 >inherited</em> from its parent element.
242        </div>217        </p>
218        <div class="note">
219          <p>
220            <strong>Usage note:</strong> This attribute is an <em
 >>enumerated&nbsp;</em>one and not a <em>Boolean</em> one. This me
 >ans that the explicit usage of one of the values <span style="fon
 >t-family: Courier New;">true</span>, <span style="font-family: Co
 >urier New;">false</span> or the empty string is mandatory and tha
 >t a shorthand like <code>&lt;label&nbsp;contenteditable&gt;Exampl
 >e&nbsp;Label&lt;/label&gt;</code> is not allowed. The correct usa
 >ge is <code>&lt;label&nbsp;contenteditable="true"&gt;Example&nbsp
 >;Label&lt;/label&gt;</code>.
221          </p>
222        </div>
223        <table class="fullwidth-table">
224          <tbody>
225            <tr>
226              <td>
227                Normative document
228              </td>
229              <td>
230                <a class="external" href="http://www.whatwg.org/s
 >pecs/web-apps/current-work/multipage/editing.html#attr-contentedi
 >table" rel="external nofollow" target="_blank" title="http://www.
 >whatwg.org/specs/web-apps/current-work/multipage/editing.html#att
 >r-contenteditable">HTML5, section 8.7</a>
231              </td>
232            </tr>
233          </tbody>
234        </table>
235      </dd>
236      <dt>
237        <a name="attr-contextmenu" id="attr-contextmenu">contextm
 >enu</a> {{ HTMLVersionInline(5) }} {{ Gecko_minversion_inline("9.
 >0") }}
238      </dt>
239      <dd>
240        This attribute is related to the new <a class="external" 
 >href="http://www.whatwg.org/specs/web-apps/current-work/multipage
 >/interactive-elements.html" title="http://www.whatwg.org/specs/we
 >b-apps/current-work/multipage/interactive-elements.html">HTML5 In
 >teractive Commands</a>.

Back to History