simon: list all new attributes and spice up examples Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=12670

simon: list all new attributes and spice up examples Fixing
http://www.w3.org/Bugs/Public/show_bug.cgi?id=12670

http://dev.w3.org/cvsweb/html5/html4-differences/Overview.html?r1=1.153&r2=1.154&f=h

===================================================================
RCS file: /sources/public/html5/html4-differences/Overview.html,v
retrieving revision 1.153
retrieving revision 1.154
diff -u -d -r1.153 -r1.154
--- Overview.html 19 May 2011 10:57:18 -0000 1.153
+++ Overview.html 19 May 2011 11:22:56 -0000 1.154
@@ -349,7 +349,7 @@
    <code>text/html</code> media type. Here is an example document that
    conforms to the HTML syntax:
 
-  <pre><code>&lt;!doctype html>
+  <pre class=example><code>&lt;!doctype html>
 &lt;html>
   &lt;head>
     &lt;meta charset="UTF-8">
@@ -375,7 +375,7 @@
    Note that XML documents must be served with an XML media type such as
    <code>application/xhtml+xml</code> or <code>application/xml</code>.
 
-  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?>
+  <pre class=example><code>&lt;?xml version="1.0" encoding="UTF-8"?>
 &lt;html xmlns="http://www.w3.org/1999/xhtml">
   &lt;head>
     &lt;title>Example document&lt;/title>
@@ -430,11 +430,11 @@
    inside a document. E.g. a very simple document using some of the minimal
    syntax features could look like:
 
-  <pre><code>&lt;!doctype html>
+  <pre class=example><code>&lt;!doctype html>
 &lt;title>SVG in text/html&lt;/title>
 &lt;p>
  A green circle:
- &lt;svg> &lt;circle r="50" cx="50" cy="50" fill="green"/> &lt;/svg>
+ <strong>&lt;svg> &lt;circle r="50" cx="50" cy="50" fill="green"/> &lt;/svg></strong>
 &lt;/p></code></pre>
 
   <p>More complex combinations are also possible. E.g. with the SVG
@@ -516,7 +516,7 @@
      represents a piece of self-contained flow content, typically referenced
      as a single unit from the main flow of the document.</p>
 
-    <pre><code>&lt;figure>
+    <pre class=example><code>&lt;figure>
  &lt;video src="example.webm" controls>&lt;/video>
  &lt;figcaption>Example&lt;/figcaption>
 &lt;/figure></code></pre>
@@ -618,8 +618,8 @@
      together with the a new <code>list</code> attribute for
      <code>input</code> can be used to make comboboxes:</p>
 
-    <pre><code>&lt;input list="browsers">
-&lt;datalist id="browsers">
+    <pre class=example><code>&lt;input <strong>list="browsers"</strong>>
+&lt;datalist <strong>id="browsers"</strong>>
  &lt;option value="Safari">
  &lt;option value="Internet Explorer">
  &lt;option value="Opera">
@@ -714,8 +714,8 @@
 
    <li>
     <p>The <code>area</code> element, for consistency with the <code>a</code>
-     and <code>link</code> elements, now also has the <code>hreflang</code>
-     and <code>rel</code> attributes.
+     and <code>link</code> elements, now also has the <code>hreflang</code>,
+     <code>type</code> and <code>rel</code> attributes.
 
    <li>
     <p>The <code>base</code> element can now have a <code>target</code>
@@ -751,31 +751,43 @@
      hint intended to aid the user with data entry.</p>
 
     <pre
-     class=example><code>&lt;input type=email placeholder="a@b.com"></code></pre>
+     class=example><code>&lt;input type=email <strong>placeholder="a@b.com"</strong>></code></pre>
 
    <li>
     <p>The new <code>form</code> attribute for <code>input</code>,
      <code>output</code>, <code>select</code>, <code>textarea</code>,
-     <code>button</code> and <code>fieldset</code> elements allows for
-     controls to be associated with a form. I.e. these elements can now be
-     placed anywhere on a page, not just as descendants of the
-     <code>form</code> element.</p>
+     <code>button</code>, <code>label</code>, <code>object</code> and
+     <code>fieldset</code> elements allows for controls to be associated with
+     a form. These elements can now be placed anywhere on a page, not just as
+     descendants of the <code>form</code> element, and still be associated
+     with a <code>form</code>.</p>
 
     <pre class=example><code>&lt;label>Email:
- &lt;input type=email form=x name=email>
+ &lt;input type=email <strong>form=foo</strong> name=email>
 &lt;/label>
