[docs] Fix HTML validation errors

docs/data/material/components/material-icons/SearchIcons.js

@@ -98,7 +98,7 @@ const iconWidth = 35;
 
 const SVG_ICON_CLASS = 'svg-icon';
 
-const StyledIcon = styled('span')(({ theme }) => ({
+const StyledIcon = styled('div')(({ theme }) => ({
   display: 'inline-flex',
   flexDirection: 'column',
   color: (theme.vars ?? theme).palette.text.secondary,

docs/data/material/customization/transitions/transitions.md

@@ -19,7 +19,7 @@
 
 `transition`: A CSS transition value, which composes all CSS properties that should be transitioned, together with the defined duration, easing and delay.
 
-Use the <code>theme.transitions.create()</code> helper to create consistent transitions for the elements of your UI.</p>
+Use the <code>theme.transitions.create()</code> helper to create consistent transitions for the elements of your UI.
 
 ```js
 theme.transitions.create(['background-color', 'transform']);

docs/data/material/design-resources/material-ui-for-figma/material-ui-for-figma.md

@@ -37,49 +37,49 @@ Visit [the Releases tab on GitHub](https://github.com/mui/mui-design-kits/releas
 The design kit uses Figma's local variables to create a collection of styles comparable to the theme structure of Material UI code.
 Follow the steps in the video below to see all the variables available:
 
-<iframe width="100%" height="490" src="https://www.youtube.com/embed/u3zR6p-OjKQ?si=DDVEsedwmJQeik3T" title="YouTube video player" frameborder="0" allowfullscreen></iframe>
+<iframe height="490" style="aspect-ratio: 16 / 9; width: 100% !important; border: 0" src="https://www.youtube.com/embed/u3zR6p-OjKQ?si=DDVEsedwmJQeik3T" title="YouTube video player" allowfullscreen></iframe>
 
 ### Customizing colors
 
 Use the variables panel to customize colors as shown in the video below:
 
-<iframe width="100%" height="490" src="https://www.youtube.com/embed/YuzkWFm0-bA?si=XvgPR0vNGtiBPqKY" title="YouTube video player" frameborder="0" allowfullscreen></iframe>
+<iframe height="490" style="aspect-ratio: 16 / 9; width: 100% !important; border: 0" src="https://www.youtube.com/embed/YuzkWFm0-bA?si=XvgPR0vNGtiBPqKY" title="YouTube video player" allowfullscreen></iframe>
 
 ### Customizing typography
 
 Typography customization uses local styles rather than local variables.
 The experience is similar to modifying colors, as shown in the video below:
 
-<iframe width="100%" height="490" src="https://www.youtube.com/embed/HepVDfrLmak?si=gklG_3ZZyxDWzlPM" title="YouTube video player" frameborder="0" allowfullscreen></iframe>
+<iframe height="490" style="aspect-ratio: 16 / 9; width: 100% !important; border: 0" src="https://www.youtube.com/embed/HepVDfrLmak?si=gklG_3ZZyxDWzlPM" title="YouTube video player" allowfullscreen></iframe>
 
 ### Switching between light and dark modes
 
 The design kit uses Figma's local variables to let you toggle the variable mode between light and dark, as shown in the video below:
 
-<iframe width="100%" height="490" src="https://www.youtube.com/embed/ydTF1HhLnJM?si=1Fj4CFLgVavfg4Fz" title="YouTube video player" frameborder="0" allowfullscreen></iframe>
+<iframe height="490" style="aspect-ratio: 16 / 9; width: 100% !important; border: 0" src="https://www.youtube.com/embed/ydTF1HhLnJM?si=1Fj4CFLgVavfg4Fz" title="YouTube video player" allowfullscreen></iframe>
 
 ## Components
 
 ### Editing the main components
 
 You can use the [Similayer](https://www.figma.com/community/plugin/735733267883397781/similayer) plugin to select multiple components at once that share some property.
 
-<iframe width="100%" height="490" src="https://www.youtube.com/embed/eHBk0FbS0P8?si=QbOiMU2F1yvGB6s8" title="YouTube video player" frameborder="0" allowfullscreen></iframe>
+<iframe height="490" style="aspect-ratio: 16 / 9; width: 100% !important; border: 0" src="https://www.youtube.com/embed/eHBk0FbS0P8?si=QbOiMU2F1yvGB6s8" title="YouTube video player" allowfullscreen></iframe>
 
 ### Table component
 
 #### Adding new columns
 
 The video below shows how to add new columns by detaching cells from their row components, allowing you to freely move content around.
 
-<iframe src="https://www.loom.com/embed/6dd71cc374bc4d84af35ebb75d107d38?sid=1d3a4790-4c28-433e-94ce-97dd969601dd" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="width: 100%; height: 500px;"></iframe>
+<iframe src="https://www.loom.com/embed/6dd71cc374bc4d84af35ebb75d107d38?sid=1d3a4790-4c28-433e-94ce-97dd969601dd" webkitallowfullscreen mozallowfullscreen allowfullscreen style="width: 100%; height: 500px; border: 0"></iframe>
 
 #### Adding new columns in the main component
 
 The Table and Data Grid components come with a limited number of columns by default.
 The video below shows how to add new columns by copying cells directly on the main component:
 
-<iframe width="100%" height="490" src="https://www.youtube.com/embed/s_n3LHm1daI?si=_QbXvtYPkc8EBd5d" title="YouTube video player" frameborder="0" allowfullscreen></iframe>
+<iframe height="490" style="aspect-ratio: 16 / 9; width: 100% !important; border: 0" src="https://www.youtube.com/embed/s_n3LHm1daI?si=_QbXvtYPkc8EBd5d" title="YouTube video player" allowfullscreen></iframe>
 
 ## Code sync (beta)
 

docs/data/material/experimental-api/pigment-css/pigment-css.md

@@ -6,7 +6,7 @@
 Pigment CSS is currently in the early alpha stage of development. We're actively working on improving its performance and stability. If you find any problem, please open a [GitHub issue](https://github.com/mui/pigment-css/issues).
 :::
 
-<iframe width="100%" height="400" src="https://www.youtube.com/embed/UVeDpUey5Es?si=w8OtdStXHtWWIODa" title="YouTube video player: Getting Started with Pigment CSS" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+<iframe height="400" style="aspect-ratio: 16 / 9; width: 100% !important; border: 0" src="https://www.youtube.com/embed/UVeDpUey5Es?si=w8OtdStXHtWWIODa" title="YouTube video player: Getting Started with Pigment CSS" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 
 [Pigment CSS](https://github.com/mui/pigment-css) is a zero-runtime CSS-in-JS library that pre-compiles at build time, making it compatible with React Server Components and providing you with significant performance improvements over other styling engines.
 

docs/data/material/getting-started/support/support.md

@@ -82,7 +82,7 @@ This includes issues introduced by external sources, like browser upgrades or ch
 |              ^3.0.0 | 2018-08-27 | ❌                                                                 |
 |              ^2.0.0 | /          | ❌                                                                 |
 |              ^1.0.0 | 2018-06-18 | ❌                                                                 |
-|             <=1.0.0 | 2014-10-05 | ❌                                                                 |
+|          &lt;=1.0.0 | 2014-10-05 | ❌                                                                 |
 
 ## Community
 

docs/data/material/getting-started/templates/checkout/components/AddressForm.js

@@ -20,9 +20,9 @@ export default function AddressForm() {
         <OutlinedInput
           id="first-name"
           name="first-name"
-          type="name"
+          type="text"
           placeholder="John"
-          autoComplete="first name"
+          autoComplete="given-name"
           required
           size="small"
         />
@@ -34,9 +34,9 @@ export default function AddressForm() {
         <OutlinedInput
           id="last-name"
           name="last-name"
-          type="last-name"
+          type="text"
           placeholder="Snow"
-          autoComplete="last name"
+          autoComplete="family-name"
           required
           size="small"
         />
@@ -48,7 +48,7 @@ export default function AddressForm() {
         <OutlinedInput
           id="address1"
           name="address1"
-          type="address1"
+          type="text"
           placeholder="Street name and number"
           autoComplete="shipping address-line1"
           required
@@ -60,7 +60,7 @@ export default function AddressForm() {
         <OutlinedInput
           id="address2"
           name="address2"
-          type="address2"
+          type="text"
           placeholder="Apartment, suite, unit, etc. (optional)"
           autoComplete="shipping address-line2"
           required
@@ -74,9 +74,9 @@ export default function AddressForm() {
         <OutlinedInput
           id="city"
           name="city"
-          type="city"
+          type="text"
           placeholder="New York"
-          autoComplete="City"
+          autoComplete="address-level2"
           required
           size="small"
         />
@@ -88,9 +88,9 @@ export default function AddressForm() {
         <OutlinedInput
           id="state"
           name="state"
-          type="state"
+          type="text"
           placeholder="NY"
-          autoComplete="State"
+          autoComplete="address-level1"
           required
           size="small"
         />
@@ -102,7 +102,7 @@ export default function AddressForm() {
         <OutlinedInput
           id="zip"
           name="zip"
-          type="zip"
+          type="text"
           placeholder="12345"
           autoComplete="shipping postal-code"
           required
@@ -116,9 +116,9 @@ export default function AddressForm() {
         <OutlinedInput
           id="country"
           name="country"
-          type="country"
+          type="text"
           placeholder="United States"
-          autoComplete="shipping country"
+          autoComplete="shipping country-name"
           required
           size="small"
         />

docs/data/material/getting-started/templates/checkout/components/AddressForm.tsx

@@ -20,9 +20,9 @@ export default function AddressForm() {
         <OutlinedInput
           id="first-name"
           name="first-name"
-          type="name"
+          type="text"
           placeholder="John"
-          autoComplete="first name"
+          autoComplete="given-name"
           required
           size="small"
         />
@@ -34,9 +34,9 @@ export default function AddressForm() {
         <OutlinedInput
           id="last-name"
           name="last-name"
-          type="last-name"
+          type="text"
           placeholder="Snow"
-          autoComplete="last name"
+          autoComplete="family-name"
           required
           size="small"
         />
@@ -48,7 +48,7 @@ export default function AddressForm() {
         <OutlinedInput
           id="address1"
           name="address1"
-          type="address1"
+          type="text"
           placeholder="Street name and number"
           autoComplete="shipping address-line1"
           required
@@ -60,7 +60,7 @@ export default function AddressForm() {
         <OutlinedInput
           id="address2"
           name="address2"
-          type="address2"
+          type="text"
           placeholder="Apartment, suite, unit, etc. (optional)"
           autoComplete="shipping address-line2"
           required
@@ -74,9 +74,9 @@ export default function AddressForm() {
         <OutlinedInput
           id="city"
           name="city"
-          type="city"
+          type="text"
           placeholder="New York"
-          autoComplete="City"
+          autoComplete="address-level2"
           required
           size="small"
         />
@@ -88,9 +88,9 @@ export default function AddressForm() {
         <OutlinedInput
           id="state"
           name="state"
-          type="state"
+          type="text"
           placeholder="NY"
-          autoComplete="State"
+          autoComplete="address-level1"
           required
           size="small"
         />
@@ -102,7 +102,7 @@ export default function AddressForm() {
         <OutlinedInput
           id="zip"
           name="zip"
-          type="zip"
+          type="text"
           placeholder="12345"
           autoComplete="shipping postal-code"
           required
@@ -116,9 +116,9 @@ export default function AddressForm() {
         <OutlinedInput
           id="country"
           name="country"
-          type="country"
+          type="text"
           placeholder="United States"
-          autoComplete="shipping country"
+          autoComplete="shipping country-name"
           required
           size="small"
         />

docs/pages/blog/2020-introducing-sketch.md

@@ -55,7 +55,7 @@ The UI kit was created specifically for Material UI, a popular React UI library
 
 The following video demonstrates how the symbols can be used to design an invoice page.
 
-<iframe style="width: 100%; max-width: 648px;" height="364" src="https://www.youtube.com/embed/DTU6r_VE2C4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<iframe height="364" style="aspect-ratio: 16 / 9; width: 100% !important; max-width: 648px; border: 0" src="https://www.youtube.com/embed/DTU6r_VE2C4" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
 Sketch Cloud preview: https://mui.com/store/previews/sketch-react/.
 

docs/pages/blog/introducing-pigment-css.md

@@ -17,7 +17,7 @@ manualCard: true
 
 Check out MUI's CEO Olivier Tassinari introducing Pigment CSS at React Conf 2024:
 
-<iframe src="https://www.youtube.com/embed/n_0cz-JwlsU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="width: 100%; height: 100%; aspect-ratio: 16/9;"></iframe>
+<iframe src="https://www.youtube.com/embed/n_0cz-JwlsU" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="width: 100%; height: 100%; aspect-ratio: 16/9; border: 0"></iframe>
 
 In the era of React Server Components and the Next.js App Router, component libraries like Material UI have an opportunity to gain performance improvements by moving rendering work from the client to the server.
 

docs/pages/blog/material-ui-v1-is-out.md

@@ -18,7 +18,7 @@ We are so excited about this release, as it's setting a new course for the proje
 
 ✨✨✨ See the **[1.0.0 Release Note](https://github.com/mui/material-ui/releases/tag/v1.0.0)** on GitHub. ✨✨✨
 
-<iframe src="https://codesandbox.io/embed/4j7m47vlm4" width="100%" height="300px" frameborder=0></iframe>
+<iframe src="https://codesandbox.io/embed/4j7m47vlm4" style="width: 100%; height: 300px; border: 0"></iframe>
 
 <p class="blog-description">One button</p>
 
@@ -125,7 +125,9 @@ Material UI is an MIT-licensed open-source project. It's an independent project
 - [Become a backer or sponsor on Open Collective](https://opencollective.com/mui-org).
 - [Become a backer or sponsor on Patreon](https://www.patreon.com/oliviertassinari).
 
-![Our gold sponsors](https://cdn-images-1.medium.com/v2/resize:fit:2000/1*fx_BaOxYY0ZJo3n9iXI1Jg.png)<p class="blog-description">Our gold sponsors</p>
+![Our gold sponsors](https://cdn-images-1.medium.com/v2/resize:fit:2000/1*fx_BaOxYY0ZJo3n9iXI1Jg.png)
+
+<p class="blog-description">Our gold sponsors</p>
 
 - GitHub: https://github.com/mui/material-ui ⭐
 - X: https://x.com/MUI_hq

docs/pages/material-ui/api/input-adornment.json

@@ -44,7 +44,7 @@
     {
       "key": "hiddenLabel",
       "className": "MuiInputAdornment-hiddenLabel",
-      "description": "Styles applied if the adornment is used inside <FormControl hiddenLabel />.",
+      "description": "Styles applied if the adornment is used inside `<FormControl hiddenLabel />`.",
       "isGlobal": false
     },
     {
@@ -74,7 +74,7 @@
     {
       "key": "sizeSmall",
       "className": "MuiInputAdornment-sizeSmall",
-      "description": "Styles applied if the adornment is used inside <FormControl size=\"small\" />.",
+      "description": "Styles applied if the adornment is used inside `<FormControl size=\"small\" />`.",
       "isGlobal": false
     },
     {

docs/src/components/home/ProductsSwitcher.tsx

@@ -33,6 +33,7 @@ function ProductItem({
       }}
     >
       <Box
+        component="span"
         sx={{
           p: 2,
           display: 'flex',
@@ -42,6 +43,7 @@ function ProductItem({
         }}
       >
         <Box
+          component="span"
           sx={{
             height: 32,
             width: 32,
@@ -54,13 +56,18 @@ function ProductItem({
           {icon}
         </Box>
         <span>
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-            <Typography variant="body2" sx={{ color: 'text.primary', fontWeight: 'semiBold' }}>
+          <Box component="span" sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+            <Typography
+              component="span"
+              variant="body2"
+              sx={{ color: 'text.primary', fontWeight: 'semiBold' }}
+            >
               {name}
             </Typography>
             {chip}
           </Box>
           <Typography
+            component="span"
             variant="body2"
             sx={{ color: 'text.secondary', fontWeight: 'regular', my: 0.5 }}
           >

docs/src/modules/components/ApiPage.tsx

@@ -220,7 +220,7 @@ export default function ApiPage(props: ApiPageProps) {
               icon={<WarningRoundedIcon fontSize="small" />}
               sx={{ mt: 1.5, mb: 3 }}
             >
-              <span
+              <div
                 dangerouslySetInnerHTML={{
                   __html: deprecationInfo || t('api-docs.defaultDeprecationMessage'),
                 }}
@@ -239,7 +239,7 @@ export default function ApiPage(props: ApiPageProps) {
           </Typography>
           <Heading hash="demos" />
           <Alert severity="success" icon={<VerifiedRoundedIcon fontSize="small" />}>
-            <span
+            <div
               dangerouslySetInnerHTML={{
                 __html: `<p>For examples and details on the usage of this React component, visit the component demo pages:</p>
               ${demos}`,
@@ -260,7 +260,7 @@ export default function ApiPage(props: ApiPageProps) {
             <React.Fragment>
               <br />
               <br />
-              <span
+              <div
                 dangerouslySetInnerHTML={{
                   __html: componentDescription,
                 }}
@@ -275,7 +275,7 @@ export default function ApiPage(props: ApiPageProps) {
           />
           {cssComponent && (
             <React.Fragment>
-              <span
+              <div
                 dangerouslySetInnerHTML={{
                   __html: t('api-docs.cssComponent').replace(/{{name}}/, pageContent.name),
                 }}