Fix typos and pseudo-typos 11 (#36252)

files/en-us/web/api/htmlbuttonelement/value/index.md

@@ -17,7 +17,7 @@ A string containing the value of the {{htmlelement("button")}} element.
 ## Examples
 
 ```js
-const buttonElement = document.getElementById("givenname");
+const buttonElement = document.getElementById("given-name");
 console.log(`value: ${buttonElement.value}`);
 ```
 

files/en-us/web/api/htmlcanvaselement/transfercontroltooffscreen/index.md

@@ -40,7 +40,7 @@ The following example shows how to transfer control to an {{domxref("OffscreenCa
 
 ```js
 const offscreen = document.querySelector("canvas").transferControlToOffscreen();
-const worker = new Worker("myworkerurl.js");
+const worker = new Worker("my-worker-url.js");
 worker.postMessage({ canvas: offscreen }, [offscreen]);
 ```
 

files/en-us/web/api/htmlcollection/nameditem/index.md

@@ -35,8 +35,8 @@ The first {{domxref("Element")}} in the {{domxref("HTMLCollection")}} matching t
 ```html
 <div id="personal">
   <span name="title">Dr.</span>
-  <span name="firstname">Carina</span>
-  <span name="lastname">Anand</span>
+  <span name="first-name">Carina</span>
+  <span name="last-name">Anand</span>
   <span id="degree">(MD)</span>
 </div>
 ```
@@ -50,14 +50,14 @@ const container = document.getElementById("personal");
 const titleSpan = container.children.namedItem("title");
 
 // The following variants return undefined instead of null if there's no element with a matching name or id
-const firstnameSpan = container.children["firstname"];
-const lastnameSpan = container.children.lastname;
+const firstNameSpan = container.children["first-name"];
+const lastNameSpan = container.children["last-name"];
 
 // Returns the span element with the id "degree"
 const degreeSpan = container.children.namedItem("degree");
 
 const output = document.createElement("div");
-output.textContent = `Result: ${titleSpan.textContent} ${firstnameSpan.textContent} ${lastnameSpan.textContent} ${degreeSpan.textContent}`;
+output.textContent = `Result: ${titleSpan.textContent} ${firstNameSpan.textContent} ${lastNameSpan.textContent} ${degreeSpan.textContent}`;
 
 container.insertAdjacentElement("afterend", output);
 ```

files/en-us/web/api/htmldialogelement/returnvalue/index.md

@@ -29,7 +29,7 @@ The reset button has an event handler that closes the dialog; it has no impact o
       type="submit"
       aria-label="close"
       value="X"
-      name="Xbutton"
+      name="x-button"
       formnovalidate />
     <p>
       <label

files/en-us/web/api/htmlelement/dir/index.md

@@ -30,8 +30,8 @@ One of the following:
 ## Examples
 
 ```js
-const parg = document.getElementById("para1");
-parg.dir = "rtl";
+const para = document.getElementById("para1");
+para.dir = "rtl";
 // change the text direction on a paragraph identified as "para1"
 ```
 

files/en-us/web/api/htmlelement/drag_event/index.md

@@ -45,7 +45,7 @@ _In addition to the properties listed below, properties from the parent interfac
 <div class="dropzone">
   <div id="draggable" draggable="true">This div is draggable</div>
 </div>
-<div class="dropzone" id="droptarget"></div>
+<div class="dropzone" id="drop-target"></div>
 ```
 
 #### CSS
@@ -102,7 +102,7 @@ source.addEventListener("dragend", (event) => {
 });
 
 /* events fired on the drop targets */
-const target = document.getElementById("droptarget");
+const target = document.getElementById("drop-target");
 target.addEventListener(
   "dragover",
   (event) => {

files/en-us/web/api/htmlelement/dragenter_event/index.md

@@ -51,7 +51,7 @@ However, in this partial example, we haven't implemented dropping: for a complet
 <div class="dropzone">
   <div id="draggable" draggable="true">This div is draggable</div>
 </div>
-<div class="dropzone" id="droptarget"></div>
+<div class="dropzone" id="drop-target"></div>
 ```
 
 #### CSS
@@ -83,7 +83,7 @@ body {
 #### JavaScript
 
 ```js
-const target = document.getElementById("droptarget");
+const target = document.getElementById("drop-target");
 target.addEventListener("dragenter", (event) => {
   // highlight potential drop target when the draggable element enters it
   if (event.target.classList.contains("dropzone")) {

files/en-us/web/api/htmlelement/dragleave_event/index.md

@@ -51,7 +51,7 @@ However, in this partial example, we haven't implemented dropping: for a complet
 <div class="dropzone">
   <div id="draggable" draggable="true">This div is draggable</div>
 </div>
-<div class="dropzone" id="droptarget"></div>
+<div class="dropzone" id="drop-target"></div>
 ```
 
 #### CSS
@@ -83,7 +83,7 @@ body {
 #### JavaScript
 
 ```js
-const target = document.getElementById("droptarget");
+const target = document.getElementById("drop-target");
 target.addEventListener("dragenter", (event) => {
   // highlight potential drop target when the draggable element enters it
   if (event.target.classList.contains("dropzone")) {

files/en-us/web/api/htmlelement/dragover_event/index.md

@@ -55,7 +55,7 @@ For a complete example of drag and drop, see the page for the [`drag`](/en-US/do
 <div class="dropzone">
   <div id="draggable" draggable="true">This div is draggable</div>
 </div>
-<div class="dropzone" id="droptarget"></div>
+<div class="dropzone" id="drop-target"></div>
 ```
 
 #### CSS
@@ -91,7 +91,7 @@ source.addEventListener("dragstart", (event) => {
   dragged = event.target;
 });
 
-const target = document.getElementById("droptarget");
+const target = document.getElementById("drop-target");
 target.addEventListener("dragover", (event) => {
   // prevent default to allow drop
   event.preventDefault();

files/en-us/web/api/htmlelement/drop_event/index.md

@@ -55,7 +55,7 @@ For a more complete example of drag and drop, see the page for the [`drag`](/en-
 <div class="dropzone">
   <div id="draggable" draggable="true">This div is draggable</div>
 </div>
-<div class="dropzone" id="droptarget"></div>
+<div class="dropzone" id="drop-target"></div>
 ```
 
 #### CSS
@@ -91,7 +91,7 @@ source.addEventListener("dragstart", (event) => {
   dragged = event.target;
 });
 
-const target = document.getElementById("droptarget");
+const target = document.getElementById("drop-target");
 target.addEventListener("dragover", (event) => {
   // prevent default to allow drop
   event.preventDefault();

files/en-us/web/api/htmlelement/offsetleft/index.md

@@ -37,7 +37,7 @@ This example shows a 'long' sentence that wraps within a div with a blue border,
 <div
   style="width: 300px; border-color:blue; border-style:solid; border-width:1;">
   <span>Short span. </span>
-  <span id="longspan">Long span that wraps within this div.</span>
+  <span id="long-span">Long span that wraps within this div.</span>
 </div>
 
 <div
@@ -46,11 +46,11 @@ This example shows a 'long' sentence that wraps within a div with a blue border,
 
 <script>
   const box = document.getElementById("box");
-  const longspan = document.getElementById("longspan");
-  box.style.left = longspan.offsetLeft + document.body.scrollLeft + "px";
-  box.style.top = longspan.offsetTop + document.body.scrollTop + "px";
-  box.style.width = longspan.offsetWidth + "px";
-  box.style.height = longspan.offsetHeight + "px";
+  const longSpan = document.getElementById("long-span");
+  box.style.left = longSpan.offsetLeft + document.body.scrollLeft + "px";
+  box.style.top = longSpan.offsetTop + document.body.scrollTop + "px";
+  box.style.width = longSpan.offsetWidth + "px";
+  box.style.height = longSpan.offsetHeight + "px";
 </script>
 ```
 

files/en-us/web/api/htmlformelement/acceptcharset/index.md

@@ -19,7 +19,7 @@ A string.
 ## Examples
 
 ```js
-let inputs = document.forms["myform"].acceptCharset;
+let inputs = document.forms["my-form"].acceptCharset;
 ```
 
 ## Specifications

files/en-us/web/api/htmlformelement/index.md

@@ -187,10 +187,10 @@ Submit a `<form>` into a new window:
   <body>
     <form action="test.php" target="_blank">
       <p>
-        <label>First name: <input type="text" name="firstname" /></label>
+        <label>First name: <input type="text" name="first-name" /></label>
       </p>
       <p>
-        <label>Last name: <input type="text" name="lastname" /></label>
+        <label>Last name: <input type="text" name="last-name" /></label>
       </p>
       <p>
         <label><input type="password" name="pwd" /></label>

files/en-us/web/api/htmlformelement/method/index.md

@@ -20,7 +20,7 @@ A string.
 ## Examples
 
 ```js
-document.forms["myform"].method = "post";
+document.forms["my-form"].method = "post";
 
 const formElement = document.createElement("form"); // Create a form
 document.body.appendChild(formElement);

files/en-us/web/api/htmlformelement/reportvalidity/index.md

@@ -27,10 +27,10 @@ Returns `true` if the associated controls' values have no validity problems; oth
 ## Example
 
 ```js
-document.forms["myform"].addEventListener(
+document.forms["my-form"].addEventListener(
   "submit",
   () => {
-    document.forms["myform"].reportValidity();
+    document.forms["my-form"].reportValidity();
   },
   false,
 );

files/en-us/web/api/htmlformelement/reset/index.md

@@ -38,7 +38,7 @@ None ({{jsxref("undefined")}}).
 ## Examples
 
 ```js
-document.getElementById("myform").reset();
+document.getElementById("my-form").reset();
 ```
 
 ## Specifications

files/en-us/web/api/htmlformelement/submit/index.md

@@ -43,7 +43,7 @@ None ({{jsxref("undefined")}}).
 ## Examples
 
 ```js
-document.forms["myform"].submit();
+document.forms["my-form"].submit();
 ```
 
 ## Specifications

files/en-us/web/api/htmlframesetelement/index.md

@@ -9,7 +9,7 @@ browser-compat: api.HTMLFrameSetElement
 
 {{APIRef("HTML DOM")}}{{deprecated_header}}
 
-The **`HTMLFrameSetElement`** interface provides special properties (beyond those of the regular {{domxref("HTMLElement")}} interface they also inherit) for manipulating {{HTMLELEment("frameset")}} elements.
+The **`HTMLFrameSetElement`** interface provides special properties (beyond those of the regular {{domxref("HTMLElement")}} interface they also inherit) for manipulating {{HTMLElement("frameset")}} elements.
 
 {{InheritanceDiagram}}
 

files/en-us/web/api/htmliframeelement/browsingtopics/index.md

@@ -29,7 +29,7 @@ A boolean. The default value is `false`; set it to `true` to send the associated
 Set `browsingtopics` to `true` then load the `<iframe>` contents declaratively:
 
 ```html
-<iframe browsingtopics title="Advertising container" src="adtech1.example">
+<iframe browsingtopics title="Advertising container" src="ad-tech1.example">
   ...
 </iframe>
 ```
@@ -56,7 +56,7 @@ const iframeElem = document.querySelector("iframe");
 
 iframeElem.browsingTopics = true;
 iframeElem.title = "Advertising container";
-iframeElem.src = "adtech1.example";
+iframeElem.src = "ad-tech1.example";
 ```
 
 ## Specifications

files/en-us/web/api/htmlimageelement/complete/index.md

@@ -65,7 +65,7 @@ async function loadImage(url, elem) {
 
 async function lightBox(url) {
   lightboxElem.style.display = "block";
-  await loadImage("https://somesite.net/huge-image.jpg", lightboxImgElem);
+  await loadImage("https://some-site.net/huge-image.jpg", lightboxImgElem);
   lightboxControlsElem.disabled = false;
 }
 

files/en-us/web/api/htmlinputelement/multiple/index.md

@@ -17,11 +17,11 @@ A boolean value.
 ## Examples
 
 ```html
-<input id="myfileinput" type="file" multiple />
+<input id="my-file-input" type="file" multiple />
 ```
 
 ```js
-let fileInput = document.getElementById("myfileinput");
+let fileInput = document.getElementById("my-file-input");
 
 if (fileInput.multiple) {
   // Loop fileInput.files

files/en-us/web/api/htmlinputelement/selectionchange_event/index.md

@@ -41,7 +41,7 @@ The example below shows how to get the text selected in an {{HTMLElement("input"
 
 ```html
 <div>
-  Enter and select text here:<br /><input id="mytext" rows="2" cols="20" />
+  Enter and select text here:<br /><input id="my-text" rows="2" cols="20" />
 </div>
 <div>selectionStart: <span id="start"></span></div>
 <div>selectionEnd: <span id="end"></span></div>
@@ -51,12 +51,12 @@ The example below shows how to get the text selected in an {{HTMLElement("input"
 ### JavaScript
 
 ```js
-const myinput = document.getElementById("mytext");
+const myInput = document.getElementById("my-text");
 
-myinput.addEventListener("selectionchange", () => {
-  document.getElementById("start").textContent = myinput.selectionStart;
-  document.getElementById("end").textContent = myinput.selectionEnd;
-  document.getElementById("direction").textContent = myinput.selectionDirection;
+myInput.addEventListener("selectionchange", () => {
+  document.getElementById("start").textContent = myInput.selectionStart;
+  document.getElementById("end").textContent = myInput.selectionEnd;
+  document.getElementById("direction").textContent = myInput.selectionDirection;
 });
 ```
 

files/en-us/web/api/htmlinputelement/value/index.md

@@ -27,9 +27,9 @@ In this example, the log displays the current value as the user enters data into
 We include an {{htmlelement("input")}} and an associated {{htmlelement("label")}}, with a {{htmlelement("pre")}} container for our output.
 
 ```html
-<label for="givenname">Your name:</label>
+<label for="given-name">Your name:</label>
 
-<input name="givenname" id="givenname" />
+<input name="given-name" id="given-name" />
 
 <pre id="log"></pre>
 ```
@@ -40,7 +40,7 @@ The `<pre>` element's {{domxref("HTMLElement.innerText", "innerText")}} is updat
 
 ```js
 const logElement = document.getElementById("log");
-const inputElement = document.getElementById("givenname");
+const inputElement = document.getElementById("given-name");
 
 inputElement.addEventListener("keyup", () => {
   logElement.innerText = `Name: ${inputElement.value}`;

files/en-us/web/api/htmlinputelement/webkitdirectory/index.md

@@ -77,14 +77,14 @@ within the selected directory hierarchies is generated and displayed.
 ### HTML
 
 ```html
-<input type="file" id="filepicker" name="fileList" webkitdirectory multiple />
+<input type="file" id="file-picker" name="fileList" webkitdirectory multiple />
 <ul id="listing"></ul>
 ```
 
 ### JavaScript
 
 ```js
-document.getElementById("filepicker").addEventListener(
+document.getElementById("file-picker").addEventListener(
   "change",
   (event) => {
     let output = document.getElementById("listing");

files/en-us/web/api/htmllinkelement/fetchpriority/index.md

@@ -38,7 +38,7 @@ Possible values are:
 
 ```js
 const preloadLink = document.createElement("link");
-preloadLink.href = "myimage.jpg";
+preloadLink.href = "my-image.jpg";
 preloadLink.rel = "preload";
 preloadLink.as = "image";
 preloadLink.fetchPriority = "high";

files/en-us/web/api/htmlmediaelement/play/index.md

@@ -82,7 +82,7 @@ handle blocked automatic playback:
 
 ```js
 let videoElem = document.getElementById("video");
-let playButton = document.getElementById("playbutton");
+let playButton = document.getElementById("play-button");
 
 playButton.addEventListener("click", handlePlayButton, false);
 playVideo();

files/en-us/web/api/htmltablecellelement/abbr/index.md

@@ -14,7 +14,7 @@ indicates an abbreviation associated with the cell. If the cell does not represe
 It reflects the `abbr` attribute of the {{HTMLElement("th")}} element.
 
 > [!NOTE]
-> This property doesn't have a visual effect in browsers. It adds information to help assistive technology like screenreaders that can use this abbreviation
+> This property doesn't have a visual effect in browsers. It adds information to help assistive technology like screen readers that can use this abbreviation
 
 ## Value
 

files/en-us/web/api/htmltablecellelement/scope/index.md

@@ -14,7 +14,7 @@ indicates the scope of a {{HTMLElement("th")}} cell.
 Header cells can be configured, using the `scope` attribute, to apply to a specified row or column, or to the not-yet-scoped cells within the current row group (that is, the same ancestor {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, or {{HTMLElement("tfoot")}} element). If no value is specified for `scope`, the header is not associated directly with cells in this way. Permitted values for `scope` are:
 
 > [!NOTE]
-> This property doesn't have a visual effect in browsers. It adds semantic information to help assistive technology like screenreaders to present the table in a more coherent way.
+> This property doesn't have a visual effect in browsers. It adds semantic information to help assistive technology like screen readers to present the table in a more coherent way.
 
 ## Value