mdn · Josh-Cena · Jul 25, 2024 · Jul 25, 2024 · Jul 25, 2024
@@ -103,7 +103,8 @@ This produces the following output:
 
 {{EmbedLiveSample('A_basic_example', 650, 60)}}
 
-> **Note:** You can find this example on GitHub too — see the [source code](https://github.com/mdn/learning-area/blob/main/html/forms/file-examples/simple-file.html), and also [see it running live](https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html).
+> [!NOTE]
+> You can find this example on GitHub too — see the [source code](https://github.com/mdn/learning-area/blob/main/html/forms/file-examples/simple-file.html), and also [see it running live](https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html).
 
 Regardless of the user's device or operating system, the file input provides a button that opens up a file picker dialog that allows the user to choose a file.
 

@@ -30,7 +30,8 @@ The `autocomplete` attribute provides a hint to the user agent specifying how to
 
 If an {{HTMLElement("input")}}, {{HTMLElement("select")}} or {{HTMLElement("textarea")}} element has no `autocomplete` attribute, the browser will use the [`autocomplete` attribute of the element's **owning form**](/en-US/docs/Web/HTML/Element/form#autocomplete). The owning form is either the {{HTMLElement("form")}} matching the `id` specified by the [`form`](/en-US/docs/Web/HTML/Element/input#form) attribute of the element (if present) or, more commonly, the `<form>` the element is nested in.
 
-> **Note:** In order to provide autocompletion, user-agents might require `<input>`/`<select>`/`<textarea>` elements to:
+> [!NOTE]
+> In order to provide autocompletion, user-agents might require `<input>`/`<select>`/`<textarea>` elements to:
 >
 > 1. Have a `name` and/or `id` attribute
 > 2. Be descendants of a `<form>` element

@@ -18,7 +18,8 @@ The `capture` attribute takes as its value a string that specifies which camera
 | `user`        | The user-facing camera and/or microphone should be used.   |
 | `environment` | The outward-facing camera and/or microphone should be used |
 
-> **Note:** Capture was previously a Boolean attribute which, if present, requested that the device's media capture device(s) such as camera or microphone be used instead of requesting a file input.
+> [!NOTE]
+> Capture was previously a Boolean attribute which, if present, requested that the device's media capture device(s) such as camera or microphone be used instead of requesting a file input.
 
 {{EmbedInteractiveExample("pages/tabbed/attribute-capture.html", "tabbed-standard")}}
 

@@ -57,7 +57,8 @@ By default (that is, when the attribute is not specified), CORS is not used at a
   </tbody>
 </table>
 
-> **Note:** The `crossorigin` attribute is not supported for [`rel="icon"`](/en-US/docs/Web/HTML/Attributes/rel#icon) in Chromium-based browsers. See the [open Chromium issue](https://crbug.com/1121645).
+> [!NOTE]
+> The `crossorigin` attribute is not supported for [`rel="icon"`](/en-US/docs/Web/HTML/Attributes/rel#icon) in Chromium-based browsers. See the [open Chromium issue](https://crbug.com/1121645).
 
 ### Example: `crossorigin` with the `<script>` element
 

@@ -26,7 +26,8 @@ The `disabled` attribute is supported by {{ HTMLElement("button") }}, {{ HTMLEle
 
 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 `fieldset`; if there is no containing element with the `disabled` 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.
 
-> **Note:** If a {{ HTMLElement("fieldset") }} is disabled, the descendant form controls are all disabled, with the exception of form controls within the {{ HTMLElement("legend") }}.
+> [!NOTE]
+> If a {{ HTMLElement("fieldset") }} is disabled, the descendant form controls are all disabled, with the exception of form controls within the {{ HTMLElement("legend") }}.
 
 When a supporting element has the `disabled` attribute applied, the {{cssxref(":disabled")}} pseudo-class also applies to it. Conversely, elements that support the `disabled` attribute but don't have the attribute set match the {{cssxref(":enabled")}} pseudo-class.
 
@@ -40,7 +41,8 @@ The difference between `disabled` and [`readonly`](/en-US/docs/Web/HTML/Attribut
 
 Because a disabled field cannot have its value changed, [`required`](/en-US/docs/Web/HTML/Attributes/required) does not have any effect on inputs with the `disabled` attribute also specified. Additionally, since the elements become immutable, most other attributes, such as [`pattern`](/en-US/docs/Web/HTML/Attributes/pattern), have no effect, until the control is enabled.
 
-> **Note:** The `required` attribute is not permitted on inputs with the `disabled` attribute specified.
+> [!NOTE]
+> The `required` attribute is not permitted on inputs with the `disabled` attribute specified.
 
 ### Usability
 

@@ -1413,7 +1413,8 @@ To be clear, the values "`true`" and "`false`" are not allowed on boolean attrib
 
 ## Event handler attributes
 
-> **Warning:** The use of event handler content attributes is discouraged. The mix of HTML and JavaScript often produces unmaintainable code, and the execution of event handler attributes may also be blocked by content security policies.
+> [!WARNING]
+> The use of event handler content attributes is discouraged. The mix of HTML and JavaScript often produces unmaintainable code, and the execution of event handler attributes may also be blocked by content security policies.
 
 In addition to the attributes listed in the table above, global [event handlers](/en-US/docs/Web/Events/Event_handlers#using_onevent_properties) — such as [`onclick`](/en-US/docs/Web/API/Element/click_event) — can also be specified as [content attributes](#content_versus_idl_attributes) on all elements.
 

@@ -79,7 +79,8 @@ If the value exceeds the max value allowed, the {{domxref('validityState.rangeOv
   </tbody>
 </table>
 
-> **Note:** When the data entered by the user doesn't adhere to the maximum value set, the value is considered invalid in constraint validation and will match the {{cssxref(':invalid')}} and {{cssxref(':out-of-range')}} pseudo-classes.
+> [!NOTE]
+> When the data entered by the user doesn't adhere to the maximum value set, the value is considered invalid in constraint validation and will match the {{cssxref(':invalid')}} and {{cssxref(':out-of-range')}} pseudo-classes.
 
 See [Client-side validation](/en-US/docs/Web/HTML/Constraint_validation) and {{domxref("ValidityState.rangeOverflow", "rangeOverflow")}} for more information.
 

@@ -78,7 +78,8 @@ It is valid for the input types including: {{HTMLElement("input/date", "date")}}
   </tbody>
 </table>
 
-> **Note:** When the data entered by the user doesn't adhere to the min value set, the value is considered invalid in constraint validation and will match the {{cssxref(':invalid')}} and {{cssxref(':out-of-range')}} pseudo-classes.
+> [!NOTE]
+> When the data entered by the user doesn't adhere to the min value set, the value is considered invalid in constraint validation and will match the {{cssxref(':invalid')}} and {{cssxref(':out-of-range')}} pseudo-classes.
 
 See [Client-side validation](/en-US/docs/Web/HTML/Constraint_validation) and {{domxref("ValidityState.rangeUnderflow", "rangeUnderflow")}} for more information.
 

@@ -29,7 +29,8 @@ Some of the input types supporting the pattern attribute, notably the {{HTMLElem
 
 If the input's value is not the empty string and the value does not match the entire regular expression, there is a constraint violation reported by the {{domxref('ValidityState')}} object's {{domxref('ValidityState.patternMismatch','patternMismatch')}} property being `true`.
 
-> **Note:** If the `pattern` attribute is specified with no value, its value is implicitly the empty string. Thus, **any non-empty** input `value` will result in constraint violation.
+> [!NOTE]
+> If the `pattern` attribute is specified with no value, its value is implicitly the empty string. Thus, **any non-empty** input `value` will result in constraint violation.
 
 ### Usability and accessibility considerations
 

@@ -15,7 +15,8 @@ Effective placeholder text includes a word or short phrase that hints at the exp
 
 The `placeholder` attribute is supported by the following input types: `{{HTMLElement("input/text", "text")}}`, `{{HTMLElement("input/search", "search")}}`, `{{HTMLElement("input/url", "url")}}`, `{{HTMLElement("input/tel", "tel")}}`, `{{HTMLElement("input/email", "email")}}`, and `{{HTMLElement("input/password", "password")}}`. It is also supported by the `{{HTMLElement("textarea")}}` element. The [example](#example) below shows the `placeholder` attribute in use to explain the expected format of an input field.
 
-> **Note:** The `placeholder` attribute can't include any line feeds (LF) or carriage returns (CR). If either is included in the value, the placeholder text will be clipped.
+> [!NOTE]
+> The `placeholder` attribute can't include any line feeds (LF) or carriage returns (CR). If either is included in the value, the placeholder text will be clipped.
 
 ## Accessibility concerns
 

@@ -21,7 +21,8 @@ The `readonly` attribute is supported by `{{HTMLElement("input/text","text")}}`,
 
 The attribute is not supported or relevant to {{HTMLElement("select")}} or input types that are already not mutable, such as `{{HTMLElement("input/checkbox","checkbox")}}` and `{{HTMLElement("input/radio","radio")}}` or cannot, by definition, start with a value, such as the `{{HTMLElement("input/file","file")}}` input type. `{{HTMLElement("input/range","range")}}` and `{{HTMLElement("input/color","color")}}`, as both have default values. It is also not supported on `{{HTMLElement("input/hidden","hidden")}}` as it can not be expected that a user to fill out a form that is hidden. Nor is it supported on any of the button types, including `image`.
 
-> **Note:** Only text controls can be made read-only, since for other controls (such as checkboxes and buttons) there is no useful distinction between being read-only and being disabled, so the `readonly` attribute does not apply.
+> [!NOTE]
+> Only text controls can be made read-only, since for other controls (such as checkboxes and buttons) there is no useful distinction between being read-only and being disabled, so the `readonly` attribute does not apply.
 
 When an input has the `readonly` attribute, the {{cssxref(":read-only")}} pseudo-class also applies to it. Conversely, inputs that support the `readonly` attribute but don't have the attribute set match the {{cssxref(":read-write")}} pseudo-class.
 
@@ -33,7 +34,8 @@ Because a read-only field cannot have its value changed by a user interaction, [
 
 The only way to modify dynamically the value of the readonly attribute is through a script.
 
-> **Note:** The `required` attribute is not permitted on inputs with the `readonly` attribute specified.
+> [!NOTE]
+> The `required` attribute is not permitted on inputs with the `readonly` attribute specified.
 
 ### Usability
 

@@ -13,7 +13,8 @@ This is especially useful when opening untrusted links, in order to ensure they
 
 Note that when `noopener` is used, nonempty target names other than `_top`, `_self`, and `_parent` are all treated like `_blank` in terms of deciding whether to open a new window/tab.
 
-> **Note:** Setting `target="_blank"` on `<a>` elements now implicitly provides the same `rel` behavior as setting `rel="noopener"` which does not set `window.opener`. See [browser compatibility](/en-US/docs/Web/HTML/Element/a#browser_compatibility) for support status.
+> [!NOTE]
+> Setting `target="_blank"` on `<a>` elements now implicitly provides the same `rel` behavior as setting `rel="noopener"` which does not set `window.opener`. See [browser compatibility](/en-US/docs/Web/HTML/Element/a#browser_compatibility) for support status.
 
 ## Specifications
 

@@ -11,7 +11,8 @@ The **`prefetch`** keyword for the [`rel`](/en-US/docs/Web/HTML/Element/link#rel
 
 The result is kept in the HTTP cache on disk. Because of this it is useful for prefetching subresources, even if they are not used by the current page. You could also use it to prefetch the next document the user will likely visit on the site. However, as a result you need to be careful with headers — for example certain [Cache-Control](/en-US/docs/Web/HTTP/Headers/Cache-Control) headers could block prefetching (for example `no-cache` or `no-store`).
 
-> **Note:** Because of such limitations, you are advised to use the [Speculation Rules API](/en-US/docs/Web/API/Speculation_Rules_API) for document prefetches instead, where it is supported.
+> [!NOTE]
+> Because of such limitations, you are advised to use the [Speculation Rules API](/en-US/docs/Web/API/Speculation_Rules_API) for document prefetches instead, where it is supported.
 
 `<link rel="prefetch">` is functionally equivalent to a {{domxref("Window/fetch", "fetch()")}} call with a `priority: "low"` option set on it, except that the former will generally have an even lower priority, and it will have a [`Sec-Purpose: prefetch`](/en-US/docs/Web/HTTP/Headers/Sec-Purpose) header set on the request. Note that in general browsers will give prefetch resources a lower priority than preload ones (e.g. requested via [`<link rel="preload">`](/en-US/docs/Web/HTML/Attributes/rel/preload)) — the current page is more important than the next.
 

@@ -67,9 +67,10 @@ Many content types can be preloaded. The possible `as` attribute values are:
 - `style`: CSS stylesheet.
 - `track`: WebVTT file.
 
-> **Note:** `font` and `fetch` preloading requires the `crossorigin` attribute to be set; see [CORS-enabled fetches](#cors-enabled_fetches) below.
+> [!NOTE] > `font` and `fetch` preloading requires the `crossorigin` attribute to be set; see [CORS-enabled fetches](#cors-enabled_fetches) below.
 
-> **Note:** There's more detail about these values and the web features they expect to be consumed by in the HTML spec — see [Link type "preload"](https://html.spec.whatwg.org/#match-preload-type). Also note that the full list of values the `as` attribute can take is governed by the Fetch spec — see [request destinations](https://fetch.spec.whatwg.org/#concept-request-destination).
+> [!NOTE]
+> There's more detail about these values and the web features they expect to be consumed by in the HTML spec — see [Link type "preload"](https://html.spec.whatwg.org/#match-preload-type). Also note that the full list of values the `as` attribute can take is governed by the Fetch spec — see [request destinations](https://fetch.spec.whatwg.org/#concept-request-destination).
 
 ## Including a MIME type
 
@@ -184,7 +185,8 @@ This doesn't have to be limited to images, or even files of the same type — th
 
 ## Scripting and preloads
 
-> **Note:** Use [`<link rel="modulepreload">`](/en-US/docs/Web/HTML/Attributes/rel/modulepreload) instead if you are working with [JavaScript modules](/en-US/docs/Web/JavaScript/Guide/Modules).
+> [!NOTE]
+> Use [`<link rel="modulepreload">`](/en-US/docs/Web/HTML/Attributes/rel/modulepreload) instead if you are working with [JavaScript modules](/en-US/docs/Web/JavaScript/Guide/Modules).
 
 Another nice thing about these preloads is that you can execute them with script.
 For example, here we create a {{domxref("HTMLLinkElement")}} instance, then attach it to the DOM:

@@ -18,7 +18,8 @@ In the case of a same named group of {{HTMLElement("input/radio","radio")}} butt
 
 In the case of a same named group of {{HTMLElement("input/checkbox","checkbox")}} input types, only the checkboxes with the `required` attribute are required.
 
-> **Note:** Setting [`aria-required="true"`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-required) tells a screen reader that an element (any element) is required, but has no bearing on the optionality of the element.
+> [!NOTE]
+> Setting [`aria-required="true"`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-required) tells a screen reader that an element (any element) is required, but has no bearing on the optionality of the element.
 
 ### Attribute interactions
 

@@ -109,7 +109,8 @@ Valid values include 1.2, 3.2, 5.2, 7.2, 9.2, 11.2, and so on. Only floats with
 
 {{EmbedLiveSample("min_impact_on_step","100%",55)}}
 
-> **Note:** When the data entered by the user doesn't adhere to the stepping configuration, the value is considered invalid in constraint validation and will match the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} pseudoclasses.
+> [!NOTE]
+> When the data entered by the user doesn't adhere to the stepping configuration, the value is considered invalid in constraint validation and will match the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} pseudoclasses.
 
 See [Client-side validation](/en-US/docs/Web/HTML/Constraint_validation) and {{domxref("ValidityState.stepMismatch", "stepMismatch")}} for more information.