# Proposed editor’s note

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 in the \[wiki page\]. We are
seeking feedback from web content authors and user agent/extension
implementers on these options.

# Proposed Research Questions

## 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.

## 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?

## Approaches

### Current: Three separate attributes

This represents the spec as-is.

#### Code samples

<table>
<colgroup>
<col style="width: 49%" />
<col style="width: 50%" />
</colgroup>
<thead>
<tr class="header">
<th><strong>Use-case</strong></th>
<th><strong>Current spec</strong></th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td><p><strong>Copy to clipboard button:</strong></p>
<p><strong>A traditional button that would trigger a copy of the selected content to be placed on the clipboard.</strong></p></td>
<td>&lt;button action="copy"&gt;Copy&lt;/button&gt;</td>
</tr>
<tr class="even">
<td><p><strong>Help link:</strong></p>
<p><strong>A traditional hyperlink to a separate HTML document that provides help information.</strong></p></td>
<td>&lt;a href="..." destination="help"&gt;Help&lt;/a&gt;</td>
</tr>
<tr class="odd">
<td><p><strong>Telephone number input:</strong></p>
<p><strong>A traditional input element that requests the user's home phone number. HTML autocomplete values are used to convey the meaning.</strong></p></td>
<td>&lt;input purpose="home tel"&gt;</td>
</tr>
<tr class="even">
<td><p><strong>Button to submit log-in form:</strong></p>
<p><strong>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.</strong></p></td>
<td>&lt;button type="submit" action="submit"&gt;Submit&lt;/button&gt;</td>
</tr>
<tr class="odd">
<td><p><strong>Link to log in page:</strong></p>
<p><strong>Another example of a traditional hyperlink to a separate HTML document, specifically one that provides a form that allows the user to log in.</strong></p></td>
<td>&lt;a href="..." destination="signin"&gt;Log in&lt;/a&gt;</td>
</tr>
<tr class="even">
<td><p><strong>Link to start the checkout process on a new page:</strong></p>
<p><strong>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).</strong></p>
<p><strong>Note: "checkout" is specified as an action so is not valid to attach to links in the current spe</strong></p></td>
<td>(out of scope)</td>
</tr>
<tr class="odd">
<td><p><strong>Help button:</strong></p>
<p><strong>A traditional button that triggers a dialog to open; the contents of the dialog provide help information.</strong></p></td>
<td>&lt;button action="opens-in-page-dialog" destination="help"&gt;Help&lt;/button&gt;</td>
</tr>
<tr class="even">
<td><p><strong>Contact telephone number (content):</strong></p>
<p><strong>Static content in the document that has some meaning.</strong></p></td>
<td>(out of scope)</td>
</tr>
<tr class="odd">
<td><p><strong>Button to open a log in form:</strong></p>
<p><strong>A traditional button that opens a dialog on the current page that contains a log in form.</strong></p></td>
<td>(out of scope)</td>
</tr>
</tbody>
</table>

#### 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

<table>
<colgroup>
<col style="width: 48%" />
<col style="width: 51%" />
</colgroup>
<thead>
<tr class="header">
<th><strong>Use-case</strong></th>
<th><p><strong>Current spec with some shared attribute values</strong></p>
<p><strong>@action and @destination are separate but some of the values are shared.</strong></p></th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td><p><strong>Copy to clipboard button:</strong></p>
<p><strong>A traditional button that would trigger a copy of the selected content to be placed on the clipboard.</strong></p></td>
<td>&lt;button action="copy"&gt;Copy&lt;/button&gt;</td>
</tr>
<tr class="even">
<td><p><strong>Help link:</strong></p>
<p><strong>A traditional hyperlink to a separate HTML document that provides help information.</strong></p></td>
<td>&lt;a href="..." destination="help"&gt;Help&lt;/a&gt;</td>
</tr>
<tr class="odd">
<td><p><strong>Telephone number input:</strong></p>
<p><strong>A traditional input element that requests the user's home phone number. HTML autocomplete values are used to convey the meaning.</strong></p></td>
<td>&lt;input purpose="home tel"&gt;</td>
</tr>
<tr class="even">
<td><p><strong>Button to submit log-in form:</strong></p>
<p><strong>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.</strong></p></td>
<td>&lt;button type="submit" action="submit"&gt;Submit&lt;/button&gt;</td>
</tr>
<tr class="odd">
<td><p><strong>Link to log in page:</strong></p>
<p><strong>Another example of a traditional hyperlink to a separate HTML document, specifically one that provides a form that allows the user to log in.</strong></p></td>
<td>&lt;a href="..." destination="signin"&gt;Log in&lt;/a&gt;</td>
</tr>
<tr class="even">
<td><p><strong>Link to start the checkout process on a new page:</strong></p>
<p><strong>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).</strong></p>
<p><strong>Note: "checkout" is specified as an action so is not valid to attach to links in the current spe</strong></p></td>
<td>&lt;a href="..." destination="checkout"&gt;Check out&lt;/a&gt;</td>
</tr>
<tr class="odd">
<td><p><strong>Help button:</strong></p>
<p><strong>A traditional button that triggers a dialog to open; the contents of the dialog provide help information.</strong></p></td>
<td>&lt;button action="help"&gt;Help&lt;/button&gt;</td>
</tr>
<tr class="even">
<td><p><strong>Contact telephone number (content):</strong></p>
<p><strong>Static content in the document that has some meaning.</strong></p></td>
<td>(out of scope)</td>
</tr>
<tr class="odd">
<td><p><strong>Button to open a log in form:</strong></p>
<p><strong>A traditional button that opens a dialog on the current page that contains a log in form.</strong></p></td>
<td>&lt;button action="signin"&gt;Log in&lt;/button&gt;</td>
</tr>
</tbody>
</table>

