Remove various classes 2

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

@@ -102,7 +102,7 @@ <h2 id="Methods">Methods</h2>
 
 <h2 id="Example">Example</h2>
 
-<p>This simple snippet of code shows the creation of some audio nodes, and how the <code>AudioNode</code> properties and methods can be used. You can find examples of such usage on any of the examples linked to on the <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> landing page (for example <a href="https://github.com/mdn/violent-theremin">Violent Theremin</a>.)<span class="p"> </span></p>
+<p>This simple snippet of code shows the creation of some audio nodes, and how the <code>AudioNode</code> properties and methods can be used. You can find examples of such usage on any of the examples linked to on the <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> landing page (for example <a href="https://github.com/mdn/violent-theremin">Violent Theremin</a>).</p>
 
 <pre class="brush: js;">const audioCtx = new AudioContext();
 

files/en-us/web/api/canvas_api/manipulating_video_using_canvas/index.html

@@ -13,7 +13,7 @@
 ---
 <div>{{CanvasSidebar}}</div>
 
-<p>By combining the capabilities of the <a class="internal" href="/en-US/docs/Web/HTML/Element/video"><code>video</code></a> element with a <a class="internal" href="/en-US/docs/Web/HTML/Element/canvas"><code>canvas</code></a>, you can manipulate video data in real time to incorporate a variety of visual effects to the video being displayed. This tutorial demonstrates how to perform chroma-keying (also known as the "green screen effect") using JavaScript code.</p>
+<p>By combining the capabilities of the <a href="/en-US/docs/Web/HTML/Element/video"><code>video</code></a> element with a <a href="/en-US/docs/Web/HTML/Element/canvas"><code>canvas</code></a>, you can manipulate video data in real time to incorporate a variety of visual effects to the video being displayed. This tutorial demonstrates how to perform chroma-keying (also known as the "green screen effect") using JavaScript code.</p>
 
 <p>{{EmbedGHLiveSample('dom-examples/canvas/chroma-keying/index.html', 700, 400) }}</p>
 
@@ -59,7 +59,7 @@ <h2 id="The_document_content">The document content</h2>
 <p>The key bits to take away from this are:</p>
 
 <ol>
- <li>This document establishes two <a class="internal" href="/en-US/docs/Web/HTML/Element/canvas"><code>canvas</code></a> elements, with the IDs <code>c1</code> and <code>c2</code>.  Canvas <code>c1</code> is used to display the current frame of the original video, while <code>c2</code> is used to display the video after performing the chroma-keying effect; <code>c2</code> is preloaded with the still image that will be used to replace the green background in the video.</li>
+ <li>This document establishes two <a href="/en-US/docs/Web/HTML/Element/canvas"><code>canvas</code></a> elements, with the IDs <code>c1</code> and <code>c2</code>.  Canvas <code>c1</code> is used to display the current frame of the original video, while <code>c2</code> is used to display the video after performing the chroma-keying effect; <code>c2</code> is preloaded with the still image that will be used to replace the green background in the video.</li>
  <li>The JavaScript code is imported from a script named <code>processor.js</code>.</li>
 </ol>
 
@@ -139,11 +139,11 @@ <h3 id="Manipulating_the_video_frame_data">Manipulating the video frame data</h3
 
 <p>When this routine is called, the video element is displaying the most recent frame of video data, which looks like this:</p>
 
-<p><img class="default internal" src="video.png"></p>
+<p><img src="video.png"></p>
 
 <p>In line 2, that frame of video is copied into the graphics context <code>ctx1</code> of the first canvas, specifying as the height and width the values we previously saved to draw the frame at half size.  Note that you can pass the video element into the context's <code>drawImage()</code> method to draw the current video frame into the context.  The result is:</p>
 
-<p><img class="default internal" src="sourcectx.png"></p>
+<p><img src="sourcectx.png"></p>
 
 <p>Line 3 fetches a copy of the raw graphics data for the current frame of video by calling the <code>getImageData()</code> method on the first context.  This provides raw 32-bit pixel image data we can then manipulate.  Line 4 computes the number of pixels in the image by dividing the total size of the frame's image data by four.</p>
 
@@ -153,7 +153,7 @@ <h3 id="Manipulating_the_video_frame_data">Manipulating the video frame data</h3
 
 <p>The resulting image looks like this:</p>
 
