mdn · teoli2003 · Aug 24, 2021 · Aug 23, 2021
@@ -20,9 +20,9 @@
 
 <h2 id="Syntax">Syntax</h2>
 
-<div class="note">The <code>AudioWorkletProcessor</code> and classes that derive from it
+<div class="note"><p><strong>Note:</strong> The <code>AudioWorkletProcessor</code> and classes that derive from it
   cannot be instantiated directly from a user-supplied code. Instead, they are created
-  only internally by the creation of an associated {{domxref("AudioWorkletNode")}}s.</div>
+  only internally by the creation of an associated {{domxref("AudioWorkletNode")}}s.</p></div>
 
 <pre class="brush: js">new AudioWorkletProcessor(<em>options</em>);
 </pre>
@@ -31,7 +31,7 @@ <h3 id="Parameters">Parameters</h3>
 
 <dl>
   <dt><code>options</code></dt>
-  <dd>An object that is passed as <em>options</em> parameter to the 
+  <dd>An object that is passed as <em>options</em> parameter to the
     {{domxref("AudioWorkletNode.AudioWorkletNode", "AudioWorkletNode constructor")}} and
     passed through <a href="/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm">the structured clone algorithm</a>.
     Available properties are as follows:
@@ -48,7 +48,7 @@ <h3 id="Parameters">Parameters</h3>
       <dt><code>processorOptions</code> {{optional_inline}}</dt>
       <dd>Any additional data that can be used for custom initialization of the underlying {{domxref("AudioWorkletProcessor")}}.</dd>
     </dl>
-    
+
     Note that there are default values for the first two properties, so even if there are no
     <em>options</em> object passed to the {{domxref("AudioWorkletNode.AudioWorkletNode",
     "AudioWorkletNode constructor")}}, the <em>options</em> object passed by the node to

@@ -18,7 +18,7 @@
 
 <h2 id="Constructor">Constructor</h2>
 
-<div class="note">The <code>AudioWorkletProcessor</code> and classes that derive from it cannot be instantiated directly from a user-supplied code. Instead, they are created only internally by the creation of an associated {{domxref("AudioWorkletNode")}}s. The constructor of the deriving class is getting called with an options object, so you can perform a custom initialization procedures — see constructor page for details.</div>
+<div class="note"><p><strong>Note:</strong> The <code>AudioWorkletProcessor</code> and classes that derive from it cannot be instantiated directly from a user-supplied code. Instead, they are created only internally by the creation of an associated {{domxref("AudioWorkletNode")}}s. The constructor of the deriving class is getting called with an options object, so you can perform a custom initialization procedures — see constructor page for details.</p></div>
 
 <dl>
  <dt>{{domxref("AudioWorkletProcessor.AudioWorkletProcessor", "AudioWorkletProcessor()")}}</dt>

@@ -13,8 +13,8 @@
 browser-compat: api.BluetoothRemoteGATTService
 ---
 <div>{{SeeCompatTable}}
-  <div class="overheadIndicator note">
-    <p>This page describes the W3C Community Group BluetoothRemoteGATTService, formerly
+  <div class="note">
+    <p><strong>Note:</strong> This page describes the W3C Community Group BluetoothRemoteGATTService, formerly
       called BluethoothGATTService. For the Firefox OS interface of the same name,
       see <code><a href="/en-US/docs/Archive/B2G_OS/API/BluetoothGattService">BluetoothGattService</a></code>.
     </p>

@@ -64,7 +64,7 @@ <h3 id="Closing_just_one_sub-path">Closing just one sub-path</h3>
 <p>This example draws a smiley face consisting of three disconnected sub-paths.</p>
 
 <div class="notecard note">
-  <p>Note: Although <code>closePath()</code> is called after all the arcs have been
+  <p><strong>Note:</strong> Although <code>closePath()</code> is called after all the arcs have been
     created, only the last arc (sub-path) gets closed.</p>
 </div>
 

@@ -48,7 +48,7 @@ <h2 id="Example">Example</h2>
 console.log(myRules[0].style); // a CSSStyleDeclaration representing the declarations on the h1.</pre>
 
 <div class="note notecard">
-<p>The declaration block is that part of the style rule that appears within the braces and that actually provides the style definitions (for the selector, the part that comes before the braces).</p>
+<p><strong>Note:</strong> The declaration block is that part of the style rule that appears within the braces and that actually provides the style definitions (for the selector, the part that comes before the braces).</p>
 </div>
 
 <h2 id="Specifications">Specifications</h2>

@@ -20,7 +20,7 @@
 
 <p>All transform functions can be represented mathematically as a 4x4 transformation matrix. This is explained in detail in <a href="https://dev.opera.com/articles/understanding-the-css-transforms-matrix/">Understanding the CSS Transforms matrix</a>.</p>
 
