From fa88b9f4ea20c9c9b1ce0a32ba650486e451665c Mon Sep 17 00:00:00 2001
From: Joshua Chen <sidachen2003@gmail.com>
Date: Sun, 27 Jul 2025 20:14:36 +0800
Subject: [PATCH 1/5] Provide more guidelines about labeling input

---
 .../html/reference/elements/label/index.md    | 72 ++++++++++++-------
 1 file changed, 47 insertions(+), 25 deletions(-)

diff --git a/files/en-us/web/html/reference/elements/label/index.md b/files/en-us/web/html/reference/elements/label/index.md
index 3fbe3afe1abac51..9adcb9e09706370 100644
--- a/files/en-us/web/html/reference/elements/label/index.md
+++ b/files/en-us/web/html/reference/elements/label/index.md
@@ -31,13 +31,45 @@ The **`<label>`** [HTML](/en-US/docs/Web/HTML) element represents a caption for
 }
 ```
 
+## Attributes
+
+This element includes the [global attributes](/en-US/docs/Web/HTML/Reference/Global_attributes).
+
+- [`for`](/en-US/docs/Web/HTML/Reference/Attributes/for)
+  - : The value of the `for` attribute must be a single [`id`](/en-US/docs/Web/HTML/Reference/Global_attributes/id) for a [labelable](/en-US/docs/Web/HTML/Guides/Content_categories#labelable) form-related element in the same document as the `<label>` element. So, any given `label` element can be associated with only one form control.
+
+    > [!NOTE]
+    > To programmatically set the `for` attribute, use [`htmlFor`](/en-US/docs/Web/API/HTMLLabelElement/htmlFor).
+
+    The first element in the document with an `id` attribute matching the value of the `for` attribute is the _labeled control_ for this `label` element — if the element with that `id` is actually a [labelable element](https://html.spec.whatwg.org/multipage/forms.html#category-label). If it is _not_ a labelable element, then the `for` attribute has no effect. If there are other elements that also match the `id` value, later in the document, they are not considered.
+
+    Multiple `label` elements can be given the same value for their `for` attribute; doing so causes the associated form control (the form control that `for` value references) to have multiple labels.
+
+    > [!NOTE]
+    > A `<label>` element can have both a `for` attribute and a contained control element, as long as the `for` attribute points to the contained control element.
+
+## Usage notes
+
+### Styling with CSS
+
+There are no special styling considerations for `<label>` elements — structurally they are inline elements, and so can be styled in much the same way as a {{htmlelement("span")}} or {{htmlelement("a")}} element. You can apply styling to them in any way you want, as long as you don't cause the text to become difficult to read.
+
+### Associating a label with a form control
+
 Associating a `<label>` with a form control, such as {{htmlelement("input")}} or {{htmlelement("textarea")}} offers some major advantages:
 
 - The label text is not only visually associated with its corresponding text input; it is programmatically associated with it too. This means that, for example, a screen reader will read out the label when the user is focused on the form input, making it easier for an assistive technology user to understand what data should be entered.
 - When a user clicks or touches/taps a label, the browser passes the focus to its associated input (the resulting event is also raised for the input). That increased hit area for focusing the input provides an advantage to anyone trying to activate it — including those using a touch-screen device.
 
+There are two ways to associate a `<label>` with a form control, commonly referred to as _explicit_ and _implicit_ association.
+
 To explicitly associate a `<label>` element with an `<input>` element, you first need to add the `id` attribute to the `<input>` element. Next, you add the `for` attribute to the `<label>` element, where the value of `for` is the same as the `id` in the `<input>` element.
 
+```html
+<label for="peas">Do you like peas?</label>
+<input type="checkbox" name="peas" id="peas" />
+```
+
 Alternatively, you can nest the `<input>` directly inside the `<label>`, in which case the `for` and `id` attributes are not needed because the association is implicit:
 
 ```html
