[Markdown] [Web/HTML] Add "Note:" prefix (#9151)

* In the HTML docs: add prefix to notes that need it

* Fix a few stragglers

* Fix a few more stragglers

* Fix one more straggler

Co-authored-by: Jean-Yves Perrier <jypenator@gmail.com>

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

@@ -312,7 +312,7 @@ <h4 id="CSS">CSS</h4>
 }</pre>
 
 <div class="notecard note">
-<p>When you try to show it in Safari, it will not show properly. Because Safari doesn't support <code>text-decoration: underline wavy #88ff88</code>.</p>
+<p><strong>Note:</strong> When you try to show it in Safari, it will not show properly. Because Safari doesn't support <code>text-decoration: underline wavy #88ff88</code>.</p>
 </div>
 
 <p>Finally, the <code>.boxRight</code> class describes the unique properties of the box that's drawn on the right. It's configured to float the box to the right so that it appears next to the previous box. Then the following colors are established:</p>
@@ -338,7 +338,7 @@ <h3 id="Example_Picking_a_color">Example: Picking a color</h3>
 <p>{{EmbedLiveSample("Example_Picking_a_color", 525, 275)}}</p>
 
 <div class="note">
-<p>On macOS, you indicate that you've finalized selection of the color by closing the color picker window.</p>
+<p><strong>Note:</strong> On macOS, you indicate that you've finalized selection of the color by closing the color picker window.</p>
 </div>
 
 <h4 id="HTML_2">HTML</h4>
@@ -406,7 +406,7 @@ <h4 id="Base_color">Base color</h4>
 <p>When trying to decide upon a base color, you may find that browser extensions that let you select colors from web content can be particularly handy. Some of these are even specifically designed to help with this sort of work. For example, the website <a href="http://www.colorzilla.com/">ColorZilla</a> offers an extension (<a href="http://www.colorzilla.com/chrome">Chrome</a> / <a href="http://www.colorzilla.com/firefox">Firefox</a>) that offers an eyedropper tool for picking colors from the web. It can also take averages of the colors of pixels in various sized areas or even a selected area of the page.</p>
 
 <div class="note">
-<p>The advantage to averaging colors can be that often what looks like a solid color is actually a surprisingly varied number of related colors all used in concert, blending to create a desired effect. Picking just one of these pixels can result in getting a color that on its own looks very out of place.</p>
+<p><strong>Note:</strong> The advantage to averaging colors can be that often what looks like a solid color is actually a surprisingly varied number of related colors all used in concert, blending to create a desired effect. Picking just one of these pixels can result in getting a color that on its own looks very out of place.</p>
 </div>
 
 <h4 id="Fleshing_out_the_palette">Fleshing out the palette</h4>
@@ -424,7 +424,7 @@ <h4 id="Fleshing_out_the_palette">Fleshing out the palette</h4>
 <p>When designing your palette, be sure to keep in mind that in addition to the colors these tools typically generate, you'll probably also need to add some core neutral colors such as white (or nearly white), black (or nearly black), and some number of shades of gray.</p>
 
 <div class="note">
-<p>Usually, you are far better off using the smallest number of colors possible. By using color to accentuate rather than adding color to everything on the page, you keep your content easy to read and the colors you do use have far more impact.</p>
+<p><strong>Note:</strong> Usually, you are far better off using the smallest number of colors possible. By using color to accentuate rather than adding color to everything on the page, you keep your content easy to read and the colors you do use have far more impact.</p>
 </div>
 
 <h3 id="Color_theory_resources">Color theory resources</h3>
@@ -445,7 +445,7 @@ <h3 id="Color_and_accessibility">Color and accessibility</h3>
 <p>You should do at least basic research into {{interwiki("wikipedia", "color blindness")}}. There are several kinds; the most common is red-green color blindness, which causes people to be unable to differentiate between the colors red and green. There are others, too, ranging from inabilities to tell the difference between certain colors to total inability to see color at all.</p>
 
 <div class="note">
