xhtml11_quick_reference_by_examples.html

   1 <!DOCTYPE
   2  html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   3  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
   4 <html xmlns="http://www.w3.org/1999/xhtml"
   5      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   6      xsi:schemaLocation="http://www.w3.org/MarkUp/SCHEMA/xhtml11.xsd"
   7      xml:lang="en">
   8 <head>
   9   <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
  10
  11   <title>XHTML 1.1 Quick Reference by examples</title>
  12
  13   <meta name="description" content="XHTML 1.1 Quick Reference by examples" />
  14   <meta name="keywords" content="html,xhtml 1.1,tags,elements,reference,examples,css"/>
  15
  16   <meta name="copyright" content="Copyright (c) 2009 Antonio Ospite, some rights reserved" />
  17   <meta name="author" content="Antonio Ospite"/>
  18   <meta name="language" content="en"/>
  19
  20   <!--
  21   <link type="text/css" rel="stylesheet" media="all" href="style.css" />
  22   -->
  23
  24   <style type="text/css">
  25   /*<![CDATA[*/
  26
  27 .red {
  28 color: red;
  29 }
  30
  31 /* Style-able elements are those which have the 'style' attribute */
  32
  33 /* Structure module */
  34 body {}
  35 html {} /* style-able? */
  36 /*
  37 head
  38 title
  39 */
  40
  41 /* Text module */
  42 abbr {}
  43 acronym {}
  44 address {}
  45 blockquote {}
  46 br {}
  47 cite {}
  48 code {}
  49 dfn {}
  50 div {}
  51 em {}
  52 h1 {}
  53 h2 {}
  54 h3 {}
  55 h4 {}
  56 h5 {}
  57 h6 {}
  58 kbd {}
  59 p {}
  60 pre {}
  61 q {}
  62 samp {}
  63 span {}
  64 strong {}
  65 var {}
  66
  67 /* Hypertext module */
  68 a {}
  69
  70 /* List module */
  71 dl {}
  72 dt {}
  73 dd {}
  74 ol {}
  75 ul {}
  76 li {}
  77
  78 /* Object Module */
  79 object {}
  80 /*
  81 param
  82 */
  83
  84 /* Presentation module */
  85 b {}
  86 big {}
  87 hr {}
  88 i {}
  89 small {}
  90 sub {}
  91 sup {}
  92 tt {}
  93
  94 /* Edit module */
  95 del {}
  96 ins {}
  97
  98 /* Bidirectional text module */
  99 bdo {}
 100
 101 /* Forms module */
 102 button {}
 103 fieldset {}
 104 form {}
 105 input {}
 106 label {}
 107 legend {}
 108 select {}
 109 optgroup {}
 110 option {}
 111 textarea {}
 112
 113 /* Table module */
 114 caption {}
 115 col {}
 116 colgroup {}
 117 table {}
 118 tbody {}
 119 td {}
 120 tfoot {}
 121 th {}
 122 thead {}
 123 tr {}
 124
 125 /* Image module */
 126 img {}
 127
 128 /* Client-side Image Map Module */
 129 area {}
 130 /*
 131 map {}
 132 */
 133
 134 /* Scripting module */
 135 noscript {}
 136 /*
 137 script {}
 138 */
 139
 140   /*]]>*/
 141   </style>
 142
 143 </head>
 144
 145 <body>
 146 <h1>XHTML 1.1 Quick Reference by examples</h1>
 147
 148 <p><a id="top" />
 149 This page offers a quick reference by examples of all the elements specified by the <a title="eXtensible
 150 Hypertext Markup language 1.1"
 151 href="http://www.w3.org/TR/xhtml11/">XHTML 1.1</a> W3C standard.</p>
 152
 153 <p>This version of XHTML groups the elements by <a title="XHTML Abstract Modules"
 154 href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html">module</a>, and this is how they are presented here,
 155 with a very brief description and a section of examples of use.</p>
 156
 157 <p>There are already other quick reference pages, like the one on <a title="XHTML Reference" href="http://xhtml.com">xhtml.com</a>, or <a title="XHTML Quick Reference Guide For XHTML 1.1" href="http://engelke.com/xhtmlref/">this one</a> or <a title="XHTML 1.0 reference with examples" href="http://www.zvon.org/xxl/xhtmlReference/Output/index.html">this other one with examples</a>. But this page wants to be a <strong>single-page</strong> brief reference; here it is not explained which attributes an element supports, but that can be seen reading the source code of the examples provided for each element. This page could be used as a summary about XHTML or as a precious tool to design <strong>complete</strong> (wrt. XHTML elements) CSS stylesheets for your XHTML pages, giving a quick glance at the results.</p>
 158
 159 <h2>Modules</h2>
 160
 161 <p>The XHTML 1.1 document type is made up of the XHTML <em>modules</em> shown
 162 below. The elements, attributes, and minimal content models associated with
 163 these modules are defined in the <a title="XHTML Modularization"
 164   href="http://www.w3.org/TR/xhtml11/references.html#ref_xhtml_modularization">XHTML
 165   Modularization</a> document [<a title="XHTML Modularization"
 166 href="http://www.w3.org/TR/xhtml11/references.html#ref_xhtml_modularization">XHTMLMOD</a>]).
 167 The elements are listed here for information purposes, but the definitions in
 168 [<a title="XHTML Modularization"
 169   href="http://www.w3.org/TR/xhtml11/references.html#ref_xhtml_modularization">XHTMLMOD</a>]
 170 should be considered definitive.
 171 In  this document, the module names in the list below link into the
 172 definitions of
 173 the modules within the current version of [<a title="XHTML Modularization"
 174   href="http://www.w3.org/TR/xhtml11/references.html#ref_xhtml_modularization">XHTMLMOD</a>].</p>
 175
 176 <dl>
 177 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_structuremodule">Structure Module</a>*</dt>
 178
 179 <dd><code>body</code>, <code>head</code>, <code>html</code>, <code>title</code></dd>
 180
 181 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_textmodule">Text Module</a>*</dt>
 182
 183 <dd>
 184 <code>abbr</code>, <code>acronym</code>, <code>address</code>, <code>blockquote</code>, <code>br</code>, <code>cite</code>, <code>code</code>, <code>dfn</code>, <code>div</code>, <code>em</code>, <code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code>, <code>h6</code>, <code>kbd</code>, <code>p</code>, <code>pre</code>, <code>q</code>, <code>samp</code>, <code>span</code>, <code>strong</code>, <code>var</code>
 185 <br />
 186 <br />
 187
 188 <div class="note">
 189 The minimal content model for this module defines some content sets:
 190 <dl>
 191 <dt>Heading</dt>
 192
 193 <dd><code>h1</code> | <code>h2</code> | <code>h3</code> | <code>h4</code> | <code>h5</code> | <code>h6</code></dd>
 194
 195 <dt>Block</dt>
 196
 197 <dd><code>address</code> | <code>blockquote</code> | <code>div</code> | <code>p</code> | <code>pre</code></dd>
 198
 199 <dt>Inline</dt>
 200
 201 <dd><code>abbr</code> | <code>acronym</code> | <code>br</code> | <code>cite</code> | <code>code</code> | <code>dfn</code> | <code>em</code> | <code>kbd</code> | <code>q</code> | <code>samp</code> | <code>code</code> | <code>strong</code> | <code>var</code></dd>
 202
 203 <dt>Flow</dt>
 204
 205 <dd><em>Heading</em> | <em>Block</em> | <em>Inline</em></dd>
 206 </dl>
 207 </div>
 208
 209 </dd>
 210
 211 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_hypertextmodule">Hypertext Module</a>*</dt>
 212
 213 <dd>
 214 <code>a</code>
 215 <div class="note">
 216 This module adds the <code>a</code> element to the <em>Inline</em> content set
 217 of the <strong>Text Module</strong>
 218 </div>
 219
 220 </dd>
 221
 222 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_listmodule">List Module</a>*</dt>
 223
 224 <dd>
 225 <code>dl</code>, <code>dt</code>, <code>dd</code>, <code>ol</code>, <code>ul</code>, <code>li</code>
 226 <div class="note">
 227   This module also defines the content set <em>List</em> with the minimal content model
 228 (<code>dl</code> | <code>ol</code> | <code>ul</code>)+ and adds this set to the <em>Flow</em> content set of the
 229 <strong>Text Module</strong>.
 230 </div>
 231 </dd>
 232
 233 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_objectmodule">Object Module</a></dt>
 234
 235 <dd>
 236 <code>object</code>, <code>param</code>
 237 <div class="note">
 238 When this module is used, it adds the <code>object</code> element to the <em>Inline</em> content set
 239 of the <strong>Text Module</strong>.
 240 </div>
 241 </dd>
 242
 243 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_presentationmodule">Presentation Module</a></dt>
 244
 245 <dd>
 246 <code>b</code>, <code>big</code>, <code>hr</code>, <code>i</code>, <code>small</code>, <code>sub</code>, <code>sup</code>, <code>tt</code>
 247 <div class="note">
 248 When this module is used, the <code>hr</code> element is added to the
 249 <em>Block</em> content set of the <strong>Text Module</strong>. In addition,
 250 the <code>b</code>, <code>big</code>, <code>i</code>, <code>small</code>, <code>sub</code>, <code>sup,</code> and <code>tt</code> elements are
 251 added to the <em>Inline</em> content set of the <strong>Text Module</strong>.
 252 </div>
 253 </dd>
 254
 255 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_editmodule">Edit Module</a></dt>
 256
 257 <dd>
 258 <code>del</code>, <code>ins</code>
 259 <div class="note">
 260 When this module is used, the <code>del</code> and <code>ins</code> elements
 261 are added to the <em>Inline</em>
 262 content set of the <strong>Text Module</strong>.
 263 </div>
 264 </dd>
 265
 266 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_bdomodule">Bidirectional Text Module</a></dt>
 267
 268 <dd>
 269 <code>bdo</code>
 270 <div class="note">
 271 When this module is used, the <code>bdo</code> element is added to the
 272 <em>Inline</em> content set of the <strong>Text Module</strong>.
 273 </div>
 274 </dd>
 275
 276 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_extformsmodule">Forms Module</a></dt>
 277
 278 <dd>
 279 <code>button</code>, <code>fieldset</code>, <code>form</code>, <code>input</code>, <code>label</code>, <code>legend</code>, <code>select</code>, <code>optgroup</code>, <code>option</code>, <code>textarea</code>
 280
 281 <div class="note">
 282 This module defines two content sets:
 283 <dl>
 284 <dt>Form</dt>
 285   <dd><code>form</code> | <code>fieldset</code></dd>
 286 <dt>Formctrl</dt>
 287   <dd><code>input</code> | <code>select</code> | <code>textarea</code> | <code>label</code> | <code>button</code></dd>
 288 </dl>
 289
 290 When this module is used, it adds the <em>Form</em> content set to the
 291 <em>Block </em>content set and it adds the <em>Formctrl</em> content set to
 292 the <em>Inline</em> content set as these are defined in the <strong>Text
 293 Module</strong>.
 294 </div>
 295 </dd>
 296
 297 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_tablemodule">Table Module</a></dt>
 298
 299 <dd>
 300 <code>caption</code>, <code>col</code>, <code>colgroup</code>, <code>table</code>, <code>tbody</code>, <code>td</code>, <code>tfoot</code>, <code>th</code>, <code>thead</code>, <code>tr</code>
 301 <div class="note">
 302 When this module is used, it adds the <code>table</code> element to the
 303 <em>Block</em> content set of the <strong>Text Module</strong>.
 304 </div>
 305 </dd>
 306
 307 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_imagemodule">Image Module</a></dt>
 308
 309 <dd>
 310 <code>img</code>
 311 <div class="note">
 312 When this module is used, it adds the <code>img</code> element to the <em>Inline</em> content set of
 313 the <strong>Text Module</strong>.
 314 </div>
 315 </dd>
 316
 317 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_imapmodule">Client-side Image Map Module</a></dt>
 318
 319 <dd>
 320 <code>area</code>, <code>map</code>
 321 When this module is used, the <code>map</code> element is added to the <em>Inline</em> content set
 322 of the <strong>Text Module</strong>.
 323 </dd>
 324
 325 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_servermapmodule">Server-side Image Map Module</a></dt>
 326
 327 <dd>Attribute <code>ismap</code> on <code>img</code></dd>
 328
 329 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_intrinsiceventsmodule">Intrinsic Events Module</a></dt>
 330
 331 <dd>Events attributes</dd>
 332
 333 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_metamodule">Metainformation Module</a></dt>
 334
 335 <dd><code>meta</code></dd>
 336
 337 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_scriptmodule">Scripting Module</a></dt>
 338
 339 <dd><code>noscript</code>, <code>script</code></dd>
 340
 341 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_stylemodule">Stylesheet Module</a></dt>
 342
 343 <dd><code>style</code> element</dd>
 344
 345 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_styleattributemodule">Style Attribute Module</a> <em>Deprecated</em></dt>
 346
 347 <dd><code>style</code> attribute</dd>
 348
 349 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_linkmodule">Link Module</a></dt>
 350
 351 <dd><code>link</code></dd>
 352
 353 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_basemodule">Base Module</a></dt>
 354
 355 <dd><code>base</code></dd>
 356 </dl>
 357
 358 <p>XHTML also uses the Ruby Annotation module as defined in [<a href="http://www.w3.org/TR/xhtml11/references.html#ref_ruby">RUBY</a>]:</p>
 359
 360
 361 <h2>Examples</h2>
 362
 363 <h3>Structure Module</h3>
 364
 365 <p>
 366   We don't show explicit examples for elements in the
 367   Structure module because they are Singleton elements, already used for the
 368   structure of this very page. Although you can style the <code>body</code>
 369   and <code>html</code>
 370   elements.
 371 </p>
 372
 373 <h3>Text module</h3>
 374
 375 <p>
 376 The Text module elements can be used inside a text to enrich it semantically.
 377 They are all style-able.
 378 </p>
 379
 380 <dl class="examples">
 381   <dt>abbr</dt>
 382   <dd>
 383   We all know what <abbr title="eXtensible Hypertext Markup Language">XHTML</abbr>
 384   means, don't we?
 385   </dd>
 386
 387   <dt>acronym</dt>
 388   <dd>
 389   On the contrary someone doesn't know <acronym title="RAdio Detection And Ranging">RADAR</acronym> is
 390   an acronym.
 391   </dd>
 392
 393   <dt>address</dt>
 394   <dd>
 395   <address>
 396   Antonio is from<br/>
 397   <a title="Naples, Italy"
 398     href="http://maps.google.com/maps?f=q&source=s_q&hl=it&geocode=&q=naples,+IT&sll=26.160677,-81.795616&sspn=0.137744,0.265045&ie=UTF8&ll=40.869911,14.252701&spn=0.232099,0.53009&z=11&iwloc=A">Naples, Italy</a>,
 399   a strange, still beautiful, city.<br/>
 400   His website is at <a title="ao2: attacchi teoristici" href="http://ao2.it">ao2.it</a>
 401   </address>
 402   </dd>
 403
 404   <dt>blockquote</dt>
 405   <dd>
 406   I usually say:
 407   <blockquote cite="myself"><p>Better looser than poser!</p></blockquote>
 408   Not very widespread these days.
 409   </dd>
 410
 411   <dt>br</dt>
 412   <dd>Break the line here<br />this is new line</dd>
 413
 414   <dt>cite</dt>
 415   <dd>Even if you are not Buddhist follow the <cite>Dalai Lama</cite>
 416   suggestions.</dd>
 417
 418   <dt>code</dt>
 419   <dd>Format source code using the <code>&lt;code&gt;&lt;/code&gt;</code>
 420   element.</dd>
 421
 422   <dt>dfn</dt>
 423   <dd>I wonder how much my silly definition of happiness:
 424   <blockquote>
 425     <dfn>Happiness</dfn> is the limit of our mood function when “how I currently feel” approaches
 426     to “how I want to feel”
 427   </blockquote>
 428   is flawed...
 429   </dd>
 430
 431   <dt>div</dt>
 432   <dd>
 433   DIVs are used to <div>divide</div> block elements.
 434   </dd>
 435
 436   <dt>em</dt>
 437   <dd>
 438   This <em>em</em> is not really a typographical measure.
 439   </dd>
 440
 441   <dt>h1</dt>
 442   <dd>
 443   This could be for <h1>Book</h1> titles.
 444   </dd>
 445
 446   <dt>h2</dt>
 447   <dd>
 448   This could be for <h2>Chapter</h2> titles.
 449   </dd>
 450
 451   <dt>h3</dt>
 452   <dd>
 453   This could be for <h3>Section</h3> titles.
 454   </dd>
 455
 456   <dt>h4</dt>
 457   <dd>
 458   This could be for <h4>Sub-Section</h4> titles.
 459   </dd>
 460
 461   <dt>h5</dt>
 462   <dd>
 463   This could be for <h5>Sub-Sub-Section</h5> titles.
 464   </dd>
 465
 466   <dt>h6</dt>
 467   <dd>
 468   This could be for <h6>Sub-Sub-Sub-Section</h6> titles.
 469   </dd>
 470
 471   <dt>kbd</dt>
 472   <dd>
 473   Do not press <kbd>Ctrl-Q</kbd>, really!
 474   </dd>
 475
 476   <dt>p</dt>
 477   <dd>
 478   Is this before a paragraph?
 479   <p>
 480   A paragraph (from the Greek <em>paragraphos</em>, “to write beside” or “written
 481   beside”) is a self-contained unit of a discourse in writing dealing with a
 482   particular point or idea.
 483   </p>
 484   After a paragraph, definitely!
 485   </dd>
 486
 487   <dt>pre</dt>
 488   <dd>
 489   How to use this element?
 490   <pre>
 491          (__)
 492          (oo)
 493    /------\/
 494   / |    ||
 495  *  /\---/\
 496     ~~   ~~
 497 ...."Have you mooed today?"...
 498   </pre>
 499   Aaah, this is c<kbd>^H</kbd>how.
 500   </dd>
 501
 502   <dt>q</dt>
 503   <dd>
 504   British say about driving: <q cite="http://books.google.it/books?id=N2AOAAAAQAAJ&amp;pg=PA45&amp;lpg=PA45;">If you go
 505     left you go right, if you go right you go wrong</q>.
 506   </dd>
 507
 508   <dt>samp</dt>
 509   <dd>
 510   Let's clean up this file:
 511   <pre>$ tidy -xml -access 3 -utf8 -i -m $THIS_FILE</pre>
 512   <samp>
 513     No warnings or errors were found.
 514   </samp>
 515   </dd>
 516
 517   <dt>span</dt>
 518   <dd>
 519   Because <span class="span">style</span> matters?
 520   </dd>
 521
 522   <dt>strong</dt>
 523   <dd>
 524   Be <strong>strong</strong> rather than bold!
 525   </dd>
 526
 527   <dt>var</dt>
 528   <dd>
 529   Save this file to <var>xhtml11_quickref.html</var>... this is just an example value,
 530   you can choose the name you like more.
 531   </dd>
 532
 533 </dl>
 534
 535 <h3>Hypertext module</h3>
 536
 537 <dl>
 538   <dt>a</dt>
 539   <dd>
 540   Is this xhtml: <a title="Go on top of the page (internal link)"
 541   href="#top">GOTO 0;</a>?<br />
 542   Is this more accessible: <a title="Go on top of the page with an access key (internal link)"
 543   accesskey="g" href="#top">IF KEY == 'g'; THEN GOTO 0; ENDIF;</a>? (Psst, use
 544   <kbd>Alt-Shift-g</kbd> to test it in FireFox)<br />
 545    It is <a title="Hypertext module (external link)"
 546    href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_hypertextmodule">XHTML</a>
 547    indeed.
 548   </dd>
 549 </dl>
 550
 551 <h3>List module</h3>
 552
 553 <p>
 554 For the list modules we show grouped examples, a <code>dd</code> or a
 555 <code>li</code> element alone does not have much sense.
 556 </p>
 557
 558 <dl>
 559   <dt>dl, dt, dd</dt>
 560   <dd>
 561
 562     <dl>
 563       <dt>Recursion</dt>
 564       <dd>
 565         To understand recursion you must have understood what recursion means.
 566       </dd>
 567     </dl>
 568
 569   </dd>
 570   <dt>ol, li</dt>
 571   <dd>
 572
 573     <ol>
 574       <li>
 575         Milk
 576       </li>
 577       <li>
 578         Cereals
 579       </li>
 580       <li>
 581         Some juice
 582       </li>
 583     </ol>
 584
 585   </dd>
 586   <dt>ul, li</dt>
 587   <dd>
 588
 589     <ul>
 590       <li>
 591         Third
 592       </li>
 593       <li>
 594         First
 595       </li>
 596       <li>
 597         Second
 598       </li>
 599     </ul>
 600
 601   </dd>
 602 </dl>
 603
 604
 605 <h3>Object module</h3>
 606
 607 <dl>
 608   <dt>object, param</dt>
 609   <dd>
 610     <object data="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Utah_teapot_simple_2.png/300px-Utah_teapot_simple_2.png" type="image/png">
 611
 612     <param name="author" value="Martin Newell"/>
 613     <param name="source" value="http://en.wikipedia.org/wiki/Utah_teapot"/>
 614   </object>
 615   </dd>
 616 </dl>
 617
 618 <h3>Presentation module</h3>
 619 <dl>
 620   <dt>b</dt>
 621   <dd>
 622     This is the <b>bold</b> style.
 623   </dd>
 624   <dt>big</dt>
 625   <dd>
 626     This is <big>bigger</big> than the rest.
 627   </dd>
 628   <dt>hr</dt>
 629   <dd>
 630   <hr />
 631   </dd>
 632   <dt>i</dt>
 633   <dd>
 634     This is the <i>italic</i> style.
 635   </dd>
 636   <dt>small</dt>
 637   <dd>
 638   Can you still <small>read it</small>?
 639   </dd>
 640   <dt>sub</dt>
 641   <dd>
 642   Remember, (10)<sub>10</sub> in binary is 1010.
 643   </dd>
 644   <dt>sup</dt>
 645   <dd>
 646   This is the 1<sup>st</sup> example that came to my kind.
 647   </dd>
 648   <dt>tt</dt>
 649   <dd>
 650     This is the <tt>teletype</tt> style.
 651   </dd>
 652 </dl>
 653
 654 <h3>Edit module</h3>
 655
 656 <dl>
 657   <dt>del, ins</dt>
 658   <dd>
 659     Are you a <del>deletionist</del><ins>inclusionist</ins> on Wikipedia?
 660   </dd>
 661 </dl>
 662
 663
 664 <h3>Bidirectional Text module</h3>
 665
 666 <dl>
 667   <dt>bdo</dt>
 668   <dd>
 669     <bdo dir="rtl">Should I add an example in Arabian?</bdo>
 670   </dd>
 671 </dl>
 672
 673 <h3>Forms module</h3>
 674
 675 <p>
 676 For the Forms module a grouped example is provided:
 677 </p>
 678
 679 <dl>
 680   <dt>button, fieldset, form, input, label, legend, select, optgroup, option, textarea</dt>
 681   <dd>
 682
 683   <script type="text/javascript">
 684 //<![CDATA[
 685 function checksubmit()
 686 {
 687   alert('No, really?');
 688 }
 689 //]]>
 690 </script>
 691
 692   <form id="example_form" action="" method="get">
 693     <fieldset>
 694       <legend>Example Form</legend>
 695       <p>
 696         <label for="username">Username:</label>
 697         <input id="username" name="username" type="text" value="ao2" readonly="readonly" />
 698       </p>
 699       <p>
 700         <label for="passwd">Password:</label>
 701         <input id="passwd" name="passwd" type="password"/>
 702       </p>
 703       <p>
 704         <label for="autologin">Auto Login:</label>
 705         <input id="autologin" name="autologin" type="checkbox" checked="checked"/>
 706       </p>
 707       <p>
 708         <label for="user_sex_male">Male:</label>
 709         <input id="user_sex_male" name="user_sex" type="radio" checked="checked"/>
 710       </p>
 711       <p>
 712         <label for="user_sex_female">Female:</label>
 713         <input id="user_sex_female" name="user_sex" type="radio"/>
 714       </p>
 715       <p>
 716         <label for="form_submit">Submit:</label>
 717         <input id="form_submit" name="form_submit" type="submit" disabled="disabled" accesskey="S"/>
 718       </p>
 719       <p>
 720         <label for="form_reset">Reset:</label>
 721         <input id="form_reset" name="form_reset" type="reset"/>
 722       </p>
 723       <p>
 724         <label for="pgp_key">PGP Key:</label>
 725         <input id="pgp_key" name="pgp_key" type="file"/>
 726       </p>
 727       <input id="base_uid" name="base_uid" type="hidden" value="1000"/>
 728       <p>
 729         <label for="form_logo">logo:</label>
 730         <input id="form_logo" name="form_logo" type="image" src="http://localhost/nologo" alt="Logo not available"/>
 731       </p>
 732
 733       <label for="user_country">User Coutry:</label>
 734       <select id="user_country" name="country">
 735         <option value ="-1">Choose you country</option>
 736         <optgroup label="Asia">
 737           <option value ="1">Japan</option>
 738           <option value ="2">Kore</option>
 739           <option value ="3">China</option>
 740         </optgroup>
 741         <optgroup label="Europe" disabled="disabled">
 742           <option value ="4">England</option>
 743           <option value ="5">Italy</option>
 744           <option value ="6">Germany</option>
 745       </optgroup>
 746       </select>
 747
 748       <p>
 749         <label for="user_info">User Info:</label><br />
 750         <textarea id="user_info" name="user_info" rows="4" cols="80">
 751 Some info like favourite dishes and so on...
 752         </textarea>
 753       </p>
 754
 755     </fieldset>
 756
 757     <p>
 758       <input id="agree" name="agree" type="checkbox"/>
 759       <label for="agree">I have read and understood the code</label>
 760       <button id="send_button" type="submit" onclick="checksubmit();">Submit?</button>
 761     </p>
 762   </form>
 763
 764   </dd>
 765 </dl>
 766
 767 <h3>Table module</h3>
 768
 769 <p>
 770 For the Table module a grouped example is provided:
 771 </p>
 772
 773 <dl>
 774 <dt>caption, col, colgroup, table, tbody, td, tfoot, th, thead, tr</dt>
 775 <dd>
 776
 777 <table id="example_table" summary="Example of table" title="Example table" frame="box">
 778   <caption>This is an example</caption>
 779   <colgroup>
 780     <col span="1" align="char" char="," charoff="50%" style="background: #00ff00"/>
 781     <col span="1" align="right"/>
 782   </colgroup>
 783   <colgroup span="2" align="right" style="background: #ff0000;" />
 784
 785   <thead>
 786     <tr>
 787       <th>Month</th>
 788       <th>Savings</th>
 789       <th>Void</th>
 790       <th>Void</th>
 791     </tr>
 792   </thead>
 793   <tfoot>
 794     <tr>
 795       <td>Sum</td>
 796       <td>$280</td>
 797       <td colspan="2">0</td>
 798     </tr>
 799   </tfoot>
 800   <tbody>
 801     <tr>
 802       <td rowspan="2">January</td>
 803       <td>$100</td>
 804       <td>0</td>
 805       <td>0</td>
 806     </tr>
 807     <tr>
 808       <td>$200</td>
 809       <td>0</td>
 810       <td>0</td>
 811     </tr>
 812     <tr>
 813       <td>February</td>
 814       <td>$80</td>
 815       <td>0</td>
 816       <td>0</td>
 817     </tr>
 818   </tbody>
 819 </table>
 820
 821 </dd>
 822 </dl>
 823
 824 <h3>Image module</h3>
 825
 826 <dl>
 827 <dt>img</dt>
 828 <dd>
 829
 830 This is an image: <img alt="No image" title="W3c logo"
 831 src="http://www.w3.org/Icons/w3c_main" style="vertical-align: middle;"/> centered on the line.
 832
 833 </dd>
 834 </dl>
 835
 836 <h3>Client-side Image Map module</h3>
 837
 838 <dl>
 839 <dt>map, area</dt>
 840 <dd>
 841
 842   <map id="map1">
 843     <area nohref="nohref" alt="Vesuvio" title="Vesuvio" shape="poly"
 844     coords="156,183, 180,177, 203,167, 213,162, 225,160, 244,163, 266,155, 278,157, 286,163, 309,170, 331,175, 353,179, 372,184, 325,183, 287,179, 256,182, 232,184, 196,183, 156,183, 156,183, 156,183" />
 845     <area href="http://en.wikipedia.org/wiki/Napoli" alt="Napoli" title="Napoli" shape="poly"
 846     coords="0,360, 480,360, 480,272, 410,259, 386,257, 423,278, 408,283, 384,278, 342,286, 260,272, 208,261, 173,231, 215,219, 272,212, 308,208, 253,204, 218,201, 129,201, 57,197, 0,188, 0,360" />
 847     <area nohref="nohref" alt="Moon" title="Moon" shape="circle"
 848     coords="442,128,10" />
 849   </map>
 850   <img src="http://silvioirio.files.wordpress.com/2008/01/napoli2.jpg" alt="Napoli" usemap="map1" />
 851
 852 </dd>
 853 </dl>
 854
 855 <h3>Server-side Image Map module</h3>
 856
 857 <dl>
 858 <dt>Attribute ismap on img</dt>
 859 <dd>
 860 TBD
 861 </dd>
 862 </dl>
 863
 864 <h3>Intrinsic Events module</h3>
 865
 866 <dl>
 867 <dt>Events attributes</dt>
 868 <dd>
 869 TBD
 870 </dd>
 871 </dl>
 872
 873 <h3>Metainformation module</h3>
 874
 875 <dl>
 876 <dt>meta</dt>
 877 <dd>
 878 TBD
 879 </dd>
 880 </dl>
 881
 882 <h3>Scripting module</h3>
 883
 884 <dl>
 885 <dt>script, noscript</dt>
 886 <dd>
 887 TBD
 888 </dd>
 889 </dl>
 890
 891 <h3>Stylesheet module</h3>
 892
 893 <dl>
 894 <dt>style</dt>
 895 <dd>
 896 TBD
 897 </dd>
 898 </dl>
 899
 900 <h3>Link module</h3>
 901
 902 <dl>
 903 <dt>link</dt>
 904 <dd>
 905 TBD
 906 </dd>
 907 </dl>
 908
 909 <h3>Base module</h3>
 910
 911 <dl>
 912 <dt>base</dt>
 913 <dd>
 914 TBD
 915 </dd>
 916 </dl>
 917
 918 </body>
 919 </html>