-&lt;form id=x>&lt;/form></code></pre>
+&lt;form <strong>id=test</strong>>&lt;/form></code></pre>
 
    <li>
     <p>The new <code>required</code> attribute applies to <code>input</code>
      (except when the <code>type</code> attribute is <code>hidden</code>,
-     <code>image</code> or some button type such as <code>submit</code>) and
-     <code>textarea</code>. It indicates that the user has to fill in a value
-     in order to submit the form.
+     <code>image</code> or some button type such as <code>submit</code>),
+     <code>select</code> and <code>textarea</code>. It indicates that the
+     user has to fill in a value in order to submit the form. For
+     <code>select</code>, the first <code>option</code> element has to be a
+     placeholder with an empty value.
+
+    <pre
+     class=example><code>&lt;label>Color: &lt;select name=color <strong>required</strong>>
+ &lt;option <strong>value=""</strong>>Choose one
+ &lt;option>Red
+ &lt;option>Green
+ &lt;option>Blue
+&lt;/select></code></pre>
 
    <li>
     <p>The <code>fieldset</code> element now allows the <code>disabled</code>
-     attribute. It disables all descendant controls when specified.
+     attribute which disables all descendant controls when specified, and the
+     <code>name</code> attribute which can be used for script access.
 
    <li>
     <p>The <code>input</code> element has several new attributes to specify
@@ -783,7 +795,9 @@
      <code>max</code>, <code>multiple</code>, <code>pattern</code> and
      <code>step</code>. As mentioned before it also has a new
      <code>list</code> attribute which can be used together with the
-     <code>datalist</code> element.
+     <code>datalist</code> element. It also now has the <code>width</code>
+     and <code>height</code> attributes to specify the dimensions of the
+     image when using <code>type=image</code>.
 
    <li>
     <p>The <code>input</code> and <code>textarea</code> elements have a new
@@ -849,8 +863,8 @@
   </ul>
 
   <p>Several attributes from HTML4 now apply to all elements. These are
-   called global attributes: <code>class</code>, <code>dir</code>,
-   <code>id</code>, <code>lang</code>, <code>style</code>,
+   called global attributes: <code>accesskey</code>, <code>class</code>,
+   <code>dir</code>, <code>id</code>, <code>lang</code>, <code>style</code>,
    <code>tabindex</code> and <code>title</code>. Additionally, XHTML 1.0 only
    allowed <code>xml:space</code> on some elements, which is now allowed on
    all elements in XHTML documents.

Index: Overview.src.html
===================================================================
RCS file: /sources/public/html5/html4-differences/Overview.src.html,v
retrieving revision 1.130
retrieving revision 1.131
diff -u -d -r1.130 -r1.131
--- Overview.src.html 19 May 2011 10:57:18 -0000 1.130
+++ Overview.src.html 19 May 2011 11:22:56 -0000 1.131
@@ -231,7 +231,7 @@
     have the <code>text/html</code> media type. Here is an example document
     that conforms to the HTML syntax:</p>
 
-    <pre><code>&lt;!doctype html>
+    <pre class="example"><code>&lt;!doctype html>
 &lt;html>
   &lt;head>
     &lt;meta charset="UTF-8">
@@ -258,7 +258,7 @@
     such as <code>application/xhtml+xml</code> or
     <code>application/xml</code>.</p>
 
-    <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?>
+    <pre class="example"><code>&lt;?xml version="1.0" encoding="UTF-8"?>
 &lt;html xmlns="http://www.w3.org/1999/xhtml">
   &lt;head>
     &lt;title>Example document&lt;/title>
@@ -316,11 +316,11 @@
     be used inside a document. E.g. a very simple document using some of the
     minimal syntax features could look like:</p>
 
-    <pre><code>&lt;!doctype html>
+    <pre class="example"><code>&lt;!doctype html>
 &lt;title>SVG in text/html&lt;/title>
 &lt;p>
  A green circle:
- &lt;svg> &lt;circle r="50" cx="50" cy="50" fill="green"/> &lt;/svg>
+ <strong>&lt;svg> &lt;circle r="50" cx="50" cy="50" fill="green"/> &lt;/svg></strong>
 &lt;/p></code></pre>
 
     <p>More complex combinations are also possible. E.g. with the SVG
@@ -391,7 +391,7 @@
         represents a piece of self-contained flow content, typically
         referenced as a single unit from the main flow of the document.</p>
 
-        <pre><code>&lt;figure>
+        <pre class="example"><code>&lt;figure>
  &lt;video src="example.webm" controls>&lt;/video>
  &lt;figcaption>Example&lt;/figcaption>
 &lt;/figure></code></pre>