-<div class="note notecard"><p>The <code>is2D</code> property affects what transform, and therefore type of matrix that will be returned. CSS 2D and 3D transforms are different for legacy reasons. A brief explanation of 2D vs. 3D transforms can be found in <a href="/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Using CSS transforms</a>.</p></div>
+<div class="note notecard"><p><strong>Note:</strong> The <code>is2D</code> property affects what transform, and therefore type of matrix that will be returned. CSS 2D and 3D transforms are different for legacy reasons. A brief explanation of 2D vs. 3D transforms can be found in <a href="/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Using CSS transforms</a>.</p></div>
 
 <h2 id="Syntax">Syntax</h2>
 

@@ -126,10 +126,10 @@ <h3 id="Write_a_new_cookie">Write a new cookie</h3>
 				attribute must always be the origin.</li>
 		</ul>
 
-		<div class="note">The dash is considered part of the prefix.</div>
+		<div class="note"><p><strong>Note:</strong> The dash is considered part of the prefix.</p></div>
 
-		<div class="note">These flags are only settable with the <code>secure</code>
-			attribute.</div>
+		<div class="note"><p><strong>Note:</strong> These flags are only settable with the <code>secure</code>
+			attribute.</p></div>
 	</li>
 </ul>
 

@@ -23,8 +23,8 @@
   "getElementsByClassName()")}} on any element; it will return only elements which are
   descendants of the specified root element with the given class name(s).</p>
 
-<div class="notecard note">
-  <p>Warning: This is a live {{domxref("HTMLCollection")}}. Changes in the DOM will
+<div class="notecard warning">
+  <p><strong>Warning:</strong> This is a live {{domxref("HTMLCollection")}}. Changes in the DOM will
     reflect in the array as the changes occur. If an element selected by this array no
     longer qualifies for the selector, it will automatically be removed. Be aware of this
     for iteration purposes.</p>

@@ -31,10 +31,10 @@ <h2 id="Syntax">Syntax</h2>
     string "*" represents all elements.</li>
 </ul>
 
-<div class="note"><a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html">The
+<div class="note"><p><strong>Note:</strong> <a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html">The
     latest W3C specification</a> says <var>elements</var> is an
   <code>HTMLCollection</code>; however, this method returns a {{domxref("NodeList")}} in
-  WebKit browsers. See {{bug(14869)}} for details.</div>
+  WebKit browsers. See {{bug(14869)}} for details.</p></div>
 
 <h2 id="Example">Example</h2>
 

@@ -16,9 +16,9 @@
   containing one or more {{domxref("HTMLEmbedElement")}}s representing the
   {{HTMLElement("embed")}} elements in the current document.</p>
 
-<div class="note">For a list of installed plugins, use <a
+<div class="note"><p><strong>Note:</strong> For a list of installed plugins, use <a
     href="/en-US/docs/Web/API/Navigator/plugins">Navigator.plugins</a>
-  instead.</div>
+  instead.</p></div>
 
 <h2 id="Syntax">Syntax</h2>
 

@@ -16,7 +16,7 @@ <h2 id="Introduction">Introduction</h2>
 <p>This article is an overview of some powerful, fundamental DOM level 1 methods and how to use them from JavaScript. You will learn how to create, access and control, and remove HTML elements dynamically. The DOM methods presented here are not specific to HTML; they also apply to XML. The demonstrations provided here will work fine in any modern browser, including all versions of Firefox and IE 5+.</p>
 
 <div class="notecard note">
-<p>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>
+<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>
@@ -188,7 +188,7 @@ <h3 id="Inserting_Elements_with_appendChild.28...29">Inserting Elements with app
 <p><img src="sample2b2.jpg"></p>
 
 <div class="notecard note">
-<p><code>createTextNode()</code> and <code>appendChild()</code> is a simple way to include white space between the words hello and world. Another important note is that the <code>appendChild</code> method will append the child after the last child, just like the word world has been added after the word hello. So if you want to append a Text Node between hello and world, you will need to use <code>insertBefore</code> instead of <code>appendChild</code>.</p>
+<p><strong>Note:</strong>  <code>createTextNode()</code> and <code>appendChild()</code> is a simple way to include white space between the words hello and world. Another important note is that the <code>appendChild</code> method will append the child after the last child, just like the word world has been added after the word hello. So if you want to append a Text Node between hello and world, you will need to use <code>insertBefore</code> instead of <code>appendChild</code>.</p>
 </div>
 
 <h3 id="Creating_New_Elements_with_the_document_object_and_the_createElement.28...29_method">Creating New Elements with the document object and the createElement(..) method</h3>
@@ -236,7 +236,7 @@ <h3 id="Creating_element_nodes_and_inserting_them_into_the_document_tree">Creati
 </ul>
 
 <div class="notecard note">