@@ -47,6 +79,14 @@ Alternatively, you can nest the `<input>` directly inside the `<label>`, in whic
 </label>
 ```
 
+These two methods are equivalent in modern browsers. However, there are some other considerations:
+
+- Not all assistive technologies support implicit association.
+- Implicit association may be harder to style because the label box contains the form control instead of being separate elements.
+- When using component frameworks with explicit association, it's often hard to ensure that the control has a globally unique `id` (React introduced the [`useId()`](https://react.dev/reference/react/useId) hook for this purpose).
+
+Generally, we recommend using explicit association with the `for` attribute, to ensure compatibility with external tools and assistive technologies. In fact, you can simultaneously nest _and_ provide `id`/`for` for maximum compatibility.
+
 The form control that a label is labeling is called the _labeled control_ of the label element. Multiple labels can be associated with the same form control:
 
 ```html
@@ -57,32 +97,11 @@ The form control that a label is labeling is called the _labeled control_ of the
 
 Elements that can be associated with a `<label>` element include {{HTMLElement('button')}}, {{HTMLElement('input')}} (except for `type="hidden"`), {{HTMLElement('meter')}}, {{HTMLElement('output')}}, {{HTMLElement('progress')}}, {{HTMLElement('select')}} and {{HTMLElement('textarea')}}.
 
