Make the code validate
[xhtml11_quickref.git] / xhtml11_quick_reference_by_examples.html
index d8d1855..7b0b11c 100644 (file)
@@ -6,7 +6,7 @@
      xsi:schemaLocation="http://www.w3.org/MarkUp/SCHEMA/xhtml11.xsd"
      xml:lang="en">
 <head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
 
   <title>XHTML 1.1 Quick Reference by examples</title>
 
@@ -22,6 +22,7 @@
   -->
 
   <style type="text/css">
+  /*<![CDATA[*/
 
 .red {
 color: red;
@@ -136,15 +137,16 @@ noscript {}
 script {}
 */
 
+  /*]]>*/
   </style>
 
 </head>
 
 <body>
 <h1>XHTML 1.1 Quick Reference by examples</h1>
-<a id="top" />
 
-<p>This page offers a quick reference by examples of all the elements specified by the <a title="eXtensible
+<p><a id="top" />
+This page offers a quick reference by examples of all the elements specified by the <a title="eXtensible
 Hypertext Markup language 1.1"
 href="http://www.w3.org/TR/xhtml11/">XHTML 1.1</a> W3C standard.</p>
 
@@ -360,16 +362,20 @@ of the <strong>Text Module</strong>.
 
 <h3>Structure Module</h3>
 
+<p>
   We don't show explicit examples for elements in the
   Structure module because they are Singleton elements, already used for the
   structure of this very page. Although you can style the <code>body</code> 
   and <code>html</code>
   elements.
+</p>
 
 <h3>Text module</h3>
 
+<p>
 The Text module elements can be used inside a text to enrich it semantically.
 They are all style-able.
+</p>
 
 <dl class="examples">
   <dt>abbr</dt>
@@ -394,7 +400,7 @@ They are all style-able.
   <dt>blockquote</dt>
   <dd>
   I usually say:
-  <blockquote cite="myself">Better looser than poser!</blockquote>
+  <blockquote cite="myself"><p>Better looser than poser!</p></blockquote>
   Not very widespread these days.
   </dd>
 
@@ -539,8 +545,10 @@ They are all style-able.
 
 <h3>List module</h3>
 
+<p>
 For the list modules we show grouped examples, a <code>dd</code> or a
 <code>li</code> element alone does not have much sense.
+</p>
 
 <dl>
   <dt>dl, dt, dd</dt>
@@ -659,7 +667,9 @@ For the list modules we show grouped examples, a <code>dd</code> or a
 
 <h3>Forms module</h3>
 
+<p>
 For the Forms module a grouped example is provided:
+</p>
 
 <dl>
   <dt>button, fieldset, form, input, label, legend, select, optgroup, option, textarea</dt>
@@ -732,7 +742,7 @@ function checksubmit()
 
       <p>
         <label for="user_info">User Info:</label><br />
-        <textarea id="user_info" name="user_info">
+        <textarea id="user_info" name="user_info" rows="4" cols="80">
 Some info like favourite dishes and so on...
         </textarea>
       </p>
@@ -742,8 +752,8 @@ Some info like favourite dishes and so on...
     <p>
       <input id="agree" name="agree" type="checkbox"/>
       <label for="agree">I have read and understood the code</label>
+      <button id="send_button" type="submit" onclick="checksubmit();">Submit?</button>
     </p>
-    <button id="send_button" type="submit" onclick="checksubmit();">Submit?</button>
   </form>
 
   </dd>
@@ -751,7 +761,9 @@ Some info like favourite dishes and so on...
 
 <h3>Table module</h3>
 
+<p>
 For the Table module a grouped example is provided:
+</p>
 
 <dl>
 <dt>caption, col, colgroup, table, tbody, td, tfoot, th, thead, tr</dt>
@@ -773,6 +785,13 @@ For the Table module a grouped example is provided:
       <th>Void</th>
     </tr>
   </thead>
+  <tfoot>
+    <tr>
+      <td>Sum</td>
+      <td>$280</td>
+      <td colspan="2">0</td>
+    </tr>
+  </tfoot>
   <tbody>
     <tr>
       <td rowspan="2">January</td>
@@ -792,14 +811,6 @@ For the Table module a grouped example is provided:
       <td>0</td>
     </tr>
   </tbody>
-  <tfoot>
-    <tr>
-      <td>Sum</td>
-      <td>$280</td>
-      <td colspan="2">0</td>
-    </tr>
-  </tfoot>
-
 </table>
 
 </dd>
@@ -823,7 +834,7 @@ src="http://www.w3.org/Icons/w3c_main" style="vertical-align: middle;"/> centere
 <dt>map, area</dt>
 <dd>
 
-  <map id="map1" name="map1">
+  <map id="map1">
     <area nohref="nohref" alt="Vesuvio" title="Vesuvio" shape="poly"
     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" />
     <area href="http://en.wikipedia.org/wiki/Napoli" alt="Napoli" title="Napoli" shape="poly"
@@ -831,7 +842,7 @@ src="http://www.w3.org/Icons/w3c_main" style="vertical-align: middle;"/> centere
     <area nohref="nohref" alt="Moon" title="Moon" shape="circle"
     coords="442,128,10" />
   </map>
-  <img src="http://silvioirio.files.wordpress.com/2008/01/napoli2.jpg" alt="Napoli" usemap="#map1" />
+  <img src="http://silvioirio.files.wordpress.com/2008/01/napoli2.jpg" alt="Napoli" usemap="map1" />
 
 </dd>
 </dl>