-<p>At the end of the <code>start</code> function, there is a new line of code. The table's <code>border</code> property was set using another DOM method, <code>setAttribute()</code>. <code>setAttribute()</code> has two arguments: the attribute name and the attribute value. You can set any attribute of any element using the <code>setAttribute</code> method.</p>
+<p><strong>Note:</strong> At the end of the <code>start</code> function, there is a new line of code. The table's <code>border</code> property was set using another DOM method, <code>setAttribute()</code>. <code>setAttribute()</code> has two arguments: the attribute name and the attribute value. You can set any attribute of any element using the <code>setAttribute</code> method.</p>
 </div>
 
 <pre class="brush: html">&lt;head&gt;
@@ -295,7 +295,7 @@ <h3 id="Getting_a_text_node_from_the_table">Getting a text node from the table</
 <p>Then, to display the results in this example, it creates a new text node whose content is the data of <code>myceltext</code>, and appends it as a child of the <code>&lt;body&gt;</code> element.</p>
 
 <div class="notecard note">
-<p>If your object is a text node, you can use the data attribute and retrieve the text content of the node.</p>
+<p><strong>Note:</strong> If your object is a text node, you can use the data attribute and retrieve the text content of the node.</p>
 </div>
 
 <pre class="brush: js">mybody = document.getElementsByTagName("body")[0];

@@ -90,7 +90,7 @@ <h2 id="Examples">Examples</h2>
   );
 });</pre>
 
-<div class="note"><strong>Important</strong>: When fetching resources, it's very important to use <code>{mode: 'no-cors'}</code> if there is any chance that the resources are served off of a server that doesn't support {{glossary("CORS")}}. In this example, <a href="http://www.chromium.org">www.chromium.org</a> doesn't support CORS.</div>
+<div class="note"><p><strong>Note:</strong> When fetching resources, it's very important to use <code>{mode: 'no-cors'}</code> if there is any chance that the resources are served off of a server that doesn't support {{glossary("CORS")}}. In this example, <a href="http://www.chromium.org">www.chromium.org</a> doesn't support CORS.</p></div>
 
 <h2 id="Specifications">Specifications</h2>
 

@@ -14,13 +14,13 @@
 <div>{{APIRef("File API")}}{{non-standard_header}}{{deprecated_header}}</div>
 
 <div class="note notebox">
-  <p><strong>Note:</strong>This method was removed from Firefox 7.0 and onward.</p>
+  <p><strong>Note:</strong> This method was removed from Firefox 7.0 and onward.</p>
 </div>
 
 <p>Returns the name of the file. For security reasons the path is excluded from this
   property.</p>
 
-<div class="note">This property is deprecated. Use {{domxref("File.name")}} instead.</div>
+<div class="note"><p><strong>Note:</strong> This property is deprecated. Use {{domxref("File.name")}} instead.</p></div>
 
 <h2 id="Syntax">Syntax</h2>
 

@@ -15,7 +15,7 @@
 
 <p>Returns the size of a file in bytes.</p>
 
-<div class="note">This property is deprecated. Use {{domxref("Blob.size")}} instead.</div>
+<div class="note"><p><strong>Note:</strong> This property is deprecated. Use {{domxref("Blob.size")}} instead.</p></div>
 
 <h2 id="Syntax">Syntax</h2>
 

@@ -38,11 +38,6 @@ <h3 id="Parameters">Parameters</h3>
     {{domxref("FileError")}} object describing the error.</dd>
 </dl>
 
-<div class="note">
-  <p>Editor's note: We need to find out what kinds of errors can occur and document them.
-  </p>
-</div>
-
 <h3 id="Return_value">Return value</h3>
 
 <p>{{jsxref("undefined")}}.</p>

@@ -24,7 +24,7 @@
 <p>Here, we see that the <code>create</code> property is provided, with a value of <code>true</code>, indicating that the directory should be created if it's not already there.</p>
 
 <div class="note">
-<p>Note that these option flags currently don't have any useful meaning when used in the scope of Web content, where security precautions prevent the creation of new files or the replacement of existing ones.</p>
+<p><strong>Note:</strong> These option flags currently don't have any useful meaning when used in the scope of Web content, where security precautions prevent the creation of new files or the replacement of existing ones.</p>
 </div>
 
 <h2 id="Properties">Properties</h2>

@@ -32,12 +32,12 @@ <h2 id="Methods">Methods</h2>
 
 <dl>
  <dt>{{domxref("History.back","back()")}}</dt>