-<p>The most important rule: never use color as the only way to know something. If, for example, you indicate success or failure of an operation by changing the color of a shape from white to green for success and red for failure, users with red-green color-blindness won't be able to use your site properly. Instead, perhaps use both text and color together, so that everyone can understand what's happening.</p>
+<p><strong>Note:</strong> The most important rule: never use color as the only way to know something. If, for example, you indicate success or failure of an operation by changing the color of a shape from white to green for success and red for failure, users with red-green color-blindness won't be able to use your site properly. Instead, perhaps use both text and color together, so that everyone can understand what's happening.</p>
 </div>
 
 <p>For more information about color blindness, see the following articles:</p>

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

@@ -31,7 +31,7 @@
 <p>For more information, see the {{htmlattrxref("autocomplete", "form")}} attribute in {{HTMLElement("form")}}.</p>
 
 <div class="notecard note">
-<p>In order to provide autocompletion, user-agents might require <code>&lt;input&gt;</code>/<code>&lt;select&gt;</code>/<code>&lt;textarea&gt;</code> elements to:</p>
+<p><strong>Note:</strong> In order to provide autocompletion, user-agents might require <code>&lt;input&gt;</code>/<code>&lt;select&gt;</code>/<code>&lt;textarea&gt;</code> elements to:</p>
 
 <ol>
  <li>Have a <code>name</code> and/or <code>id</code> attribute</li>

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

@@ -44,7 +44,7 @@
 <p>An invalid keyword and an empty string will be handled as the <code>anonymous</code> keyword.</p>
 
 <div class="notecard note">
-<p>Prior to Firefox 83 the <code>crossorigin</code> attribute was not supported for <code>rel="icon"</code> there is also <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1121645">an open issue for Chrome</a>.</p>
+<p><strong>Note:</strong> Prior to Firefox 83 the <code>crossorigin</code> attribute was not supported for <code>rel="icon"</code> there is also <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1121645">an open issue for Chrome</a>.</p>
 </div>
 
 <h3 id="Example_crossorigin_with_the_script_element">Example: crossorigin with the script element</h3>

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

@@ -248,7 +248,7 @@ <h2 id="Values">Values</h2>
  <dd>Relevant to {{htmlelement('form')}}, {{htmlelement('link')}}, {{htmlelement('a')}}, and {{htmlelement('area')}}, the <code>help</code> keyword indicates that the linked to content provides context-sensitive help, providing information for the parent of the element defining the hyperlink, and its children. When used within <code>&lt;link&gt;</code>, the help is for the whole document. When included with {{htmlelement('a')}} and {{htmlelement('area')}} and supported, the default {{cssxref('cursor')}} will be <code>help</code> instead of <code>pointer</code>.</dd>
  <dt>{{htmlattrdef("icon")}}</dt>
  <dd>
- <p>Valid with {{htmlelement('link')}}, the linked resource represents the icon, a resource for representing the page in the user interface, for the current document.</p>
+ <p><strong>Note:</strong> Valid with {{htmlelement('link')}}, the linked resource represents the icon, a resource for representing the page in the user interface, for the current document.</p>
 
  <p>The most common use for the <code>icon</code> value is the favicon:</p>
 
@@ -257,7 +257,7 @@ <h2 id="Values">Values</h2>
  <p>If there are multiple <code>&lt;link rel="icon"&gt;</code>s, the browser uses their <a href="media"><code>media</code></a> attribute, <a href="type"><code>type</code></a>, and <a href="sizes"><code>sizes</code></a> attributes to select the most appropriate icon. If several icons are equally appropriate, the last one is used. If the most appropriate icon is later found to be inappropriate, for example because it uses an unsupported format, the browser proceeds to the next-most appropriate, and so on.</p>
 
  <div class="notecard note">