-<p><img class="default internal" src="output.png"></p>
+<p><img src="output.png"></p>
 
 <p>This is done repeatedly as the video plays, so that frame after frame is processed and displayed with the chroma-key effect.</p>
 

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

@@ -227,7 +227,7 @@ <h3 id="A_lineWidth_example">A <code>lineWidth</code> example</h3>
 
 <p>Obtaining crisp lines requires understanding how paths are stroked. In the images below, the grid represents the canvas coordinate grid. The squares between gridlines are actual on-screen pixels. In the first grid image below, a rectangle from (2,1) to (5,5) is filled. The entire area between them (light red) falls on pixel boundaries, so the resulting filled rectangle will have crisp edges.</p>
 
-<p><img alt="" class="internal" src="canvas-grid.png"></p>
+<p><img alt="" src="canvas-grid.png"></p>
 
 <p>If you consider a path from (3,1) to (3,5) with a line thickness of <code>1.0</code>, you end up with the situation in the second image. The actual area to be filled (dark blue) only extends halfway into the pixels on either side of the path. An approximation of this has to be rendered, which means that those pixels being only partially shaded, and results in the entire area (the light blue and dark blue) being filled in with a color only half as dark as the actual stroke color. This is what happens with the <code>1.0</code> width line in the previous example code.</p>
 

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

@@ -29,7 +29,7 @@ <h2 id="globalCompositeOperation"><code>globalCompositeOperation</code></h2>
 <h2 id="Clipping_paths">Clipping paths</h2>
 
 <p>A clipping path is like a normal canvas shape but it acts as a mask to hide unwanted parts of shapes. This is visualized in the image on the right. The red star shape is our clipping path. Everything that falls outside of this path won't get drawn on the canvas.</p>
-<img alt="" class="internal" src="canvas_clipping_path.png">
+<img alt="" src="canvas_clipping_path.png">
 <p>If we compare clipping paths to the <code>globalCompositeOperation</code> property we've seen above, we see two compositing modes that achieve more or less the same effect in <code>source-in</code> and <code>source-atop</code>. The most important differences between the two are that clipping paths are never actually drawn to the canvas and the clipping path is never affected by adding new shapes. This makes clipping paths ideal for drawing multiple shapes in a restricted area.</p>
 
 <p>In the chapter about <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes">drawing shapes</a> I only mentioned the <code>stroke()</code> and <code>fill()</code> methods, but there's a third method we can use with paths, called <code>clip()</code>.</p>

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

@@ -80,7 +80,7 @@ <h2 id="Translating">Translating</h2>
  <dt>{{domxref("CanvasRenderingContext2D.translate", "translate(x, y)")}}</dt>
  <dd>Moves the canvas and its origin on the grid. <code>x</code> indicates the horizontal distance to move, and <code>y</code> indicates how far to move the grid vertically.</dd>
 </dl>
-<img alt="" class="internal" src="canvas_grid_translate.png">
+<img alt="" src="canvas_grid_translate.png">
 <p>It's a good idea to save the canvas state before doing any transformations. In most cases, it is just easier to call the <code>restore</code> method than having to do a reverse translation to return to the original state. Also if you're translating inside a loop and don't save and restore the canvas state, you might end up missing part of your drawing, because it was drawn outside the canvas edge.</p>
 
 <h3 id="A_translate_example">A <code>translate</code> example</h3>
@@ -117,7 +117,7 @@ <h2 id="Rotating">Rotating</h2>
  <dt>{{domxref("CanvasRenderingContext2D.rotate", "rotate(angle)")}}</dt>
  <dd>Rotates the canvas clockwise around the current origin by the <code>angle</code> number of radians.</dd>
 </dl>
-<img alt="" class="internal" src="canvas_grid_rotate.png">
+<img alt="" src="canvas_grid_rotate.png">
 <p>The rotation center point is always the canvas origin. To change the center point, we will need to move the canvas by using the <code>translate()</code> method.</p>
 
 <h3 id="A_rotate_example">A <code>rotate</code> example</h3>

files/en-us/web/api/canvasrenderingcontext2d/clip/index.html

@@ -21,7 +21,7 @@
   Only those parts of the checkerboard pattern that are within the clipping region get
   drawn.</p>
 
-<p><img alt="" class="internal"
+<p><img alt=""
     src="canvas_clipping_path.png"></p>
 
 <div class="note">

files/en-us/web/api/canvasrenderingcontext2d/rotate/index.html

