Review of approaches for Action, Destination, and Purpose

Note: This document is in the early stages of development and its URL may change before it is ready for public review.

• Introduction
• Feedback requested
• Summary: Full table for comparison
• Approaches
  • Current: Three separate attributes
  • Three separate attributes with shared values
  • Merging action and destination attribute names
  • Merging action, destination and purpose attribute names

Introduction

This specification details a set of attributes named “action”, “destination” and “purpose” as well as their allowed values. We have considered some alternatives to this specific set of attribute names and values. You can find an overview of these on this page. We are seeking feedback from web content authors and user agent/extension implementers on these options.

Note: Matthew is working on a link to the demo page, to be added here.

Feedback requested

Here are some specific questions we are seeking feedback on.

• Do you feel that any particular approach is most appropriate? (Why/Why Not?)

• Do you have important use cases that were not covered?

• Do you have important use cases that would not be possible under any given approach?

Summary: Full table for comparison

Here is the full matrix of possible code samples. Please note this table requires horizontal scrolling. A standalone version of the summary table is available—and will need to be kept up-to-date with any changes here.

Use-case	Current spec	Current spec with some shared attribute values @action and @destination are separate but some of the values are shared.	Merging action and destination @action and @destination are merged and called @action-destination (a placeholder name) @purpose is used for input controls, and static content.	Merging action, destination and purpose Instead of @action, @destination and @purpose, there is a single @purpose attribute.
Copy to clipboard button A traditional button that would trigger a copy of the selected content to be placed on the clipboard.	<button action="copy">Copy</button>	<button action="copy">Copy</button>	<button action-destination="copy">Copy</button>	<button purpose="copy">Copy</button>
Help link A traditional hyperlink to a separate HTML document that provides help information.	<a href="..." destination="help">Help</a>	<a href="..." destination="help">Help</a>	<a href="..." action-destination="help">Help</a>	<a href="..." purpose="help">Help</a>
Telephone number input A traditional input element that requests the user's home phone number. HTML autocomplete values are used to convey the meaning.	<input purpose="home tel">	<input purpose="home tel">	<input purpose="home tel">	<input purpose="home tel">
Button to submit log-in form The button on the actual log in form (whether this is on a separate page, or in a dialog) to submit the log in form to the server.	<button type="submit" action="submit">Submit</button>	<button type="submit" action="submit">Submit</button>	<button type="submit" action-destination="submit">Submit</button>	<button type="submit" purpose="submit">Submit</button>
Link to log in page Another example of a traditional hyperlink to a separate HTML document, specifically one that provides a form that allows the user to log in.	<a href="..." destination="signin">Log in</a>	<a href="..." destination="signin">Log in</a>	<a href="..." action-destination="signin">Log in</a>	<a href="..." purpose="signin">Log in</a>
Link to start the checkout process on a new page A traditional HTML link that initiates the checkout process by taking the user to a simplified full-page experience (common with online shopping sites, to improve success rates). Note: "checkout" is specified as an action so is not valid to attach to links in the current spe	(out of scope)	<a href="..." destination="checkout">Check out</a>	<a href="..." action-destination="checkout">Check out</a>	<a href="..." purpose="checkout">Check out</a>
Help button A traditional button that triggers a dialog to open; the contents of the dialog provide help information.	<button action="opens-in-page-dialog" destination="help">Help</button>	<button action="help">Help</button>	<button action-destination="help">Help</button>	<button purpose="help">Help</button>
Contact telephone number (content) Static content in the document that has some meaning.	(out of scope)	(out of scope)	<p purpose="work tel">	<p purpose="work tel">
Button to open a log in form A traditional button that opens a dialog on the current page that contains a log in form.	(out of scope)	<button action="signin">Log in</button>	<button action-destination="signin">Log in</button>	<button purpose="signin">Log in</button>

Approaches

Current: Three separate attributes

This represents the spec as-is.

Code samples

Use-case	Current spec
Copy to clipboard button A traditional button that would trigger a copy of the selected content to be placed on the clipboard.	<button action="copy">Copy</button>
Help link A traditional hyperlink to a separate HTML document that provides help information.	<a href="..." destination="help">Help</a>
Telephone number input A traditional input element that requests the user's home phone number. HTML autocomplete values are used to convey the meaning.	<input purpose="home tel">
Button to submit log-in form The button on the actual log in form (whether this is on a separate page, or in a dialog) to submit the log in form to the server.	<button type="submit" action="submit">Submit</button>
Link to log in page Another example of a traditional hyperlink to a separate HTML document, specifically one that provides a form that allows the user to log in.	<a href="..." destination="signin">Log in</a>
Link to start the checkout process on a new page A traditional HTML link that initiates the checkout process by taking the user to a simplified full-page experience (common with online shopping sites, to improve success rates). Note: "checkout" is specified as an action so is not valid to attach to links in the current spe	(out of scope)
Help button A traditional button that triggers a dialog to open; the contents of the dialog provide help information.	<button action="opens-in-page-dialog" destination="help">Help</button>
Contact telephone number (content) Static content in the document that has some meaning.	(out of scope)
Button to open a log in form A traditional button that opens a dialog on the current page that contains a log in form.	(out of scope)

Possible reasons for

• Clear demarcation of attribute names for authors.

• Clear separation of attribute values.

Possible reasons against

• More complex to mark up certain constructs; have to use “destination” on some things that would normally be considered “actions”.

