HTML docs: Fix up remaining notes, part 1 (#9154)

files/en-us/web/html/attributes/disabled/index.html

@@ -19,7 +19,7 @@
 <p>This Boolean disabled attribute indicates that the user cannot interact with the control or its descendant controls. If this attribute is not specified, the control inherits its setting from the containing element, for example <code>fieldset</code>; if there is no containing element with the <code>disabled</code> attribute set, and the control itself does not have the attribute, then the control is enabled. If declared on an {{ HTMLElement("optgroup") }}, the select is still interactive (unless otherwise disabled), but none of the items in the option group are selectable.</p>
 
 <div class="notecard note">
-<p>Note: If a {{ HTMLElement("fieldset") }} is disabled, the descendant form controls are all disabled, with the exception of form controls within the {{ HTMLElement("legend") }}.</p>
+<p><strong>Note:</strong> If a {{ HTMLElement("fieldset") }} is disabled, the descendant form controls are all disabled, with the exception of form controls within the {{ HTMLElement("legend") }}.</p>
 </div>
 
 <p>When a supporting element has the <code>disabled</code> attribute applied, the {{cssxref(":disabled")}} pseudo-class also applies to it. Conversely, elements that support the <code>disabled</code> attribute but don't have the attribute set match the {{cssxref(":enabled")}} pseudo-class.</p>

files/en-us/web/html/attributes/index.html

@@ -434,7 +434,6 @@ <h2 id="Attribute_list">Attribute list</h2>
  <td><code>loading</code> {{experimental_inline}}</td>
  <td>{{ HTMLElement("img") }}, {{ HTMLElement("iframe") }}</td>
  <td>Indicates if the element should be loaded lazily (<code>loading="lazy"</code>) or loaded immediately (<code>loading="eager"</code>).
- <div class="note"><strong>WIP:</strong> <a href="https://github.com/whatwg/html/pull/3752">WHATWG PR #3752</a></div>
  </td>
  </tr>
  <tr>

files/en-us/web/html/attributes/required/index.html

@@ -23,7 +23,7 @@
 <p>In the case of a same named group of {{HTMLElement("input/checkbox","checkbox")}} input types, only the checkboxes with the <code>required</code> attribute are required.</p>
 
 <div class="notecard note">
-<p>Note: Setting <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute">aria-required</a>="true"</code> tells a screen reader that an element (any element) is required, but has no bearing on the optionality of the element.</p>
+<p><strong>Note:</strong> Setting <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute">aria-required</a>="true"</code> tells a screen reader that an element (any element) is required, but has no bearing on the optionality of the element.</p>
 </div>
 
 <h3 id="Attribute_interactions">Attribute interactions</h3>

files/en-us/web/html/element/acronym/index.html

@@ -16,8 +16,8 @@ <h2 id="Summary">Summary</h2>
 
 <p>The <strong><code>&lt;acronym&gt;</code></strong> <a href="/en-US/docs/Web/HTML">HTML</a> element allows authors to clearly indicate a sequence of characters that compose an acronym or abbreviation for a word.</p>
 
-<div class="note">
-<p><strong>Usage note:</strong> This element has been removed in HTML5 and shouldn't be used anymore. Instead web developers should use the {{HTMLElement("abbr")}} element.</p>
+<div class="warning">
+<p><strong>Warning:</strong> Don't use this element. Use the {{HTMLElement("abbr")}} element instead.</p>
 </div>
 
 <h2 id="Attributes">Attributes</h2>
@@ -28,8 +28,6 @@ <h2 id="DOM_Interface">DOM Interface</h2>
 
 <p>This element implements the {{domxref('HTMLElement')}} interface.</p>
 
-<div class="note"><strong>Implementation note:</strong> Up to Gecko 1.9.2 inclusive, Firefox implements the {{domxref('HTMLSpanElement')}} interface for this element.</div>
-
 <h2 id="Example">Example</h2>
 
 <pre class="brush:html">&lt;p&gt;The &lt;acronym title="World Wide Web"&gt;WWW&lt;/acronym&gt; is only a component of the Internet.&lt;/p&gt;

files/en-us/web/html/element/bgsound/index.html

@@ -17,8 +17,8 @@
 
 <p>The <strong><code>&lt;bgsound&gt;</code></strong> <a href="/en-US/docs/Web/HTML">HTML</a> element is deprecated. It sets up a sound file to play in the background while the page is used; use {{HTMLElement("audio")}} instead.</p>
 
-<div class="note">
-<p><strong>Do not use this! </strong>In order to embed audio in a Web page, you should be using the {{HTMLElement("audio")}} element.</p>
+<div class="warning">
+<p><strong>Warning:</strong> Do not use this! In order to embed audio in a Web page, you should be using the {{HTMLElement("audio")}} element.</p>
 </div>
 
 <h2 id="Attributes">Attributes</h2>

files/en-us/web/html/element/big/index.html

@@ -13,8 +13,8 @@
 
 <p>The <strong><code>&lt;big&gt;</code></strong> <a href="/en-US/docs/Web/HTML">HTML</a> deprecated element renders the enclosed text at a font size one level larger than the surrounding text (<code>medium</code> becomes <code>large</code>, for example). The size is capped at the browser's maximum permitted font size.</p>
 
-<div class="note">
-<p><strong>Usage note:</strong> As it was purely presentational, this element has been removed in {{Glossary("HTML5")}} and shouldn't be used anymore. Instead web developers should use the CSS {{cssxref("font-size")}} property to adjust the font size.</p>
+<div class="warning">
+<p><strong>Warning:</strong> This element has been removed from the specification and shouldn't be used any more. Use the CSS {{cssxref("font-size")}} property to adjust the font size.</p>
 </div>
 
 <h2 id="Attributes">Attributes</h2>
@@ -65,8 +65,6 @@ <h2 id="DOM_interface">DOM interface</h2>
 
 <p>This element implements the {{domxref('HTMLElement')}} interface.</p>
 
-<div class="note"><strong>Implementation note:</strong> Up to Gecko 1.9.2 inclusive, Firefox implements the {{domxref('HTMLSpanElement')}} interface for this element.</div>
-
 <h2 id="Specifications">Specifications</h2>
 
 <p>{{Specifications}}</p>

files/en-us/web/html/element/caption/index.html

@@ -75,7 +75,7 @@ <h3 id="Deprecated_attributes">Deprecated attributes</h3>
  <dd>The caption is displayed below the table.</dd>
  </dl>
 
- <div class="note"><strong>Usage note:</strong> Do not use this attribute, as it has been deprecated. The {{HTMLElement("caption")}} element should be styled using the <a href="/en-US/docs/Web/CSS">CSS</a> properties {{cssxref("caption-side")}} and {{cssxref("text-align")}}.</div>
+ <div class="warning"><strong>Warning:</strong> Do not use this attribute, as it has been deprecated. The {{HTMLElement("caption")}} element should be styled using the <a href="/en-US/docs/Web/CSS">CSS</a> properties {{cssxref("caption-side")}} and {{cssxref("text-align")}}.</div>
  </dd>
 </dl>
 

files/en-us/web/html/element/center/index.html

@@ -23,10 +23,6 @@ <h2 id="DOM_interface">DOM interface</h2>
 
 <p>This element implements the {{domxref("HTMLElement")}} interface.</p>
 
-<div class="note">
-<p><strong>Implementation note:</strong> up to Gecko 1.9.2 inclusive, Firefox implements the {{domxref("HTMLSpanElement")}} interface for this element.</p>
-</div>
-
 <h2 id="Example_1">Example 1</h2>
 
 <pre class="brush: html">&lt;center&gt;This text will be centered.

files/en-us/web/html/element/col/index.html

@@ -76,18 +76,10 @@ <h3 id="Deprecated_attributes">Deprecated attributes</h3>
 
  <p>If this attribute is not set, its value is inherited from the {{htmlattrxref("align", "colgroup")}} of the {{HTMLElement("colgroup")}} element this <code>&lt;col&gt;</code> element belongs too. If there are none, the <code>left</code> value is assumed.</p>
 
- <div class="note"><strong>Note: </strong>
+ <div class="note"><p><strong>Note:</strong> To achieve the same effect as the <code>left</code>, <code>center</code>, <code>right</code> or <code>justify</code> values, do not try to set the {{cssxref("text-align")}} property on a selector giving a <code>&lt;col&gt;</code> element. Because {{HTMLElement("td")}} elements are not descendant of the <code>&lt;col&gt;</code> element, they won't inherit it.</p>
 
- <ul>
- <li>To achieve the same effect as the <code>left</code>, <code>center</code>, <code>right</code> or <code>justify</code> values:
-
- <ul>
- <li>Do not try to set the {{cssxref("text-align")}} property on a selector giving a <code>&lt;col&gt;</code> element. Because {{HTMLElement("td")}} elements are not descendant of the <code>&lt;col&gt;</code> element, they won't inherit it.</li>
- <li>If the table doesn't use a {{htmlattrxref("colspan", "td")}} attribute, use the <code>td:nth-child(an+b)</code> CSS selector. Set <code>a</code> to zero and <code>b </code>to the position of the column in the table, e.g. <code>td:nth-child(2) { text-align: right; }</code> to right-align the second column.</li>
- <li>If the table does use a {{htmlattrxref("colspan", "td")}} attribute, the effect can be achieved by combining adequate CSS attribute selectors like <code>[colspan=n]</code>, though this is not trivial.</li>
- </ul>
- </li>
- </ul>
+ <p>If the table doesn't use a {{htmlattrxref("colspan", "td")}} attribute, use the <code>td:nth-child(an+b)</code> CSS selector. Set <code>a</code> to zero and <code>b </code>to the position of the column in the table, e.g. <code>td:nth-child(2) { text-align: right; }</code> to right-align the second column.</p>
+ <p>If the table does use a {{htmlattrxref("colspan", "td")}} attribute, the effect can be achieved by combining adequate CSS attribute selectors like <code>[colspan=n]</code>, though this is not trivial.</p>
  </div>
  </dd>
  <dt>{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt>
@@ -109,13 +101,9 @@ <h3 id="Deprecated_attributes">Deprecated attributes</h3>
  <li>and <code>top</code>, which will put the text as close to the top of the cell as it is possible.</li>
  </ul>
 
- <div class="note"><p><strong>Note:</strong></p>
-
- <ul>
- <li>Do not try to set the {{cssxref("vertical-align")}} property on a selector giving a <code>&lt;col&gt;</code> element. Because {{HTMLElement("td")}} elements are not descendant of the <code>&lt;col&gt;</code> element, they won't inherit it.</li>
- <li>If the table doesn't use a {{htmlattrxref("colspan", "td")}} attribute, use the <code>td:nth-child(an+b)</code> CSS selector where a is the total number of the columns in the table and b is the ordinal position of the column in the table. Only after this selector the <code>vertical-align</code> property can be used.</li>
- <li>If the table does use a {{htmlattrxref("colspan", "td")}} attribute, the effect can be achieved by combining adequate CSS attribute selectors like <code>[colspan=n]</code>, though this is not trivial.</li>
- </ul>
+ <div class="note"><p><strong>Note:</strong> Do not try to set the {{cssxref("vertical-align")}} property on a selector giving a <code>&lt;col&gt;</code> element. Because {{HTMLElement("td")}} elements are not descendant of the <code>&lt;col&gt;</code> element, they won't inherit it.</p>
+ <p>If the table doesn't use a {{htmlattrxref("colspan", "td")}} attribute, use the <code>td:nth-child(an+b)</code> CSS selector where a is the total number of the columns in the table and b is the ordinal position of the column in the table. Only after this selector the <code>vertical-align</code> property can be used.</p>
+ <p>If the table does use a {{htmlattrxref("colspan", "td")}} attribute, the effect can be achieved by combining adequate CSS attribute selectors like <code>[colspan=n]</code>, though this is not trivial.</p>
  </div>
  </dd>
  <dt>{{htmlattrdef("width")}} {{deprecated_inline}}</dt>

files/en-us/web/html/element/colgroup/index.html

@@ -57,12 +57,9 @@ <h2 id="Attributes">Attributes</h2>
 
 <dl>
  <dt>{{htmlattrdef("span")}}</dt>
- <dd>This attribute contains a positive integer indicating the number of consecutive columns the <code>&lt;colgroup&gt;</code> element spans. If not present, its default value is <code>1</code>.
- <div class="note"><p><strong>Note:</strong> This attribute is applied on the attributes of the column group, it has no effect on the CSS styling rules associated with it or, even more, to the cells of the column's members of the group.</p>
- <ul>
- <li>The <code>span</code> attribute is not permitted if there are one or more <code>&lt;col&gt;</code> elements within the <code>&lt;colgroup&gt;</code>.</li>
- </ul>
- </div>
+ <dd><p>This attribute contains a positive integer indicating the number of consecutive columns the <code>&lt;colgroup&gt;</code> element spans. If not present, its default value is <code>1</code>.</p>
+ <p>This attribute is applied on the attributes of the column group, it has no effect on the CSS styling rules associated with it or, even more, to the cells of the column's members of the group.</p>
+ <p>The <code>span</code> attribute is not permitted if there are one or more <code>&lt;col&gt;</code> elements within the <code>&lt;colgroup&gt;</code>.</p>
  </dd>
 </dl>
 
@@ -83,13 +80,9 @@ <h3 id="Deprecated_attributes">Deprecated attributes</h3>
 
  <p>If this attribute is not set, the <code>left</code> value is assumed. The descendant {{HTMLElement("col")}} elements may override this value using their own {{htmlattrxref("align", "col")}} attribute.</p>
 
- <div class="note"><p><strong>Note:</strong></p>
-
- <ul>
- <li>Do not try to set the {{cssxref("text-align")}} property on a selector giving a {{HTMLElement("colgroup")}} element. Because {{HTMLElement("td")}} elements are not descendant of the {{HTMLElement("colgroup")}} element, they won't inherit it.</li>
- <li>If the table doesn't use a {{htmlattrxref("colspan", "td")}} attribute, use one <code>td:nth-child(an+b)</code> CSS selector per column, where a is the total number of the columns in the table and b is the ordinal position of this column in the table. Only after this selector the <code>text-align</code> property can be used.</li>
- <li>If the table does use a {{htmlattrxref("colspan", "td")}} attribute, the effect can be achieved by combining adequate CSS attribute selectors like <code>[colspan=n]</code>, though this is not trivial.</li>
- </ul>
+ <div class="note"><p><strong>Note:</strong> Do not try to set the {{cssxref("text-align")}} property on a selector giving a {{HTMLElement("colgroup")}} element. Because {{HTMLElement("td")}} elements are not descendant of the {{HTMLElement("colgroup")}} element, they won't inherit it.</p>
+ <p>If the table doesn't use a {{htmlattrxref("colspan", "td")}} attribute, use one <code>td:nth-child(an+b)</code> CSS selector per column, where a is the total number of the columns in the table and b is the ordinal position of this column in the table. Only after this selector the <code>text-align</code> property can be used.</p>
+ <p>If the table does use a {{htmlattrxref("colspan", "td")}} attribute, the effect can be achieved by combining adequate CSS attribute selectors like <code>[colspan=n]</code>, though this is not trivial.</p>
  </div>
  </dd>
  <dt>{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt>
@@ -111,13 +104,9 @@ <h3 id="Deprecated_attributes">Deprecated attributes</h3>
  <li>and <code>top</code>, which will put the text as close to the top of the cell as it is possible.</li>
  </ul>
 
- <div class="note"><strong>Note: </strong>
-
- <ul>
- <li>Do not try to set the {{cssxref("vertical-align")}} property on a selector giving a <code>&lt;colgroup&gt;</code> element. Because {{HTMLElement("td")}} elements are not descendant of the <code>&lt;colgroup&gt;</code> element, they won't inherit it.</li>
- <li>If the table doesn't use a {{htmlattrxref("colspan", "td")}} attribute, use the <code>td:nth-child(an+b)</code> CSS selector per column, where a is the total number of the columns in the table and b is the ordinal position of the column in the table. Only after this selector the <code>vertical-align</code> property can be used.</li>
- <li>If the table does use a {{htmlattrxref("colspan", "td")}} attribute, the effect can be achieved by combining adequate CSS attribute selectors like <code>[colspan=n]</code>, though this is not trivial.</li>
- </ul>
+ <div class="note"><p><strong>Note:</strong> Do not try to set the {{cssxref("vertical-align")}} property on a selector giving a <code>&lt;colgroup&gt;</code> element. Because {{HTMLElement("td")}} elements are not descendant of the <code>&lt;colgroup&gt;</code> element, they won't inherit it.</p>
+ <p>If the table doesn't use a {{htmlattrxref("colspan", "td")}} attribute, use the <code>td:nth-child(an+b)</code> CSS selector per column, where a is the total number of the columns in the table and b is the ordinal position of the column in the table. Only after this selector the <code>vertical-align</code> property can be used.</p>
+ <p>If the table does use a {{htmlattrxref("colspan", "td")}} attribute, the effect can be achieved by combining adequate CSS attribute selectors like <code>[colspan=n]</code>, though this is not trivial.</p>
  </div>
  </dd>
 </dl>

files/en-us/web/html/element/dir/index.html

@@ -17,7 +17,7 @@
 
 <p>The <strong><code>&lt;dir&gt;</code></strong> <a href="/en-US/docs/Web/HTML">HTML</a> element is used as a container for a directory of files and/or folders, potentially with styles and icons applied by the {{Glossary("user agent")}}. Do not use this obsolete element; instead, you should use the {{HTMLElement("ul")}} element for lists, including lists of files.</p>
 
-<div class="note"><strong>Usage note:</strong> Do not use this element. Though present in early HTML specifications, it has been deprecated in HTML 4, and has since been removed entirely. <strong>No major browsers support this element.</strong></div>
+<div class="warning"><p><strong>Warning:</strong> Do not use this element. Though present in early HTML specifications, it has been deprecated in HTML 4, and has since been removed entirely. <strong>No major browsers support this element.</strong></p></div>
 
 <h2 id="DOM_interface">DOM interface</h2>
 
@@ -30,7 +30,6 @@ <h2 id="Attributes">Attributes</h2>
 <dl>
  <dt>{{htmlattrdef("compact")}}</dt>
  <dd>This Boolean attribute hints that the list should be rendered in a compact style. The interpretation of this attribute depends on the user agent and it doesn't work in all browsers.
- <div class="note"><strong>Usage note:</strong> Do not use this attribute, as it has been deprecated: the {{HTMLElement("dir")}} element should be styled using <a href="/en-US/docs/Web/CSS">CSS</a>. To give a similar effect as that achieved with the <code>compact</code> attribute, the <a href="/en-US/docs/Web/CSS">CSS</a> property {{cssxref("line-height")}} can be used with a value of <code>80%</code>.</div>
  </dd>
 </dl>
 

files/en-us/web/html/element/fieldset/index.html

@@ -29,7 +29,7 @@ <h2 id="Attributes">Attributes</h2>
  <dd>This attribute takes the value of the {{htmlattrxref("id")}} attribute of a {{HTMLElement("form")}} element you want the <code>&lt;fieldset&gt;</code> to be part of, even if it is not inside the form. Please note that usage of this is confusing — if you want the {{HTMLElement("input")}} elements inside the <code>&lt;fieldset&gt;</code> to be associated with the form, you need to use the <code>form</code> attribute directly on those elements. You can check which elements are associated with a form via JavaScript, using {{domxref("HTMLFormElement.elements")}}.</dd>
  <dt>{{htmlattrdef("name")}}</dt>
  <dd>The name associated with the group.
- <div class="note"><strong>Note</strong>: The caption for the fieldset is given by the first {{HTMLElement("legend")}} element nested inside it.</div>
+ <div class="note"><p><strong>Note:</strong> The caption for the fieldset is given by the first {{HTMLElement("legend")}} element nested inside it.</p></div>
  </dd>
 </dl>
 

files/en-us/web/html/element/font/index.html

@@ -15,14 +15,8 @@ <h2 id="Summary">Summary</h2>
 
 <p>The <strong><code>&lt;font&gt;</code></strong> <a href="/en-US/docs/Web/HTML">HTML</a> element defines the font size, color and face for its content.</p>
 
-<div class="note">
-<p><em>Usage note: </em></p>
-
-<p><strong>Do not use this element!</strong> Though once normalized in HTML 3.2, it was deprecated in HTML 4.01, at the same time as all elements related to styling only, then made obsolete in HTML5.</p>
-
-<p>Starting with HTML 4, HTML does not convey styling information anymore (outside the {{HTMLElement("style")}} element or the <strong>style</strong> attribute of each element). For any new web development, styling should be written using <a href="/en-US/docs/Web/CSS">CSS</a> only.</p>
-
-<p>The former behavior of the {{HTMLElement("font")}} element can be achieved, and even better controlled using the <a href="/en-US/docs/Web/CSS/CSS_Fonts">CSS Fonts</a> CSS properties.</p>
+<div class="warning">
+<p><p><strong>Warning:</strong> Do not use this element. Use the CSS <a href="/en-US/docs/Web/CSS/CSS_Fonts">Fonts</a> properties to style text.</p>
 </div>
 
 <h2 id="Attributes">Attributes</h2>