- <p>Prior to Firefox 83 the <a href="/en-US/docs/Web/HTML/Attributes/crossorigin">crossorigin</a> attribute was not supported for <code>rel="icon"</code> there is also <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1121645">an open issue for Chrome</a>.</p>
+ <p><strong>Note:</strong> Prior to Firefox 83 the <a href="/en-US/docs/Web/HTML/Attributes/crossorigin">crossorigin</a> attribute was not supported for <code>rel="icon"</code> there is also <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1121645">an open issue for Chrome</a>.</p>
  </div>
 
  <p><strong>Note:</strong> Apple's iOS does not use this link type, nor the <a href="sizes"><code>sizes</code></a> attribute, like others mobile browsers do, to select a webpage icon for Web Clip or a start-up placeholder. Instead it uses the non-standard <a class="external external-icon" href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4"><code>apple-touch-icon</code></a> and <a class="external external-icon" href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6"><code>apple-touch-startup-image</code></a> respectively.</p>
@@ -266,7 +266,7 @@ <h2 id="Values">Values</h2>
  </dd>
  <dt>{{htmlattrdef("license")}}</dt>
  <dd>
- <p>Valid on the {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}, {{HTMLElement("link")}} elements, the <code>license</code> value indicates that the hyperlink leads to a document describing the licensing information; that the main content of the current document is covered by the copyright license described by the referenced document. If not inside the {{HTMLElement("head")}} element, the standard doesn't distinguish between a hyperlink applying to a specific part of the document or to the document as a whole. Only the data on the page can indicate this.</p>
+ <p><strong>Note:</strong> Valid on the {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}, {{HTMLElement("link")}} elements, the <code>license</code> value indicates that the hyperlink leads to a document describing the licensing information; that the main content of the current document is covered by the copyright license described by the referenced document. If not inside the {{HTMLElement("head")}} element, the standard doesn't distinguish between a hyperlink applying to a specific part of the document or to the document as a whole. Only the data on the page can indicate this.</p>
 
  <pre class="brush: html">&lt;link rel="license" href="#license"&gt;</pre>
 

files/en-us/web/html/block-level_elements/index.html

@@ -16,7 +16,7 @@
 <p>Browsers typically display the block-level element with a newline both before and after the element. You can visualize them as a stack of boxes.</p>
 
 <div class="note">
-<p>A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).</p>
+<p><strong>Note:</strong> A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).</p>
 </div>
 
 <p>The following example demonstrates the block-level element's influence:</p>

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

@@ -73,7 +73,7 @@ <h3 id="Specifying_the_term_being_defined">Specifying the term being defined</h3
 </ol>
 
 <div class="note">
-<p>If the <code>&lt;dfn&gt;</code> element has a <code>title</code> attribute, it <em>must</em> contain the term being defined and no other text.</p>
+<p><strong>Note:</strong> If the <code>&lt;dfn&gt;</code> element has a <code>title</code> attribute, it <em>must</em> contain the term being defined and no other text.</p>
 </div>
 
 <h3>Links to <code>&lt;dfn&gt;</code> elements</h3>

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

@@ -53,7 +53,7 @@ <h2 id="Attributes">Attributes</h2>
 <p>These elements only include the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p>
 
 <div class="note">
-<p>The <code>align</code> attribute is obsolete; don't use it.</p>
+<p><strong>Note:</strong> The <code>align</code> attribute is obsolete; don't use it.</p>
 </div>
 
 <h2 id="Usage_notes">Usage notes</h2>

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

@@ -14,8 +14,7 @@
 <div>{{HTMLRef}}</div>
 
 <div class="notecard warning">
- <h4>Warning</h4>
- <p><code>&lt;hgroup&gt;</code> should not be used because no assistive technology supports it, and as a result it has a detrimental effect on assistance for headings placed within it.</p>
+ <p><strong>Warning:</strong> <code>&lt;hgroup&gt;</code> should not be used because no assistive technology supports it, and as a result it has a detrimental effect on assistance for headings placed within it.</p>
  <p>For more information see the <a href="#usage_notes">Usage notes below</a>.</p>
 </div>
 
