- From: poot <cvsmail@w3.org>
- Date: Thu, 19 May 2011 07:25:42 -0400
- To: public-html-diffs@w3.org
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><!doctype html>
+ <pre class=example><code><!doctype html>
<html>
<head>
<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><?xml version="1.0" encoding="UTF-8"?>
+ <pre class=example><code><?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example document</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><!doctype html>
+ <pre class=example><code><!doctype html>
<title>SVG in text/html</title>
<p>
A green circle:
- <svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg>
+ <strong><svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg></strong>
</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><figure>
+ <pre class=example><code><figure>
<video src="example.webm" controls></video>
<figcaption>Example</figcaption>
</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><input list="browsers">
-<datalist id="browsers">
+ <pre class=example><code><input <strong>list="browsers"</strong>>
+<datalist <strong>id="browsers"</strong>>
<option value="Safari">
<option value="Internet Explorer">
<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><input type=email placeholder="a@b.com"></code></pre>
+ class=example><code><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><label>Email:
- <input type=email form=x name=email>
+ <input type=email <strong>form=foo</strong> name=email>
</label>
-<form id=x></form></code></pre>
+<form <strong>id=test</strong>></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><label>Color: <select name=color <strong>required</strong>>
+ <option <strong>value=""</strong>>Choose one
+ <option>Red
+ <option>Green
+ <option>Blue
+</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><!doctype html>
+ <pre class="example"><code><!doctype html>
<html>
<head>
<meta charset="UTF-8">
@@ -258,7 +258,7 @@
such as <code>application/xhtml+xml</code> or
<code>application/xml</code>.</p>
- <pre><code><?xml version="1.0" encoding="UTF-8"?>
+ <pre class="example"><code><?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example document</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><!doctype html>
+ <pre class="example"><code><!doctype html>
<title>SVG in text/html</title>
<p>
A green circle:
- <svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg>
+ <strong><svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg></strong>
</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><figure>
+ <pre class="example"><code><figure>
<video src="example.webm" controls></video>
<figcaption>Example</figcaption>
</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><input list="browsers">
-<datalist id="browsers">
+ <pre class="example"><code><input <strong>list="browsers"</strong>>
+<datalist <strong>id="browsers"</strong>>
<option value="Safari">
<option value="Internet Explorer">
<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><input type=email placeholder="a@b.com"></code></pre>
+ <pre class="example"><code><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><label>Email:
- <input type=email form=x name=email>
+ <input type=email <strong>form=foo</strong> name=email>
</label>
-<form id=x></form></code></pre>
+<form <strong>id=test</strong>></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><label>Color: <select name=color <strong>required</strong>>
+ <option <strong>value=""</strong>>Choose one
+ <option>Red
+ <option>Green
+ <option>Blue
+</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