#### 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 “purpose”, and renames the current “purpose” attribute (for inputs)
to “meaning”.

#### Code samples

<table>
<colgroup>
<col style="width: 51%" />
<col style="width: 48%" />
</colgroup>
<thead>
<tr class="header">
<th><strong>Use-case</strong></th>
<th><p><strong>Merging action and destination</strong></p>
<p><strong>@action and @destination are merged and called @purpose</strong></p>
<p><strong>@meaning is used for form controls (instead of @purpose)</strong></p></th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td><p><strong>Copy to clipboard button:</strong></p>
<p><strong>A traditional button that would trigger a copy of the selected content to be placed on the clipboard.</strong></p></td>
<td>&lt;button purpose="copy"&gt;Copy&lt;/button&gt;</td>
</tr>
<tr class="even">
<td><p><strong>Help link:</strong></p>
<p><strong>A traditional hyperlink to a separate HTML document that provides help information.</strong></p></td>
<td>&lt;a href="..." purpose="help"&gt;Help&lt;/a&gt;</td>
</tr>
<tr class="odd">
<td><p><strong>Telephone number input:</strong></p>
<p><strong>A traditional input element that requests the user's home phone number. HTML autocomplete values are used to convey the meaning.</strong></p></td>
<td>&lt;input meaning="home tel"&gt;</td>
</tr>
<tr class="even">
<td><p><strong>Button to submit log-in form:</strong></p>
<p><strong>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.</strong></p></td>
<td>&lt;button type="submit" purpose="submit"&gt;Submit&lt;/button&gt;</td>
</tr>
<tr class="odd">
<td><p><strong>Link to log in page:</strong></p>
<p><strong>Another example of a traditional hyperlink to a separate HTML document, specifically one that provides a form that allows the user to log in.</strong></p></td>
<td>&lt;a href="..." purpose="signin"&gt;Log in&lt;/a&gt;</td>
</tr>
<tr class="even">
<td><p><strong>Link to start the checkout process on a new page:</strong></p>
<p><strong>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).</strong></p>
<p><strong>Note: "checkout" is specified as an action so is not valid to attach to links in the current spe</strong></p></td>
<td>&lt;a href="..." purpose="checkout"&gt;Check out&lt;/a&gt;</td>
</tr>
<tr class="odd">
<td><p><strong>Help button:</strong></p>
<p><strong>A traditional button that triggers a dialog to open; the contents of the dialog provide help information.</strong></p></td>
<td>&lt;button purpose="help"&gt;Help&lt;/button&gt;</td>
</tr>
<tr class="even">
<td><p><strong>Contact telephone number (content):</strong></p>
<p><strong>Static content in the document that has some meaning.</strong></p></td>
<td>&lt;p meaning="work tel"&gt;</td>
</tr>
<tr class="odd">
<td><p><strong>Button to open a log in form:</strong></p>
<p><strong>A traditional button that opens a dialog on the current page that contains a log in form.</strong></p></td>
<td>&lt;button purpose="signin"&gt;Log in&lt;/button&gt;</td>
</tr>
</tbody>
</table>