• Redundant semantics from the machine’s perspective.

Three separate attributes with shared values

This allows some of the attribute values to be shared between action and destination attributes, but the two separate attributes can still be named.

Code samples

Use-case	Current spec with some shared attribute values @action and @destination are separate but some of the values are shared.
Copy to clipboard button A traditional button that would trigger a copy of the selected content to be placed on the clipboard.	<button action="copy">Copy</button>
Help link A traditional hyperlink to a separate HTML document that provides help information.	<a href="..." destination="help">Help</a>
Telephone number input A traditional input element that requests the user's home phone number. HTML autocomplete values are used to convey the meaning.	<input purpose="home tel">
Button to submit log-in form The button on the actual log in form (whether this is on a separate page, or in a dialog) to submit the log in form to the server.	<button type="submit" action="submit">Submit</button>
Link to log in page Another example of a traditional hyperlink to a separate HTML document, specifically one that provides a form that allows the user to log in.	<a href="..." destination="signin">Log in</a>
Link to start the checkout process on a new page A traditional HTML link that initiates the checkout process by taking the user to a simplified full-page experience (common with online shopping sites, to improve success rates). Note: "checkout" is specified as an action so is not valid to attach to links in the current spe	<a href="..." destination="checkout">Check out</a>
Help button A traditional button that triggers a dialog to open; the contents of the dialog provide help information.	<button action="help">Help</button>
Contact telephone number (content) Static content in the document that has some meaning.	(out of scope)
Button to open a log in form A traditional button that opens a dialog on the current page that contains a log in form.	<button action="signin">Log in</button>

Possible reasons for

• Keeps the current separation of attribute names, for authors.

• But allows the sharing of some values to make certain constructs easier to mark up.

Possible reasons against

• Sharing some attribute values may confuse authors as to which attribute name to use.

• Redundant semantics from the machine’s perspective.

Merging action and destination attribute names

This merges the current “action” and “destination” attributes and calls them “action-destination”, which is a placeholder name. The current “purpose” attribute is kept for inputs, and can be applied to static content.

Code samples

Use-case	Merging action and destination @action and @destination are merged and called @action-destination (a placeholder name) @purpose is used for input controls, and static content.
Copy to clipboard button A traditional button that would trigger a copy of the selected content to be placed on the clipboard.	<button action-destination="copy">Copy</button>
Help link A traditional hyperlink to a separate HTML document that provides help information.	<a href="..." action-destination="help">Help</a>
Telephone number input A traditional input element that requests the user's home phone number. HTML autocomplete values are used to convey the meaning.	<input purpose="home tel">
Button to submit log-in form The button on the actual log in form (whether this is on a separate page, or in a dialog) to submit the log in form to the server.	<button type="submit" action-destination="submit">Submit</button>
Link to log in page Another example of a traditional hyperlink to a separate HTML document, specifically one that provides a form that allows the user to log in.	<a href="..." action-destination="signin">Log in</a>
Link to start the checkout process on a new page A traditional HTML link that initiates the checkout process by taking the user to a simplified full-page experience (common with online shopping sites, to improve success rates). Note: "checkout" is specified as an action so is not valid to attach to links in the current spe	<a href="..." action-destination="checkout">Check out</a>
Help button A traditional button that triggers a dialog to open; the contents of the dialog provide help information.	<button action-destination="help">Help</button>
Contact telephone number (content) Static content in the document that has some meaning.	<p purpose="work tel">
Button to open a log in form A traditional button that opens a dialog on the current page that contains a log in form.	<button action-destination="signin">Log in</button>

Possible reasons for

• Simpler in mark-up terms, as the two attributes are processed in the same way by user agents.

• (placeholder)

Possible reasons against

• (placeholder)

• (placeholder)

Merging action, destination and purpose attribute names

Code samples

Use-case	Merging action, destination and purpose Instead of @action, @destination and @purpose, there is a single @purpose attribute.
Copy to clipboard button A traditional button that would trigger a copy of the selected content to be placed on the clipboard.	<button purpose="copy">Copy</button>
Help link A traditional hyperlink to a separate HTML document that provides help information.	<a href="..." purpose="help">Help</a>
Telephone number input A traditional input element that requests the user's home phone number. HTML autocomplete values are used to convey the meaning.	<input purpose="home tel">
Button to submit log-in form The button on the actual log in form (whether this is on a separate page, or in a dialog) to submit the log in form to the server.	<button type="submit" purpose="submit">Submit</button>
Link to log in page Another example of a traditional hyperlink to a separate HTML document, specifically one that provides a form that allows the user to log in.	<a href="..." purpose="signin">Log in</a>
Link to start the checkout process on a new page A traditional HTML link that initiates the checkout process by taking the user to a simplified full-page experience (common with online shopping sites, to improve success rates). Note: "checkout" is specified as an action so is not valid to attach to links in the current spe	<a href="..." purpose="checkout">Check out</a>
Help button A traditional button that triggers a dialog to open; the contents of the dialog provide help information.	<button purpose="help">Help</button>
Contact telephone number (content) Static content in the document that has some meaning.	<p purpose="work tel">
Button to open a log in form A traditional button that opens a dialog on the current page that contains a log in form.	<button purpose="signin">Log in</button>

Possible reasons for

• Simpler; the user agent doesn’t need to distinguish between the names.

• (placeholder)

Possible reasons against

• Lower readability for human authors

• (placeholder)