@@ -63,7 +62,7 @@ <h2 id="Attributes">Attributes</h2>
 <h2 id="Usage_notes">Usage notes</h2>
 
 <div class="note">
-<p>The <code>&lt;hgroup&gt;</code> element has been removed from the HTML5 (W3C) specification, but it still is in the WHATWG version of HTML. It is partially implemented in most browsers, though, so is unlikely to go away.<br>
+<p><strong>Note:</strong> The <code>&lt;hgroup&gt;</code> element has been removed from the HTML5 (W3C) specification, but it still is in the WHATWG version of HTML. It is partially implemented in most browsers, though, so is unlikely to go away.<br>
  However, given that a key purpose of the <code>&lt;hgroup&gt;</code> element is to affect how headings are displayed by <a href="/en-US/docs/Web/HTML/Element/Heading_Elements#the_html5_outline_algorithm">the outline algorithm defined in the HTML specification</a>—but <strong>the HTML outline algorithm is not implemented in any browsers</strong>—then the <code>&lt;hgroup&gt;</code> semantics are in practice only theoretical.<br>
  So the HTML5 (W3C) specification provides advice on how to mark up <a href="https://www.w3.org/TR/html52/common-idioms-without-dedicated-elements.html#common-idioms-without-dedicated-elements">Subheadings, subtitles, alternative titles and taglines</a> without using <code>&lt;hgroup&gt;</code>.</p>
 </div>

files/en-us/web/html/element/input/date/index.html

@@ -60,7 +60,7 @@ <h2 id="Value">Value</h2>
 <p>{{EmbedLiveSample('Value', 600, 40)}}</p>
 
 <div class="notecard note">
-<p><strong>Note:</strong> The displayed date format will differ from the actual <code>value</code>. The displayed date is formatted based on the locale of the user's browser, but the parsed <code>value</code> is always formatted <code>yyyy-mm-dd</code>.</p>
+<p><strong>Note:</strong> The displayed date format will differ from the actual <code>value</code> — the displayed date is formatted <em>based on the locale of the user's browser</em>, but the parsed <code>value</code> is always formatted <code>yyyy-mm-dd</code>.</p>
 </div>
 
 <p>You can get and set the date value in JavaScript with the {{domxref("HTMLInputElement")}} <code>value</code> and <code>valueAsNumber</code> properties. For example:</p>
@@ -101,7 +101,7 @@ <h3>step</h3>
 <p>For <code>date</code> inputs, the value of <code>step</code> is given in days; and is treated as a number of milliseconds equal to 86,400,000 times the <code>step</code> value (the underlying numeric value is in milliseconds). The default value of <code>step</code> is 1, indicating 1 day.</p>
 
 <div class="notecard note">
-<p>Specifying <code>any</code> as the value for <code>step</code> has the same effect as <code>1</code> for <code>date</code> inputs.</p>
+<p><strong>Note:</strong> Specifying <code>any</code> as the value for <code>step</code> has the same effect as <code>1</code> for <code>date</code> inputs.</p>
 </div>
 
 <h2 id="Using_date_inputs">Using date inputs</h2>
@@ -111,7 +111,7 @@ <h2 id="Using_date_inputs">Using date inputs</h2>
 <p>In this section, we'll look at basic and then more complex uses of <code>&lt;input type="date"&gt;</code>, and offer advice on mitigating the browser support issue later (see {{anch("Handling browser support")}}).</p>
 
 <div class="notecard note">
-<p>Hopefully, over time browser support will become ubiquitous, and this problem will fade away.</p>
+<p><strong>Note:</strong> Hopefully, over time browser support will become ubiquitous, and this problem will fade away.</p>
 </div>
 
 <h3 id="Basic_uses_of_date">Basic uses of date</h3>

files/en-us/web/html/element/input/datetime/index.html

@@ -23,7 +23,7 @@
 <h2 id="Browser_compatibility">Browser compatibility</h2>
 
 <div class="notecard note">
