New principle: Name URL-containing attributes based on their primary purpose. Fixes #278 (#380)

Co-authored-by: Lea Verou <[email protected]>

Author: hober

index.bs

@@ -973,7 +973,7 @@ the functionality you are adding is **not** similar to that of the existing attr
     This is an antipattern; one of these groups of attributes should have had a different name.
 </div>
 
-<h3 id="avoid-html-parser-blocking"> Do not pause the HTML parser</h3>
+<h3 id="avoid-html-parser-blocking">Do not pause the HTML parser</h3>
 
 Ensure that your design does not require HTML parser to pause to handle external resources.
 
@@ -992,15 +992,29 @@ This is the case of legacy `<script src="…">` elements,
 which can inject into the parser using `document.write(…)`.
 Due to the performance issues above, new features must not do this.
 
-<h3 id="avoid-render-blocking"> Avoid features that block rendering</h3>
+<h3 id="avoid-render-blocking">Avoid features that block rendering</h3>
 
 Features that require resource loading or other operations before rendering the page,
 often result in blank page (or the previous page). The result is a poor user experience.
 
 Consider adding such features only in cases when the overall user experience is improved.
-A canonical example of this is blocking rendering in order to download and process a stylesheet. 
+A canonical example of this is blocking rendering in order to download and process a stylesheet.
 The alternative user experience is a flash of unstyled content, which is undesirable.
 
+<h3 id="naming-of-url-attributes">Name URL-containing attributes based on their primary purpose</h3><!-- https://github.com/w3ctag/design-principles/issues/278 -->
+
+If the element enables the user to navigate to the URL contained in the attribute, call the attribute `href`, like the <{a}> element's <{a/href}> attribute.
+
+Note: In hindsight, <{form}>'s <{form/action}> attribute should have been named `href`.
+
+If the element causes the resource at the given URL to be loaded, call the attribute `src`, like the <{img}> element's <{img/src}> attribute or the <{script}> element’s <{script/src}> attribute.
+
+Note: HTML has a number of legacy inconsistencies that should not be emulated, like the way <{link}>'s <{link/href}> attribute might allow for navigation or for resource loading, depending on the value of the element's <{link/rel}> attribute. <!-- TODO: Add an <object data> example after w3ctag/design-principles#370 has been written. -->
+
+If the attribute identifies a URL that is auxilliary to the element's purpose, like <{video}>'s <{video/poster}>, <{q}>'s <{q/cite}>, or <{a}>’s <{a/ping}>, name the attribute after its semantics.
+
+Note: remember that attributes containing URLs should be represented in IDL as {{USVString}}; see [[#idl-string-types]].
+
 <h2 id="css">Cascading Style Sheets (CSS)</h2>
 
 This section details design principles for features which are exposed via CSS.