[Markdown] [Web/API] Fix heading IDs used in live samples

files/en-us/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html

@@ -174,7 +174,7 @@ <h3 id="An_example_using_rgba">An example using <code>rgba()</code></h3>
 
 <pre class="brush: js hidden">draw();</pre>
 
-<p>{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "canvas_rgba.png")}}</p>
+<p>{{EmbedLiveSample("An_example_using_rgba", "180", "180", "canvas_rgba.png")}}</p>
 
 <h2 id="Line_styles">Line styles</h2>
 

files/en-us/web/api/css_object_model/using_dynamic_styling_information/index.html

@@ -48,7 +48,7 @@ <h3>Result</h3>
 
 <p>To modify styles to a document using CSS syntax, one can insert rules or insert {{HTMLElement("style")}} tags whose <code>innerHTML</code> property is set to the desired CSS.</p>
 
-<h2 id="Modify_an_element_style">Modify an element's style</h2>
+<h2 id="Modify_an_elements_style">Modify an element's style</h2>
 
 <p>The element {{domxref("HTMLElement.style", "style")}} property (see also the section "DOM Style Object" below) can also be used to get and set the styles on an element. However, this property only returns style attributes that have been set <em>in-line</em> (e.g, <code>&lt;td style="background-color: lightblue"&gt;</code> returns the string "<code>background-color:lightblue</code>", or directly for that element using <code>element.style.propertyName</code>, even though there may be other styles on the element from a stylesheet).</p>
 
@@ -93,7 +93,7 @@ <h2 id="Modify_an_element_style">Modify an element's style</h2>
 &lt;/html&gt;
 </pre>
 
-<p>{{ EmbedLiveSample('Modify_an_element_style') }}</p>
+<p>{{ EmbedLiveSample('Modify_an_elements_style') }}</p>
 
 <p>The {{domxref("window.getComputedStyle", "getComputedStyle()")}} method on the <code>document.defaultView</code> object returns all styles that have actually been computed for an element.</p>
 

files/en-us/web/api/datatransferitemlist/index.html

@@ -39,7 +39,7 @@ <h2 id="Methods">Methods</h2>
  <dd>Getter that returns a {{domxref("DataTransferItem")}} at the given index.</dd>
 </dl>
 
-<h2 id="Example_Drag_and_Drop">Example</h2>
+<h2 id="Example">Example</h2>
 
 <p>This example shows how to use drag and drop.</p>
 
@@ -125,9 +125,7 @@ <h3 id="CSS">CSS</h3>
 
 <h3 id="Result">Result</h3>
 
-<p>{{EmbedLiveSample('Example_Drag_and_Drop', '35%', '250px')}}</p>
-
-<p>{{LiveSampleLink('Example_Drag_and_Drop', 'Drag and Drop demo link')}}</p>
+<p>{{EmbedLiveSample('Example', '35%', '250px')}}</p>
 
 <h2 id="Specifications">Specifications</h2>
 

files/en-us/web/api/datatransferitemlist/length/index.html

@@ -31,7 +31,7 @@ <h3 id="Return_Value">Value</h3>
   drag item list is considered to be disabled if the item list's
   {{domxref("DataTransfer")}} object is not associated with a drag data store.</p>
 
-<h2 id="Example_Drag_and_Drop">Example</h2>
+<h2 id="Example">Example</h2>
 
 <p>This example shows the use of the <code>length</code> property.</p>
 
@@ -117,9 +117,7 @@ <h3 id="CSS">CSS</h3>
 
 <h3 id="Result">Result</h3>
 
-<p>{{EmbedLiveSample('Example_Drag_and_Drop')}}</p>
-
-<p>{{LiveSampleLink('Example_Drag_and_Drop', 'Drag and Drop demo link')}}</p>
+<p>{{EmbedLiveSample('Example', 100, 250)}}</p>
 
 <h2 id="Specifications">Specifications</h2>
 

files/en-us/web/api/document_object_model/introduction/index.html

@@ -212,7 +212,7 @@ <h3 id="Core_interfaces_in_the_DOM">Core interfaces in the DOM</h3>
  <li><code>{{domxref("window.scrollTo", "", "", "1")}}()</code></li>
 </ul>
 
-<h2 id="example">Example</h2>
+<h2 id="Example">Example</h2>
 
 <p>The following simple example illustrates using the DOM {{domxref("Document")}} API — specifically, it illustrates using the {{domxref("Document.body", "body")}} property of the {{domxref("Document")}} API to change:</p>
 
@@ -266,7 +266,7 @@ <h2 id="example">Example</h2>
 
 <h3 id="result">Result</h3>
 
-{{EmbedLiveSample("example", "85ch", "263px")}}
+{{EmbedLiveSample("Example", "85ch", "263px")}}
 
 <h2>Specifications</h2>
 <table>

files/en-us/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html