-<p>This feature has no current browser implementations.</p>
+<p><strong>Note:</strong> This feature has no current browser implementations.</p>
 </div>
 
 <h2 id="See_also">See also</h2>

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

@@ -1001,7 +1001,7 @@ <h4 id="Placeholders_are_not_accessible">Placeholders are not accessible</h4>
 <p>Not only is the placeholder not accessible to screen readers, but once the user enters any text into the form control, or if the form control already has a value, the placeholder disappears. Browsers with automatic page translation features may skip over attributes when translating, meaning the <code>placeholder</code> may not get translated.</p>
 
 <div class="notecard note">
-<p>Don't use the {{htmlattrxref("placeholder", "input", "", 1)}} attribute if you can avoid it. If you need to label an <code>&lt;input&gt;</code> element, use the {{HTMLElement("label")}} element.</p>
+<p><strong>Note:</strong> Don't use the {{htmlattrxref("placeholder", "input", "", 1)}} attribute if you can avoid it. If you need to label an <code>&lt;input&gt;</code> element, use the {{HTMLElement("label")}} element.</p>
 </div>
 
 <h3 id="Client-side_validation">Client-side validation</h3>

files/en-us/web/html/element/input/reset/index.html

@@ -22,7 +22,7 @@
 <div>{{EmbedInteractiveExample("pages/tabbed/input-reset.html", "tabbed-standard")}}</div>
 
 <div class="note">
-<p>You should usually avoid including reset buttons in your forms. They're rarely useful, and are instead more likely to frustrate users who click them by mistake (often while trying to click the <a href="/en-US/docs/Web/HTML/Element/input/submit">submit button</a>).</p>
+<p><strong>Note:</strong> You should usually avoid including reset buttons in your forms. They're rarely useful, and are instead more likely to frustrate users who click them by mistake (often while trying to click the <a href="/en-US/docs/Web/HTML/Element/input/submit">submit button</a>).</p>
 </div>
 
 <table class="properties">

files/en-us/web/html/element/input/search/index.html

@@ -183,7 +183,7 @@ <h3 id="Basic_example">Basic example</h3>
 <p><code>q</code> is the most common <code>name</code> given to search inputs, although it's not mandatory. When submitted, the data name/value pair sent to the server will be <code>q=searchterm</code>.</p>
 
 <div class="note">
-<p>You must remember to set a {{htmlattrxref("name", "input")}} for your input, otherwise nothing will be submitted.</p>
+<p><strong>Note:</strong> You must remember to set a {{htmlattrxref("name", "input")}} for your input, otherwise nothing will be submitted.</p>
 </div>
 
 <h3 id="Differences_between_search_and_text_types">Differences between search and text types</h3>

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

@@ -73,7 +73,7 @@ <h2 id="Usage_notes">Usage notes</h2>
 </ul>
 
 <div class="note">
-<p>You can define a custom style to override the browser's default font selection for the <code>&lt;kbd&gt;</code> element, although the user's preferences may potentially override your CSS.</p>
+<p><strong>Note:</strong> You can define a custom style to override the browser's default font selection for the <code>&lt;kbd&gt;</code> element, although the user's preferences may potentially override your CSS.</p>
 </div>
 
 <h2 id="Examples">Examples</h2>
@@ -104,7 +104,7 @@ <h5 id="HTML">HTML</h5>
 <div class="notecard note">
 <p><strong>Note:</strong> You don't need to do all this wrapping; you can choose to simplify it by leaving out the external <code>&lt;kbd&gt;</code> element. In other words, simplifying this to just <code>&lt;kbd&gt;Ctrl&lt;/kbd&gt;+&lt;kbd&gt;N&lt;/kbd&gt;</code> would be perfectly valid.</p>
 
-<p>Depending on your style sheet, though, you may find it useful to do this kind of nesting.</p>
+<p><strong>Note:</strong> Depending on your style sheet, though, you may find it useful to do this kind of nesting.</p>
 </div>
 
 <h5 id="Result">Result</h5>