[whatwg] Make quoted attributes a conformance criteria

Thu Jul 23 05:35:24 PDT 2009

Hello!

I'd say it is safe to say that using quotation marks for attribute 
values, always, except perhaps for collapsed, boolean attributes, has 
been regarded as best practice for a long time now. Speaking as an 
instructor for newbies, enforcing quotation marks has proven its value 
countless of times for me and my students. I'd say that all of my 
colleagues in WaSP EduTF would agree on that. Others share that 
sentiment too: http://twitter.com/burningbird/status/2765482250

(I have in fact written elsewhere that this is actually one of my 
reasons to use false XHTML: 
http://itpastorn.blogspot.com/2009/07/value-of-false-xhtml.html)

With this in mind I suggest that the spec would be improved in the 
(below) following ways, and that we open a discussion about requiring 
quotation marks for all non-boolean attributes as a conformance criterion.

Suggested spec edits (some written in a diff-ish way, not all a true 
diff, though):

Section 1.9

Keep:
Attributes are placed inside the start tag, and consist of a name and a 
value, separated by an "=" character. The attribute value can be left 
unquoted if it doesn't contain any special characters. Otherwise, it has 
to be quoted using either single or double quotes. The value, along with 
the "=" character, can be omitted altogether if the value is the empty 
string.

Add:
In order to avoid errors and increase readability, using quotes is 
highly recommended for all non-omitted attribute values.

4.6.8

Second example, where the a-element has been added.

-<p>The <dfn id=gdo>
+<p>The <dfn id="gdo">

4.6.9

Twice:

-id=whatwg
+id="whatwg"

4.6.12

- <dt>Radius: <dd> <meter min=0 max=20 value=12>12cm</meter>
- <dt>Height: <dd> <meter min=0 max=10 value=2>2cm</meter>

+ <dt>Radius: <dd> <meter min="0" max="20" value="12">12cm</meter>
+ <dt>Height: <dd> <meter min="0" max="10" value="2">2cm</meter>

- <dt>Radius: <dd> <meter min=0 max=20 value=12 
title="centimeters">12cm</meter>
- <dt>Height: <dd> <meter min=0 max=10 value=2 
title="centimeters">2cm</meter>

+ <dt>Radius: <dd> <meter min="0" max="20" value="12" 
title="centimeters">12cm</meter>
+ <dt>Height: <dd> <meter min="0" max="10" value="2" 
title="centimeters">2cm</meter>

4.8.2.1.7

(Very inconsistent example!)

-<p>Rating: <meter max=5 value=3><img src="1" alt="3 out of 5"
+<p>Rating: <meter max="5" value="3"><img src="1" alt="3 out of 5"

4.8.2.1.9

-<input type=text name=captcha></label>
+<input type="text" name="captcha"></label>

4.8.14.1

-  <area shape=rect coords="50,50,100,100"> <!-- the hole in the red box -->
-  <area shape=rect coords="25,25,125,125" href="red.html" alt="Red box.">
-  <area shape=circle coords="200,75,50" href="green.html" alt="Green 
circle.">
-  <area shape=poly coords="325,25,262,125,388,125" href="blue.html" 
alt="Blue triangle.">
-  <area shape=poly 
coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"
-        href="yellow.html" alt="Yellow star.">

+  <area shape="rect" coords="50,50,100,100"> <!-- the hole in the red 
box -->
+  <area shape="rect" coords="25,25,125,125" href="red.html" alt="Red box.">
+  <area shape="circle" coords="200,75,50" href="green.html" alt="Green 
circle.">
+  <area shape="poly" coords="325,25,262,125,388,125" href="blue.html" 
alt="Blue triangle.">
+  <area shape="poly" 
coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"
+        href="yellow.html" alt="Yellow star.">

4.9.11

-  <tr> <td> <th scope=rowgroup> English speakers <td> <td>
+  <tr> <td> <th scope="rowgroup"> English speakers <td> <td>

4.10.3

- <label><input type=checkbox name=lost> Lost</label>
+ <label><input type="checkbox" name="lost"> Lost</label>

-<p><label>Full name: <input name=fn> <small>Format: First 
Last</small></label></p>
-<p><label>Age: <input name=age type=number min=0></label></p>
-<p><label>Post code: <input name=pc> <small>Format: AB12 
3CD</small></label></p>

+<p><label>Full name: <input name="fn"> <small>Format: First 
Last</small></label></p>
+<p><label>Age: <input name="age" type="number" min="0"></label></p>
+<p><label>Post code: <input name="pc"> <small>Format: AB12 
3CD</small></label></p>

4.10.14.6
- <p><label>Name: <input required name=fn></label></p>
- <p><label>Essay: <textarea name=essay></textarea></label></p>
- <p><input type=submit name=submit value="Submit essay"></p>
- <p><input type=submit formnovalidate name=save value="Save essay"></p>
- <p><input type=submit formnovalidate name=cancel value="Cancel"></p>

+ <p><label>Name: <input required name="fn"></label></p>
+ <p><label>Essay: <textarea name="essay"></textarea></label></p>
+ <p><input type="submit" name="submit" value="Submit essay"></p>
+ <p><input type="submit" formnovalidate name="save" value="Save essay"></p>
+ <p><input type="submit" formnovalidate name="cancel" value="Cancel"></p>

5.4.2.1

-<address item=vcard>
+<address item="vcard">

5.4.3.1

-<p><input type=button value="Add to Calendar"
+<p><input type="button" value="Add to Calendar"

6.12.3.1

-<link rel=alternate type=application/pdf hreflang=fr href=manual-fr>
+<link rel="alternate" type="application/pdf" hreflang="fr" 
href="manual-fr">

6.12.3.7

- <p><label> Topic: <input name=topic> <a href="help/topic.html" 
rel="help">(Help)</a></label></p>
+ <p><label> Topic: <input name="topic"> <a href="help/topic.html" 
rel="help">(Help)</a></label></p>

6.12.3.8

-  <link rel=icon href=favicon.png sizes="16x16">
-  <link rel=icon href=windows.ico sizes="32x32 48x48">
-  <link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 
32768x32768">
-  <link rel=icon href=iphone.png sizes="59x60">
-  <link rel=icon href=gnome.svg sizes="any">
-  <link rel=stylesheet href=lsforums.css>
-  <script src=lsforums.js></script>
-  <meta name=application-name content="lsForums">

+  <link rel="icon" href="favicon.png" sizes="16x16">
+  <link rel="icon" href="windows.ico" sizes="32x32 48x48">
+  <link rel="icon" href="mac.icns" sizes="128x128 512x512 8192x8192 
32768x32768">
+  <link rel="icon" href="iphone.png" sizes="59x60">
+  <link rel="icon" href="gnome.svg" sizes="any">
+  <link rel="stylesheet" href="lsforums.css">
+  <script src="lsforums.js"></script>
+  <meta name="application-name" content="lsForums">

7.6

-<input type=submit accesskey="N @ 1" value="Compose">
+<input type="submit" accesskey="N @ 1" value="Compose">

9.1.2.3

No suggested text, but a rewrite will be necessary if quotation marks 
becomes a conformance criterion.

9.2.8.4

-<div id=a>
+<div id="a">

-- 
Keryx Web (Lars Gunther)
http://keryx.se/
http://twitter.com/itpastorn/
http://itpastorn.blogspot.com/