@@ -20,7 +20,7 @@ <h2 id="Syntax">Syntax</h2>
 <pre class="brush: js">void <em>ctx</em>.rotate(<em>angle</em>);
 </pre>
 
-<p><img alt="" class="internal" src="canvas_grid_rotate.png"></p>
+<p><img alt="" src="canvas_grid_rotate.png"></p>
 
 <h3 id="Parameters">Parameters</h3>
 

files/en-us/web/api/canvasrenderingcontext2d/translate/index.html

@@ -24,7 +24,7 @@ <h2 id="Syntax">Syntax</h2>
   matrix by moving the canvas and its origin <code>x</code> units horizontally and
   <code>y</code> units vertically on the grid.</p>
 
-<p><img alt="" class="internal" src="canvas_grid_translate.png"></p>
+<p><img alt="" src="canvas_grid_translate.png"></p>
 
 <h3 id="Parameters">Parameters</h3>
 

files/en-us/web/api/console/dir/index.html

@@ -24,7 +24,7 @@
 
 <p>{{AvailableInWorkers}}</p>
 
-<p><img alt="console-dir.png" class="default internal"
+<p><img alt="console-dir.png"
     src="console-dir.png"></p>
 
 <h2 id="Syntax">Syntax</h2>

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

@@ -225,7 +225,7 @@ <h3 id="Timers">Timers</h3>
 
 <p>Will log the time needed by the user to dismiss the alert box, log the time to the console, wait for the user to dismiss the second alert, and then log the ending time to the console:</p>
 
-<p><img class="default internal" src="console-timelog.png"></p>
+<p><img src="console-timelog.png"></p>
 
 <p>Notice that the timer's name is displayed both when the timer is started and when it's stopped.</p>
 

files/en-us/web/api/console/timeend/index.html

@@ -46,7 +46,7 @@ <h2 id="Examples">Examples</h2>
 <p>The output from the example above shows the time taken by the user to dismiss the first
 	alert box, followed by the time it took for the user to dismiss the second alert:</p>
 
-<p><img class="default internal" src="timer_output.png"></p>
+<p><img src="timer_output.png"></p>
 
 <p>Notice that the timer's name is displayed when the timer value is logged using
 	<code>timeLog()</code> and again when it's stopped. In addition, the call to timeEnd()
@@ -63,4 +63,3 @@ <h2 id="Browser_compatibility">Browser compatibility</h2>
 
 	<p>{{Compat}}</p>
 </div>
-

files/en-us/web/api/console/timelog/index.html

@@ -63,7 +63,7 @@ <h2 id="Examples">Examples</h2>
 <p>The output from the example above shows the time taken by the user to dismiss the first
   alert box, followed by the time it took for the user to dismiss the second alert:</p>
 
-<p><img class="default internal" src="timer_output.png"></p>
+<p><img src="timer_output.png"></p>
 
 <p>Notice that the timer's name is displayed when the timer value is logged using
   <code>timeLog()</code> and again when it's stopped. In addition, the call to timeEnd()
@@ -77,4 +77,3 @@ <h2 id="Specifications">Specifications</h2>
 <h2 id="Browser_compatibility">Browser compatibility</h2>
 
 <p>{{Compat}}</p>
-

files/en-us/web/api/document/createnodeiterator/index.html

@@ -11,7 +11,7 @@
 ---
 <p>{{APIRef("DOM")}}</p>
 
-<p>Returns a new <a class="internal"
+<p>Returns a new <a
     href="/en-US/docs/Web/API/NodeIterator"><code>NodeIterator</code></a> object.</p>
 
 <h2 id="Syntax">Syntax</h2>

files/en-us/web/api/document/open/index.html

@@ -62,7 +62,7 @@ <h3 id="Gecko-specific_notes">Gecko-specific notes</h3>
     href="/docs/Security_check_basics">principal</a> of the document whose URI it uses,
   instead of fetching the principal off the stack. As a result, you can no longer call
   {{domxref("document.write()")}} into an untrusted document from chrome, even using <a
-    class="internal" href="/en-US/docs/wrappedJSObject"><code>wrappedJSObject</code></a>. See <a
+    href="/en-US/docs/wrappedJSObject"><code>wrappedJSObject</code></a>. See <a
     href="/en-US/docs/Security_check_basics">Security check basics</a> for more about principals.
 </p>
 

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