@@ -465,8 +465,8 @@
         together with the a new <code>list</code> attribute for
         <code>input</code> can be used to make comboboxes:</p>
 
-        <pre><code>&lt;input list="browsers">
-&lt;datalist id="browsers">
+        <pre class="example"><code>&lt;input <strong>list="browsers"</strong>>
+&lt;datalist <strong>id="browsers"</strong>>
  &lt;option value="Safari">
  &lt;option value="Internet Explorer">
  &lt;option value="Opera">
@@ -532,7 +532,7 @@
 
       <li><p>The <code>area</code> element, for consistency with the
       <code>a</code> and <code>link</code> elements, now also has the
-      <code>hreflang</code> and <code>rel</code> attributes.
+      <code>hreflang</code>, <code>type</code> and <code>rel</code> attributes.
 
       <li><p>The <code>base</code> element can now have a <code>target</code>
       attribute as well, mainly for consistency with the
@@ -563,40 +563,47 @@
        <p>A new <code>placeholder</code> attribute can be specified on
       the <code>input</code> and <code>textarea</code> elements. It
       represents a hint intended to aid the user with data entry.</p>
-       <pre class="example"><code>&lt;input type=email placeholder="a@b.com"></code></pre>
+       <pre class="example"><code>&lt;input type=email <strong>placeholder="a@b.com"</strong>></code></pre>
       </li>
 
       <li>
        <p>The new <code>form</code> attribute for <code>input</code>,
        <code>output</code>, <code>select</code>, <code>textarea</code>,
-       <code>button</code> and <code>fieldset</code> elements allows for
-       controls to be associated with a form. I.e. these elements can now be
+       <code>button</code>, <code>label</code>, <code>object</code> and <code>fieldset</code> elements allows for
+       controls to be associated with a form. These elements can now be
        placed anywhere on a page, not just as descendants of the
-       <code>form</code> element.</p>
+       <code>form</code> element, and still be associated with a <code>form</code>.</p>
 
        <pre class="example"><code>&lt;label>Email:
- &lt;input type=email form=x name=email>
+ &lt;input type=email <strong>form=foo</strong> name=email>
 &lt;/label>
-&lt;form id=x>&lt;/form></code></pre>
+&lt;form <strong>id=test</strong>>&lt;/form></code></pre>
        </div>
       </li>
 
       <li><p>The new <code>required</code> attribute applies to
       <code>input</code> (except when the <code>type</code> attribute is
       <code>hidden</code>, <code>image</code> or some button type such as
-      <code>submit</code>) and <code>textarea</code>. It indicates that the user
-      has to fill in a value in order to submit the form.
+      <code>submit</code>), <code>select</code> and <code>textarea</code>. It indicates that the user
+      has to fill in a value in order to submit the form. For <code>select</code>, the first <code>option</code> element has to be a placeholder with an empty value.
+      
+      <pre class="example"><code>&lt;label>Color: &lt;select name=color <strong>required</strong>>
+ &lt;option <strong>value=""</strong>>Choose one
+ &lt;option>Red
+ &lt;option>Green
+ &lt;option>Blue
+&lt;/select></code></pre>
 
       <li><p>The <code>fieldset</code> element now allows the
-      <code>disabled</code> attribute. It disables all descendant controls
-      when specified.
+      <code>disabled</code> attribute which disables all descendant controls
+      when specified, and the <code>name</code> attribute which can be used for script access.
 
       <li><p>The <code>input</code> element has several new attributes to
       specify constraints: <code>autocomplete</code>, <code>min</code>,
       <code>max</code>, <code>multiple</code>, <code>pattern</code> and
       <code>step</code>. As mentioned before it also has a new
       <code>list</code> attribute which can be used together with the
-      <code>datalist</code> element.
+      <code>datalist</code> element. It also now has the <code>width</code> and <code>height</code> attributes to specify the dimensions of the image when using <code>type=image</code>.
 
       <li><p>The <code>input</code> and <code>textarea</code> elements have
       a new attribute named <code>dirname</code> that causes the
@@ -652,7 +659,7 @@
     </ul>
 
     <p>Several attributes from HTML4 now apply to all elements. These
-    are called global attributes: <code>class</code>, <code>dir</code>,
+    are called global attributes: <code>accesskey</code>, <code>class</code>, <code>dir</code>,
     <code>id</code>, <code>lang</code>, <code>style</code>,
     <code>tabindex</code> and <code>title</code>. Additionally, XHTML 1.0
     only allowed <code>xml:space</code> on some elements, which is now allowed

Received on Thursday, 19 May 2011 11:25:44 UTC