diff --git a/files/en-us/web/api/htmldialogelement/cancel_event/index.md b/files/en-us/web/api/htmldialogelement/cancel_event/index.md
index 75fb3a7fd8342f8..019cff99fdb39cd 100644
--- a/files/en-us/web/api/htmldialogelement/cancel_event/index.md
+++ b/files/en-us/web/api/htmldialogelement/cancel_event/index.md
@@ -8,11 +8,15 @@ browser-compat: api.HTMLDialogElement.cancel_event
 
 {{APIRef("HTML DOM")}}
 
-The **`cancel`** event fires on a {{HTMLElement("dialog")}} element when the user instructs the browser that they wish to dismiss the current open dialog. The browser fires this event when the user presses the <kbd>Esc</kbd> key.
+The **`cancel`** event fires on a {{HTMLElement("dialog")}} element when the user sends a [close request](https://html.spec.whatwg.org/multipage/interaction.html#close-request) to the user agent.
 
-This event is cancelable but can not bubble.
+Examples of close requests are:
+
+- Pressing the <kbd>Esc</kbd> key on desktop platforms
+- Calling the {{domxref("HTMLDialogElement.requestClose()", "requestClose()")}} method.
+- The back button on mobile platforms
 
-When a `<dialog>` is dismissed with the <kbd>Esc</kbd> key, both the `cancel` and {{domxref("HTMLDialogElement/close_event", "close")}} events are fired.
+This event is cancelable but can not bubble.
 
 ## Syntax
 
@@ -32,55 +36,80 @@ A generic {{domxref("Event")}}.
 
 ### Canceling a dialog
 
+The following example shows a button that, when clicked, opens a {{htmlelement("dialog")}} via the {{domxref("HTMLDialogElement.showModal()", "showModal()")}} method.
+
+From there you can trigger the `cancel` event by either clicking _Request Close_ button to close the dialog (via the {{domxref("HTMLDialogElement.requestClose()", "requestClose()")}} method), or press the <kbd>Esc</kbd> key.
+
+Preventing the dialog from closing is demonstrated with a checkbox.
+
 #### HTML
 
 ```html
-<dialog class="example-dialog">
-  <button class="close">Close</button>
+<dialog id="dialog">
+  <div>
+    <label><input type="checkbox" id="prevent-close" /> prevent close</label>
+  </div>
+  <button type="button" id="request-close">Request Close</button>
 </dialog>
 
-<button class="open-dialog">Open dialog</button>
+<button id="open">Open dialog</button>
+```
 
-<div class="result"></div>
+```html hidden
+<pre id="status-text"></pre>
 ```
 
 ```css hidden
-button,
-div {
-  margin: 0.5rem;
+#status-text {
+  height: 120px;
+  overflow: scroll;
+  padding: 0.5rem;
+  border: 1px solid black;
 }
 ```
 
-#### JavaScript
+```js hidden
+const statusText = document.getElementById("status-text");
+function log(text) {
+  statusText.innerText = `${statusText.innerText}${text}\n`;
+  statusText.scrollTop = statusText.scrollHeight;
+}
+```
 
 ```js
-const result = document.querySelector(".result");
-
-const dialog = document.querySelector(".example-dialog");
+const dialog = document.getElementById("dialog");
+const openButton = document.getElementById("open");
+const requestCloseButton = document.getElementById("request-close");
+const preventCloseInput = document.getElementById("prevent-close");
+
+// Update button opens a modal dialog
+openButton.addEventListener("click", () => {
+  dialog.showModal();
+});
 
-dialog.addEventListener("cancel", (event) => {
-  result.textContent = "dialog was canceled";
+// Request close
+requestCloseButton.addEventListener("click", () => {
+  // Triggers the cancel event
+  dialog.requestClose();
 });
 
-const openDialog = document.querySelector(".open-dialog");
-openDialog.addEventListener("click", () => {
-  if (typeof dialog.showModal === "function") {
-    dialog.showModal();
-    result.textContent = "";
-  } else {
-    result.textContent = "The dialog API is not supported by this browser";
+// Fired when requestClose() is called
+// Prevent the dialog from closing by calling event.preventDefault()
+dialog.addEventListener("cancel", (event) => {
+  if (preventCloseInput.checked) {
+    log("Dialog close cancelled");
+    event.preventDefault();
   }
 });
 
-const closeButton = document.querySelector(".close");
-closeButton.addEventListener("click", () => {
-  dialog.close();
+dialog.addEventListener("close", (event) => {
+  log("Dialog closed");
 });
 ```
 
 #### Result
 
-{{ EmbedLiveSample('Canceling a dialog', '100%', '100px') }}
+{{ EmbedLiveSample('Canceling a dialog', '100%', '250px') }}
 
 ## Specifications
 
diff --git a/files/en-us/web/api/htmldialogelement/close/index.md b/files/en-us/web/api/htmldialogelement/close/index.md
index 800d511128b4da1..e7fd2b537388a36 100644
--- a/files/en-us/web/api/htmldialogelement/close/index.md
+++ b/files/en-us/web/api/htmldialogelement/close/index.md
@@ -9,7 +9,7 @@ browser-compat: api.HTMLDialogElement.close
 {{ APIRef("HTML DOM") }}
 
 The **`close()`** method of the {{domxref("HTMLDialogElement")}} interface closes the {{htmlelement("dialog")}}.
-An optional string may be passed as an argument, updating the `returnValue` of the dialog.
+An optional string may be passed as an argument, updating the {{domxref("HTMLDialogElement.returnValue", "returnValue")}} of the dialog.
 
 ## Syntax
 
@@ -29,68 +29,74 @@ None ({{jsxref("undefined")}}).
 
 ## Examples
 
-The following example shows a simple button that, when clicked, opens a {{htmlelement("dialog")}} containing a form via the `showModal()` method.
-From there you can click the _X_ button to close the dialog (via the `HTMLDialogElement.close()` method), or submit the form via the submit button.
+The following example shows a button that, when clicked, opens a {{htmlelement("dialog")}} via the {{domxref("HTMLDialogElement.showModal()", "showModal()")}} method.
+From there you can click the either _Close_ button to close the dialog (via the `close()` method).
+
+The _Close_ button closes the dialog without a {{domxref("HTMLDialogElement.returnValue", "returnValue")}}, while the _Close w/ return value_ button closes the dialog with a {{domxref("HTMLDialogElement.returnValue", "returnValue")}}.
 
 ```html
-<!-- Simple pop-up dialog box, containing a form -->
-<dialog id="favDialog">
-  <form method="dialog">
-    <button type="button" id="close" aria-label="close">X</button>
-    <section>
-      <p>
-        <label for="favAnimal">Favorite animal:</label>
-        <select id="favAnimal" name="favAnimal">
-          <option></option>
-          <option>Brine shrimp</option>
-          <option>Red panda</option>
-          <option>Spider monkey</option>
-        </select>
-      </p>
-    </section>
-    <menu>
-      <li>
-        <button type="reset">Reset</button>
-      </li>
-      <li>
-        <button type="submit">Confirm</button>
-      </li>
-    </menu>
-  </form>
+<dialog id="dialog">
+  <button type="button" id="close">Close</button>
+  <button type="button" id="close-w-value">Close w/ return value</button>
 </dialog>
 
-<button id="updateDetails">Update details</button>
+<button id="open">Open dialog</button>
+```
+
+```html hidden
+<pre id="status-text"></pre>
+```
+
+```css hidden
+#status-text {
+  height: 120px;
+  overflow: scroll;
+  padding: 0.5rem;
+  border: 1px solid black;
+}
+```
+
+```js hidden
+const statusText = document.getElementById("status-text");
+function log(text) {
+  statusText.innerText = `${statusText.innerText}${text}\n`;
+  statusText.scrollTop = statusText.scrollHeight;
+}
 ```
 
 ```js
-const updateButton = document.getElementById("updateDetails");
+const dialog = document.getElementById("dialog");
+const openButton = document.getElementById("open");
 const closeButton = document.getElementById("close");
-const dialog = document.getElementById("favDialog");
-dialog.returnValue = "favAnimal";
-
-function openCheck(dialog) {
-  if (dialog.open) {
-    console.log("Dialog open");
-  } else {
-    console.log("Dialog closed");
-  }
-}
+const closeWithValueButton = document.getElementById("close-w-value");
 
 // Update button opens a modal dialog
-updateButton.addEventListener("click", () => {
+openButton.addEventListener("click", () => {
+  // Reset the return value
+  dialog.returnValue = "";
+  // Rhow the dialog
   dialog.showModal();
-  openCheck(dialog);
 });
 
-// Form close button closes the dialog box
+// Close button closes the dialog box
 closeButton.addEventListener("click", () => {
-  dialog.close("animalNotChosen");
-  openCheck(dialog);
+  dialog.close();
+});
+
+// Close button closes the dialog box with a return value
+closeWithValueButton.addEventListener("click", () => {
+  dialog.close("some value");
+});
+
+// Form close button closes the dialog box
+dialog.addEventListener("close", () => {
+  log(`Dialog closed. Return value: "${dialog.returnValue}"`);
 });
 ```
 
-If the "X" button was of `type="submit"`, the dialog would have closed without requiring JavaScript.
-A form submission closes the `<dialog>` it is nested within if the [form's method is `dialog`](/en-US/docs/Web/HTML/Reference/Elements/form#method), so no "close" button is required.
+> [!NOTE]
+>
+> You know you can also automatically close a `<dialog>` by submitting a {{htmlelement("form")}} element with a [`method="dialog"`](/en-US/docs/Web/HTML/Reference/Elements/form#method) attribute.
 
 ### Result
 
diff --git a/files/en-us/web/api/htmldialogelement/close_event/index.md b/files/en-us/web/api/htmldialogelement/close_event/index.md
index 13a91985573a4cd..e47d0ae1ceefb98 100644
--- a/files/en-us/web/api/htmldialogelement/close_event/index.md
+++ b/files/en-us/web/api/htmldialogelement/close_event/index.md
@@ -33,46 +33,57 @@ A generic {{domxref("Event")}}.
 #### HTML
 
 ```html
-<dialog class="example-dialog">
+<dialog id="dialog">
   <form method="dialog">
-    <button>Close via method="dialog"</button>
+    <button type="submit">Close via method="dialog"</button>
   </form>
-  <button class="close">Close via .close() method</button>
+  <button id="close">Close via .close() method</button>
   <p>Or hit the <kbd>Esc</kbd> key</p>
 </dialog>
 
-<button class="open-dialog">Open dialog</button>
+<button id="open">Open dialog</button>
+```
 
-<div class="result"></div>
+```html hidden
+<pre id="status-text"></pre>
 ```
 
 ```css hidden
-button,
-div {
-  margin: 0.5rem;
+#status-text {
+  height: 120px;
+  overflow: scroll;
+  padding: 0.5rem;
+  border: 1px solid black;
+}
+```
+
+```js hidden
+const statusText = document.getElementById("status-text");
+function log(text) {
+  statusText.innerText = `${statusText.innerText}${text}\n`;
+  statusText.scrollTop = statusText.scrollHeight;
 }
 ```
 
 #### JavaScript
 
 ```js
-const result = document.querySelector(".result");
-
-const dialog = document.querySelector(".example-dialog");
-dialog.addEventListener("close", (event) => {
-  result.textContent = "dialog was closed";
-});
+const dialog = document.getElementById("dialog");
+const openButton = document.getElementById("open");
+const closeButton = document.getElementById("close");
 
-const openDialog = document.querySelector(".open-dialog");
-openDialog.addEventListener("click", () => {
+openButton.addEventListener("click", () => {
   dialog.showModal();
-  result.textContent = "";
+  log("dialog: opened");
 });
 
-const closeButton = document.querySelector(".close");
 closeButton.addEventListener("click", () => {
   dialog.close();
 });
+
+dialog.addEventListener("close", (event) => {
+  log("dialog: closed");
+});
 ```
 
 #### Result
diff --git a/files/en-us/web/api/htmldialogelement/closedby/index.md b/files/en-us/web/api/htmldialogelement/closedby/index.md
index 2b5bff0ae1a6a72..0c4074dd2ee0e16 100644
--- a/files/en-us/web/api/htmldialogelement/closedby/index.md
+++ b/files/en-us/web/api/htmldialogelement/closedby/index.md
@@ -16,11 +16,18 @@ The **`closedBy`** property of the
 A string; possible values are:
 
 - `any`
-  - : The dialog can be dismissed with a light dismiss user action, a platform-specific user action, or a developer-specified mechanism.
+  - : The dialog can be dismissed by a [close request](https://html.spec.whatwg.org/multipage/interaction.html#close-request) or clicks outside the dialog.
 - `closerequest`
-  - : The dialog can be dismissed with a platform-specific user action or a developer-specified mechanism.
+  - : The dialog can only be dismissed by a [close request](https://html.spec.whatwg.org/multipage/interaction.html#close-request).
 - `none`
-  - : The dialog can only be dismissed with a developer-specified mechanism.
+  - : No user actions automatically close the dialog. The dialog can only be dismissed with a developer-specified mechanism.
+
+### Default behaviour
+
+If the `closedby` attribute is absent or invalid, it falls back to the **Auto** state. In the **Auto** state:
+
+- when the `<dialog>` is opened with `showModal()`, it behaves as if: `closedby="closerequest"`
+- when the `<dialog>` is opened by any other means, it behaves as if: `closedby="none"`
 
 ## Examples
 
@@ -30,14 +37,14 @@ A string; possible values are:
 <dialog open closedby="any">
   <h2>My dialog</h2>
   <p>
-    Closable using the Esc key, or by clicking outside the dialog. "Light
-    dismiss" behavior.
+    Closable using the <kbd>Esc</kbd> key, or by clicking outside the dialog
+    ("light dismiss").
   </p>
 </dialog>
 ```
 
 ```js
-const dialogElem = document.querySelector("dialog");
+const dialog = document.querySelector("dialog");
 
 // Logs "any" to the console
 console.log(dialogElem.closedBy);
diff --git a/files/en-us/web/api/htmldialogelement/index.md b/files/en-us/web/api/htmldialogelement/index.md
index b006529ca93316f..1458054d0d55ee5 100644
--- a/files/en-us/web/api/htmldialogelement/index.md
+++ b/files/en-us/web/api/htmldialogelement/index.md
@@ -19,7 +19,7 @@ The **`HTMLDialogElement`** interface provides methods to manipulate {{HTMLEleme
 _Also inherits properties from its parent interface, {{domxref("HTMLElement")}}._
 
 - {{domxref("HTMLDialogElement.closedBy")}}
-  - : A string that sets or returns the [`closedby`](/en-US/docs/Web/HTML/Reference/Elements/dialog#closedby) attribute value of the `<dialog>` element, which indicates the types of user actions that can be used to close the dialog.
+  - : A string that sets or returns the [`closedby`](/en-US/docs/Web/HTML/Reference/Elements/dialog#closedby) HTML attribute, indicating the types of user actions that can be used to close the dialog.
 - {{domxref("HTMLDialogElement.open")}}
   - : A boolean value reflecting the [`open`](/en-US/docs/Web/HTML/Reference/Elements/dialog#open) HTML attribute, indicating whether the dialog is available for interaction.
 - {{domxref("HTMLDialogElement.returnValue")}}
@@ -30,13 +30,13 @@ _Also inherits properties from its parent interface, {{domxref("HTMLElement")}}.
 _Also inherits methods from its parent interface, {{domxref("HTMLElement")}}._
 
 - {{domxref("HTMLDialogElement.close()")}}
-  - : Closes the dialog. An optional string may be passed as an argument, updating the `returnValue` of the dialog.
+  - : Closes the dialog. An optional string may be passed as an argument, updating the {{domxref("HTMLDialogElement.returnValue", "returnValue")}} of the dialog.
 - {{domxref("HTMLDialogElement.requestClose()")}}
-  - : Requests to close the dialog. An optional string may be passed as an argument, updating the `returnValue` of the dialog.
+  - : Requests to close the dialog. An optional string may be passed as an argument, updating the {{domxref("HTMLDialogElement.returnValue", "returnValue")}} of the dialog.
 - {{domxref("HTMLDialogElement.show()")}}
   - : Displays the dialog modelessly, i.e., still allowing interaction with content outside of the dialog.
 - {{domxref("HTMLDialogElement.showModal()")}}
-  - : Displays the dialog as a modal, over the top of any other dialogs that might be present. Everything outside the dialog are [inert](/en-US/docs/Web/API/HTMLElement/inert) with interactions outside the dialog being blocked.
+  - : Displays the dialog as a modal, over the top of any other dialogs that might be present. Everything outside the dialog is {{DOMxRef("HTMLElement.inert", "inert")}} with interactions outside the dialog being blocked.
 
 ## Events
 
@@ -45,30 +45,35 @@ _Also inherits events from its parent interface, {{DOMxRef("HTMLElement")}}._
 Listen to these events using {{DOMxRef("EventTarget.addEventListener", "addEventListener()")}} or by assigning an event listener to the `oneventname` property of this interface.
 
 - {{domxref("HTMLDialogElement/cancel_event", "cancel")}}
-  - : Fired when the dialog is requested to close, whether with the escape key, or via the `HTMLDialogElement.requestClose()` method.
+  - : Fired when the dialog is requested to close, whether with the escape key, or via the {{domxref("HTMLDialogElement.close()", "requestClose()")}} method.
 - {{domxref("HTMLDialogElement/close_event", "close")}}
-  - : Fired when the dialog is closed, whether with the escape key, the `HTMLDialogElement.close()` method, or via submitting a form within the dialog with [`method="dialog"`](/en-US/docs/Web/HTML/Reference/Elements/form#method).
+  - : Fired when the dialog is closed, whether with the escape key, the {{domxref("HTMLDialogElement.close()", "close()")}} method, or via submitting a form within the dialog with [`method="dialog"`](/en-US/docs/Web/HTML/Reference/Elements/form#method).
 
 ## Examples
 
-### Opening a modal dialog
+### Open / close a modal dialog
 
-The following example shows a button that, when clicked, uses the {{domxref("HTMLDialogElement.showModal()")}} function to open a modal {{htmlelement("dialog")}} containing a form.
+The following example shows a button that, when clicked, uses the {{domxref("HTMLDialogElement.showModal()", "showModal()")}} function to open a modal dialog containing a form.
 
 While open, everything other than the modal dialog's contents is inert.
-You can click the _Cancel_ button to close the dialog (via the {{domxref("HTMLDialogElement.close()")}} function), or submit the form via the _Confirm_ button.
+You can click the _Close_ button to close the dialog (via the {{domxref("HTMLDialogElement.close()", "close()")}} function), or submit the form via the _Confirm_ button.
 
-The example demonstrates how you might use all the "state change" events that can be fired on the dialog: {{domxref("HTMLDialogElement/cancel_event", "cancel")}} and {{domxref("HTMLDialogElement/close_event", "close")}}, and the inherited events {{domxref("HTMLElement/beforetoggle_event", "beforetoggle")}}, and {{domxref("HTMLElement/toggle_event", "toggle")}}.
+The example demonstrates:
+
+1. Closing a form with the {{domxref("HTMLDialogElement.close()", "close()")}} function
+2. Closing a form on form submit and setting the dialog {{domxref("HTMLDialogElement.returnValue", "returnValue")}}
+3. Closing a form with the <kbd>Esc</kbd> key
+4. "state change" events that can be fired on the dialog: {{domxref("HTMLDialogElement/cancel_event", "cancel")}} and {{domxref("HTMLDialogElement/close_event", "close")}}, and the inherited events {{domxref("HTMLElement/beforetoggle_event", "beforetoggle")}}, and {{domxref("HTMLElement/toggle_event", "toggle")}}.
 
 #### HTML
 
 ```html
-<!-- pop-up dialog box, containing a form -->
-<dialog id="favDialog">
-  <form method="dialog">
+<dialog id="dialog">
+  <button id="close" type="button">Close</button>
+  <form method="dialog" id="form">
     <p>
-      <label for="favAnimal">Favorite animal:</label>
-      <select id="favAnimal" name="favAnimal">
+      <label for="fav-animal">Favorite animal:</label>
+      <select id="fav-animal" name="favAnimal" required>
         <option></option>
         <option>Brine shrimp</option>
         <option>Red panda</option>
@@ -76,24 +81,21 @@ The example demonstrates how you might use all the "state change" events that ca
       </select>
     </p>
     <div>
-      <button id="cancel" type="reset">Cancel</button>
       <button id="submit" type="submit">Confirm</button>
     </div>
   </form>
 </dialog>
 
-<div>
-  <button id="updateDetails">Update details</button>
-</div>
+<button id="open">Open dialog</button>
 ```
 
 ```html hidden
-<pre id="log"></pre>
+<pre id="status-text"></pre>
 ```
 
 ```css hidden
-#log {
-  height: 150px;
+#status-text {
+  height: 120px;
   overflow: scroll;
   padding: 0.5rem;
   border: 1px solid black;
@@ -101,55 +103,68 @@ The example demonstrates how you might use all the "state change" events that ca
 ```
 
 ```js hidden
-const logElement = document.querySelector("#log");
+const statusText = document.getElementById("status-text");
 function log(text) {
-  logElement.innerText = `${logElement.innerText}${text}\n`;
-  logElement.scrollTop = logElement.scrollHeight;
+  statusText.innerText = `${statusText.innerText}${text}\n`;
+  statusText.scrollTop = statusText.scrollHeight;
 }
 ```
 
 #### JavaScript
 
-##### Showing the dialog
+##### Open the dialog
 
-The code first gets objects for the {{htmlelement("button")}} elements, the {{htmlelement("dialog")}} element, and the {{htmlelement("select")}} element.
-It then adds a listener to call the {{domxref("HTMLDialogElement.showModal()")}} function when the _Update_ button is clicked.
+The code first gets objects for the {{htmlelement("dialog")}} element, the {{htmlelement("button")}} elements, and the {{htmlelement("select")}} element.
+It then adds a listener to call the {{domxref("HTMLDialogElement.showModal()")}} function when the _Open Dialog_ button is clicked.
 
 ```js
-const updateButton = document.getElementById("updateDetails");
-const confirmButton = document.getElementById("submit");
-const cancelButton = document.getElementById("cancel");
-const dialog = document.getElementById("favDialog");
-const selectElement = document.getElementById("favAnimal");
-
-// Update button opens a modal dialog
-updateButton.addEventListener("click", () => {
+const dialog = document.getElementById("dialog");
+const openButton = document.getElementById("open");
+
+// Open button opens a modal dialog
+openButton.addEventListener("click", () => {
+  log(`dialog: showModal()`);
   dialog.showModal();
 });
 ```
 
-##### Cancel and confirm buttons
+##### Close the dialog when the _Close_ button is clicked
 
-Next we add listeners to the _Confirm_ and _Cancel_ button `click` events.
-The handlers call {{domxref("HTMLDialogElement.close()")}} with the selection value (if present) and no value, which in turn set the return value of the dialog ({{domxref("HTMLDialogElement.returnValue")}}) to the selection value and `null`, respectively.
+Next we add a listener to the _Close_ button {{domxref("Element/click_event", "click")}} event. The handler set the {{domxref("HTMLDialogElement.returnValue", "returnValue")}} and calls the {{domxref("HTMLDialogElement.close()", "close()")}} function to close the dialog.
 
 ```js
-// Confirm button closes dialog if there is a selection.
-confirmButton.addEventListener("click", () => {
-  if (selectElement.value) {
-    // Set dialog.returnValue to selected value
-    dialog.close(selectElement.value);
-  }
+// Close button closes the dialog box
+const closeButton = document.getElementById("close");
+closeButton.addEventListener("click", () => {
+  dialog.returnValue = ""; // Reset return value
+  log(`dialog: close()`);
+  dialog.close();
+  // Alternatively, we could use dialog.requestClose(""); with an empty return value.
 });
+```
+
+##### Close the dialog when _Confirm_ button is clicked via form submission
 
-// Cancel button closes the dialog box
-cancelButton.addEventListener("click", () => {
-  dialog.close(); // Set dialog.returnValue to null
+Next we add a listener to the {{htmlelement("form")}} {{domxref("HTMLFormElement.submit_event", "submit")}} event.
+The form is submitted when the required {{htmlelement("select")}} element has a value _Confirm_ button is clicked. If the {{htmlelement("select")}} element does not have a value the form will not submit and the dialog will remain open.
+
+```js
+// Confirm button closes dialog if there is a selection.
+const form = document.getElementById("form");
+const selectElement = document.getElementById("fav-animal");
+form.addEventListener("submit", () => {
+  log(`form: submit`);
+  // Set the return value to the selected option value
+  dialog.returnValue = selectElement.value;
+  // We don't need to close the dialog here
+  // submitting the form with method="dialog" will do that automatically.
+  // dialog.close();
 });
 ```
 
-Calling `close()` also fires the {{domxref("HTMLDialogElement/close_event", "close")}} event, which we implement below by logging the return value of the dialog.
-If the _Confirm_ button was clicked this should be the selected value in the dialog, otherwise it should be `null`.
+##### Get the `returnValue` on `close`
+
+Calling {{domxref("HTMLDialogElement.close()", "close()")}} (or successfully submitting a form with `method="dialog`") fires the {{domxref("HTMLDialogElement/close_event", "close")}} event, which we implement below by logging the return value of the dialog.
 
 ```js
 dialog.addEventListener("close", (event) => {
@@ -157,12 +172,12 @@ dialog.addEventListener("close", (event) => {
 });
 ```
 
-##### Cancel event
+##### `cancel` event
 
 The {{domxref("HTMLDialogElement/cancel_event", "cancel")}} event is fired when "platform specific methods" are used to close the dialog, such as the <kbd>Esc</kbd> key.
-It is also fired when the `HTMLDialogElement.requestClose()` method is called.
+It is also fired when the {{domxref("HTMLDialogElement.requestClose()", "requestClose()")}} method is called.
 The event is "cancelable" which means that we could use it to prevent the dialog from closing.
-Here we just treat the cancel as a "close" operation, and reset the {{domxref("HTMLDialogElement.returnValue")}} to `""` to clear any value that may have been set.
+Here we just treat the cancel as a "close" operation, and reset the {{domxref("HTMLDialogElement.returnValue", "returnValue")}} to `""` to clear any value that may have been set.
 
 ```js
 dialog.addEventListener("cancel", (event) => {
@@ -171,25 +186,25 @@ dialog.addEventListener("cancel", (event) => {
 });
 ```
 
-##### Toggle event
+##### `toggle` event
 
-The [`toggle` event](/en-US/docs/Web/API/HTMLElement/toggle_event) (inherited from `HTMLElement`) is fired just after a dialog has opened or closed (but before the `closed` event).
+The {{domxref("HTMLElement/toggle_event", "toggle")}} event (inherited from {{domxref("HTMLElement", "HTMLElement")}}) is fired just after a dialog has opened or closed (but before the {{domxref("HTMLDialogElement/close_event", "close")}} event).
 
-Here we add a listener to log when the Dialog opens and closes.
+Here we add a listener to log when the dialog opens and closes.
 
 > [!NOTE]
-> The `toggle` and `beforetoggle` events may not be fired at dialog elements on all browsers.
-> On these browser versions you can instead check the {{domxref("HTMLDialogElement.open")}} property after attempting to open/close the dialog.
+> The {{domxref("HTMLElement/toggle_event", "toggle")}} and {{domxref("HTMLElement/beforetoggle_event", "beforetoggle")}} events may not be fired at dialog elements on all browsers.
+> On these browser versions you can instead check the {{domxref("HTMLDialogElement.open", "open")}} property after attempting to open/close the dialog.
 
 ```js
 dialog.addEventListener("toggle", (event) => {
-  log(`toggle_event: Dialog ${event.newState}`);
+  log(`toggle event: newState: ${event.newState}`);
 });
 ```
 
-##### Beforetoggle event
+##### `beforetoggle` event
 
-The [`beforetoggle` event](/en-US/docs/Web/API/HTMLElement/beforetoggle_event) (inherited from `HTMLElement`) is a cancellable event that is fired just before a dialog is opened or closed.
+The {{domxref("HTMLElement/beforetoggle_event", "beforetoggle")}} event (inherited from {{domxref("HTMLElement", "HTMLElement")}}) is a cancellable event that is fired just before a dialog is opened or closed.
 If needed, this can be used to prevent a dialog from showing, or to perform actions on other elements that are affected by the dialog open/close state, such as adding classes on them to trigger animations.
 
 In this case we just log the old and new state.
@@ -212,9 +227,9 @@ dialog.addEventListener("beforetoggle", (event) => {
 #### Result
 
 Try out the example below.
-Note that both `Confirm` and `Cancel` buttons result in the `close` event being fired, and that the result should reflect the selected dialog option.
+Note that both `Confirm` and `Close` buttons result in the {{domxref("HTMLDialogElement/close_event", "close")}} event being fired, and that the result should reflect the selected dialog option.
 
-{{EmbedLiveSample("Opening a modal dialog", '100%', "250px")}}
+{{EmbedLiveSample("Open / close a modal dialog", '100%', "250px")}}
 
 ## Specifications
 
diff --git a/files/en-us/web/api/htmldialogelement/open/index.md b/files/en-us/web/api/htmldialogelement/open/index.md
index b805d18da10e5e3..43caa51b19a6ff0 100644
--- a/files/en-us/web/api/htmldialogelement/open/index.md
+++ b/files/en-us/web/api/htmldialogelement/open/index.md
@@ -36,27 +36,39 @@ button.
   </form>
 </dialog>
 
-<p>
-  <button id="openDialog">Open Dialog</button>
-</p>
-<p id="dialogStatus"></p>
+<button id="open">Open Dialog</button>
+```
+
+```html hidden
+<pre id="status-text"></pre>
+```
+
+```css hidden
+#status-text {
+  height: 120px;
+  overflow: scroll;
+  padding: 0.5rem;
+  border: 1px solid black;
+}
+```
+
+```js hidden
+const statusText = document.getElementById("status-text");
+function log(text) {
+  statusText.innerText = `${statusText.innerText}${text}\n`;
+  statusText.scrollTop = statusText.scrollHeight;
+}
 ```
 
 ```js
-const openDialog = document.getElementById("openDialog");
 const dialog = document.getElementById("dialog");
-const text = document.getElementById("dialogStatus");
+const openButton = document.getElementById("open");
 
 function openCheck(dialog) {
-  if (dialog.open) {
-    text.innerText = "Dialog open";
-  } else {
-    text.innerText = "Dialog closed";
-  }
+  log(dialog.open ? "Dialog: open" : "Dialog: closed");
 }
 
-// Update button opens a modal dialog
-openDialog.addEventListener("click", () => {
+openButton.addEventListener("click", () => {
   dialog.showModal();
   openCheck(dialog);
 });
@@ -68,7 +80,7 @@ dialog.addEventListener("close", () => {
 
 ### Result
 
-{{ EmbedLiveSample('Examples', '100%', '200px') }}
+{{ EmbedLiveSample('Examples', '100%', '250px') }}
 
 ## Specifications
 
diff --git a/files/en-us/web/api/htmldialogelement/requestclose/index.md b/files/en-us/web/api/htmldialogelement/requestclose/index.md
index e6b060a3f4e9d4b..a292633f8d00a18 100644
--- a/files/en-us/web/api/htmldialogelement/requestclose/index.md
+++ b/files/en-us/web/api/htmldialogelement/requestclose/index.md
@@ -9,10 +9,10 @@ browser-compat: api.HTMLDialogElement.requestClose
 {{ APIRef("HTML DOM") }}
 
 The **`requestClose()`** method of the {{domxref("HTMLDialogElement")}} interface requests to close the {{htmlelement("dialog")}}.
-An optional string may be passed as an argument, updating the `returnValue` of the dialog.
+An optional string may be passed as an argument, updating the {{domxref("HTMLDialogElement.returnValue", "returnValue")}} of the dialog.
 
-This method differs from the {{domxref("HTMLDialogElement.close()")}} method in that it fires a {{domxref("HTMLDialogElement.cancel_event", "cancel")}} event before firing the {{domxref("HTMLDialogElement.close_event", "close")}} event.
-Authors can call {{domxref("Event.preventDefault()")}} in the handler for the `cancel` event to prevent the dialog from closing.
+This method differs from the {{domxref("HTMLDialogElement.close()", "close()")}} method in that it fires a {{domxref("HTMLDialogElement.cancel_event", "cancel")}} event before firing the {{domxref("HTMLDialogElement.close_event", "close")}} event.
+Authors can call {{domxref("Event.preventDefault()")}} in the handler for the {{domxref("HTMLDialogElement.cancel_event", "cancel")}} event to prevent the dialog from closing.
 
 This method exposes the same behavior as the dialog's internal close watcher.
 
@@ -36,75 +36,87 @@ None ({{jsxref("undefined")}}).
 
 ### Using requestClose()
 
-The following example shows a simple button that, when clicked, opens a {{htmlelement("dialog")}} containing a form, via the `showModal()` method.
-Once open you can click the **X** button to request to close the dialog (via the `HTMLDialogElement.requestClose()` method), or submit the form via the **Confirm** button.
+The following example shows a button that, when clicked, opens a {{htmlelement("dialog")}} via the {{domxref("HTMLDialogElement.showModal()", "showModal()")}} method.
+From there you can click the either _Close_ button to close the dialog (via the `requestClose()` method).
+
+The _Close_ button closes the dialog without a {{domxref("HTMLDialogElement.returnValue", "returnValue")}}, while the _Close w/ return value_ button closes the dialog with a {{domxref("HTMLDialogElement.returnValue", "returnValue")}}.
+
+Preventing the dialog from closing is demonstrated with a checkbox.
 
 #### HTML
 
 ```html
-<!-- Simple pop-up dialog box, containing a form -->
-<dialog id="favDialog">
-  <form method="dialog">
-    <button type="button" id="close" aria-label="close">X</button>
-    <section>
-      <p>
-        <label for="favAnimal">Favorite animal:</label>
-        <select id="favAnimal" name="favAnimal">
-          <option></option>
-          <option>Brine shrimp</option>
-          <option>Red panda</option>
-          <option>Spider monkey</option>
-        </select>
-      </p>
-    </section>
-    <menu>
-      <li>
-        <button type="reset">Reset</button>
-      </li>
-      <li>
-        <button type="submit">Confirm</button>
-      </li>
-    </menu>
-  </form>
+<dialog id="dialog">
+  <div>
+    <label><input type="checkbox" id="prevent-close" /> Cancel close</label>
+  </div>
+  <button type="button" id="close">Close</button>
+  <button type="button" id="close-w-value">Close w/ return value</button>
 </dialog>
 
-<button id="updateDetails">Update details</button>
+<button id="open">Open dialog</button>
+```
+
+```html hidden
+<pre id="status-text"></pre>
+```
+
+```css hidden
+#status-text {
+  height: 120px;
+  overflow: scroll;
+  padding: 0.5rem;
+  border: 1px solid black;
+}
 ```
 
-#### JavaScript
+```js hidden
+const statusText = document.getElementById("status-text");
+function log(text) {
+  statusText.innerText = `${statusText.innerText}${text}\n`;
+  statusText.scrollTop = statusText.scrollHeight;
+}
+```
 
 ```js
-const updateButton = document.getElementById("updateDetails");
+const dialog = document.getElementById("dialog");
+const openButton = document.getElementById("open");
 const closeButton = document.getElementById("close");
-const dialog = document.getElementById("favDialog");
+const closeWithValueButton = document.getElementById("close-w-value");
+const preventCloseInput = document.getElementById("prevent-close");
 
 // Update button opens a modal dialog
-updateButton.addEventListener("click", () => {
+openButton.addEventListener("click", () => {
+  // Reset the return value
+  dialog.returnValue = "";
+  // Show the dialog
   dialog.showModal();
 });
 
-// Form close button requests to close the dialog box
+// Close button closes the dialog box
 closeButton.addEventListener("click", () => {
-  dialog.requestClose("animalNotChosen");
+  dialog.requestClose();
 });
 
-function dialogShouldNotClose() {
-  // Add logic to decide whether to allow the dialog to close.
-  // Closing prevented by default
-  return true;
-}
+// Close button closes the dialog box with a return value
+closeWithValueButton.addEventListener("click", () => {
+  dialog.requestClose("some value");
+});
 
+// Fired when requestClose() is called
+// Prevent the dialog from closing by calling event.preventDefault()
 dialog.addEventListener("cancel", (event) => {
-  if (!event.cancelable) return;
-  if (dialogShouldNotClose()) {
-    console.log("Closing prevented");
+  if (preventCloseInput.checked) {
+    log("Dialog close cancelled");
     event.preventDefault();
   }
 });
-```
 
-If the "X" button was of `type="submit"`, the dialog would have closed without requiring JavaScript.
-A form submission closes the `<dialog>` it is nested within if the [form's method is `dialog`](/en-US/docs/Web/HTML/Reference/Elements/form#method), so no "close" button is required.
+// cancel event is not prevented, dialog will close
+dialog.addEventListener("close", () => {
+  log(`Dialog closed. Return value: "${dialog.returnValue}"`);
+});
+```
 
 #### Result
 
diff --git a/files/en-us/web/api/htmldialogelement/returnvalue/index.md b/files/en-us/web/api/htmldialogelement/returnvalue/index.md
index 69d838d09f9362f..3a8b99989654cc2 100644
--- a/files/en-us/web/api/htmldialogelement/returnvalue/index.md
+++ b/files/en-us/web/api/htmldialogelement/returnvalue/index.md
@@ -31,51 +31,71 @@ If the user dismisses the dialog without clicking a button (for example, by pres
 #### HTML
 
 ```html
-<dialog id="termsDialog">
+<dialog id="dialog">
   <p>Do you agree to the Terms of Service (link)?</p>
-  <button id="declineButton" value="declined">Decline</button>
-  <button id="acceptButton" value="accepted">Accept</button>
+  <button id="decline" value="declined">Decline</button>
+  <button id="accept" value="accepted">Accept</button>
 </dialog>
-<p>
-  <button id="openDialogButton">Review ToS</button>
-</p>
-<p id="statusText"></p>
+<button id="open">Open dialog</button>
 ```
 
-#### JavaScript
+```html hidden
+<pre id="status-text"></pre>
+```
 
-```js
-const dialog = document.getElementById("termsDialog");
-const statusText = document.getElementById("statusText");
+```css hidden
+#status-text {
+  height: 120px;
+  overflow: scroll;
+  padding: 0.5rem;
+  border: 1px solid black;
+}
+```
 
-const openDialogButton = document.getElementById("openDialogButton");
-const declineButton = document.getElementById("declineButton");
-const acceptButton = document.getElementById("acceptButton");
+```js hidden
+const statusText = document.getElementById("status-text");
+function log(text) {
+  statusText.innerText = `${statusText.innerText}${text}\n`;
+  statusText.scrollTop = statusText.scrollHeight;
+}
+```
 
-openDialogButton.addEventListener("click", () => {
+#### JavaScript
+
+```js
+const dialog = document.getElementById("dialog");
+const openButton = document.getElementById("open");
+const declineButton = document.getElementById("decline");
+const acceptButton = document.getElementById("accept");
+
+openButton.addEventListener("click", () => {
+  // Reset the return value on each open
+  dialog.returnValue = "";
+  updateReturnValue();
+  // Show the dialog
   dialog.showModal();
 });
 
-declineButton.addEventListener("click", closeDialog);
-acceptButton.addEventListener("click", closeDialog);
-
 function closeDialog(event) {
   const button = event.target;
   dialog.close(button.value);
 }
 
-dialog.addEventListener("close", () => {
-  statusText.innerText = dialog.returnValue
-    ? `Return value: ${dialog.returnValue}`
-    : "There was no return value";
-});
+function updateReturnValue() {
+  log(`Return value: "${dialog.returnValue}"`);
+}
+
+declineButton.addEventListener("click", closeDialog);
+acceptButton.addEventListener("click", closeDialog);
+
+dialog.addEventListener("close", updateReturnValue);
 ```
 
 #### Result
 
 Try clicking "Review ToS", then choosing the "Accept" or "Decline" buttons in the dialog, or dismissing the dialog by pressing the <kbd>Esc</kbd> key, and observe the different status updates.
 
-{{ EmbedLiveSample('Checking the return value', '100%', '200px') }}
+{{ EmbedLiveSample('Checking the return value', '100%', "250px")}}
 
 ## Specifications
 
diff --git a/files/en-us/web/api/htmldialogelement/show/index.md b/files/en-us/web/api/htmldialogelement/show/index.md
index 457861539ed8423..b2b5f5ae6e28374 100644
--- a/files/en-us/web/api/htmldialogelement/show/index.md
+++ b/files/en-us/web/api/htmldialogelement/show/index.md
@@ -33,67 +33,34 @@ None ({{jsxref("undefined")}}).
 
 ### Basic usage
 
-The following example shows a simple button that, when clicked, opens a {{htmlelement("dialog")}} containing a form via the `show()` method.
-From there you can click the _Cancel_ button ("X") to close the dialog (via the {{domxref("HTMLDialogElement.close()")}} method), or submit the form via the submit button.
+The following example shows a simple button that, when clicked, opens a {{htmlelement("dialog")}} via the `show()` method.
+From there you can click the _Close dialog_ button to close the dialog (via the {{domxref("HTMLDialogElement.close()", "close()")}} method).
 
 #### HTML
 
 ```html
-<!-- Simple pop-up dialog box, containing a form -->
-<dialog id="favDialog">
-  <form method="dialog">
-    <button type="button" id="cancel">X</button>
-    <section>
-      <p>
-        <label for="favAnimal">Favorite animal:</label>
-        <select id="favAnimal" name="favAnimal">
-          <option></option>
-          <option>Brine shrimp</option>
-          <option>Red panda</option>
-          <option>Spider monkey</option>
-        </select>
-      </p>
-    </section>
-    <menu>
-      <li>
-        <button type="reset">Reset</button>
-      </li>
-      <li>
-        <button type="submit">Confirm</button>
-      </li>
-    </menu>
-  </form>
+<dialog id="dialog">
+  <button type="button" id="close">Close dialog</button>
 </dialog>
 
-<button id="updateDetails">Update details</button>
+<button id="open">Open dialog</button>
 ```
 
 #### JavaScript
 
 ```js
-const updateButton = document.getElementById("updateDetails");
-const cancelButton = document.getElementById("cancel");
-const dialog = document.getElementById("favDialog");
-dialog.returnValue = "favAnimal";
-
-function openCheck(dialog) {
-  if (dialog.open) {
-    console.log("Dialog open");
-  } else {
-    console.log("Dialog cancelled");
-  }
-}
-
-// Update button opens a modeless dialog
-updateButton.addEventListener("click", () => {
+const dialog = document.getElementById("dialog");
+const openButton = document.getElementById("open");
+const closeButton = document.getElementById("close");
+
+// Open button opens a modeless dialog
+openButton.addEventListener("click", () => {
   dialog.show();
-  openCheck(dialog);
 });
 
-// Form cancel button closes the dialog box
-cancelButton.addEventListener("click", () => {
-  dialog.close("animalNotChosen");
-  openCheck(dialog);
+// Close button closes the dialog box
+closeButton.addEventListener("click", () => {
+  dialog.close();
 });
 ```
 
diff --git a/files/en-us/web/api/htmldialogelement/showmodal/index.md b/files/en-us/web/api/htmldialogelement/showmodal/index.md
index 08c808c5c48c7a3..f964b8dbf63d1bf 100644
--- a/files/en-us/web/api/htmldialogelement/showmodal/index.md
+++ b/files/en-us/web/api/htmldialogelement/showmodal/index.md
@@ -34,69 +34,42 @@ None ({{jsxref("undefined")}}).
 
 ## Examples
 
-### Opening a modal dialog
+### Basic usage
 
-The following example shows a button that, when clicked, opens a modal {{htmlelement("dialog")}} containing a form via the `HTMLDialogElement.showModal()` function. While open, everything other than the modal dialog's contents is inert. From there you can click the _Cancel_ button to close the dialog (via the {{domxref("HTMLDialogElement.close()")}} function), or submit the form via the submit button. Selecting the cancel button closes the dialog, creating a {{domxref("HTMLDialogElement/close_event", "close")}} event, not a {{domxref("HTMLDialogElement/cancel_event", "cancel")}} event.
+The following example shows a simple button that, when clicked, opens a {{htmlelement("dialog")}} via the `showModal()` method.
+From there you can click the _Close dialog_ button to close the dialog (via the {{domxref("HTMLDialogElement.close()")}} method).
 
 #### HTML
 
 ```html
-<!-- pop-up dialog box, containing a form -->
-<dialog id="favDialog">
-  <form method="dialog">
-    <p>
-      <label for="favAnimal">Favorite animal:</label>
-      <select id="favAnimal" name="favAnimal">
-        <option></option>
-        <option>Brine shrimp</option>
-        <option>Red panda</option>
-        <option>Spider monkey</option>
-      </select>
-    </p>
-    <div>
-      <button id="cancel" type="reset">Cancel</button>
-      <button type="submit">Confirm</button>
-    </div>
-  </form>
+<dialog id="dialog">
+  <button type="button" id="close">Close dialog</button>
 </dialog>
 
-<div>
-  <button id="updateDetails">Update details</button>
-</div>
+<button id="open">Open dialog</button>
 ```
 
 #### JavaScript
 
 ```js
-const updateButton = document.getElementById("updateDetails");
-const cancelButton = document.getElementById("cancel");
-const dialog = document.getElementById("favDialog");
-dialog.returnValue = "favAnimal";
-
-function openCheck(dialog) {
-  if (dialog.open) {
-    console.log("Dialog open");
-  } else {
-    console.log("Dialog closed");
-  }
-}
-
-// Update button opens a modal dialog
-updateButton.addEventListener("click", () => {
+const dialog = document.getElementById("dialog");
+const openButton = document.getElementById("open");
+const closeButton = document.getElementById("close");
+
+// Open button opens a modeless dialog
+openButton.addEventListener("click", () => {
   dialog.showModal();
-  openCheck(dialog);
 });
 
-// Form cancel button closes the dialog box
-cancelButton.addEventListener("click", () => {
-  dialog.close("animalNotChosen");
-  openCheck(dialog);
+// Close button closes the dialog box
+closeButton.addEventListener("click", () => {
+  dialog.close();
 });
 ```
 
 #### Result
 
-{{EmbedLiveSample("Opening a modal dialog")}}
+{{EmbedLiveSample("Basic usage")}}
 
 ## Specifications
 
diff --git a/files/en-us/web/api/htmlelement/beforetoggle_event/index.md b/files/en-us/web/api/htmlelement/beforetoggle_event/index.md
index c9544238cdaf3ed..884215df4805e3e 100644
--- a/files/en-us/web/api/htmlelement/beforetoggle_event/index.md
+++ b/files/en-us/web/api/htmlelement/beforetoggle_event/index.md
@@ -193,7 +193,7 @@ popover.hidePopover();
 
 ### Other examples
 
-- [Opening a modal dialog](/en-US/docs/Web/API/HTMLDialogElement#opening_a_modal_dialog) example in `HTMLDialogElement`
+- [Opening a modal dialog](/en-US/docs/Web/API/HTMLDialogElement#open_close_a_modal_dialog) example in `HTMLDialogElement`
 
 ## Specifications
 
diff --git a/files/en-us/web/api/htmlelement/toggle_event/index.md b/files/en-us/web/api/htmlelement/toggle_event/index.md
index 9dac8536e2f13a6..ed5a4d50f4e16e1 100644
--- a/files/en-us/web/api/htmlelement/toggle_event/index.md
+++ b/files/en-us/web/api/htmlelement/toggle_event/index.md
@@ -108,7 +108,7 @@ popover.hidePopover();
 
 ### Other examples
 
-- [Opening a modal dialog](/en-US/docs/Web/API/HTMLDialogElement#opening_a_modal_dialog) example in `HTMLDialogElement`
+- [Opening a modal dialog](/en-US/docs/Web/API/HTMLDialogElement#open_close_a_modal_dialog) example in `HTMLDialogElement`
 
 ## Specifications