-## Attributes
-
-This element includes the [global attributes](/en-US/docs/Web/HTML/Reference/Global_attributes).
-
-- [`for`](/en-US/docs/Web/HTML/Reference/Attributes/for)
-  - : The value of the `for` attribute must be a single [`id`](/en-US/docs/Web/HTML/Reference/Global_attributes/id) for a [labelable](/en-US/docs/Web/HTML/Guides/Content_categories#labelable) form-related element in the same document as the `<label>` element. So, any given `label` element can be associated with only one form control.
-
-    > [!NOTE]
-    > To programmatically set the `for` attribute, use [`htmlFor`](/en-US/docs/Web/API/HTMLLabelElement/htmlFor).
-
-    The first element in the document with an `id` attribute matching the value of the `for` attribute is the _labeled control_ for this `label` element — if the element with that `id` is actually a [labelable element](https://html.spec.whatwg.org/multipage/forms.html#category-label). If it is _not_ a labelable element, then the `for` attribute has no effect. If there are other elements that also match the `id` value, later in the document, they are not considered.
-
-    Multiple `label` elements can be given the same value for their `for` attribute; doing so causes the associated form control (the form control that `for` value references) to have multiple labels.
-
-    > [!NOTE]
-    > A `<label>` element can have both a `for` attribute and a contained control element, as long as the `for` attribute points to the contained control element.
-
-## Styling with CSS
-
-There are no special styling considerations for `<label>` elements — structurally they are inline elements, and so can be styled in much the same way as a {{htmlelement("span")}} or {{htmlelement("a")}} element. You can apply styling to them in any way you want, as long as you don't cause the text to become difficult to read.
-
 ## Accessibility
 
 ### Interactive content
 
-Don't place interactive elements such as {{HTMLElement("a", "anchors")}} or {{HTMLElement("button", "buttons")}} inside a `label`. Doing so makes it difficult for people to activate the form input associated with the `label`.
+Don't place additional interactive elements such as {{HTMLElement("a", "anchors")}} or {{HTMLElement("button", "buttons")}} inside a `label` (the only interactive child should be the element being labeled, if you are using [implicit association](#associating_a_label_with_a_form_control)). Doing so makes it difficult for people to activate the form input associated with the `label`.
 
 **Don't do this:**
 
@@ -96,15 +115,18 @@ Don't place interactive elements such as {{HTMLElement("a", "anchors")}} or {{HT
 **Prefer this:**
 
 ```html example-good
+<p>
+  <a href="terms-and-conditions.html">Read our Terms and Conditions</a>
+</p>
 <label for="tac">
   <input id="tac" type="checkbox" name="terms-and-conditions" />
   I agree to the Terms and Conditions
 </label>
-<p>
-  <a href="terms-and-conditions.html">Read our Terms and Conditions</a>
-</p>
 ```
 
+> [!NOTE]
+> It is also a good practice to place any necessary context, such as the link to the terms and conditions, before the form control, so that the user can read it before they interact with the control.
+
 ### Headings
 
 Placing [heading elements](/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements) within a `<label>` interferes with many kinds of assistive technology, because headings are commonly used as [a navigation aid](/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements#navigation). If the label's text needs to be adjusted visually, use CSS classes applied to the `<label>` element instead.

From e4f6915540411276867d6dbbf947d0923da022e9 Mon Sep 17 00:00:00 2001
From: Joshua Chen <sidachen2003@gmail.com>
Date: Wed, 30 Jul 2025 10:22:47 +0800
Subject: [PATCH 2/5] Reviews

---
 .../html/reference/elements/label/index.md    | 31 +++++++------------
 1 file changed, 12 insertions(+), 19 deletions(-)

diff --git a/files/en-us/web/html/reference/elements/label/index.md b/files/en-us/web/html/reference/elements/label/index.md
index 9adcb9e09706370..4c81209e049dae5 100644
--- a/files/en-us/web/html/reference/elements/label/index.md
+++ b/files/en-us/web/html/reference/elements/label/index.md
@@ -36,25 +36,15 @@ The **`<label>`** [HTML](/en-US/docs/Web/HTML) element represents a caption for
 This element includes the [global attributes](/en-US/docs/Web/HTML/Reference/Global_attributes).
 
 - [`for`](/en-US/docs/Web/HTML/Reference/Attributes/for)
-  - : The value of the `for` attribute must be a single [`id`](/en-US/docs/Web/HTML/Reference/Global_attributes/id) for a [labelable](/en-US/docs/Web/HTML/Guides/Content_categories#labelable) form-related element in the same document as the `<label>` element. So, any given `label` element can be associated with only one form control.
-
-    > [!NOTE]
-    > To programmatically set the `for` attribute, use [`htmlFor`](/en-US/docs/Web/API/HTMLLabelElement/htmlFor).
-
-    The first element in the document with an `id` attribute matching the value of the `for` attribute is the _labeled control_ for this `label` element — if the element with that `id` is actually a [labelable element](https://html.spec.whatwg.org/multipage/forms.html#category-label). If it is _not_ a labelable element, then the `for` attribute has no effect. If there are other elements that also match the `id` value, later in the document, they are not considered.
-
-    Multiple `label` elements can be given the same value for their `for` attribute; doing so causes the associated form control (the form control that `for` value references) to have multiple labels.
-
-    > [!NOTE]
-    > A `<label>` element can have both a `for` attribute and a contained control element, as long as the `for` attribute points to the contained control element.
+  - : The value is the [`id`](/en-US/docs/Web/HTML/Reference/Global_attributes/id) of the [labelable](/en-US/docs/Web/HTML/Guides/Content_categories#labelable) form control in the same document, [associating the `<label>` with that form control](#associating_a_label_with_a_form_control). Note that its JavaScript reflection property is [`htmlFor`](/en-US/docs/Web/API/HTMLLabelElement/htmlFor).
 
 ## Usage notes
 
-### Styling with CSS
+### Associating a label with a form control
 
-There are no special styling considerations for `<label>` elements — structurally they are inline elements, and so can be styled in much the same way as a {{htmlelement("span")}} or {{htmlelement("a")}} element. You can apply styling to them in any way you want, as long as you don't cause the text to become difficult to read.
+The first element in the document with an `id` attribute matching the value of the `for` attribute is the _labeled control_ for this `label` element — if the element with that `id` is actually a [labelable element](/en-US/docs/Web/HTML/Guides/Content_categories#labelable). If it is _not_ a labelable element, then the `for` attribute has no effect. If there are other elements that also match the `id` value, later in the document, they are not considered.
 
-### Associating a label with a form control
+Multiple `label` elements can be given the same value for their `for` attribute; doing so causes the associated form control (the form control that `for` value references) to have multiple labels.
 
 Associating a `<label>` with a form control, such as {{htmlelement("input")}} or {{htmlelement("textarea")}} offers some major advantages:
 
@@ -79,11 +69,14 @@ Alternatively, you can nest the `<input>` directly inside the `<label>`, in whic
 </label>
 ```
 
-These two methods are equivalent in modern browsers. However, there are some other considerations:
+> [!NOTE]
+> A `<label>` element can have both a `for` attribute and a contained control element, as long as the `for` attribute points to the contained control element.
+
+These two methods are equivalent, but there are a few considerations:
 
-- Not all assistive technologies support implicit association.
-- Implicit association may be harder to style because the label box contains the form control instead of being separate elements.
-- When using component frameworks with explicit association, it's often hard to ensure that the control has a globally unique `id` (React introduced the [`useId()`](https://react.dev/reference/react/useId) hook for this purpose).
+- While common browser and {{glossary("screen reader")}} combinations support implicit association, not all assistive technologies do.
+- Depending on your design, the type of association may impact stylability. Explicit association makes the label and form control separate boxes, enabling more customizable layout such as lining them up with grid or flex layout methods.
+- Explicit association requires the form control to have an `id`, which must be unique in the whole document. This is hard especially in a componentized application. Frameworks often provide their own solutions, such as React's [`useId()`](https://react.dev/reference/react/useId), but it still requires extra orchestration to get right.
 
 Generally, we recommend using explicit association with the `for` attribute, to ensure compatibility with external tools and assistive technologies. In fact, you can simultaneously nest _and_ provide `id`/`for` for maximum compatibility.
 
@@ -125,7 +118,7 @@ Don't place additional interactive elements such as {{HTMLElement("a", "anchors"
 ```
 
 > [!NOTE]
-> It is also a good practice to place any necessary context, such as the link to the terms and conditions, before the form control, so that the user can read it before they interact with the control.
+> It is a good practice to place any necessary context, such as the link to the terms and conditions, before the form control, so that the user can read it before they interact with the control.
 
 ### Headings
 

From bf060ccfeb1fa46f19f52b13b91c6de44432671e Mon Sep 17 00:00:00 2001
From: Joshua Chen <sidachen2003@gmail.com>
Date: Thu, 31 Jul 2025 22:30:06 +0800
Subject: [PATCH 3/5] Apply suggestions from code review

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>
---
 files/en-us/web/html/reference/elements/label/index.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/files/en-us/web/html/reference/elements/label/index.md b/files/en-us/web/html/reference/elements/label/index.md
index 4c81209e049dae5..3f855a493bb7a03 100644
--- a/files/en-us/web/html/reference/elements/label/index.md
+++ b/files/en-us/web/html/reference/elements/label/index.md
@@ -44,7 +44,7 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Reference/Glo
 
 The first element in the document with an `id` attribute matching the value of the `for` attribute is the _labeled control_ for this `label` element — if the element with that `id` is actually a [labelable element](/en-US/docs/Web/HTML/Guides/Content_categories#labelable). If it is _not_ a labelable element, then the `for` attribute has no effect. If there are other elements that also match the `id` value, later in the document, they are not considered.
 
-Multiple `label` elements can be given the same value for their `for` attribute; doing so causes the associated form control (the form control that `for` value references) to have multiple labels.
+Multiple `<label>` elements can be associated with the same form control by having multiple `<label>` elements with the same `for` attribute value, which gives the form control multiple labels.
 
 Associating a `<label>` with a form control, such as {{htmlelement("input")}} or {{htmlelement("textarea")}} offers some major advantages:
 
@@ -75,7 +75,7 @@ Alternatively, you can nest the `<input>` directly inside the `<label>`, in whic
 These two methods are equivalent, but there are a few considerations:
 
 - While common browser and {{glossary("screen reader")}} combinations support implicit association, not all assistive technologies do.
-- Depending on your design, the type of association may impact stylability. Explicit association makes the label and form control separate boxes, enabling more customizable layout such as lining them up with grid or flex layout methods.
+- Depending on your design, the type of association may impact stylability. Making the `<label>` and form control sibling elements instead of parent-child means they are separate, adjacent boxes, enabling more customizable layout such as lining them up with grid or flex layout methods.
 - Explicit association requires the form control to have an `id`, which must be unique in the whole document. This is hard especially in a componentized application. Frameworks often provide their own solutions, such as React's [`useId()`](https://react.dev/reference/react/useId), but it still requires extra orchestration to get right.
 
 Generally, we recommend using explicit association with the `for` attribute, to ensure compatibility with external tools and assistive technologies. In fact, you can simultaneously nest _and_ provide `id`/`for` for maximum compatibility.
@@ -94,7 +94,7 @@ Elements that can be associated with a `<label>` element include {{HTMLElement('
 
 ### Interactive content
 
-Don't place additional interactive elements such as {{HTMLElement("a", "anchors")}} or {{HTMLElement("button", "buttons")}} inside a `label` (the only interactive child should be the element being labeled, if you are using [implicit association](#associating_a_label_with_a_form_control)). Doing so makes it difficult for people to activate the form input associated with the `label`.
+Other than the [implicitly associated](#associating_a_label_with_a_form_control) form control, don't place additional interactive elements such as {{HTMLElement("a", "anchors")}} or {{HTMLElement("button", "buttons")}} inside a `<label>`. Doing so makes it difficult for people to activate the form input associated with the `label`.
 
 **Don't do this:**
 

From a2d2192c2abd4289f7496b4af32e3517b7850cb7 Mon Sep 17 00:00:00 2001
From: Joshua Chen <sidachen2003@gmail.com>
Date: Mon, 4 Aug 2025 23:07:00 +0800
Subject: [PATCH 4/5] Update
 files/en-us/web/html/reference/elements/label/index.md

---
 files/en-us/web/html/reference/elements/label/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/html/reference/elements/label/index.md b/files/en-us/web/html/reference/elements/label/index.md
index 3f855a493bb7a03..40ee876745e1ac6 100644
--- a/files/en-us/web/html/reference/elements/label/index.md
+++ b/files/en-us/web/html/reference/elements/label/index.md
@@ -56,7 +56,7 @@ There are two ways to associate a `<label>` with a form control, commonly referr
 To explicitly associate a `<label>` element with an `<input>` element, you first need to add the `id` attribute to the `<input>` element. Next, you add the `for` attribute to the `<label>` element, where the value of `for` is the same as the `id` in the `<input>` element.
 
 ```html
-<label for="peas">Do you like peas?</label>
+<label for="peas">I like peas.</label>
 <input type="checkbox" name="peas" id="peas" />
 ```
 

From 36bf6a77e372785ad040c1214e692b052ee24c4c Mon Sep 17 00:00:00 2001
From: Joshua Chen <sidachen2003@gmail.com>
Date: Mon, 4 Aug 2025 23:08:06 +0800
Subject: [PATCH 5/5] Update index.md

---
 files/en-us/web/html/reference/elements/label/index.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/files/en-us/web/html/reference/elements/label/index.md b/files/en-us/web/html/reference/elements/label/index.md
index 40ee876745e1ac6..a2b57bb5adf3659 100644
--- a/files/en-us/web/html/reference/elements/label/index.md
+++ b/files/en-us/web/html/reference/elements/label/index.md
@@ -12,12 +12,12 @@ The **`<label>`** [HTML](/en-US/docs/Web/HTML) element represents a caption for
 
 ```html interactive-example
 <div class="preference">
-  <label for="cheese">Do you like cheese?</label>
+  <label for="cheese">I like cheese.</label>
   <input type="checkbox" name="cheese" id="cheese" />
 </div>
 
 <div class="preference">
-  <label for="peas">Do you like peas?</label>
+  <label for="peas">I like peas.</label>
   <input type="checkbox" name="peas" id="peas" />
 </div>
 ```
@@ -64,7 +64,7 @@ Alternatively, you can nest the `<input>` directly inside the `<label>`, in whic
 
 ```html
 <label>
-  Do you like peas?
+  I like peas.
   <input type="checkbox" name="peas" />
 </label>
 ```