#### 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

<table>
<colgroup>
<col style="width: 51%" />
<col style="width: 48%" />
</colgroup>
<thead>
<tr class="header">
<th><strong>Use-case</strong></th>
<th><p><strong>Merging action, destination and purpose</strong></p>
<p><strong>Instead of @action, @destination and @purpose, there is a single @purpose attribute.</strong></p></th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td><p><strong>Copy to clipboard button:</strong></p>
<p><strong>A traditional button that would trigger a copy of the selected content to be placed on the clipboard.</strong></p></td>
<td>&lt;button purpose="copy"&gt;Copy&lt;/button&gt;</td>
</tr>
<tr class="even">
<td><p><strong>Help link:</strong></p>
<p><strong>A traditional hyperlink to a separate HTML document that provides help information.</strong></p></td>
<td>&lt;a href="..." purpose="help"&gt;Help&lt;/a&gt;</td>
</tr>
<tr class="odd">
<td><p><strong>Telephone number input:</strong></p>
<p><strong>A traditional input element that requests the user's home phone number. HTML autocomplete values are used to convey the meaning.</strong></p></td>
<td>&lt;input purpose="home tel"&gt;</td>
</tr>
<tr class="even">
<td><p><strong>Button to submit log-in form:</strong></p>
<p><strong>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.</strong></p></td>
<td>&lt;button type="submit" purpose="submit"&gt;Submit&lt;/button&gt;</td>
</tr>
<tr class="odd">
<td><p><strong>Link to log in page:</strong></p>
<p><strong>Another example of a traditional hyperlink to a separate HTML document, specifically one that provides a form that allows the user to log in.</strong></p></td>
<td>&lt;a href="..." purpose="signin"&gt;Log in&lt;/a&gt;</td>
</tr>
<tr class="even">
<td><p><strong>Link to start the checkout process on a new page:</strong></p>
<p><strong>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).</strong></p>
<p><strong>Note: "checkout" is specified as an action so is not valid to attach to links in the current spe</strong></p></td>
<td>&lt;a href="..." purpose="checkout"&gt;Check out&lt;/a&gt;</td>
</tr>
<tr class="odd">
<td><p><strong>Help button:</strong></p>
<p><strong>A traditional button that triggers a dialog to open; the contents of the dialog provide help information.</strong></p></td>
<td>&lt;button purpose="help"&gt;Help&lt;/button&gt;</td>
</tr>
<tr class="even">
<td><p><strong>Contact telephone number (content):</strong></p>
<p><strong>Static content in the document that has some meaning.</strong></p></td>
<td>&lt;p purpose="work tel"&gt;</td>
</tr>
<tr class="odd">
<td><p><strong>Button to open a log in form:</strong></p>
<p><strong>A traditional button that opens a dialog on the current page that contains a log in form.</strong></p></td>
<td>&lt;button purpose="signin"&gt;Log in&lt;/button&gt;</td>
</tr>
</tbody>
</table>

#### 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)

## Appendix: Full table for comparison

Here is the full matrix of possible code samples.