@@ -19,7 +19,7 @@ <h2 id="Introduction">Introduction</h2>
 <p><strong>Note:</strong> The DOM methods presented here are part of the Document Object Model (Core) level 1 specification. DOM level 1 includes both methods for generic document access and manipulation (DOM 1 Core) as well as methods specific to HTML documents (DOM 1 HTML).</p>
 </div>
 
-<h2 id="Overview_of_Sample1.html">Example: Creating an HTML table dynamically (<code>Sample1.html</code>)</h2>
+<h2>Example: Creating an HTML table dynamically</h2>
 
 <h3 id="HTML">HTML</h3>
 
@@ -63,7 +63,7 @@ <h3 id="JavaScript">JavaScript</h3>
   tbl.setAttribute("border", "2");
 }</pre>
 
-<p>{{ EmbedLiveSample('Overview_of_Sample1.html') }}</p>
+<p>{{ EmbedLiveSample('Example_Creating_an_HTML_table_dynamically') }}</p>
 
 <p>Note the order in which we created the elements and the text node:</p>
 
@@ -116,7 +116,7 @@ <h3 id="JavaScript">JavaScript</h3>
 
 <p>You can build this table and its internal child elements by using just a few DOM methods. Remember to keep in mind the tree model for the structures you are planning to create; this will make it easier to write the necessary code. In the <code>&lt;table&gt;</code> tree of Figure 1 the element <code>&lt;table&gt;</code> has one child: the element <code>&lt;tbody&gt;</code>. <code>&lt;tbody&gt;</code> has two children. Each <code>&lt;tbody&gt;</code>'s child (<code>&lt;tr&gt;</code>) has two children (<code>&lt;td&gt;</code>). Finally, each <code>&lt;td&gt;</code> has one child: a text node.</p>
 
-<h2 id="Setting_background_of_a_paragraph">Example: Setting the background color of a paragraph</h2>
+<h2 id="Example_Setting_the_background_color_of_a_paragraph">Example: Setting the background color of a paragraph</h2>
 
 <p><code>getElementsByTagName(tagNameValue)</code> is a method available in any DOM {{domxref("Element")}} or the root {{domxref("Document")}} element. When called, it returns an array with all of the element's descendants matching the tag name. The first element of the list is located at position <code>[0]</code> in the array.</p>
 
@@ -143,7 +143,7 @@ <h3 id="JavaScript_2">JavaScript</h3>
   myP.style.background = "rgb(255,0,0)";
 }</pre>
 
-<p>{{ EmbedLiveSample('Setting_background_of_a_paragraph') }}</p>
+<p>{{ EmbedLiveSample('Example_Setting_the_background_color_of_a_paragraph') }}</p>
 
 <p>In this example, we set the <code>myP</code> variable to the DOM object for the second <code>p</code> element inside the body:</p>
 

files/en-us/web/api/element/queryselector/index.html

@@ -73,7 +73,7 @@ <h3 id="Find_a_specific_element_with_specific_values_of_an_attribute">Find a spe
 <pre class="brush:js">var el = document.body.querySelector("style[type='text/css'], style:not([type])");
 </pre>
 
-<h3 id="get_direct_descendants_using_the_scope_pseudo_class">Get direct descendants using the :scope pseudo-class</h3>
+<h3 id="Get_direct_descendants_using_the_scope_pseudo-class">Get direct descendants using the :scope pseudo-class</h3>
 
 <p>This example uses the {{cssxref(":scope")}} pseudo-class to retrieve direct children of the <code>parentElement</code> element.</p>
 
@@ -112,7 +112,7 @@ <h4 id="Javascript">JavaScript</h4>
 </pre>
 
 <h4 id="result">Result</h4>
-<p>{{ EmbedLiveSample('get_direct_descendants_using_the_scope_pseudo_class', 600, 160) }}</p>
+<p>{{ EmbedLiveSample('Get_direct_descendants_using_the_scope_pseudo-class', 600, 160) }}</p>
 
 <h3 id="The_entire_hierarchy_counts">The entire hierarchy counts</h3>
 

files/en-us/web/api/eventtarget/addeventlistener/index.html

@@ -250,7 +250,7 @@ <h4 id="Result">Result</h4>
 
 <p>{{EmbedLiveSample('Add_a_simple_listener')}}</p>
 
-<h3 id="add_a_abortable_listener">Add an abortable listener</h3>
+<h3 id="Add_an_abortable_listener">Add an abortable listener</h3>
 
 <p>This example demonstrates how to add an <code>addEventListener()</code> that can be aborted with an {{domxref("AbortSignal")}}.</p>
 
@@ -286,7 +286,7 @@ <h4 id="JavaScript_5">JavaScript</h4>
 
 <h4 id="Result_5">Result</h4>
 
-<p>{{EmbedLiveSample('add_a_abortable_listener')}}</p>
+<p>{{EmbedLiveSample('Add_an_abortable_listener')}}</p>
 
 <h3 id="Event_listener_with_anonymous_function">Event listener with anonymous function
 </h3>