@@ -141,10 +141,10 @@ <h3 id="So_what.3F">So what?</h3>
 <h2 id="See_also">See also</h2>
 
 <ul>
- <li><a class="internal" href="/en-US/docs/Web/XML">XML</a></li>
- <li><a class="internal" href="/en-US/docs/JXON">JXON</a></li>
- <li><a class="internal" href="/en-US/docs/Web/XPath">XPath</a></li>
- <li><a class="internal" href="/en-US/docs/E4X">E4X (ECMAScript for XML)</a></li>
- <li><a class="internal" href="/en-US/docs/Web/Guide/Parsing_and_serializing_XML">Parsing and serializing XML</a></li>
- <li><a class="internal" href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/Web/XML">XML</a></li>
+ <li><a href="/en-US/docs/JXON">JXON</a></li>
+ <li><a href="/en-US/docs/Web/XPath">XPath</a></li>
+ <li><a href="/en-US/docs/E4X">E4X (ECMAScript for XML)</a></li>
+ <li><a href="/en-US/docs/Web/Guide/Parsing_and_serializing_XML">Parsing and serializing XML</a></li>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></li>
 </ul>

files/en-us/web/api/dommatrixreadonly/scale/index.html

@@ -28,32 +28,30 @@ <h2 id="Syntax">Syntax</h2>
 <pre
   class="brush: js">DOMMatrix.scale(<em>scaleX</em>[, <em>scaleY</em>][, <em>scaleZ][, originX</em>][, <em>originY</em>][, <em>originZ</em>])</pre>
 
-<h3 class="highlight-spanned" id="Parameters"><span
-    class="highlight-span">Parameters</span></h3>
+<h3 id="Parameters">Parameters</h3>
 
 <dl>
   <dt>scaleX</dt>
   <dd>A multiplier for the scale value on the x-axis.</dd>
-  <dt>scaleY <span class="inlineIndicator optional optionalInline">Optional</span></dt>
+  <dt>scaleY {{optional_inline}}</dt>
   <dd>A multiplier for the scale value on the y-axis.  If not supplied, this defaults to
     the value of <code>scaleX</code>.</dd>
-  <dt>scaleZ <span class="inlineIndicator optional optionalInline">Optional</span></dt>
+  <dt>scaleZ {{optional_inline}}</dt>
   <dd>A multiplier for the scale value on the z-axis.  If this value is anything other
     than 1, the resulting matrix will be 3D.</dd>
-  <dt>originX <span class="inlineIndicator optional optionalInline">Optional</span></dt>
+  <dt>originX {{optional_inline}}</dt>
   <dd>An x-coordinate for the origin of the transformation.  If no origin is supplied,
     this defaults to 0.</dd>
-  <dt>originY <span class="inlineIndicator optional optionalInline">Optional</span></dt>
+  <dt>originY {{optional_inline}}</dt>
   <dd>A y-coordinate for the origin of the transformation.  If no origin is supplied, this
     defaults to 0.</dd>
-  <dt>originZ <span class="inlineIndicator optional optionalInline">Optional</span></dt>
+  <dt>originZ {{optional_inline}}</dt>
   <dd>A z-coordinate for the origin of the transformation.  If no origin is supplied, this
     defaults to 0. If this value is anything other than 0, the resulting matrix will be
     3D.</dd>
 </dl>
 
-<h3 class="highlight-spanned" id="Return_value"><span class="highlight-span">Return
-    value</span></h3>
+<h3>Return value</h3>
 
 <p>Returns a <a href="/en-US/docs/Web/API/DOMMatrix"
     title="The DOMMatrix interface represents 4x4 matrices, suitable for 2D and 3D operations."><code>DOMMatrix</code></a>

files/en-us/web/api/dommatrixreadonly/translate/index.html

@@ -28,23 +28,20 @@ <h2 id="Syntax">Syntax</h2>
 <pre
   class="brush: js">DOMMatrix.translate(<em>translateX</em>, <em>translateY</em>[, <em>translateZ]</em>)</pre>
 
-<h3 class="highlight-spanned" id="Parameters"><span
-    class="highlight-span">Parameters</span></h3>
+<h3">Parameters</h3>
 
 <dl>
   <dt>translateX</dt>
   <dd>A number representing the abscissa (x-coordinate) of the translating vector.</dd>
   <dt>translateY</dt>
   <dd>A number representing the ordinate (y-coordinate) of the translating vector.</dd>