- <dd>This asynchronous method goes to the previous page in session history, the same action as when the user clicks the browser's <kbd>Back</kbd> button. Equivalent to <code>history.go(-1)</code>.
- <div class="note">Calling this method to go back beyond the first page in the session history has no effect and doesn't raise an exception.</div>
+ <dd><p>This asynchronous method goes to the previous page in session history, the same action as when the user clicks the browser's <kbd>Back</kbd> button. Equivalent to <code>history.go(-1)</code>.</p>
+ <p>Calling this method to go back beyond the first page in the session history has no effect and doesn't raise an exception.</p>
  </dd>
  <dt>{{domxref("History.forward","forward()")}}</dt>
- <dd>This asynchronous method goes to the next page in session history, the same action as when the user clicks the browser's <kbd>Forward</kbd> button; this is equivalent to <code>history.go(1)</code>.
- <div class="note">Calling this method to go forward beyond the most recent page in the session history has no effect and doesn't raise an exception.</div>
+ <dd><p>This asynchronous method goes to the next page in session history, the same action as when the user clicks the browser's <kbd>Forward</kbd> button; this is equivalent to <code>history.go(1)</code>.</p>
+ <p>Calling this method to go forward beyond the most recent page in the session history has no effect and doesn't raise an exception.</p>
  </dd>
  <dt>{{domxref("History.go","go()")}}</dt>
  <dd>Asynchronously loads a page from the session history, identified by its relative location to the current page, for example <code>-1</code> for the previous page or <code>1</code> for the next page. If you specify an out-of-bounds value (for instance, specifying <code>-1</code> when there are no previously-visited pages in the session history), this method silently has no effect. Calling <code>go()</code> without parameters or a value of <code>0</code> reloads the current page. Internet Explorer lets you specify a string, instead of an integer, to go to a specific URL in the history list.</dd>

@@ -12,7 +12,7 @@
 
 <p>The main steps to drag and drop are to define a <em>drop zone</em> (i.e. a target element for the file drop) and to define event handlers for the {{event("drop")}} and {{event("dragover")}} events. These steps are described below, including example code snippets. The full source code is available in <a href="https://github.com/mdn/dom-examples/tree/master/drag-and-drop">MDN's drag-and-drop repository</a> (pull requests and/or issues are welcome).</p>
 
-<p class="note">Note: {{domxref("HTML_Drag_and_Drop_API","HTML drag and drop")}} defines two different APIs to support dragging and dropping files. One API is the {{domxref("DataTransfer")}} interface and the second API is the {{domxref("DataTransferItem")}} and {{domxref("DataTransferItemList")}} interfaces. This example illustrates the use of both APIs (and does not use any Gecko specific interfaces).</p>
+<p>Note that {{domxref("HTML_Drag_and_Drop_API","HTML drag and drop")}} defines two different APIs to support dragging and dropping files. One API is the {{domxref("DataTransfer")}} interface and the second API is the {{domxref("DataTransferItem")}} and {{domxref("DataTransferItemList")}} interfaces. This example illustrates the use of both APIs (and does not use any Gecko specific interfaces).</p>
 
 <h2 id="Define_the_drop_zone">Define the drop <em>zone</em></h2>
 
@@ -39,7 +39,7 @@ <h2 id="Define_the_drop_zone">Define the drop <em>zone</em></h2>
 </pre>
 
 <div class="note">
-<p>Note that <code>dragstart</code> and <code>dragend</code> events are not fired when dragging a file into the browser from the OS.</p>
+<p><strong>Note:</strong> <code>dragstart</code> and <code>dragend</code> events are not fired when dragging a file into the browser from the OS.</p>
 </div>
 
 <h2 id="Process_the_drop">Process the drop</h2>

@@ -40,7 +40,7 @@ <h3 id="CSS">CSS</h3>
 <p>{{ EmbedLiveSample('Example', 560, 200) }}</p>
 
 <div class="notecard note">
-<p>Note that the attribute, by itself, will not cause any visual change to the content as displayed in the browser. In the example above, CSS has been applied so that any direct descendant of an element with the inert attribute is rendered semi-opaque.</p>
+<p><strong>Note:</strong> This attribute, by itself, will not cause any visual change to the content as displayed in the browser. In the example above, CSS has been applied so that any direct descendant of an element with the inert attribute is rendered semi-opaque.</p>
 </div>
 
 <h2 id="Specifications">Specifications</h2>

@@ -53,8 +53,8 @@ <h3 id="Values">Values</h3>
     secure destination (HTTPS→HTTP).</dd>
   <dt>unsafe-url</dt>
   <dd>Send a full URL when performing a same-origin or cross-origin request.
-    <div class="note">This policy will leak origins and paths from TLS-protected resources
-      to insecure origins. Carefully consider the impact of this setting.</div>
+    <div class="note"><p><strong>Note:</strong> This policy will leak origins and paths from TLS-protected resources
+      to insecure origins. Carefully consider the impact of this setting.</p></div>
   </dd>
 </dl>