files/en-us/web/api/globaleventhandlers/onselectionchange/index.html

@@ -75,7 +75,7 @@ <h4 id="JavaScript">JavaScript</h4>
 
 <h4 id="Result">Result</h4>
 
-<p>{{EmbedLiveSample("Using selectionchange with a text control")}}</p>
+<p>{{EmbedLiveSample("Using_selectionchange_with_a_text_control")}}</p>
 
 
 

files/en-us/web/api/htmlelement/focus/index.html

@@ -83,7 +83,7 @@ <h4 id="Result_2">Result</h4>
 
 <p>{{ EmbedLiveSample('Focus_on_a_button') }}</p>
 
-<h3 id="Focus_prevent_scroll">Focus with focusOption</h3>
+<h3 id="Focus_with_focusOption">Focus with focusOption</h3>
 
 <h4 id="JavaScript_3">JavaScript</h4>
 
@@ -109,7 +109,7 @@ <h4 id="HTML_3">HTML</h4>
 
 <h4 id="Result_3">Result</h4>
 
-<p>{{ EmbedLiveSample('Focus_prevent_scroll') }}</p>
+<p>{{ EmbedLiveSample('Focus_with_focusOption') }}</p>
 
 <h2 id="Specifications">Specifications</h2>
 

files/en-us/web/api/navigator/canshare/index.html

@@ -21,7 +21,7 @@
   <li>Files are specified but the implementation does not support file sharing.</li>
   <li>Sharing the specified data would be considered a "hostile share" by the user-agent.</li>
 </ul>
-  
+
 <p>The Web Share API is gated by the <a href="/en-US/docs/Web/HTTP/Headers/Feature-Policy/web-share">web-share</a> permission policy.
     The <strong><code>canShare()</code></strong> method will return <code>false</code> if the permission is supported but has not been granted.</p>
 
@@ -58,7 +58,7 @@ <h3 id="Return_value">Return value</h3>
 
 <h2 id="Examples">Examples</h2>
 
-<h3 id="sending_the_mdn_url">Sending the MDN URL</h3>
+<h3 id="Sending_the_MDN_URL">Sending the MDN URL</h3>
 
 <p>The example uses <code>navigator.canShare()</code> to check whether <code>navigator.share()</code> can share the specified data.</p>
 
@@ -92,7 +92,7 @@ <h4 id="Result">Result</h4>
 
 <p>The box below should state whether <code>navigator.canShare()</code> is supported on this browser, and if so, whether or not we can use <code>navigator.share()</code> to share the specified data:</p>
 
-<p>{{EmbedLiveSample('sending_the_mdn_url')}}</p>
+<p>{{EmbedLiveSample('Sending_the_MDN_URL')}}</p>
 
 
 <h3>Feature checking example</h3>

files/en-us/web/api/settimeout/index.html

@@ -167,7 +167,7 @@ <h3 id="Reasons_for_delays">Reasons for delays longer than specified</h3>
 <p>There are a number of reasons why a timeout may take longer to fire than anticipated.
   This section describes the most common reasons.</p>
 
-<h4 id="nested_timeouts">Nested timeouts</h4>
+<h4 id="Nested_timeouts">Nested timeouts</h4>
 
 <p>As specified in the <a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#timers">HTML standard</a>,
 browsers will enforce a minimum timeout of 4 milliseconds once a nested call to <code>setTimeout</code> has been scheduled 5 times.</p>
@@ -225,7 +225,7 @@ <h4 id="nested_timeouts">Nested timeouts</h4>
 document.querySelector("#run").addEventListener("click", run);
 </pre>
 
-<p>{{EmbedLiveSample("nested_timeouts", 100, 420)}}</p>
+<p>{{EmbedLiveSample("Nested_timeouts", 100, 420)}}</p>
 
 <h4 id="Timeouts_in_inactive_tabs">Timeouts in inactive tabs</h4>
 
@@ -297,7 +297,7 @@ <h3 id="Maximum_delay_value">Maximum delay value</h3>
 
 <h2 id="Example">Examples</h2>
 
-<h3 id="setting_and_clearing_timeouts">Setting and clearing timeouts</h3>
+<h3 id="Setting_and_clearing_timeouts">Setting and clearing timeouts</h3>
 
 <p>The following example sets up two simple buttons in a web page and hooks them to the
   <code>setTimeout()</code> and <code>clearTimeout()</code> routines. Pressing the first
@@ -340,7 +340,7 @@ <h4 id="JavaScript">JavaScript</h4>
 
 <h4 id="Result">Result</h4>
 
-<p>{{EmbedLiveSample('setting_and_clearing_timeouts')}}</p>
+<p>{{EmbedLiveSample('Setting_and_clearing_timeouts')}}</p>
 
 <p>See also the <a
     href="/en-US/docs/Web/API/clearTimeout#example"><code>clearTimeout()</code>