-  <dt>translateZ <span class="inlineIndicator optional optionalInline">Optional</span>
-  </dt>
+  <dt>translateZ {{optional_inline}}</dt>
   <dd>A number representing the z component of the translating vector.  If not supplied,
     this defaults to 0.  If this is anything other than 0, the resulting matrix will be
     3D.</dd>
 </dl>
 
-<h3 class="highlight-spanned" id="Return_value"><span class="highlight-span">Return
-    value</span></h3>
+<h3>Return value</h3>
 
 <p>Returns a <a href="/en-US/docs/Web/API/DOMMatrix"
     title="The DOMMatrix interface represents 4x4 matrices, suitable for 2D and 3D operations."><code>DOMMatrix</code></a>

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

@@ -10,7 +10,7 @@
 ---
 <p>{{ APIRef("DOM") }}</p>
 
-<p>A type returned by some APIs which contains a list of <a class="internal" href="/en-US/docs/Web/API/DOMString">DOMString</a> (strings).</p>
+<p>A type returned by some APIs which contains a list of <a href="/en-US/docs/Web/API/DOMString">DOMString</a> (strings).</p>
 
 <h2 id="Properties">Properties</h2>
 

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

@@ -99,8 +99,8 @@ <h2 id="See_also">See also</h2>
   <li>{{domxref("Element.insertAdjacentElement()")}}</li>
   <li>{{domxref("Element.insertAdjacentText()")}}</li>
   <li>{{domxref("XMLSerializer")}}: Construct a DOM representation of XML text</li>
-  <li><a class="external"
+  <li><a
       href="https://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/">hacks.mozilla.org
-      guest post</a><span class="external"> by Henri Sivonen including benchmark showing
-      that insertAdjacentHTML can be way faster in some cases.</span></li>
+      guest post</a> by Henri Sivonen including benchmark showing
+      that insertAdjacentHTML can be way faster in some cases.</li>
 </ul>

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

@@ -46,12 +46,12 @@ <h2 id="Usage_notes">Usage notes</h2>
 
 <h4>Behavior of <code>mouseenter</code> events:</h4>
 
-<img class="default internal" src="mouseenter.png">
+<img src="mouseenter.png">
 One <code>mouseenter</code> event is sent to each element of the hierarchy when entering them. Here 4 events are sent to the four elements of the hierarchy when the pointer reaches the text.
 
 <h4>Behavior of <code>mouseover</code> events:</h4>
 
-<img class="default internal" src="mouseover.png">
+<img src="mouseover.png">
 A single <code>mouseover</code> event is sent to the deepest element of the DOM tree, then it bubbles up the hierarchy until it is canceled by a handler or reaches the root.</div>
 
 <p>With deep hierarchies, the number of <code>mouseover</code> events sent can be quite huge and cause significant performance problems. In such cases, it is better to listen for <code>mouseenter</code> events.</p>

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

@@ -42,13 +42,13 @@
 
 <h4>Behavior of <code>mouseleave</code> events:</h4>
 
-<img class="default internal" src="mouseleave.png">
+<img src="mouseleave.png">
 
 <p>One <code>mouseleave</code> event is sent to each element of the hierarchy when leaving them. Here four events are sent to the four elements of the hierarchy when the pointer moves from the text to an area outside of the most outer div represented here.</p>
 
 <h4>Behavior of <code>mouseout</code> events:</h4>
 
-<img class="default internal" src="mouseout.png">
+<img src="mouseout.png">
 
 <p>One single <code>mouseout</code> event is sent to the deepest element of the DOM tree, then it bubbles up the hierarchy until it is canceled by a handler or reaches the root.</p>
 

files/en-us/web/api/filereader/readasdataurl/index.html

@@ -109,7 +109,7 @@ <h3 id="JavaScript_2">JavaScript</h3>
 <div class="note"><p><strong>Note:</strong> The <a
     href="/en-US/docs/Web/API/FileReader"><code>FileReader()</code></a> constructor was
   not supported by Internet Explorer for versions before 10. For a full compatibility code
-  you can see our <a class="internal"
+  you can see our <a
     href="https://mdn.mozillademos.org/files/3699/crossbrowser_image_preview.html"
     title="crossbrowser_image_preview.html">crossbrowser possible solution for image
     preview</a>. See also <a