`** [HTML](/en-US/docs/Web/HTML) element represents a heading and related content. It groups a single [`–`](/en-US/docs/Web/HTML/Element/Heading_Elements) element with one or more [` `](/en-US/docs/Web/HTML/Element/p).
-{{EmbedInteractiveExample("pages/tabbed/hgroup.html", "tabbed-standard")}}
+{{InteractiveExample("HTML Demo: ", "tabbed-standard")}}
+
+```html interactive-example
+
+ Frankenstein
+ Or: The Modern Prometheus
+
+
+ Victor Frankenstein, a Swiss scientist, has a great ambition: to create intelligent life. But when his creature first
+ stirs, he realizes he has made a monster. A monster which, abandoned by his master and shunned by everyone who sees
+ it, follows Dr Frankenstein to the very ends of the earth.
+
+```
+
+```css interactive-example
+hgroup {
+ text-align: right;
+ padding-right: 16px;
+ border-right: 10px solid #00c8d7;
+}
+
+hgroup h1 {
+ margin-bottom: 0;
+}
+
+hgroup p {
+ margin: 0;
+ font-weight: bold;
+}
+```
## Attributes
diff --git a/files/en-us/web/html/element/hr/index.md b/files/en-us/web/html/element/hr/index.md
index 092d0db66156f87..cd23962d9126a02 100644
--- a/files/en-us/web/html/element/hr/index.md
+++ b/files/en-us/web/html/element/hr/index.md
@@ -9,7 +9,34 @@ browser-compat: html.elements.hr
The **`§1: The first rule of Fight Club is: You do not talk about Fight Club.
+
+§2: The second rule of Fight Club is: Always bring cupcakes.
+```
+
+```css interactive-example
+hr {
+ border: none;
+ border-top: 3px double #333;
+ color: #333;
+ overflow: visible;
+ text-align: center;
+ height: 5px;
+}
+
+hr::after {
+ background: #fff;
+ content: '§';
+ padding: 0 4px;
+ position: relative;
+ top: -13px;
+}
+```
Historically, this has been presented as a horizontal rule or line. While it may still be displayed as a horizontal rule in visual browsers, this element is now defined in semantic terms, rather than presentational terms, so if you wish to draw a horizontal line, you should do so using appropriate CSS.
diff --git a/files/en-us/web/html/element/i/index.md b/files/en-us/web/html/element/i/index.md
index 0ec7bd1578749a8..7d0fb81b90bce21 100644
--- a/files/en-us/web/html/element/i/index.md
+++ b/files/en-us/web/html/element/i/index.md
@@ -9,7 +9,24 @@ browser-compat: html.elements.i
The **``** [HTML](/en-US/docs/Web/HTML) element represents a range of text that is set off from the normal text for some reason, such as idiomatic text, technical terms, taxonomical designations, among others. Historically, these have been presented using italicized type, which is the original source of the `` naming of this element.
-{{EmbedInteractiveExample("pages/tabbed/i.html", "tabbed-shorter")}}
+{{InteractiveExample("HTML Demo: ", "tabbed-shorter")}}
+
+```html interactive-example
+ I looked at it and thought This can't be real!
+
+Musa is one of two or three genera in the family Musaceae ; it includes bananas and plantains.
+
+
+ The term bandwidth describes the measure of how much information can pass through a data connection in a given
+ amount of time.
+
+```
+
+```css interactive-example
+/* stylelint-disable-next-line block-no-empty */
+i {
+}
+```
## Attributes
diff --git a/files/en-us/web/html/element/iframe/index.md b/files/en-us/web/html/element/iframe/index.md
index 39383346dc8cf22..357c16f84f436f1 100644
--- a/files/en-us/web/html/element/iframe/index.md
+++ b/files/en-us/web/html/element/iframe/index.md
@@ -9,7 +9,24 @@ browser-compat: html.elements.iframe
The **`
+```
+
+```css interactive-example
+iframe {
+ border: 1px solid black;
+ width: 100%; /* takes precedence over the width set with the HTML width attribute */
+}
+```
Each embedded browsing context has its own [document](/en-US/docs/Web/API/Document) and allows URL navigations. The navigations of each embedded browsing context are linearized into the [session history](/en-US/docs/Web/API/History) of the _topmost_ browsing context. The browsing context that embeds the others is called the _parent browsing context_. The _topmost_ browsing context — the one with no parent — is usually the browser window, represented by the {{domxref("Window")}} object.
diff --git a/files/en-us/web/html/element/img/index.md b/files/en-us/web/html/element/img/index.md
index ceaa17963653c41..12657034ec9f199 100644
--- a/files/en-us/web/html/element/img/index.md
+++ b/files/en-us/web/html/element/img/index.md
@@ -9,7 +9,20 @@ browser-compat: html.elements.img
The **`
+ Choose your monster's features:
+
+
+ Scales
+
+
+
+ Horns
+
+
+```
+
+```css interactive-example
+p,
+label {
+ font:
+ 1rem 'Fira Sans',
+ sans-serif;
+}
+
+input {
+ margin: 0.4rem;
+}
+```
> **Note:** [Radio buttons](/en-US/docs/Web/HTML/Element/input/radio) are similar to checkboxes, but with an important distinction — [same-named radio buttons](/en-US/docs/Web/HTML/Element/input/radio#defining_a_radio_group) are grouped into a set in which only one radio button can be selected at a time, whereas checkboxes allow you to turn single values on and off. Where multiple same-named controls exist, radio buttons allow one to be selected out of them all, whereas checkboxes allow multiple values to be selected.
diff --git a/files/en-us/web/html/element/input/color/index.md b/files/en-us/web/html/element/input/color/index.md
index 311310c16956a29..4b1e5b28ce688ae 100644
--- a/files/en-us/web/html/element/input/color/index.md
+++ b/files/en-us/web/html/element/input/color/index.md
@@ -13,7 +13,34 @@ Only basic hexadecimal colors (without alpha channel) are allowed though CSS col
The element's presentation may vary substantially from one browser and/or platform to another—it might be a basic textual input that automatically validates to ensure that the color information is entered in the proper format, or a platform-standard color picker, or some kind of custom color picker window.
-{{EmbedInteractiveExample("pages/tabbed/input-color.html", "tabbed-standard")}}
+{{InteractiveExample("HTML Demo: Choose your monster's colors:
+
+
+ Head
+
+
+
+ Body
+
+```
+
+```css interactive-example
+p,
+label {
+ font:
+ 1rem 'Fira Sans',
+ sans-serif;
+}
+
+input {
+ margin: 0.4rem;
+}
+```
## Value
diff --git a/files/en-us/web/html/element/input/date/index.md b/files/en-us/web/html/element/input/date/index.md
index e883ec4096207c1..6a1b11b71b1c54f 100644
--- a/files/en-us/web/html/element/input/date/index.md
+++ b/files/en-us/web/html/element/input/date/index.md
@@ -11,7 +11,27 @@ browser-compat: html.elements.input.type_date
The resulting value includes the year, month, and day, but _not_ the time. The {{HTMLElement("input/time", "time")}} and {{HTMLElement("input/datetime-local", "datetime-local")}} input types support time and date+time input.
-{{EmbedInteractiveExample("pages/tabbed/input-date.html", "tabbed-shorter")}}
+{{InteractiveExample("HTML Demo: Start date:
+
+Choose a time for your appointment:
+
+Enter your example.com email:
+
+Choose a profile picture:
+
+Sign in to your account:
+
+
+ User ID
+
+
+Name (4 to 8 characters):
+
+Start month:
+
+Number of tentacles (10-100):
+
+
+ Username:
+
+
+
+ Password (8 characters minimum):
+
+
+
+ Select a maintenance drone:
+
+
+ Huey
+
+
+
+ Dewey
+
+
+
+ Louie
+
+
+```
+
+```css interactive-example
+p,
+label {
+ font:
+ 1rem 'Fira Sans',
+ sans-serif;
+}
+
+input {
+ margin: 0.4rem;
+}
+```
They are called radio buttons because they look and operate in a similar manner to the push buttons on old-fashioned radios, such as the one shown below.
diff --git a/files/en-us/web/html/element/input/range/index.md b/files/en-us/web/html/element/input/range/index.md
index ccab2663a613916..31a77cb2a950478 100644
--- a/files/en-us/web/html/element/input/range/index.md
+++ b/files/en-us/web/html/element/input/range/index.md
@@ -11,7 +11,34 @@ browser-compat: html.elements.input.type_range
Because this kind of widget is imprecise, it should only be used if the control's exact value isn't important.
-{{EmbedInteractiveExample("pages/tabbed/input-range.html", "tabbed-standard")}}
+{{InteractiveExample("HTML Demo: Audio settings:
+
+
+ Volume
+
+
+
+ Cowbell
+
+```
+
+```css interactive-example
+p,
+label {
+ font:
+ 1rem 'Fira Sans',
+ sans-serif;
+}
+
+input {
+ margin: 0.4rem;
+}
+```
If the user's browser doesn't support type `range`, it will fall back and treat it as a `{{HTMLElement('input/text', 'text')}}` input.
diff --git a/files/en-us/web/html/element/input/reset/index.md b/files/en-us/web/html/element/input/reset/index.md
index b6b3ac8169eacd1..6a85794e3dd5f32 100644
--- a/files/en-us/web/html/element/input/reset/index.md
+++ b/files/en-us/web/html/element/input/reset/index.md
@@ -9,7 +9,50 @@ browser-compat: html.elements.input.type_reset
{{HTMLElement("input")}} elements of type **`reset`** are rendered as buttons, with a default {{domxref("Element/click_event", "click")}} event handler that resets all inputs in the form to their initial values.
-{{EmbedInteractiveExample("pages/tabbed/input-reset.html", "tabbed-standard")}}
+{{InteractiveExample("HTML Demo: Search the site:
+Search
+```
+
+```css interactive-example
+label {
+ display: block;
+ font:
+ 1rem 'Fira Sans',
+ sans-serif;
+}
+
+input,
+label {
+ margin: 0.4rem 0;
+}
+```
## Value
diff --git a/files/en-us/web/html/element/input/tel/index.md b/files/en-us/web/html/element/input/tel/index.md
index 14cb8d2d39d3691..f2b645439e81fe3 100644
--- a/files/en-us/web/html/element/input/tel/index.md
+++ b/files/en-us/web/html/element/input/tel/index.md
@@ -9,7 +9,30 @@ browser-compat: html.elements.input.type_tel
{{HTMLElement("input")}} elements of type **`tel`** are used to let the user enter and edit a telephone number. Unlike [`
+ Enter your phone number:Format: 123-456-7890
+
+
+Name (4 to 8 characters):
+
+Choose a time for your meeting:
+
+Office hours are 9am to 6pm
+```
+
+```css interactive-example
+label {
+ display: block;
+ font:
+ 1rem 'Fira Sans',
+ sans-serif;
+}
+
+input,
+label {
+ margin: 0.4rem 0;
+}
+```
### Setting the value attribute
diff --git a/files/en-us/web/html/element/input/url/index.md b/files/en-us/web/html/element/input/url/index.md
index 34c80e1ec68be3e..05bd985c8948ac4 100644
--- a/files/en-us/web/html/element/input/url/index.md
+++ b/files/en-us/web/html/element/input/url/index.md
@@ -9,7 +9,28 @@ browser-compat: html.elements.input.type_url
{{HTMLElement("input")}} elements of type **`url`** are used to let the user enter and edit a URL.
-{{EmbedInteractiveExample("pages/tabbed/input-url.html", "tabbed-shorter")}}
+{{InteractiveExample("HTML Demo: Choose a week in May or June:
+
+`** [HTML](/en-US/docs/Web/HTML) element represents a range of text that has been added to a document. You can use the {{HTMLElement("del")}} element to similarly represent a range of text that has been deleted from the document.
-{{EmbedInteractiveExample("pages/tabbed/ins.html", "tabbed-standard")}}
+{{InteractiveExample("HTML Demo: ", "tabbed-standard")}}
+
+```html interactive-example
+“You're late!”
+
+ “I apologize for the delay.”
+
+
+ “A wizard is never late …”
+
+```
+
+```css interactive-example
+del,
+ins {
+ display: block;
+ text-decoration: none;
+ position: relative;
+}
+
+del {
+ background-color: #fbb;
+}
+
+ins {
+ background-color: #d4fcbc;
+}
+
+del::before,
+ins::before {
+ position: absolute;
+ left: 0.5rem;
+ font-family: monospace;
+}
+
+del::before {
+ content: '−';
+}
+
+ins::before {
+ content: '+';
+}
+
+p {
+ margin: 0 1.8rem 0;
+ font-family: Georgia, serif;
+ font-size: 1rem;
+}
+```
## Attributes
diff --git a/files/en-us/web/html/element/kbd/index.md b/files/en-us/web/html/element/kbd/index.md
index 07a6f411a23413e..cee6547fd6be4d2 100644
--- a/files/en-us/web/html/element/kbd/index.md
+++ b/files/en-us/web/html/element/kbd/index.md
@@ -9,7 +9,29 @@ browser-compat: html.elements.kbd
The **``** [HTML](/en-US/docs/Web/HTML) element represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device. By convention, the {{Glossary("user agent")}} defaults to rendering the contents of a `` element using its default monospace font, although this is not mandated by the HTML standard.
-{{EmbedInteractiveExample("pages/tabbed/kbd.html", "tabbed-shorter")}}
+{{InteractiveExample("HTML Demo: ", "tabbed-shorter")}}
+
+```html interactive-example
+Please press Ctrl + Shift + R to re-render an MDN page.
+```
+
+```css interactive-example
+kbd {
+ background-color: #eee;
+ border-radius: 3px;
+ border: 1px solid #b4b4b4;
+ box-shadow:
+ 0 1px 1px rgba(0, 0, 0, 0.2),
+ 0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
+ color: #333;
+ display: inline-block;
+ font-size: 0.85em;
+ font-weight: 700;
+ line-height: 1;
+ padding: 2px 4px;
+ white-space: nowrap;
+}
+```
`` may be nested in various combinations with the {{HTMLElement("samp")}} (Sample Output) element to represent various forms of input or output based on visual cues.
diff --git a/files/en-us/web/html/element/label/index.md b/files/en-us/web/html/element/label/index.md
index 55fbdad71b38105..47e4fefc348d87b 100644
--- a/files/en-us/web/html/element/label/index.md
+++ b/files/en-us/web/html/element/label/index.md
@@ -9,7 +9,28 @@ browser-compat: html.elements.label
The **``** [HTML](/en-US/docs/Web/HTML) element represents a caption for an item in a user interface.
-{{EmbedInteractiveExample("pages/tabbed/label.html", "tabbed-shorter")}}
+{{InteractiveExample("HTML Demo: ", "tabbed-shorter")}}
+
+```html interactive-example
+
+ Do you like cheese?
+
+
+
+ Do you like peas?
+
+```
+
+```css interactive-example
+.preference {
+ display: flex;
+ justify-content: space-between;
+ width: 60%;
+ margin: 0.5rem;
+}
+```
Associating a `` with a form control, such as {{htmlelement("input")}} or {{htmlelement("textarea")}} offers some major advantages:
diff --git a/files/en-us/web/html/element/legend/index.md b/files/en-us/web/html/element/legend/index.md
index 91fae44c156443c..9e08567fa92b784 100644
--- a/files/en-us/web/html/element/legend/index.md
+++ b/files/en-us/web/html/element/legend/index.md
@@ -9,7 +9,34 @@ browser-compat: html.elements.legend
The **``** [HTML](/en-US/docs/Web/HTML) element represents a caption for the content of its parent {{HTMLElement("fieldset")}}.
-{{EmbedInteractiveExample("pages/tabbed/legend.html", "tabbed-standard")}}
+{{InteractiveExample("HTML Demo: ", "tabbed-standard")}}
+
+```html interactive-example
+
+ Choose your favorite monster
+
+ Kraken Sasquatch Mothman
+
+```
+
+```css interactive-example
+legend {
+ background-color: #000;
+ color: #fff;
+ padding: 3px 6px;
+}
+
+input {
+ margin: 0.4rem;
+}
+```
## Attributes
diff --git a/files/en-us/web/html/element/li/index.md b/files/en-us/web/html/element/li/index.md
index 7483fe5b25a7e89..af00dff219a139a 100644
--- a/files/en-us/web/html/element/li/index.md
+++ b/files/en-us/web/html/element/li/index.md
@@ -9,7 +9,32 @@ browser-compat: html.elements.li
The **``** [HTML](/en-US/docs/Web/HTML) element is used to represent an item in a list. It must be contained in a parent element: an ordered list ({{HTMLElement("ol")}}), an unordered list ({{HTMLElement("ul")}}), or a menu ({{HTMLElement("menu")}}). In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter.
-{{EmbedInteractiveExample("pages/tabbed/li.html", "tabbed-shorter")}}
+{{InteractiveExample("HTML Demo: ", "tabbed-shorter")}}
+
+```html interactive-example
+Apollo astronauts:
+
+
+ Neil Armstrong
+ Alan Bean
+ Peter Conrad
+ Edgar Mitchell
+ Alan Shepard
+
+```
+
+```css interactive-example
+p,
+li {
+ font:
+ 1rem 'Fira Sans',
+ sans-serif;
+}
+
+p {
+ font-weight: bold;
+}
+```
## Attributes
diff --git a/files/en-us/web/html/element/link/index.md b/files/en-us/web/html/element/link/index.md
index 6a77d4fec263e62..8c16261314c971a 100644
--- a/files/en-us/web/html/element/link/index.md
+++ b/files/en-us/web/html/element/link/index.md
@@ -10,7 +10,14 @@ browser-compat: html.elements.link
The **`This text will be red as defined in the external stylesheet.
+The style attribute can override it, though.
+```
To link an external stylesheet, you'd include a ``** [HTML](/en-US/docs/Web/HTML) element represents the dominant content of the {{HTMLElement("body")}} of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.
-{{EmbedInteractiveExample("pages/tabbed/main.html","tabbed-shorter")}}
+{{InteractiveExample("HTML Demo: ", "tabbed-shorter")}}
+
+```html interactive-example
+
+
+
+
+ Geckos are a group of usually small, usually nocturnal lizards. They are found on every continent except Antarctica.
+
+
+ Many species of gecko have adhesive toe pads which enable them to climb walls and even windows.
+
+```
+
+```css interactive-example
+header {
+ font:
+ bold 7vw Arial,
+ sans-serif;
+}
+```
A document mustn't have more than one `` element that doesn't have the [`hidden`](/en-US/docs/Web/HTML/Global_attributes/hidden) attribute specified.
diff --git a/files/en-us/web/html/element/map/index.md b/files/en-us/web/html/element/map/index.md
index 7de16c20a3b374c..759bced21f2adc2 100644
--- a/files/en-us/web/html/element/map/index.md
+++ b/files/en-us/web/html/element/map/index.md
@@ -9,7 +9,40 @@ browser-compat: html.elements.map
The **``** [HTML](/en-US/docs/Web/HTML) element is used with {{HTMLElement("area")}} elements to define an image map (a clickable link area).
-{{EmbedInteractiveExample("pages/tabbed/map.html", "tabbed-standard")}}
+{{InteractiveExample("HTML Demo: ", "tabbed-standard")}}
+
+```html interactive-example
+
+
+`** [HTML](/en-US/docs/Web/HTML) element represents text which is **marked** or **highlighted** for reference or notation purposes due to the marked passage's relevance in the enclosing context.
-{{EmbedInteractiveExample("pages/tabbed/mark.html", "tabbed-shorter")}}
+{{InteractiveExample("HTML Demo: ", "tabbed-shorter")}}
+
+```html interactive-example
+Search results for "salamander":
+
+Several species of salamander inhabit the temperate rainforest of the Pacific Northwest.
+
+Most salamander s are nocturnal, and hunt for insects, worms, and other small creatures.
+```
+
+```css interactive-example
+/* stylelint-disable-next-line block-no-empty */
+mark {
+}
+```
## Attributes
diff --git a/files/en-us/web/html/element/menu/index.md b/files/en-us/web/html/element/menu/index.md
index b3726cea01171e5..56146e288894d4e 100644
--- a/files/en-us/web/html/element/menu/index.md
+++ b/files/en-us/web/html/element/menu/index.md
@@ -9,7 +9,33 @@ browser-compat: html.elements.menu
The **``** [HTML](/en-US/docs/Web/HTML) element is described in the HTML specification as a semantic alternative to {{HTMLElement("ul")}}, but treated by browsers (and exposed through the accessibility tree) as no different than {{HTMLElement("ul")}}. It represents an unordered list of items (which are represented by {{HTMLElement("li")}} elements).
-{{EmbedInteractiveExample("pages/tabbed/menu.html", "tabbed-shorter")}}
+{{InteractiveExample("HTML Demo: ", "tabbed-shorter")}}
+
+```html interactive-example
+
+```
+
+```css interactive-example
+.news {
+ background-color: bisque;
+ padding: 1em;
+ border: solid thin black;
+}
+
+menu {
+ list-style-type: none;
+ display: flex;
+ padding: 0;
+ margin-bottom: 0;
+ gap: 1em;
+}
+```
## Attributes
diff --git a/files/en-us/web/html/element/meter/index.md b/files/en-us/web/html/element/meter/index.md
index 14658fffe77ff53..c8107893f97bce0 100644
--- a/files/en-us/web/html/element/meter/index.md
+++ b/files/en-us/web/html/element/meter/index.md
@@ -9,7 +9,20 @@ browser-compat: html.elements.meter
The **``** [HTML](/en-US/docs/Web/HTML) element represents either a scalar value within a known range or a fractional value.
-{{EmbedInteractiveExample("pages/tabbed/meter.html", "tabbed-shorter")}}
+{{InteractiveExample("HTML Demo: ", "tabbed-shorter")}}
+
+```html interactive-example
+Fuel level:
+
+at 50/100
+```
+
+```css interactive-example
+label {
+ padding-right: 10px;
+ font-size: 1rem;
+}
+```
## Attributes
diff --git a/files/en-us/web/html/element/nav/index.md b/files/en-us/web/html/element/nav/index.md
index b617dbfdec0a5f1..bfd736dece2b2be 100644
--- a/files/en-us/web/html/element/nav/index.md
+++ b/files/en-us/web/html/element/nav/index.md
@@ -9,7 +9,46 @@ browser-compat: html.elements.nav
The **``** [HTML](/en-US/docs/Web/HTML) element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.
-{{EmbedInteractiveExample("pages/tabbed/nav.html", "tabbed-standard")}}
+{{InteractiveExample("HTML Demo: ", "tabbed-standard")}}
+
+```html interactive-example
+
+
+ Bikes BMX Jump Bike 3000
+
+
+
+Jump Bike 3000
+
+ This BMX bike is a solid step into the pro world. It looks as legit as it rides and is built to polish your skills.
+
+```
+
+```css interactive-example
+nav {
+ border-bottom: 1px solid black;
+}
+
+.crumbs ol {
+ list-style-type: none;
+ padding-left: 0;
+}
+
+.crumb {
+ display: inline-block;
+}
+
+.crumb a::after {
+ display: inline-block;
+ color: #000;
+ content: '>';
+ font-size: 80%;
+ font-weight: bold;
+ padding: 0 3px;
+}
+```
## Attributes
diff --git a/files/en-us/web/html/element/object/index.md b/files/en-us/web/html/element/object/index.md
index 88706d81b61a714..e3be099e77bd05a 100644
--- a/files/en-us/web/html/element/object/index.md
+++ b/files/en-us/web/html/element/object/index.md
@@ -9,7 +9,11 @@ browser-compat: html.elements.object
The **``** [HTML](/en-US/docs/Web/HTML) element represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin.
-{{EmbedInteractiveExample("pages/tabbed/object.html", "tabbed-standard")}}
+{{InteractiveExample("HTML Demo: ", "tabbed-standard")}}
+
+```html interactive-example
+`** [HTML](/en-US/docs/Web/HTML) element represents an ordered list of items — typically rendered as a numbered list.
-{{EmbedInteractiveExample("pages/tabbed/ol.html", "tabbed-shorter")}}
+{{InteractiveExample("HTML Demo: ", "tabbed-shorter")}}
+
+```html interactive-example
+
+ Mix flour, baking powder, sugar, and salt.
+ In another bowl, mix eggs, milk, and oil.
+ Stir both mixtures together.
+ Fill muffin tray 3/4 full.
+ Bake for 20 minutes.
+
+```
+
+```css interactive-example
+li {
+ font:
+ 1rem 'Fira Sans',
+ sans-serif;
+ margin-bottom: 0.5rem;
+}
+```
## Attributes
diff --git a/files/en-us/web/html/element/optgroup/index.md b/files/en-us/web/html/element/optgroup/index.md
index 581c72dbb542b5b..e96ad4bde67f351 100644
--- a/files/en-us/web/html/element/optgroup/index.md
+++ b/files/en-us/web/html/element/optgroup/index.md
@@ -9,7 +9,30 @@ browser-compat: html.elements.optgroup
The **``** [HTML](/en-US/docs/Web/HTML) element creates a grouping of options within a {{HTMLElement("select")}} element.
-{{EmbedInteractiveExample("pages/tabbed/optgroup.html", "tabbed-standard")}}
+{{InteractiveExample("HTML Demo: ", "tabbed-standard")}}
+
+```html interactive-example
+Choose a dinosaur:
+
+
+ Tyrannosaurus
+ Velociraptor
+ Deinonychus
+
+
+ Diplodocus
+ Saltasaurus
+ Apatosaurus
+
+
+```
+
+```css interactive-example
+label {
+ display: block;
+ margin-bottom: 10px;
+}
+```
> [!NOTE]
> Optgroup elements may not be nested.
diff --git a/files/en-us/web/html/element/option/index.md b/files/en-us/web/html/element/option/index.md
index e1a9bc14a352c7f..378030e78854f1d 100644
--- a/files/en-us/web/html/element/option/index.md
+++ b/files/en-us/web/html/element/option/index.md
@@ -9,7 +9,34 @@ browser-compat: html.elements.option
The **``** [HTML](/en-US/docs/Web/HTML) element is used to define an item contained in a {{HTMLElement("select")}}, an {{HTMLElement("optgroup")}}, or a {{HTMLElement("datalist")}} element. As such, ` ` can represent menu items in popups and other lists of items in an HTML document.
-{{EmbedInteractiveExample("pages/tabbed/option.html", "tabbed-standard")}}
+{{InteractiveExample("HTML Demo: ", "tabbed-standard")}}
+
+```html interactive-example
+Choose a pet:
+
+
+ --Please choose an option--
+ Dog
+ Cat
+ Hamster
+ Parrot
+ Spider
+ Goldfish
+
+```
+
+```css interactive-example
+label {
+ font-family: sans-serif;
+ font-size: 1rem;
+ padding-right: 10px;
+}
+
+select {
+ font-size: 0.9rem;
+ padding: 2px 5px;
+}
+```
## Attributes
diff --git a/files/en-us/web/html/element/p/index.md b/files/en-us/web/html/element/p/index.md
index 99838ad7afbd6c6..d0556cd124eb6e4 100644
--- a/files/en-us/web/html/element/p/index.md
+++ b/files/en-us/web/html/element/p/index.md
@@ -11,7 +11,23 @@ The **``** [HTML](/en-US/docs/Web/HTML) element represents a paragraph. Parag
Paragraphs are [block-level elements](/en-US/docs/Glossary/Block-level_content), and notably will automatically close if another block-level element is parsed before the closing `
` tag. See "Tag omission" below.
-{{EmbedInteractiveExample("pages/tabbed/p.html", "tabbed-standard")}}
+{{InteractiveExample("HTML Demo: ", "tabbed-standard")}}
+
+```html interactive-example
+
+ Geckos are a group of usually small, usually nocturnal lizards. They are found on every continent except Antarctica.
+
+
+Some species live in houses where they hunt insects attracted by artificial light.
+```
+
+```css interactive-example
+p {
+ margin: 10px 0;
+ padding: 5px;
+ border: 1px solid #999;
+}
+```
## Attributes
diff --git a/files/en-us/web/html/element/picture/index.md b/files/en-us/web/html/element/picture/index.md
index df7746251f7c443..755335cefc4b07a 100644
--- a/files/en-us/web/html/element/picture/index.md
+++ b/files/en-us/web/html/element/picture/index.md
@@ -11,7 +11,16 @@ The **``** [HTML](/en-US/docs/Web/HTML) element contains zero or more {
The browser will consider each child `` element and choose the best match among them. If no matches are found—or the browser doesn't support the `` element—the URL of the `", "tabbed-standard")}}
+
+```html interactive-example
+
+
+
+
+```
To decide which URL to load, the {{Glossary("user agent")}} examines each ``'s [`srcset`](/en-US/docs/Web/HTML/Element/source#srcset), [`media`](/en-US/docs/Web/HTML/Element/source#media), and [`type`](/en-US/docs/Web/HTML/Element/source#type) attributes to select a compatible image that best matches the current layout and capabilities of the display device.
diff --git a/files/en-us/web/html/element/pre/index.md b/files/en-us/web/html/element/pre/index.md
index c6e77de2463be28..b4a70e0c80a80c4 100644
--- a/files/en-us/web/html/element/pre/index.md
+++ b/files/en-us/web/html/element/pre/index.md
@@ -17,7 +17,35 @@ Whitespace inside this element is displayed as written, with one exception. If o
By default, `` is a [block-level](/en-US/docs/Glossary/Block-level_content) element, i.e. its default {{cssxref("display")}} value is `block`.
-{{EmbedInteractiveExample("pages/tabbed/pre.html", "tabbed-standard")}}
+{{InteractiveExample("HTML Demo: ", "tabbed-standard")}}
+
+```html interactive-example
+
+ L TE
+ A A
+ C V
+ R A
+ DOU
+ LOU
+ REUSE
+ QUE TU
+ PORTES
+ ET QUI T'
+ ORNE O CI
+ VILISÉ
+ OTE- TU VEUX
+ LA BIEN
+ SI RESPI
+ RER - Apollinaire
+
+```
+
+```css interactive-example
+pre {
+ font-size: 0.7rem;
+ margin: 0;
+}
+```
## Attributes
diff --git a/files/en-us/web/html/element/progress/index.md b/files/en-us/web/html/element/progress/index.md
index a4aed96309ad5f9..429783f9af0ecb8 100644
--- a/files/en-us/web/html/element/progress/index.md
+++ b/files/en-us/web/html/element/progress/index.md
@@ -9,7 +9,20 @@ browser-compat: html.elements.progress
The **``** [HTML](/en-US/docs/Web/HTML) element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
-{{EmbedInteractiveExample("pages/tabbed/progress.html", "tabbed-standard")}}
+{{InteractiveExample("HTML Demo: ", "tabbed-standard")}}
+
+```html interactive-example
+File progress:
+
+70%
+```
+
+```css interactive-example
+label {
+ padding-right: 10px;
+ font-size: 1rem;
+}
+```
## Attributes
diff --git a/files/en-us/web/html/element/q/index.md b/files/en-us/web/html/element/q/index.md
index c8aa07e95df993b..9c8f4e67bdc9ab7 100644
--- a/files/en-us/web/html/element/q/index.md
+++ b/files/en-us/web/html/element/q/index.md
@@ -9,7 +9,22 @@ browser-compat: html.elements.q
The **``** [HTML](/en-US/docs/Web/HTML) element indicates that the enclosed text is a short inline quotation. Most modern browsers implement this by surrounding the text in quotation marks. This element is intended for short quotations that don't require paragraph breaks; for long quotations use the {{HTMLElement("blockquote")}} element.
-{{EmbedInteractiveExample("pages/tabbed/q.html", "tabbed-shorter")}}
+{{InteractiveExample("HTML Demo: ", "tabbed-shorter")}}
+
+```html interactive-example
+
+ When Dave asks HAL to open the pod bay door, HAL answers:
+
+ I'm sorry, Dave. I'm afraid I can't do that.
+
+
+```
+
+```css interactive-example
+q {
+ font-style: italic;
+}
+```
## Attributes
diff --git a/files/en-us/web/html/element/rp/index.md b/files/en-us/web/html/element/rp/index.md
index 321055642485c8a..dede4902ac159a6 100644
--- a/files/en-us/web/html/element/rp/index.md
+++ b/files/en-us/web/html/element/rp/index.md
@@ -9,7 +9,17 @@ browser-compat: html.elements.rp
The **``** [HTML](/en-US/docs/Web/HTML) element is used to provide fall-back parentheses for browsers that do not support display of ruby annotations using the {{HTMLElement("ruby") }} element. One `` element should enclose each of the opening and closing parentheses that wrap the {{HTMLElement("rt")}} element that contains the annotation's text.
-{{EmbedInteractiveExample("pages/tabbed/rp.html", "tabbed-shorter")}}
+{{InteractiveExample("HTML Demo: ", "tabbed-shorter")}}
+
+```html interactive-example
+ 漢 ( kan ) 字 ( ji )
+```
+
+```css interactive-example
+ruby {
+ font-size: 2em;
+}
+```
## Attributes
diff --git a/files/en-us/web/html/element/rt/index.md b/files/en-us/web/html/element/rt/index.md
index 69ac1a3bc2dd190..fda8b1e697f9fc2 100644
--- a/files/en-us/web/html/element/rt/index.md
+++ b/files/en-us/web/html/element/rt/index.md
@@ -9,7 +9,17 @@ browser-compat: html.elements.rt
The **``** [HTML](/en-US/docs/Web/HTML) element specifies the ruby text component of a ruby annotation, which is used to provide pronunciation, translation, or transliteration information for East Asian typography. The `` element must always be contained within a {{HTMLElement("ruby")}} element.
-{{EmbedInteractiveExample("pages/tabbed/rt.html", "tabbed-shorter")}}
+{{InteractiveExample("HTML Demo: ", "tabbed-shorter")}}
+
+```html interactive-example
+ 漢 ( kan ) 字 ( ji )
+```
+
+```css interactive-example
+ruby {
+ font-size: 2em;
+}
+```
See the article about the {{HTMLElement("ruby")}} element for more examples.
diff --git a/files/en-us/web/html/element/rtc/index.md b/files/en-us/web/html/element/rtc/index.md
index 18ac5506ceaac14..41d62420828c7a6 100644
--- a/files/en-us/web/html/element/rtc/index.md
+++ b/files/en-us/web/html/element/rtc/index.md
@@ -11,7 +11,27 @@ browser-compat: html.elements.rtc
The **``** [HTML](/en-US/docs/Web/HTML) element embraces semantic annotations of characters presented in a ruby of {{HTMLElement("rb")}} elements used inside of {{ HTMLElement("ruby") }} element. {{HTMLElement("rb")}} elements can have both pronunciation ({{HTMLElement("rt")}}) and semantic (``) annotations.
-{{EmbedInteractiveExample("pages/tabbed/rtc.html", "tabbed-standard")}}
+{{InteractiveExample("HTML Demo: ", "tabbed-standard")}}
+
+```html interactive-example
+
+
+ 馬 ( mǎ )
+ 來 ( lái )
+ 西 ( xī )
+ 亞 ( yà )
+
+
+ ( Malaysia )
+
+
+```
+
+```css interactive-example
+ruby {
+ font-size: 2em;
+}
+```
## Attributes
diff --git a/files/en-us/web/html/element/ruby/index.md b/files/en-us/web/html/element/ruby/index.md
index bb4daf585c2793f..b91255e96957bb3 100644
--- a/files/en-us/web/html/element/ruby/index.md
+++ b/files/en-us/web/html/element/ruby/index.md
@@ -11,7 +11,17 @@ The **``** [HTML](/en-US/docs/Web/HTML) element represents small annotatio
The term _ruby_ originated as [a unit of measurement used by typesetters](), representing the smallest size that text can be printed on newsprint while remaining legible.
-{{EmbedInteractiveExample("pages/tabbed/ruby.html", "tabbed-shorter")}}
+{{InteractiveExample("HTML Demo: ", "tabbed-shorter")}}
+
+```html interactive-example
+ 明日 ( Ashita )
+```
+
+```css interactive-example
+ruby {
+ font-size: 2em;
+}
+```
## Attributes
diff --git a/files/en-us/web/html/element/s/index.md b/files/en-us/web/html/element/s/index.md
index 76a7c8b57dd00f5..1a542dd9173019a 100644
--- a/files/en-us/web/html/element/s/index.md
+++ b/files/en-us/web/html/element/s/index.md
@@ -9,7 +9,19 @@ browser-compat: html.elements.s
The **``** [HTML](/en-US/docs/Web/HTML) element renders text with a strikethrough, or a line through it. Use the `` element to represent things that are no longer relevant or no longer accurate. However, `` is not appropriate when indicating document edits; for that, use the {{HTMLElement("del")}} and {{HTMLElement("ins")}} elements, as appropriate.
-{{EmbedInteractiveExample("pages/tabbed/s.html", "tabbed-shorter")}}
+{{InteractiveExample("HTML Demo: ", "tabbed-shorter")}}
+
+```html interactive-example
+ There will be a few tickets available at the box office tonight.
+
+SOLD OUT!
+```
+
+```css interactive-example
+/* stylelint-disable-next-line block-no-empty */
+s {
+}
+```
## Attributes
diff --git a/files/en-us/web/html/element/samp/index.md b/files/en-us/web/html/element/samp/index.md
index aea9a6c9524e1e0..9b6642813034109 100644
--- a/files/en-us/web/html/element/samp/index.md
+++ b/files/en-us/web/html/element/samp/index.md
@@ -9,7 +9,21 @@ browser-compat: html.elements.samp
The **``** [HTML](/en-US/docs/Web/HTML) element is used to enclose inline text which represents sample (or quoted) output from a computer program. Its contents are typically rendered using the browser's default monospaced font (such as [Courier]() or Lucida Console).
-{{EmbedInteractiveExample("pages/tabbed/samp.html", "tabbed-shorter")}}
+{{InteractiveExample("HTML Demo: ", "tabbed-shorter")}}
+
+```html interactive-example
+I was trying to boot my computer, but I got this hilarious message:
+
+
+ Keyboard not found
+
+```
+
+```css interactive-example
+samp {
+ font-weight: bold;
+}
+```
## Attributes
diff --git a/files/en-us/web/html/element/section/index.md b/files/en-us/web/html/element/section/index.md
index 07dc0371b628aac..505076bffda34b8 100644
--- a/files/en-us/web/html/element/section/index.md
+++ b/files/en-us/web/html/element/section/index.md
@@ -9,7 +9,30 @@ browser-compat: html.elements.section
The **``** [HTML](/en-US/docs/Web/HTML) element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions.
-{{EmbedInteractiveExample("pages/tabbed/section.html", "tabbed-standard")}}
+{{InteractiveExample("HTML Demo: ", "tabbed-standard")}}
+
+```html interactive-example
+Choosing an Apple
+
+ Introduction
+ This document provides a guide to help with the important task of choosing the correct Apple.
+
+
+
+ Criteria
+
+ There are many different criteria to be considered when choosing an Apple — size, color, firmness, sweetness,
+ tartness...
+
+
+```
+
+```css interactive-example
+h1,
+h2 {
+ margin: 0;
+}
+```
## Attributes
diff --git a/files/en-us/web/html/element/select/index.md b/files/en-us/web/html/element/select/index.md
index 169e7d610c260bf..d824cc7cd684b93 100644
--- a/files/en-us/web/html/element/select/index.md
+++ b/files/en-us/web/html/element/select/index.md
@@ -9,7 +9,34 @@ browser-compat: html.elements.select
The **``** [HTML](/en-US/docs/Web/HTML) element represents a control that provides a menu of options.
-{{EmbedInteractiveExample("pages/tabbed/select.html", "tabbed-standard")}}
+{{InteractiveExample("HTML Demo: ", "tabbed-standard")}}
+
+```html interactive-example
+Choose a pet:
+
+
+ --Please choose an option--
+ Dog
+ Cat
+ Hamster
+ Parrot
+ Spider
+ Goldfish
+
+```
+
+```css interactive-example
+label {
+ font-family: sans-serif;
+ font-size: 1rem;
+ padding-right: 10px;
+}
+
+select {
+ font-size: 0.9rem;
+ padding: 2px 5px;
+}
+```
The above example shows typical `` usage. It is given an `id` attribute to enable it to be associated with a {{htmlelement("label")}} for accessibility purposes, as well as a `name` attribute to represent the name of the associated data point submitted to the server. Each menu option is defined by an {{htmlelement("option")}} element nested inside the ``.
diff --git a/files/en-us/web/html/element/small/index.md b/files/en-us/web/html/element/small/index.md
index 84f8391ac8bfaff..b9d450e87150eb3 100644
--- a/files/en-us/web/html/element/small/index.md
+++ b/files/en-us/web/html/element/small/index.md
@@ -9,7 +9,21 @@ browser-compat: html.elements.small
The **``** [HTML](/en-US/docs/Web/HTML) element represents side-comments and small print, like copyright and legal text, independent of its styled presentation. By default, it renders text within it one font-size smaller, such as from `small` to `x-small`.
-{{EmbedInteractiveExample("pages/tabbed/small.html", "tabbed-shorter")}}
+{{InteractiveExample("HTML Demo: ", "tabbed-shorter")}}
+
+```html interactive-example
+ MDN Web Docs is a learning platform for Web technologies and the software that powers the Web.
+
+The content is licensed under a Creative Commons Attribution-ShareAlike 2.5 Generic License.
+```
+
+```css interactive-example
+small {
+ font-size: 0.7em;
+}
+```
## Attributes
diff --git a/files/en-us/web/html/element/source/index.md b/files/en-us/web/html/element/source/index.md
index 1a6fa18f86c63c4..9a14ea72c64b66e 100644
--- a/files/en-us/web/html/element/source/index.md
+++ b/files/en-us/web/html/element/source/index.md
@@ -9,7 +9,19 @@ browser-compat: html.elements.source
The **``** [HTML](/en-US/docs/Web/HTML) element specifies one or more media resources for the {{HTMLElement("picture")}}, {{HTMLElement("audio")}}, and {{HTMLElement("video")}} elements. It is a {{glossary("void element")}}, which means that it has no content and does not require a closing tag. This element is commonly used to offer the same media content in multiple file formats in order to provide compatibility with a broad range of browsers given their differing support for [image file formats](/en-US/docs/Web/Media/Guides/Formats/Image_types) and [media file formats](/en-US/docs/Web/Media/Guides/Formats).
-{{EmbedInteractiveExample("pages/tabbed/source.html", "tabbed-standard")}}
+{{InteractiveExample("HTML Demo: ", "tabbed-standard")}}
+
+```html interactive-example
+
+ WEBM
+ or
+ MP4
+ video.
+
+```
## Attributes
diff --git a/files/en-us/web/html/element/span/index.md b/files/en-us/web/html/element/span/index.md
index 89697da5c14da1c..5d72cfefebf53ff 100644
--- a/files/en-us/web/html/element/span/index.md
+++ b/files/en-us/web/html/element/span/index.md
@@ -9,7 +9,22 @@ browser-compat: html.elements.span
The **``** [HTML](/en-US/docs/Web/HTML) element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the [`class`](/en-US/docs/Web/HTML/Global_attributes/class) or [`id`](/en-US/docs/Web/HTML/Global_attributes/id) attributes), or because they share attribute values, such as [`lang`](/en-US/docs/Web/HTML/Global_attributes/lang). It should be used only when no other semantic element is appropriate. `` is very much like a {{HTMLElement("div")}} element, but {{HTMLElement("div")}} is a [block-level element](/en-US/docs/Glossary/Block-level_content) whereas a `` is an [inline-level element](/en-US/docs/Glossary/Inline-level_content).
-{{EmbedInteractiveExample("pages/tabbed/span.html", "tabbed-shorter")}}
+{{InteractiveExample("HTML Demo: ", "tabbed-shorter")}}
+
+```html interactive-example
+
+ Add the basil , pine nuts and
+ garlic to a blender and blend into a paste.
+
+
+Gradually add the olive oil while running the blender slowly.
+```
+
+```css interactive-example
+span.ingredient {
+ color: #f00;
+}
+```
## Attributes
diff --git a/files/en-us/web/html/element/strong/index.md b/files/en-us/web/html/element/strong/index.md
index 44d9b203542bf91..93cf0f1f1ca7ee3 100644
--- a/files/en-us/web/html/element/strong/index.md
+++ b/files/en-us/web/html/element/strong/index.md
@@ -9,7 +9,20 @@ browser-compat: html.elements.strong
The **``** [HTML](/en-US/docs/Web/HTML) element indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type.
-{{EmbedInteractiveExample("pages/tabbed/strong.html", "tabbed-shorter")}}
+{{InteractiveExample("HTML Demo: ", "tabbed-shorter")}}
+
+```html interactive-example
+
+ ... the most important rule, the rule you can never forget, no matter how much he cries, no matter how much he begs:
+ never feed him after midnight .
+
+```
+
+```css interactive-example
+p {
+ font-size: 1rem;
+}
+```
## Attributes
diff --git a/files/en-us/web/html/element/style/index.md b/files/en-us/web/html/element/style/index.md
index 785bd86744030d4..c20169ef7ff88fc 100644
--- a/files/en-us/web/html/element/style/index.md
+++ b/files/en-us/web/html/element/style/index.md
@@ -9,7 +9,28 @@ browser-compat: html.elements.style
The **`
+
+This text will be green. Inline styles take precedence over CSS included externally.
+
+The style attribute can override it, though.
+```
+
+```css interactive-example
+p {
+ color: #f00;
+}
+```
The `
+```
+
+```css interactive-example
+img {
+ display: block;
+ margin: 0 auto;
+ width: 260px;
+ height: 260px;
+}
+```
## Specifications
diff --git a/files/en-us/web/html/attributes/accept/index.md b/files/en-us/web/html/attributes/accept/index.md
index 8c84e2997c73ae7..9173cbd7bd19ad7 100644
--- a/files/en-us/web/html/attributes/accept/index.md
+++ b/files/en-us/web/html/attributes/accept/index.md
@@ -10,7 +10,28 @@ browser-compat: html.elements.input.accept
The **`accept`** attribute takes as its value a comma-separated list of one or more file types, or [unique file type specifiers](#unique_file_type_specifiers), describing which file types to allow.
-{{EmbedInteractiveExample("pages/tabbed/attribute-accept.html", "tabbed-shorter")}}
+{{InteractiveExample("HTML Demo: accept", "tabbed-shorter")}}
+
+```html interactive-example
+
+
+
+
+
+
+
+```
+
+```css interactive-example
+label {
+ display: block;
+ margin-top: 1rem;
+}
+
+input {
+ margin-bottom: 1rem;
+}
+```
## Overview
diff --git a/files/en-us/web/html/attributes/autocomplete/index.md b/files/en-us/web/html/attributes/autocomplete/index.md
index 29b5c81f5373c70..a0ee4758e44ad4a 100644
--- a/files/en-us/web/html/attributes/autocomplete/index.md
+++ b/files/en-us/web/html/attributes/autocomplete/index.md
@@ -16,7 +16,25 @@ The HTML `autocomplete` attribute lets web developers specify what if any permis
It is available on {{HTMLElement("input")}} elements that take a text or numeric value as input, {{HTMLElement("textarea")}} elements, {{HTMLElement("select")}} elements, and {{HTMLElement("form")}} elements.
-{{EmbedInteractiveExample("pages/tabbed/attribute-autocomplete.html", "tabbed-shorter")}}
+{{InteractiveExample("HTML Demo: autocomplete", "tabbed-shorter")}}
+
+```html interactive-example
+
+
+
+
+
+
+
+
+```
+
+```css interactive-example
+label {
+ display: block;
+ margin-top: 1rem;
+}
+```
## Description
diff --git a/files/en-us/web/html/attributes/capture/index.md b/files/en-us/web/html/attributes/capture/index.md
index f6efbb6c7823bdf..f3104914cffd49c 100644
--- a/files/en-us/web/html/attributes/capture/index.md
+++ b/files/en-us/web/html/attributes/capture/index.md
@@ -22,7 +22,28 @@ The `capture` attribute takes as its value a string that specifies which camera
> [!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")}}
+{{InteractiveExample("HTML Demo: capture", "tabbed-standard")}}
+
+```html interactive-example
+
+
+
+
+
+
+
+```
+
+```css interactive-example
+label {
+ display: block;
+ margin-top: 1rem;
+}
+
+input {
+ margin-bottom: 1rem;
+}
+```
## Examples
diff --git a/files/en-us/web/html/attributes/disabled/index.md b/files/en-us/web/html/attributes/disabled/index.md
index 6c09f532a0e898c..5dfe1a6b9be8eee 100644
--- a/files/en-us/web/html/attributes/disabled/index.md
+++ b/files/en-us/web/html/attributes/disabled/index.md
@@ -17,7 +17,39 @@ browser-compat:
The Boolean **`disabled`** attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
-{{EmbedInteractiveExample("pages/tabbed/attribute-disabled.html", "tabbed-standard")}}
+{{InteractiveExample("HTML Demo: disabled", "tabbed-standard")}}
+
+```html interactive-example
+
+```
+
+```css interactive-example
+label {
+ display: block;
+ margin-top: 1em;
+}
+
+*:disabled {
+ background-color: dimgrey;
+ color: linen;
+ opacity: 1;
+}
+```
## Overview
diff --git a/files/en-us/web/html/attributes/for/index.md b/files/en-us/web/html/attributes/for/index.md
index 41b7b39a34044c3..62a9a02e60db1e9 100644
--- a/files/en-us/web/html/attributes/for/index.md
+++ b/files/en-us/web/html/attributes/for/index.md
@@ -12,7 +12,56 @@ browser-compat:
The **`for`** attribute is an allowed attribute for {{htmlelement("label")}} and {{htmlelement("output")}}. When used on a `