<table>
<colgroup>
<col style="width: 20%" />
<col style="width: 20%" />
<col style="width: 21%" />
<col style="width: 18%" />
<col style="width: 18%" />
</colgroup>
<thead>
<tr class="header">
<th><strong>Use-case</strong></th>
<th><strong>Current spec</strong></th>
<th><p><strong>Current spec with some shared attribute values</strong></p>
<p><strong>@action and @destination are separate but some of the values are shared.</strong></p></th>
<th><p><strong>Merging action and destination</strong></p>
<p><strong>@action and @destination are merged and called @purpose</strong></p>
<p><strong>@meaning is used for form controls (instead of @purpose)</strong></p></th>
<th><p><strong>Merging action, destination and purpose</strong></p>
<p><strong>Instead of @action, @destination and @purpose, there is a single @purpose attribute.</strong></p></th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td><p><strong>Copy to clipboard button:</strong></p>
<p><strong>A traditional button that would trigger a copy of the selected content to be placed on the clipboard.</strong></p></td>
<td>&lt;button action="copy"&gt;Copy&lt;/button&gt;</td>
<td>&lt;button action="copy"&gt;Copy&lt;/button&gt;</td>
<td>&lt;button purpose="copy"&gt;Copy&lt;/button&gt;</td>
<td>&lt;button purpose="copy"&gt;Copy&lt;/button&gt;</td>
</tr>
<tr class="even">
<td><p><strong>Help link:</strong></p>
<p><strong>A traditional hyperlink to a separate HTML document that provides help information.</strong></p></td>
<td>&lt;a href="..." destination="help"&gt;Help&lt;/a&gt;</td>
<td>&lt;a href="..." destination="help"&gt;Help&lt;/a&gt;</td>
<td>&lt;a href="..." purpose="help"&gt;Help&lt;/a&gt;</td>
<td>&lt;a href="..." purpose="help"&gt;Help&lt;/a&gt;</td>
</tr>
<tr class="odd">
<td><p><strong>Telephone number input:</strong></p>
<p><strong>A traditional input element that requests the user's home phone number. HTML autocomplete values are used to convey the meaning.</strong></p></td>
<td>&lt;input purpose="home tel"&gt;</td>
<td>&lt;input purpose="home tel"&gt;</td>
<td>&lt;input meaning="home tel"&gt;</td>
<td>&lt;input purpose="home tel"&gt;</td>
</tr>
<tr class="even">
<td><p><strong>Button to submit log-in form:</strong></p>
<p><strong>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.</strong></p></td>
<td>&lt;button type="submit" action="submit"&gt;Submit&lt;/button&gt;</td>
<td>&lt;button type="submit" action="submit"&gt;Submit&lt;/button&gt;</td>
<td>&lt;button type="submit" purpose="submit"&gt;Submit&lt;/button&gt;</td>
<td>&lt;button type="submit" purpose="submit"&gt;Submit&lt;/button&gt;</td>
</tr>
<tr class="odd">
<td><p><strong>Link to log in page:</strong></p>
<p><strong>Another example of a traditional hyperlink to a separate HTML document, specifically one that provides a form that allows the user to log in.</strong></p></td>
<td>&lt;a href="..." destination="signin"&gt;Log in&lt;/a&gt;</td>
<td>&lt;a href="..." destination="signin"&gt;Log in&lt;/a&gt;</td>
<td>&lt;a href="..." purpose="signin"&gt;Log in&lt;/a&gt;</td>
<td>&lt;a href="..." purpose="signin"&gt;Log in&lt;/a&gt;</td>
</tr>
<tr class="even">
<td><p><strong>Link to start the checkout process on a new page:</strong></p>
<p><strong>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).</strong></p>
<p><strong>Note: "checkout" is specified as an action so is not valid to attach to links in the current spe</strong></p></td>
<td>(out of scope)</td>
<td>&lt;a href="..." destination="checkout"&gt;Check out&lt;/a&gt;</td>
<td>&lt;a href="..." purpose="checkout"&gt;Check out&lt;/a&gt;</td>
<td>&lt;a href="..." purpose="checkout"&gt;Check out&lt;/a&gt;</td>
</tr>
<tr class="odd">
<td><p><strong>Help button:</strong></p>
<p><strong>A traditional button that triggers a dialog to open; the contents of the dialog provide help information.</strong></p></td>
<td>&lt;button action="opens-in-page-dialog" destination="help"&gt;Help&lt;/button&gt;</td>
<td>&lt;button action="help"&gt;Help&lt;/button&gt;</td>
<td>&lt;button purpose="help"&gt;Help&lt;/button&gt;</td>
<td>&lt;button purpose="help"&gt;Help&lt;/button&gt;</td>
</tr>
<tr class="even">
<td><p><strong>Contact telephone number (content):</strong></p>
<p><strong>Static content in the document that has some meaning.</strong></p></td>
<td>(out of scope)</td>
<td>(out of scope)</td>
<td>&lt;p meaning="work tel"&gt;</td>
<td>&lt;p purpose="work tel"&gt;</td>
</tr>
<tr class="odd">
<td><p><strong>Button to open a log in form:</strong></p>
<p><strong>A traditional button that opens a dialog on the current page that contains a log in form.</strong></p></td>
<td>(out of scope)</td>
<td>&lt;button action="signin"&gt;Log in&lt;/button&gt;</td>
<td>&lt;button purpose="signin"&gt;Log in&lt;/button&gt;</td>
<td>&lt;button purpose="signin"&gt;Log in&lt;/button&gt;</td>
</tr>
</tbody>
</table>
