URL Viewer & Inspector

Final URL: https://developer.mozilla.org/en-US/ HTTP: 200 UA: Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)

Catatan: CSP ketat bisa membuat sebagian resource tidak termuat dalam pratinjau.

Download

<!doctype html>
      <html
        lang="en-US"
        data-theme="light dark"
        data-renderer="Homepage"
        
        
      >
        <head>
          <meta charset="UTF-8" />
          <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
          />
          <title>MDN Web Docs</title>
          
          <script>try {
  document.documentElement.dataset.theme =
    localStorage.getItem("theme") || "light dark";
} catch (error) {
  console.warn("Unable to set theme", error);
}

try {
  if (localStorage.getItem("nop") === "yes") {
    document.documentElement.dataset["nop"] = "yes";
  }
} catch (error) {
  console.warn("Unable to set nop", error);
}
</script>
          <link rel="stylesheet" href="/static/client/styles-global.849fd11663b6b2b5.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-homepage.0980eec27925cc11.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-homepage-header.da8a69fafe1cfb00.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-homepage-hero.61cf31e2c2f1b72c.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-mandala.8fbfeb0567dbde40.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-homepage-body.22274e9a4a78b7ae.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-featured-articles.a2c1f1fd278c9256.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-latest-news.afe0cccaa067269f.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-recent-contributions.ddcab7ad78446b98.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-homepage-footer.5d6588cf8c9b4dc6.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/3391.cf8a6eadcf4a9e30.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-homepage-contributor-spotlight.5dc97e2f6ae1056d.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-page-layout.5a4354f33e894319.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-a11y-menu.5796ee87cb69f93f.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-navigation.3a34ee593a554c40.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-logo.aea5ff6edf1b9cfb.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-menu.3376b3e11656fba0.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-breadcrumbs-bar.9a51a3c76a6231d0.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-breadcrumbs.d06ce8d09f42feb8.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-footer.a2850e459e2d290b.css" fetchpriority="high" />
          <link
                rel="preload"
                href="/static/client/jetbrains-mono-latin.119994ed445212c7.woff2"
                as="font"
                type="font/woff2"
                crossorigin="anonymous"
                fetchpriority="low"
              /><link
                rel="preload"
                href="/static/client/inter-latin.9a3b1bc220d426ef.woff2"
                as="font"
                type="font/woff2"
                crossorigin="anonymous"
                fetchpriority="low"
              />
          <script
            data-cfasync="false"
            data-report-only="on"
            data-prompt="0"
            src="https://transcend-cdn.com/cm/d556c3a1-e57c-4bdf-a490-390a1aebf6dd/airgap.js"
          ></script>
          <script src="/static/client/runtime.acb3350e06728bd3.js" type="module"></script><script src="/static/client/1111.53dba753dc3eb961.js" type="module"></script><script src="/static/client/8903.f870aafb338b203a.js" type="module"></script><script src="/static/client/index.47bfdcf23c06c7c8.js" type="module"></script>
          
    <link
      rel="icon"
      sizes="32x32"
      href="https://developer.mozilla.org/favicon.ico"
    />
    <link
      rel="icon"
      type="image/svg+xml"
      href="https://developer.mozilla.org/favicon.svg"
    />
   <meta name="description" content="The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps." /><meta name="og:url" content="https://developer.mozilla.org/en-US/" /><meta name="og:title" content="MDN Web Docs" /><meta name="og:locale" content="en_US" /><meta name="og:description" content="The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps." /><meta name="og:image" content="https://developer.mozilla.org/mdn-social-image.46ac2375.png" /><meta name="og:image:type" content="image/png" /><meta name="og:image:height" content="1024" /><meta name="og:image:width" content="1024" /><meta name="og:image:alt" content="The MDN logo" /><meta name="og:site_name" content="MDN Web Docs" /><meta name="twitter:card" content="summary" /><meta name="twitter:creator" content="MozDevNet" />
          <link
            rel="canonical"
            href="https://developer.mozilla.org/en-US/"
          />
          <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
          <link rel="manifest" href="/manifest.json" />
          <link
            rel="search"
            type="application/opensearchdescription+xml"
            href="/opensearch.xml"
            title="MDN Web Docs"
          />
          <link
            rel="alternate"
            type="application/rss+xml"
            title="MDN Blog RSS Feed"
            href="https://developer.mozilla.org/en-US/blog/rss.xml"
          />
        </head>
        
      <body class="page-layout">
        <ul class="a11y-menu">
      <li>
        <a href="#content" data-glean-id="a11y_menu: click #content"
          >Skip to main content</a
        >
      </li>
      <li>
        <a href="#search" data-glean-id="a11y_menu: click #search"
          >Skip to search</a
        >
      </li>
    </ul>
        <div class="page-layout__banner" data-scheme="dark">
          <mdn-placement-top></mdn-placement-top>
        </div>
        <header class="page-layout__header">
          
      <nav class="navigation" data-scheme="dark" data-open="false">
        <div class="navigation__logo">
      <a href="/en-US/" class="logo">
        <svg
          class="logo__image"
          width="83"
          height="24"
          viewBox="0 0 83 24"
          role="img"
        >
          <title>MDN</title>
          <path
            class="logo__letter"
            d="M9.4 0 2.81 21.17H.12L6.69 0H9.4Zm2.38 0v21.17H9.4V0h2.4Zm9.27 0-6.56 21.17H11.8L18.36 0h2.69Zm2.39 0v21.17h-2.4V0h2.4Z"
          />
          <path
            class="logo__text"
            d="M45.55 16.83h-3.93v-1.27h.87v-3.63c0-.85-.16-1.45-.48-1.82a1.65 1.65 0 0 0-1.3-.52c-.74 0-1.3.25-1.66.78a2.98 2.98 0 0 0-.58 1.58v3.59h1.38v1.26h-3.93v-1.26h.87v-3.6c0-.88-.16-1.48-.48-1.83a1.7 1.7 0 0 0-1.29-.52 1.93 1.93 0 0 0-1.65.75 2.85 2.85 0 0 0-.58 1.6v3.62h1.59v1.27h-4.64v-1.27h1.37V9.75h-1.4V8.46h3.08v1.47c.28-.48.62-.87 1.08-1.2a3 3 0 0 1 1.68-.45c.67 0 1.22.16 1.73.48.5.32.85.8 1.03 1.47.25-.57.62-1.03 1.13-1.4.5-.37 1.1-.55 1.81-.55.8 0 1.5.25 2.05.75.55.51.85 1.3.85 2.35v4.18h1.4v1.27Zm9.77 0H52.3v-1.66c-.27.51-.66.95-1.13 1.29-.56.4-1.23.59-1.9.55-1.11 0-2-.37-2.67-1.12a4.41 4.41 0 0 1-1-3.06c0-1.15.3-2.2.93-3.15.6-.94 1.58-1.43 2.94-1.43 1.36 0 2.25.5 2.83 1.5V5.22h-2V3.93h3.63v11.63h1.38v1.27Zm-3.06-3.86v-1.02a2.28 2.28 0 0 0-.73-1.67 2.4 2.4 0 0 0-1.66-.65 2.18 2.18 0 0 0-1.88.9 3.63 3.63 0 0 0-.65 2.2c0 .95.23 1.68.7 2.19.45.5 1.03.76 1.7.76.73 0 1.33-.3 1.79-.88.48-.6.71-1.21.73-1.83Zm14.14 3.86h-4.43v-1.27h1.37v-3.63c0-.85-.16-1.45-.5-1.82a1.68 1.68 0 0 0-1.31-.52c-.71 0-1.29.23-1.7.69a2.52 2.52 0 0 0-.67 1.6v3.66h1.38v1.26H56.1v-1.26h1.38v-5.8h-1.42V8.47h3.12V9.9c.6-1.06 1.57-1.6 2.92-1.6.83 0 1.54.26 2.12.77.57.5.85 1.28.85 2.34v4.19h1.38v1.24h-.05Z"
          />
          <path class="logo__cursor" d="M67.71 21.98H83V24H67.71v-2.02Z" />
        </svg>
      </a>
    </div>
        <div class="navigation__search" data-view="mobile">
          <mdn-search-button><template shadowroot="open" shadowrootmode="open"><style>.mdn-search-button{align-items:center;background-color:var(--color-background-page);border:1px solid var(--color-border-primary);border-radius:var(--radius-full);color:var(--color-text-primary);cursor:pointer;display:flex;justify-content:space-between;margin:0;padding:.25rem .25rem .25rem .75rem;width:5rem}.mdn-search-button:hover{background-color:var(--color-background-secondary)}.mdn-search-button:before{content:"";height:18px;width:15px;--csstools-light-dark-toggle-95231fd5-0:var(--csstools-color-scheme--light) var(--color-blue-80);border-bottom:2px solid var(--csstools-light-dark-toggle-95231fd5-0,var(--color-blue-50))}@supports (color:light-dark(red,red)){.mdn-search-button:before{border-bottom:2px solid light-dark(var(--color-blue-50),var(--color-blue-80))}}</style><button
      class="mdn-search-button"
      title="Search the site"
      
      data-glean-id="quick-search-open: menu"
    >
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg>
    </button></template></mdn-search-button>
        </div>
        <button
          class="navigation__button"
          type="button"
          aria-expanded="false"
          aria-controls="navigation__popup"
          aria-label="Toggle navigation"
        ></button>
        <div class="navigation__popup" id="navigation__popup">
          <div class="navigation__menu">
      <nav class="menu">
        <div class="menu__tab" data-section="html">
            <mdn-dropdown
                  
                 data-glean-toggle-open="menu_toggle: html"><template shadowroot="open" shadowrootmode="open"><style>:host{display:contents}:host(:not([loaded],:focus-within)) slot[name=dropdown]{display:none}</style>
      <slot name="button" ></slot>
      <slot name="dropdown" ></slot>
    </template>
                  <button class="menu__tab-button" type="button" slot="button">
                    <span class="menu__tab-label"
                          >HTML</span
                        >
                  </button>
                  <div class="menu__panel" slot="dropdown">
                    <p class="menu__panel-title">
                      <a
        
        href="/en-US/docs/Web/HTML"
        
        
        data-glean-id="menu_click_menu: html -&gt; /en-US/docs/Web/HTML"
        >HTML: Markup language</a
      >
                    </p>
                    <div class="menu__panel-content">
                      <dl>
                              <dt>HTML reference</dt>
                              <dd><ul>
                          <li>
                                <a
        
        href="/en-US/docs/Web/HTML/Reference/Elements"
        
        
        data-glean-id="menu_click_submenu: html -&gt; /en-US/docs/Web/HTML/Reference/Elements"
        >Elements</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/HTML/Reference/Global_attributes"
        
        
        data-glean-id="menu_click_submenu: html -&gt; /en-US/docs/Web/HTML/Reference/Global_attributes"
        >Global attributes</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/HTML/Reference/Attributes"
        
        
        data-glean-id="menu_click_submenu: html -&gt; /en-US/docs/Web/HTML/Reference/Attributes"
        >Attributes</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/HTML/Reference"
        aria-label="See all HTML references"
        title="See all HTML references"
        data-glean-id="menu_click_submenu: html -&gt; /en-US/docs/Web/HTML/Reference"
        >See all…</a
      >
                              </li>
                        </ul></dd>
                            </dl><dl>
                              <dt>HTML guides</dt>
                              <dd><ul>
                          <li>
                                <a
        
        href="/en-US/docs/Web/HTML/Guides/Responsive_images"
        
        
        data-glean-id="menu_click_submenu: html -&gt; /en-US/docs/Web/HTML/Guides/Responsive_images"
        >Responsive images</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/HTML/Guides/Cheatsheet"
        
        
        data-glean-id="menu_click_submenu: html -&gt; /en-US/docs/Web/HTML/Guides/Cheatsheet"
        >HTML cheatsheet</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/HTML/Guides/Date_and_time_formats"
        
        
        data-glean-id="menu_click_submenu: html -&gt; /en-US/docs/Web/HTML/Guides/Date_and_time_formats"
        >Date &amp; time formats</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/HTML/Guides"
        aria-label="See all HTML guides"
        title="See all HTML guides"
        data-glean-id="menu_click_submenu: html -&gt; /en-US/docs/Web/HTML/Guides"
        >See all…</a
      >
                              </li>
                        </ul></dd>
                            </dl><dl>
                              <dt>Markup languages</dt>
                              <dd><ul>
                          <li>
                                <a
        
        href="/en-US/docs/Web/SVG"
        
        
        data-glean-id="menu_click_submenu: html -&gt; /en-US/docs/Web/SVG"
        >SVG</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/MathML"
        
        
        data-glean-id="menu_click_submenu: html -&gt; /en-US/docs/Web/MathML"
        >MathML</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/XML"
        
        
        data-glean-id="menu_click_submenu: html -&gt; /en-US/docs/Web/XML"
        >XML</a
      >
                              </li>
                        </ul></dd>
                            </dl>
                    </div>
                  </div>
                </mdn-dropdown>
          </div><div class="menu__tab" data-section="css">
            <mdn-dropdown
                  
                 data-glean-toggle-open="menu_toggle: css"><template shadowroot="open" shadowrootmode="open"><style>:host{display:contents}:host(:not([loaded],:focus-within)) slot[name=dropdown]{display:none}</style>
      <slot name="button" ></slot>
      <slot name="dropdown" ></slot>
    </template>
                  <button class="menu__tab-button" type="button" slot="button">
                    <span class="menu__tab-label"
                          >CSS</span
                        >
                  </button>
                  <div class="menu__panel" slot="dropdown">
                    <p class="menu__panel-title">
                      <a
        
        href="/en-US/docs/Web/CSS"
        
        
        data-glean-id="menu_click_menu: css -&gt; /en-US/docs/Web/CSS"
        >CSS: Styling language</a
      >
                    </p>
                    <div class="menu__panel-content">
                      <dl>
                              <dt>CSS reference</dt>
                              <dd><ul>
                          <li>
                                <a
        
        href="/en-US/docs/Web/CSS/Reference/Properties"
        
        
        data-glean-id="menu_click_submenu: css -&gt; /en-US/docs/Web/CSS/Reference/Properties"
        >Properties</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/CSS/Reference/Selectors"
        
        
        data-glean-id="menu_click_submenu: css -&gt; /en-US/docs/Web/CSS/Reference/Selectors"
        >Selectors</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/CSS/Reference/At-rules"
        
        
        data-glean-id="menu_click_submenu: css -&gt; /en-US/docs/Web/CSS/Reference/At-rules"
        >At-rules</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/CSS/Reference/Values"
        
        
        data-glean-id="menu_click_submenu: css -&gt; /en-US/docs/Web/CSS/Reference/Values"
        >Values</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/CSS/Reference"
        aria-label="See all CSS references"
        title="See all CSS references"
        data-glean-id="menu_click_submenu: css -&gt; /en-US/docs/Web/CSS/Reference"
        >See all…</a
      >
                              </li>
                        </ul></dd>
                            </dl><dl>
                              <dt>CSS guides</dt>
                              <dd><ul>
                          <li>
                                <a
        
        href="/en-US/docs/Web/CSS/Guides/Box_model/Introduction"
        
        
        data-glean-id="menu_click_submenu: css -&gt; /en-US/docs/Web/CSS/Guides/Box_model/Introduction"
        >Box model</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/CSS/Guides/Animations/Using"
        
        
        data-glean-id="menu_click_submenu: css -&gt; /en-US/docs/Web/CSS/Guides/Animations/Using"
        >Animations</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts"
        
        
        data-glean-id="menu_click_submenu: css -&gt; /en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts"
        >Flexbox</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/CSS/Guides/Colors/Applying_color"
        
        
        data-glean-id="menu_click_submenu: css -&gt; /en-US/docs/Web/CSS/Guides/Colors/Applying_color"
        >Colors</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/CSS/Guides"
        aria-label="See all CSS guides"
        title="See all CSS guides"
        data-glean-id="menu_click_submenu: css -&gt; /en-US/docs/Web/CSS/Guides"
        >See all…</a
      >
                              </li>
                        </ul></dd>
                            </dl><dl>
                              <dt>Layout cookbook</dt>
                              <dd><ul>
                          <li>
                                <a
        
        href="/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts"
        
        
        data-glean-id="menu_click_submenu: css -&gt; /en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts"
        >Column layouts</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element"
        
        
        data-glean-id="menu_click_submenu: css -&gt; /en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element"
        >Centering an element</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card"
        
        
        data-glean-id="menu_click_submenu: css -&gt; /en-US/docs/Web/CSS/How_to/Layout_cookbook/Card"
        >Card component</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/CSS/How_to/Layout_cookbook"
        
        
        data-glean-id="menu_click_submenu: css -&gt; /en-US/docs/Web/CSS/How_to/Layout_cookbook"
        >See all…</a
      >
                              </li>
                        </ul></dd>
                            </dl>
                    </div>
                  </div>
                </mdn-dropdown>
          </div><div class="menu__tab" data-section="javascript">
            <mdn-dropdown
                  
                 data-glean-toggle-open="menu_toggle: javascript"><template shadowroot="open" shadowrootmode="open"><style>:host{display:contents}:host(:not([loaded],:focus-within)) slot[name=dropdown]{display:none}</style>
      <slot name="button" ></slot>
      <slot name="dropdown" ></slot>
    </template>
                  <button class="menu__tab-button" type="button" slot="button">
                    <span class="menu__tab-label" data-type="long"
                            >JavaScript</span
                          ><span class="menu__tab-label" data-type="short"
                            >JS</span
                          >
                  </button>
                  <div class="menu__panel" slot="dropdown">
                    <p class="menu__panel-title">
                      <a
        
        href="/en-US/docs/Web/JavaScript"
        
        
        data-glean-id="menu_click_menu: javascript -&gt; /en-US/docs/Web/JavaScript"
        >JavaScript: Scripting language</a
      >
                    </p>
                    <div class="menu__panel-content">
                      <dl>
                              <dt>JS reference</dt>
                              <dd><ul>
                          <li>
                                <a
        
        href="/en-US/docs/Web/JavaScript/Reference/Global_Objects"
        
        
        data-glean-id="menu_click_submenu: javascript -&gt; /en-US/docs/Web/JavaScript/Reference/Global_Objects"
        >Standard built-in objects</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/JavaScript/Reference/Operators"
        
        
        data-glean-id="menu_click_submenu: javascript -&gt; /en-US/docs/Web/JavaScript/Reference/Operators"
        >Expressions &amp; operators</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/JavaScript/Reference/Statements"
        
        
        data-glean-id="menu_click_submenu: javascript -&gt; /en-US/docs/Web/JavaScript/Reference/Statements"
        >Statements &amp; declarations</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/JavaScript/Reference/Functions"
        
        
        data-glean-id="menu_click_submenu: javascript -&gt; /en-US/docs/Web/JavaScript/Reference/Functions"
        >Functions</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/JavaScript/Reference"
        aria-label="See all JavaScript references"
        title="See all JavaScript references"
        data-glean-id="menu_click_submenu: javascript -&gt; /en-US/docs/Web/JavaScript/Reference"
        >See all…</a
      >
                              </li>
                        </ul></dd>
                            </dl><dl>
                              <dt>JS guides</dt>
                              <dd><ul>
                          <li>
                                <a
        
        href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling"
        
        
        data-glean-id="menu_click_submenu: javascript -&gt; /en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling"
        >Control flow &amp; error handing</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration"
        
        
        data-glean-id="menu_click_submenu: javascript -&gt; /en-US/docs/Web/JavaScript/Guide/Loops_and_iteration"
        >Loops and iteration</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/JavaScript/Guide/Working_with_objects"
        
        
        data-glean-id="menu_click_submenu: javascript -&gt; /en-US/docs/Web/JavaScript/Guide/Working_with_objects"
        >Working with objects</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/JavaScript/Guide/Using_classes"
        
        
        data-glean-id="menu_click_submenu: javascript -&gt; /en-US/docs/Web/JavaScript/Guide/Using_classes"
        >Using classes</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/JavaScript/Guide"
        aria-label="See all JavaScript guides"
        title="See all JavaScript guides"
        data-glean-id="menu_click_submenu: javascript -&gt; /en-US/docs/Web/JavaScript/Guide"
        >See all…</a
      >
                              </li>
                        </ul></dd>
                            </dl>
                    </div>
                  </div>
                </mdn-dropdown>
          </div><div class="menu__tab" data-section="webapis">
            <mdn-dropdown
                  
                 data-glean-toggle-open="menu_toggle: webapis"><template shadowroot="open" shadowrootmode="open"><style>:host{display:contents}:host(:not([loaded],:focus-within)) slot[name=dropdown]{display:none}</style>
      <slot name="button" ></slot>
      <slot name="dropdown" ></slot>
    </template>
                  <button class="menu__tab-button" type="button" slot="button">
                    <span class="menu__tab-label"
                          >Web APIs</span
                        >
                  </button>
                  <div class="menu__panel" slot="dropdown">
                    <p class="menu__panel-title">
                      <a
        
        href="/en-US/docs/Web/API"
        
        
        data-glean-id="menu_click_menu: webapis -&gt; /en-US/docs/Web/API"
        >Web APIs: Programming interfaces</a
      >
                    </p>
                    <div class="menu__panel-content">
                      <dl>
                              <dt>Web API reference</dt>
                              <dd><ul>
                          <li>
                                <a
        
        href="/en-US/docs/Web/API/File_System_API"
        
        
        data-glean-id="menu_click_submenu: webapis -&gt; /en-US/docs/Web/API/File_System_API"
        >File system API</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/API/Fetch_API"
        
        
        data-glean-id="menu_click_submenu: webapis -&gt; /en-US/docs/Web/API/Fetch_API"
        >Fetch API</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/API/Geolocation_API"
        
        
        data-glean-id="menu_click_submenu: webapis -&gt; /en-US/docs/Web/API/Geolocation_API"
        >Geolocation API</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/API/HTML_DOM_API"
        
        
        data-glean-id="menu_click_submenu: webapis -&gt; /en-US/docs/Web/API/HTML_DOM_API"
        >HTML DOM API</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/API/Push_API"
        
        
        data-glean-id="menu_click_submenu: webapis -&gt; /en-US/docs/Web/API/Push_API"
        >Push API</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/API/Service_Worker_API"
        
        
        data-glean-id="menu_click_submenu: webapis -&gt; /en-US/docs/Web/API/Service_Worker_API"
        >Service worker API</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/API"
        aria-label="See all Web API guides"
        title="See all Web API guides"
        data-glean-id="menu_click_submenu: webapis -&gt; /en-US/docs/Web/API"
        >See all…</a
      >
                              </li>
                        </ul></dd>
                            </dl><dl>
                              <dt>Web API guides</dt>
                              <dd><ul>
                          <li>
                                <a
        
        href="/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API"
        
        
        data-glean-id="menu_click_submenu: webapis -&gt; /en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API"
        >Using the Web animation API</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/API/Fetch_API/Using_Fetch"
        
        
        data-glean-id="menu_click_submenu: webapis -&gt; /en-US/docs/Web/API/Fetch_API/Using_Fetch"
        >Using the Fetch API</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/API/History_API/Working_with_the_History_API"
        
        
        data-glean-id="menu_click_submenu: webapis -&gt; /en-US/docs/Web/API/History_API/Working_with_the_History_API"
        >Working with the History API</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API"
        
        
        data-glean-id="menu_click_submenu: webapis -&gt; /en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API"
        >Using the Web speech API</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers"
        
        
        data-glean-id="menu_click_submenu: webapis -&gt; /en-US/docs/Web/API/Web_Workers_API/Using_web_workers"
        >Using web workers</a
      >
                              </li>
                        </ul></dd>
                            </dl>
                    </div>
                  </div>
                </mdn-dropdown>
          </div><div class="menu__tab" data-section="all">
            <mdn-dropdown
                  
                 data-glean-toggle-open="menu_toggle: all"><template shadowroot="open" shadowrootmode="open"><style>:host{display:contents}:host(:not([loaded],:focus-within)) slot[name=dropdown]{display:none}</style>
      <slot name="button" ></slot>
      <slot name="dropdown" ></slot>
    </template>
                  <button class="menu__tab-button" type="button" slot="button">
                    <span class="menu__tab-label"
                          >All</span
                        >
                  </button>
                  <div class="menu__panel" slot="dropdown">
                    <p class="menu__panel-title">
                      <a
        
        href="/en-US/docs/Web"
        
        
        data-glean-id="menu_click_menu: all -&gt; /en-US/docs/Web"
        >All web technology</a
      >
                    </p>
                    <div class="menu__panel-content">
                      <dl>
                              <dt>Technologies</dt>
                              <dd><ul>
                          <li>
                                <a
        
        href="/en-US/docs/Web/Accessibility"
        
        
        data-glean-id="menu_click_submenu: all -&gt; /en-US/docs/Web/Accessibility"
        >Accessibility</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/HTTP"
        
        
        data-glean-id="menu_click_submenu: all -&gt; /en-US/docs/Web/HTTP"
        >HTTP</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/URI"
        
        
        data-glean-id="menu_click_submenu: all -&gt; /en-US/docs/Web/URI"
        >URI</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Mozilla/Add-ons/WebExtensions"
        
        
        data-glean-id="menu_click_submenu: all -&gt; /en-US/docs/Mozilla/Add-ons/WebExtensions"
        >Web extensions</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/WebAssembly"
        
        
        data-glean-id="menu_click_submenu: all -&gt; /en-US/docs/WebAssembly"
        >WebAssembly</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/WebDriver"
        
        
        data-glean-id="menu_click_submenu: all -&gt; /en-US/docs/Web/WebDriver"
        >WebDriver</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web"
        aria-label="See all web technology references"
        title="See all web technology references"
        data-glean-id="menu_click_submenu: all -&gt; /en-US/docs/Web"
        >See all…</a
      >
                              </li>
                        </ul></dd>
                            </dl><dl>
                              <dt>Topics</dt>
                              <dd><ul>
                          <li>
                                <a
        
        href="/en-US/docs/Web/Media"
        
        
        data-glean-id="menu_click_submenu: all -&gt; /en-US/docs/Web/Media"
        >Media</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/Performance"
        
        
        data-glean-id="menu_click_submenu: all -&gt; /en-US/docs/Web/Performance"
        >Performance</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/Privacy"
        
        
        data-glean-id="menu_click_submenu: all -&gt; /en-US/docs/Web/Privacy"
        >Privacy</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/Security"
        
        
        data-glean-id="menu_click_submenu: all -&gt; /en-US/docs/Web/Security"
        >Security</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/Progressive_web_apps"
        
        
        data-glean-id="menu_click_submenu: all -&gt; /en-US/docs/Web/Progressive_web_apps"
        >Progressive web apps</a
      >
                              </li>
                        </ul></dd>
                            </dl>
                    </div>
                  </div>
                </mdn-dropdown>
          </div><div class="menu__tab" data-section="learn">
            <mdn-dropdown
                  
                 data-glean-toggle-open="menu_toggle: learn"><template shadowroot="open" shadowrootmode="open"><style>:host{display:contents}:host(:not([loaded],:focus-within)) slot[name=dropdown]{display:none}</style>
      <slot name="button" ></slot>
      <slot name="dropdown" ></slot>
    </template>
                  <button class="menu__tab-button" type="button" slot="button">
                    <span class="menu__tab-label"
                          >Learn</span
                        >
                  </button>
                  <div class="menu__panel" slot="dropdown">
                    <p class="menu__panel-title">
                      <a
        
        href="/en-US/docs/Learn_web_development"
        
        
        data-glean-id="menu_click_menu: learn -&gt; /en-US/docs/Learn_web_development"
        >Learn web development</a
      >
                    </p>
                    <div class="menu__panel-content">
                      <dl>
                              <dt>Frontend developer course</dt>
                              <dd><ul>
                          <li>
                                <a
        
        href="/en-US/docs/Learn_web_development/Getting_started"
        
        
        data-glean-id="menu_click_submenu: learn -&gt; /en-US/docs/Learn_web_development/Getting_started"
        >Getting started modules</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Learn_web_development/Core"
        
        
        data-glean-id="menu_click_submenu: learn -&gt; /en-US/docs/Learn_web_development/Core"
        >Core modules</a
      >
                              </li><li>
                                <a
                                        class=""
                                        
                                        href="/en-US/curriculum/"
                                        
                                        
                                        data-glean-id="menu_click_submenu: learn -&gt; /en-US/curriculum/"
                                        >MDN Curriculum</a
                                      >
                              </li><li>
                                <a
                                        class="external"
                                        
                                        href="https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar"
                                        
                                        
                                        data-glean-id="menu_click_submenu: learn -&gt; https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar"
                                        >Check out the video course from Scrimba, our partner</a
                                      >
                              </li>
                        </ul></dd>
                            </dl><dl>
                              <dt>Learn HTML</dt>
                              <dd><ul>
                          <li>
                                <a
        
        href="/en-US/docs/Learn_web_development/Core/Structuring_content"
        
        
        data-glean-id="menu_click_submenu: learn -&gt; /en-US/docs/Learn_web_development/Core/Structuring_content"
        >Structuring content with HTML module</a
      >
                              </li>
                        </ul></dd>
                            </dl><dl>
                              <dt>Learn CSS</dt>
                              <dd><ul>
                          <li>
                                <a
        
        href="/en-US/docs/Learn_web_development/Core/Styling_basics"
        
        
        data-glean-id="menu_click_submenu: learn -&gt; /en-US/docs/Learn_web_development/Core/Styling_basics"
        >CSS styling basics module</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Learn_web_development/Core/CSS_layout"
        
        
        data-glean-id="menu_click_submenu: learn -&gt; /en-US/docs/Learn_web_development/Core/CSS_layout"
        >CSS layout module</a
      >
                              </li>
                        </ul></dd>
                            </dl><dl>
                              <dt>Learn JavaScript</dt>
                              <dd><ul>
                          <li>
                                <a
        
        href="/en-US/docs/Learn_web_development/Core/Scripting"
        
        
        data-glean-id="menu_click_submenu: learn -&gt; /en-US/docs/Learn_web_development/Core/Scripting"
        >Dynamic scripting with JavaScript module</a
      >
                              </li>
                        </ul></dd>
                            </dl>
                    </div>
                  </div>
                </mdn-dropdown>
          </div><div class="menu__tab" data-section="tools">
            <mdn-dropdown
                  
                 data-glean-toggle-open="menu_toggle: tools"><template shadowroot="open" shadowrootmode="open"><style>:host{display:contents}:host(:not([loaded],:focus-within)) slot[name=dropdown]{display:none}</style>
      <slot name="button" ></slot>
      <slot name="dropdown" ></slot>
    </template>
                  <button class="menu__tab-button" type="button" slot="button">
                    <span class="menu__tab-label"
                          >Tools</span
                        >
                  </button>
                  <div class="menu__panel" slot="dropdown">
                    <p class="menu__panel-title">
                      Discover our tools
                    </p>
                    <div class="menu__panel-content">
                      <ul>
                          <li>
                                <a
                                        class="menu__panel-icon"
                                        data-icon="circle-play"
                                        href="/en-US/play"
                                        
                                        
                                        data-glean-id="menu_click_submenu: tools -&gt; /en-US/play"
                                        >Playground</a
                                      >
                              </li><li>
                                <a
                                        class="menu__panel-icon"
                                        data-icon="shield-check"
                                        href="/en-US/observatory"
                                        
                                        
                                        data-glean-id="menu_click_submenu: tools -&gt; /en-US/observatory"
                                        >HTTP Observatory</a
                                      >
                              </li>
                        </ul><ul>
                          <li>
                                <a
        
        href="/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator"
        
        
        data-glean-id="menu_click_submenu: tools -&gt; /en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator"
        >Border-image generator</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator"
        
        
        data-glean-id="menu_click_submenu: tools -&gt; /en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator"
        >Border-radius generator</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator"
        
        
        data-glean-id="menu_click_submenu: tools -&gt; /en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator"
        >Box-shadow generator</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter"
        
        
        data-glean-id="menu_click_submenu: tools -&gt; /en-US/docs/Web/CSS/Guides/Colors/Color_format_converter"
        >Color format converter</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/CSS/Guides/Colors/Color_mixer"
        
        
        data-glean-id="menu_click_submenu: tools -&gt; /en-US/docs/Web/CSS/Guides/Colors/Color_mixer"
        >Color mixer</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator"
        
        
        data-glean-id="menu_click_submenu: tools -&gt; /en-US/docs/Web/CSS/Guides/Shapes/Shape_generator"
        >Shape generator</a
      >
                              </li>
                        </ul>
                    </div>
                  </div>
                </mdn-dropdown>
          </div><div class="menu__tab" data-section="about">
            <mdn-dropdown
                  
                 data-glean-toggle-open="menu_toggle: about"><template shadowroot="open" shadowrootmode="open"><style>:host{display:contents}:host(:not([loaded],:focus-within)) slot[name=dropdown]{display:none}</style>
      <slot name="button" ></slot>
      <slot name="dropdown" ></slot>
    </template>
                  <button class="menu__tab-button" type="button" slot="button">
                    <span class="menu__tab-label"
                          >About</span
                        >
                  </button>
                  <div class="menu__panel" slot="dropdown">
                    <p class="menu__panel-title">
                      Get to know MDN better
                    </p>
                    <div class="menu__panel-content">
                      <ul>
                          <li>
                                <a
                                        class="menu__panel-icon"
                                        data-icon="mdn-m"
                                        href="/en-US/about"
                                        
                                        
                                        data-glean-id="menu_click_submenu: about -&gt; /en-US/about"
                                        >About MDN</a
                                      >
                              </li><li>
                                <a
                                        class="menu__panel-icon"
                                        data-icon="chart-no-axes-combined"
                                        href="/en-US/advertising"
                                        
                                        
                                        data-glean-id="menu_click_submenu: about -&gt; /en-US/advertising"
                                        >Advertise with us</a
                                      >
                              </li>
                        </ul><ul>
                          <li>
                                <a
                                        class="menu__panel-icon"
                                        data-icon="users"
                                        href="/en-US/community"
                                        
                                        
                                        data-glean-id="menu_click_submenu: about -&gt; /en-US/community"
                                        >Community</a
                                      >
                              </li><li>
                                <a
                                        class="menu__panel-icon external"
                                        data-icon="github"
                                        href="https://github.com/mdn"
                                        
                                        
                                        data-glean-id="menu_click_submenu: about -&gt; https://github.com/mdn"
                                        >MDN on GitHub</a
                                      >
                              </li>
                        </ul>
                    </div>
                  </div>
                </mdn-dropdown>
          </div><div class="menu__tab" data-section="blog">
            <a
                  class="menu__tab-link"
                  href="/en-US/blog/"
                  data-glean-id="menu_click_link: top-level -&gt; /en-US/blog/"
                  >Blog</a
                >
          </div>
      </nav>
    </div>
          <div class="navigation__search" data-view="desktop">
            <mdn-search-button><template shadowroot="open" shadowrootmode="open"><style>.mdn-search-button{align-items:center;background-color:var(--color-background-page);border:1px solid var(--color-border-primary);border-radius:var(--radius-full);color:var(--color-text-primary);cursor:pointer;display:flex;justify-content:space-between;margin:0;padding:.25rem .25rem .25rem .75rem;width:5rem}.mdn-search-button:hover{background-color:var(--color-background-secondary)}.mdn-search-button:before{content:"";height:18px;width:15px;--csstools-light-dark-toggle-95231fd5-0:var(--csstools-color-scheme--light) var(--color-blue-80);border-bottom:2px solid var(--csstools-light-dark-toggle-95231fd5-0,var(--color-blue-50))}@supports (color:light-dark(red,red)){.mdn-search-button:before{border-bottom:2px solid light-dark(var(--color-blue-50),var(--color-blue-80))}}</style><button
      class="mdn-search-button"
      title="Search the site"
      
      data-glean-id="quick-search-open: menu"
    >
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg>
    </button></template></mdn-search-button>
          </div>
          <mdn-user-menu></mdn-user-menu>
        </div>
      </nav>
      <mdn-search-modal id="search"></mdn-search-modal>
     
      <div class="breadcrumbs-bar" data-scheme="dark">
         
      <ol
        class="breadcrumbs"
        vocab="https://schema.org/"
        typeof="BreadcrumbList"
      >
        
            <li property="itemListElement" typeof="ListItem">
              <a
                href="/en-US/"
                property="item"
                typeof="WebPage"
                data-glean-id="breadcrumb_click: 1/1"
                ><span property="name">MDN</span></a
              >
              <meta property="position" content="1" />
            </li>
          
      </ol>
    
        
        <mdn-color-theme><template shadowroot="open" shadowrootmode="open"><style>.color-theme{--color-theme-light-dark:url(/static/ssr/contrast.d86e85c43de8dee8.svg);--color-theme-light:url(/static/ssr/sun.1d7c3ad7bf6fc390.svg);--color-theme-dark:url(/static/ssr/moon.74026b9da82b0694.svg);position:relative}.color-theme__button{align-items:center;background-color:initial;border:none;color:inherit;column-gap:.25rem;cursor:pointer;display:flex;font:inherit;margin:0;padding:0 .5rem}.color-theme__button:is(:hover,:focus,[aria-expanded=true]){background-color:var(--color-background-secondary)}@media (width <= 769px){.color-theme__button>span{display:none}}.color-theme__button:before{background-color:currentcolor;content:"";height:1.25rem;-webkit-mask-size:cover;mask-size:cover;width:1.25rem}.color-theme__button[data-mode="light dark"]:before{-webkit-mask-image:var(--color-theme-light-dark);mask-image:var(--color-theme-light-dark)}.color-theme__button[data-mode=light]:before{-webkit-mask-image:var(--color-theme-light);mask-image:var(--color-theme-light)}.color-theme__button[data-mode=dark]:before{-webkit-mask-image:var(--color-theme-dark);mask-image:var(--color-theme-dark)}.color-theme__dropdown{border:1px solid var(--color-border-primary);padding:.75rem;position:absolute;right:0;z-index:1}.color-theme__dropdown,.color-theme__list{background-color:var(--color-background-primary);margin:0;width:max-content}.color-theme__list{list-style:none;padding:0}.color-theme__option{align-items:center;background-color:initial;border:none;color:var(--color-text-primary);column-gap:.25rem;cursor:pointer;display:flex;font:inherit;margin:0;padding:.25rem;width:100%}.color-theme__option:hover{background-color:var(--color-background-secondary)}.color-theme__option:before{background-color:currentcolor;content:"";height:1.25rem;-webkit-mask-size:cover;mask-size:cover;width:1.25rem}.color-theme__option[data-mode="light dark"]:before{-webkit-mask-image:var(--color-theme-light-dark);mask-image:var(--color-theme-light-dark)}.color-theme__option[data-mode=light]:before{-webkit-mask-image:var(--color-theme-light);mask-image:var(--color-theme-light)}.color-theme__option[data-mode=dark]:before{-webkit-mask-image:var(--color-theme-dark);mask-image:var(--color-theme-dark)}.color-theme__option[data-current]{background:var(--color-background-secondary)}</style><div class="color-theme">
      <mdn-dropdown  defer-hydration><template shadowroot="open" shadowrootmode="open"><style>:host{display:contents}:host(:not([loaded],:focus-within)) slot[name=dropdown]{display:none}</style>
      <slot name="button" ></slot>
      <slot name="dropdown" ></slot>
    </template>
        <button
          part="button"
          slot="button"
          class="color-theme__button"
          data-mode="light dark"
          type="button"
          aria-label="Switch color theme"
        >
          <span>Theme</span>
        </button>
        <div
          slot="dropdown"
          class="color-theme__dropdown"
          id="color-theme__dropdown"
        >
          <ul class="color-theme__list">
            <li>
                  <button
                    class="color-theme__option"
                    data-mode="light dark"
                    data-current
                    type="button"
                    
                  >
                    OS default
                  </button>
                </li><li>
                  <button
                    class="color-theme__option"
                    data-mode="light"
                    
                    type="button"
                    
                  >
                    Light
                  </button>
                </li><li>
                  <button
                    class="color-theme__option"
                    data-mode="dark"
                    
                    type="button"
                    
                  >
                    Dark
                  </button>
                </li>
          </ul>
        </div>
      </mdn-dropdown>
    </div></template></mdn-color-theme>
        <mdn-language-switcher
      
      
      
      
      
     locale="en-US" native="English (US)" translations="[{&quot;locale&quot;:&quot;en-US&quot;,&quot;title&quot;:&quot;MDN Web Docs&quot;,&quot;native&quot;:&quot;English (US)&quot;},{&quot;locale&quot;:&quot;es&quot;,&quot;title&quot;:&quot;MDN Web Docs&quot;,&quot;native&quot;:&quot;Español&quot;},{&quot;locale&quot;:&quot;fr&quot;,&quot;title&quot;:&quot;MDN Web Docs&quot;,&quot;native&quot;:&quot;Français&quot;},{&quot;locale&quot;:&quot;ja&quot;,&quot;title&quot;:&quot;MDN Web Docs&quot;,&quot;native&quot;:&quot;日本語&quot;},{&quot;locale&quot;:&quot;ko&quot;,&quot;title&quot;:&quot;MDN Web Docs&quot;,&quot;native&quot;:&quot;한국어&quot;},{&quot;locale&quot;:&quot;pt-BR&quot;,&quot;title&quot;:&quot;MDN Web Docs&quot;,&quot;native&quot;:&quot;Português (do Brasil)&quot;},{&quot;locale&quot;:&quot;ru&quot;,&quot;title&quot;:&quot;MDN Web Docs&quot;,&quot;native&quot;:&quot;Русский&quot;},{&quot;locale&quot;:&quot;zh-CN&quot;,&quot;title&quot;:&quot;MDN Web Docs&quot;,&quot;native&quot;:&quot;中文 (简体)&quot;},{&quot;locale&quot;:&quot;zh-TW&quot;,&quot;title&quot;:&quot;MDN Web Docs&quot;,&quot;native&quot;:&quot;正體中文 (繁體)&quot;},{&quot;locale&quot;:&quot;de&quot;,&quot;title&quot;:&quot;MDN Web Docs&quot;,&quot;native&quot;:&quot;Deutsch&quot;}]" url="/en-US/"><template shadowroot="open" shadowrootmode="open"><style>*,:after,:before{box-sizing:border-box}button,input,select,textarea{font:inherit}button{color:inherit;cursor:pointer}img{height:auto;max-width:100%}a{color:var(--color-link-normal)}[hidden]{display:none!important}.language-switcher{position:relative}.language-switcher__button{align-items:center;background-color:initial;border:none;color:inherit;column-gap:.25rem;cursor:pointer;display:flex;font:inherit;margin:0;padding:0 .5rem}.language-switcher__button:is(:hover,:focus,[aria-expanded=true]){background-color:var(--color-background-secondary)}@media screen and (width <= 480px){.language-switcher__button>span{display:none}}.language-switcher__button:before{background-color:currentcolor;content:"";height:1.25rem;-webkit-mask-image:url(/static/ssr/languages.dcba936080e5be86.svg);mask-image:url(/static/ssr/languages.dcba936080e5be86.svg);-webkit-mask-size:cover;mask-size:cover;width:1.25rem}.language-switcher__dropdown{background-color:var(--color-background-primary);border:1px solid var(--color-border-primary);margin:0;padding:.75rem;position:absolute;right:0;width:max-content;z-index:1}.language_switcher__remember{border-bottom:1px solid var(--color-border-primary);display:flex;font-size:var(--font-size-small);place-items:center;width:100%}.language_switcher__remember mdn-switch{padding:.25rem}:is(.language_switcher__remember mdn-switch):hover{background-color:var(--color-background-secondary)}.language-switcher__list{background-color:var(--color-background-primary);list-style:none;margin:0;padding:0;width:100%}.language-switcher__option{align-items:center;background-color:initial;border:none;color:var(--color-text-primary);column-gap:.25rem;display:flex;font:inherit;margin:0;padding:.25rem;-webkit-text-decoration:none;text-decoration:none;width:100%}.language-switcher__option:hover,.language-switcher__option[data-current]{background-color:var(--color-background-secondary)}</style><div class="language-switcher">
      <mdn-dropdown defer-hydration><template shadowroot="open" shadowrootmode="open"><style>:host{display:contents}:host(:not([loaded],:focus-within)) slot[name=dropdown]{display:none}</style>
      <slot name="button" ></slot>
      <slot name="dropdown" ></slot>
    </template>
        <button
          part="button"
          slot="button"
          class="language-switcher__button"
          type="button"
          aria-labelledby="current-locale"
        >
          <span id="current-locale">English (US)</span>
        </button>
        <div
          slot="dropdown"
          class="language-switcher__dropdown"
          id="language-switcher__dropdown"
        >
          <div class="language_switcher__remember">
            <mdn-switch
              
              
               defer-hydration><template shadowroot="open" shadowrootmode="open"><style>@property --switch-position{syntax:"<percentage>";inherits:false;initial-value:0}.switch{cursor:pointer;display:flex;gap:.5em;place-items:center}.switch__input{--switch-size:1.25em;appearance:none;background-color:var(--color-text-secondary);background-image:radial-gradient(circle at calc(var(--switch-size)/2),var(--color-background-primary) calc((var(--switch-size)/2)*.8),#0000 calc((var(--switch-size)/2)*.8 + 1px));background-position:var(--switch-position) 0;background-repeat:no-repeat;background-size:var(--switch-size);border-radius:var(--radius-full);display:inline-block;height:var(--switch-size);margin:0;transition:--switch-position .2s;width:calc(var(--switch-size)*1.6)}.switch__input:checked{--switch-position:100%;background-color:var(--color-link-normal)}.switch__input:focus-visible{outline:2px solid var(--color-link-normal);outline-offset:2px}.switch__input:active:not(:disabled){filter:brightness(1.2)}.switch__input:disabled{opacity:.7}</style> <label class="switch">
      <input
        class="switch__input"
        type="checkbox"
        
        
        
      />
      <slot></slot>
    </label></template>Remember language</mdn-switch
            >
            <mdn-button
              
              
              
              
              
              
               variant="plain" icon-only href="https://github.com/orgs/mdn/discussions/739" target="_blank" title="Enable this setting to always switch to the current language when available. (Click to learn more.)" defer-hydration><template shadowroot="open" shadowrootmode="open"><style>.button{align-items:center;background-color:initial;border:1px solid #0000;border-radius:.25rem;color:var(--color-text-primary);column-gap:.3125em;cursor:pointer;display:inline-flex;font-family:var(--font-family-text);font-size:.875em;font-weight:450;justify-content:center;line-height:var(--font-line-ui);margin:0;padding:.5em;-webkit-text-decoration:none;text-decoration:none;vertical-align:middle}.button[data-variant=primary]{--csstools-light-dark-toggle-33eaa513-0:var(--csstools-color-scheme--light) var(--color-black);color:var(--csstools-light-dark-toggle-33eaa513-0,var(--color-white));--csstools-light-dark-toggle-33eaa513-1:var(--csstools-color-scheme--light) var(--color-white);background-color:var(--csstools-light-dark-toggle-33eaa513-1,var(--color-black))}@supports (color:light-dark(red,red)){.button[data-variant=primary]{background-color:light-dark(var(--color-black),var(--color-white));color:light-dark(var(--color-white),var(--color-black))}}.button[data-variant=primary]:hover{--csstools-light-dark-toggle-33eaa513-2:var(--csstools-color-scheme--light) var(--color-gray-80);background-color:var(--csstools-light-dark-toggle-33eaa513-2,var(--color-gray-20))}@supports (color:light-dark(red,red)){.button[data-variant=primary]:hover{background-color:light-dark(var(--color-gray-20),var(--color-gray-80))}}.button[data-variant=primary][data-action=positive]{color:var(--color-white);--csstools-light-dark-toggle-33eaa513-3:var(--csstools-color-scheme--light) var(--color-green-20);background-color:var(--csstools-light-dark-toggle-33eaa513-3,var(--color-green-50))}@supports (color:light-dark(red,red)){.button[data-variant=primary][data-action=positive]{background-color:light-dark(var(--color-green-50),var(--color-green-20))}}.button[data-variant=primary][data-action=positive]:hover{--csstools-light-dark-toggle-33eaa513-4:var(--csstools-color-scheme--light) var(--color-green-50);background-color:var(--csstools-light-dark-toggle-33eaa513-4,var(--color-green-20))}@supports (color:light-dark(red,red)){.button[data-variant=primary][data-action=positive]:hover{background-color:light-dark(var(--color-green-20),var(--color-green-50))}}.button[data-variant=primary][data-action=negative]{color:var(--color-white);--csstools-light-dark-toggle-33eaa513-5:var(--csstools-color-scheme--light) var(--color-red-20);background-color:var(--csstools-light-dark-toggle-33eaa513-5,var(--color-red-50))}@supports (color:light-dark(red,red)){.button[data-variant=primary][data-action=negative]{background-color:light-dark(var(--color-red-50),var(--color-red-20))}}.button[data-variant=primary][data-action=negative]:hover{--csstools-light-dark-toggle-33eaa513-6:var(--csstools-color-scheme--light) var(--color-red-50);background-color:var(--csstools-light-dark-toggle-33eaa513-6,var(--color-red-20))}@supports (color:light-dark(red,red)){.button[data-variant=primary][data-action=negative]:hover{background-color:light-dark(var(--color-red-20),var(--color-red-50))}}.button[data-variant=secondary]{border-color:currentcolor}.button[data-variant=secondary]:hover{--csstools-light-dark-toggle-33eaa513-7:var(--csstools-color-scheme--light) var(--color-gray-20);background-color:var(--csstools-light-dark-toggle-33eaa513-7,var(--color-gray-80))}@supports (color:light-dark(red,red)){.button[data-variant=secondary]:hover{background-color:light-dark(var(--color-gray-80),var(--color-gray-20))}}.button[data-variant=secondary][data-action=positive]{--csstools-light-dark-toggle-33eaa513-8:var(--csstools-color-scheme--light) var(--color-green-80);color:var(--csstools-light-dark-toggle-33eaa513-8,var(--color-green-50))}@supports (color:light-dark(red,red)){.button[data-variant=secondary][data-action=positive]{color:light-dark(var(--color-green-50),var(--color-green-80))}}.button[data-variant=secondary][data-action=positive]:hover{--csstools-light-dark-toggle-33eaa513-9:var(--csstools-color-scheme--light) var(--color-green-10);background-color:var(--csstools-light-dark-toggle-33eaa513-9,var(--color-green-90))}@supports (color:light-dark(red,red)){.button[data-variant=secondary][data-action=positive]:hover{background-color:light-dark(var(--color-green-90),var(--color-green-10))}}.button[data-variant=secondary][data-action=negative]{--csstools-light-dark-toggle-33eaa513-10:var(--csstools-color-scheme--light) var(--color-red-80);color:var(--csstools-light-dark-toggle-33eaa513-10,var(--color-red-50))}@supports (color:light-dark(red,red)){.button[data-variant=secondary][data-action=negative]{color:light-dark(var(--color-red-50),var(--color-red-80))}}.button[data-variant=secondary][data-action=negative]:hover{--csstools-light-dark-toggle-33eaa513-11:var(--csstools-color-scheme--light) var(--color-red-10);background-color:var(--csstools-light-dark-toggle-33eaa513-11,var(--color-red-90))}@supports (color:light-dark(red,red)){.button[data-variant=secondary][data-action=negative]:hover{background-color:light-dark(var(--color-red-90),var(--color-red-10))}}.button[data-variant=plain]:hover{--csstools-light-dark-toggle-33eaa513-12:var(--csstools-color-scheme--light) var(--color-gray-20);background-color:var(--csstools-light-dark-toggle-33eaa513-12,var(--color-gray-80))}@supports (color:light-dark(red,red)){.button[data-variant=plain]:hover{background-color:light-dark(var(--color-gray-80),var(--color-gray-20))}}.button[data-variant=plain][data-action=positive]{--csstools-light-dark-toggle-33eaa513-13:var(--csstools-color-scheme--light) var(--color-green-80);color:var(--csstools-light-dark-toggle-33eaa513-13,var(--color-green-50))}@supports (color:light-dark(red,red)){.button[data-variant=plain][data-action=positive]{color:light-dark(var(--color-green-50),var(--color-green-80))}}.button[data-variant=plain][data-action=positive]:hover{--csstools-light-dark-toggle-33eaa513-14:var(--csstools-color-scheme--light) var(--color-green-10);background-color:var(--csstools-light-dark-toggle-33eaa513-14,var(--color-green-90))}@supports (color:light-dark(red,red)){.button[data-variant=plain][data-action=positive]:hover{background-color:light-dark(var(--color-green-90),var(--color-green-10))}}.button[data-variant=plain][data-action=negative]{--csstools-light-dark-toggle-33eaa513-15:var(--csstools-color-scheme--light) var(--color-red-80);color:var(--csstools-light-dark-toggle-33eaa513-15,var(--color-red-50))}@supports (color:light-dark(red,red)){.button[data-variant=plain][data-action=negative]{color:light-dark(var(--color-red-50),var(--color-red-80))}}.button[data-variant=plain][data-action=negative]:hover{--csstools-light-dark-toggle-33eaa513-16:var(--csstools-color-scheme--light) var(--color-red-10);background-color:var(--csstools-light-dark-toggle-33eaa513-16,var(--color-red-90))}@supports (color:light-dark(red,red)){.button[data-variant=plain][data-action=negative]:hover{background-color:light-dark(var(--color-red-90),var(--color-red-10))}}.button[disabled]{--csstools-light-dark-toggle-33eaa513-17:var(--csstools-color-scheme--light) var(--color-gray-60)!important;color:var(--csstools-light-dark-toggle-33eaa513-17,var(--color-gray-40))!important;cursor:default;--csstools-light-dark-toggle-33eaa513-18:var(--csstools-color-scheme--light) var(--color-gray-20)!important;background-color:var(--csstools-light-dark-toggle-33eaa513-18,var(--color-gray-80))!important;border-color:#0000}@supports (color:light-dark(red,red)){.button[disabled]{background-color:light-dark(var(--color-gray-80),var(--color-gray-20))!important;color:light-dark(var(--color-gray-40),var(--color-gray-60))!important}}.button .icon{display:flex}.button svg{height:1.25em;width:1.25em}.button .label{padding-block:.125em;padding-inline:.0625em}:host{display:inline-flex;vertical-align:middle}.button{box-sizing:border-box;height:100%;width:100%}</style>
        <a
          class="button"
          href="https://github.com/orgs/mdn/discussions/739"
          target="_blank"
          
          aria-labelledby="label-2ej22uvxh8r"
          data-variant="plain"
          
          part="button"
        >
          <span class="icon" part="icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4m0-4h.01"/></svg></span>
    <span id="label-2ej22uvxh8r" class="label" hidden part="label"
      ><slot></slot></span
    >
  
        </a>
      </template>Learn more</mdn-button
            >
          </div>
          <ul class="language-switcher__list">
            
          <li>
            <a
              class="language-switcher__option"
              
              
              href="/de/"
              data-glean-id="language: en-US -&gt; de"
              >Deutsch</a
            >
          </li>
        
          <li>
            <a
              class="language-switcher__option"
              data-current
              
              href="/en-US/"
              data-glean-id="language: en-US -&gt; en-US"
              >English (US)</a
            >
          </li>
        
          <li>
            <a
              class="language-switcher__option"
              
              
              href="/es/"
              data-glean-id="language: en-US -&gt; es"
              >Español</a
            >
          </li>
        
          <li>
            <a
              class="language-switcher__option"
              
              
              href="/fr/"
              data-glean-id="language: en-US -&gt; fr"
              >Français</a
            >
          </li>
        
          <li>
            <a
              class="language-switcher__option"
              
              
              href="/ja/"
              data-glean-id="language: en-US -&gt; ja"
              >日本語</a
            >
          </li>
        
          <li>
            <a
              class="language-switcher__option"
              
              
              href="/ko/"
              data-glean-id="language: en-US -&gt; ko"
              >한국어</a
            >
          </li>
        
          <li>
            <a
              class="language-switcher__option"
              
              
              href="/pt-BR/"
              data-glean-id="language: en-US -&gt; pt-BR"
              >Português (do Brasil)</a
            >
          </li>
        
          <li>
            <a
              class="language-switcher__option"
              
              
              href="/ru/"
              data-glean-id="language: en-US -&gt; ru"
              >Русский</a
            >
          </li>
        
          <li>
            <a
              class="language-switcher__option"
              
              
              href="/zh-CN/"
              data-glean-id="language: en-US -&gt; zh-CN"
              >中文 (简体)</a
            >
          </li>
        
          <li>
            <a
              class="language-switcher__option"
              
              
              href="/zh-TW/"
              data-glean-id="language: en-US -&gt; zh-TW"
              >正體中文 (繁體)</a
            >
          </li>
        
          </ul>
        </div>
      </mdn-dropdown>
    </div></template></mdn-language-switcher>
      </div>
    
        </header>
        <div class="page-layout__main">
        <div id="content" class="homepage homepage--dark">
          
      <div class="homepage-header">
        <div class="homepage-header__copy"><section class="homepage-hero">
      <h1>
        Resources for Developers,<br/> by Developers
      </h1>
      <p>
        Documenting <a href="/en-US/docs/Web/CSS" data-glean-id="homepage_hero: css">CSS</a>, <a href="/en-US/docs/Web/HTML" data-glean-id="homepage_hero: html">HTML</a>, and <a href="/en-US/docs/Web/JavaScript" data-glean-id="homepage_hero: js">JavaScript</a>, since 2005.
      </p>
    </section></div>
        <div class="homepage-header__search">
          <mdn-homepage-search><template shadowroot="open" shadowrootmode="open"><style>*,:after,:before{box-sizing:border-box}button,input,select,textarea{font:inherit}button{color:inherit;cursor:pointer}img{height:auto;max-width:100%}a{color:var(--color-link-normal)}[hidden]{display:none!important}.mdn-homepage-search{align-items:center;background-color:initial;border:2px solid var(--color-border-primary);border-radius:var(--radius-full);display:flex;font-size:var(--font-size-large);gap:.25em;margin:0 auto;padding:.8em 1em}.mdn-homepage-search:hover{background-color:var(--color-background-secondary)}.mdn-homepage-search:before{background-color:currentcolor;content:"";height:1em;-webkit-mask-image:url(/static/ssr/search.5dd31cbeea7d1af9.svg);mask-image:url(/static/ssr/search.5dd31cbeea7d1af9.svg);-webkit-mask-size:contain;mask-size:contain;width:1em}</style><button
      class="mdn-homepage-search"
      title="Search the site"
      
      data-glean-id="quick-search-open: homepage"
    >
      Search
    </button></template></mdn-homepage-search>
        </div>
        <div class="homepage-header__mandala"><div class="mandala" aria-hidden="true">
      <svg
        viewBox="50 50 575 575"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        class="mandala"
      >
        <title>Mandala</title>
        <defs>
          <path
            d="M337.5,337.5 m-320,0 a320,320 0 1,1 640,0 a320,320 0 1,1 -640,0"
            id="circle1"
          ></path>
          <path
            d="M337.5,337.5 m-280,0 a280,280 0 1,1 560,0 a280,280 0 1,1 -560,0"
            id="circle2"
          ></path>
          <path
            d="M337.5,337.5 m-240,0 a240,240 0 1,1 480,0 a240,240 0 1,1 -480,0"
            id="circle3"
          ></path>
          <path
            d="M337.5,337.5 m-200,0 a200,200 0 1,1 400,0 a200,200 0 1,1 -400,0"
            id="circle4"
          ></path>
          <path
            d="M337.5,337.5 m-160,0 a160,160 0 1,1 320,0 a160,160 0 1,1 -320,0"
            id="circle5"
          ></path>
        </defs>
        <text dy="70" textLength="2010">
          <textPath textLength="2010" href="#circle1">
            &nbsp;&nbsp;&nbsp;/
            <tspan>/</tspan>
            /
            <tspan>/</tspan>
            /
            <tspan>/</tspan>
            /
            <tspan>/</tspan>
            /
            <tspan>/</tspan>
            /
            <tspan>/</tspan>
            &nbsp;&nbsp;&nbsp;/
            <tspan>/</tspan>
            /
            <tspan>/</tspan>
            /
            <tspan>/</tspan>
            /
            <tspan>/</tspan>
            /
            <tspan>/</tspan>
            /
            <tspan>/</tspan>
            &nbsp;&nbsp;&nbsp;/
            <tspan>/</tspan>
            /
            <tspan>/</tspan>
            /
            <tspan>/</tspan>
            /
            <tspan>/</tspan>
            /
            <tspan>/</tspan>
            /
            <tspan>/</tspan>
            &nbsp;&nbsp;&nbsp;/
            <tspan>/</tspan>
            /
            <tspan>/</tspan>
            /
            <tspan>/</tspan>
            /
            <tspan>/</tspan>
            /
            <tspan>/</tspan>
            /
            <tspan>/</tspan>
            &nbsp;&nbsp;&nbsp;/
            <tspan>/</tspan>
            /
            <tspan>/</tspan>
            /
            <tspan>/</tspan>
            /
            <tspan>/</tspan>
            /
            <tspan>/</tspan>
            /
            <tspan>/</tspan>
            &nbsp;&nbsp;&nbsp;/
            <tspan>/</tspan>
            /
            <tspan>/</tspan>
            /
            <tspan>/</tspan>
            /
            <tspan>/</tspan>
            /
            <tspan>/</tspan>
            /
            <tspan>/</tspan>
            &nbsp;&nbsp;&nbsp;/
            <tspan>/</tspan>
            /
            <tspan>/</tspan>
            /
            <tspan>/</tspan>
            /
            <tspan>/</tspan>
            /
            <tspan>/</tspan>
            /
            <tspan>/</tspan>
          </textPath>
        </text>
        <text dy="70" textLength="1760">
          <textPath textLength="1760" href="#circle2">
            &nbsp;&nbsp;+
            <tspan>+</tspan>
            +
            <tspan>+</tspan>
            +
            <tspan>+</tspan>
            &nbsp;&nbsp;+
            <tspan>+</tspan>
            +
            <tspan>+</tspan>
            +
            <tspan>+</tspan>
            &nbsp;&nbsp;+
            <tspan>+</tspan>
            +
            <tspan>+</tspan>
            +
            <tspan>+</tspan>
            &nbsp;&nbsp;+
            <tspan>+</tspan>
            +
            <tspan>+</tspan>
            +
            <tspan>+</tspan>
            &nbsp;&nbsp;+
            <tspan>+</tspan>
            +
            <tspan>+</tspan>
            +
            <tspan>+</tspan>
            &nbsp;&nbsp;+
            <tspan>+</tspan>
            +
            <tspan>+</tspan>
            +
            <tspan>+</tspan>
            &nbsp;&nbsp;+
            <tspan>+</tspan>
            +
            <tspan>+</tspan>
            +
            <tspan>+</tspan>
          </textPath>
        </text>
        <text dy="70" textLength="1507">
          <textPath textLength="1507" href="#circle3">
            <tspan>&#123;</tspan>
            &#123;
            <tspan>&#123;</tspan>
            &#123;&nbsp;
            <tspan>&#125;</tspan>
            &#125;
            <tspan>&#125;</tspan>
            &#125;&nbsp;&nbsp;
            <tspan>&#123;</tspan>
            &#123;
            <tspan>&#123;</tspan>
            &#123;&nbsp;
            <tspan>&#125;</tspan>
            &#125;
            <tspan>&#125;</tspan>
            &#125;&nbsp;&nbsp;
            <tspan>&#123;</tspan>
            &#123;
            <tspan>&#123;</tspan>
            &#123;&nbsp;
            <tspan>&#125;</tspan>
            &#125;
            <tspan>&#125;</tspan>
            &#125;&nbsp;&nbsp;
            <tspan>&#123;</tspan>
            &#123;
            <tspan>&#123;</tspan>
            &#123;&nbsp;
            <tspan>&#125;</tspan>
            &#125;
            <tspan>&#125;</tspan>
            &#125;&nbsp;&nbsp;
            <tspan>&#123;</tspan>
            &#123;
            <tspan>&#123;</tspan>
            &#123;&nbsp;
            <tspan>&#125;</tspan>
            &#125;
            <tspan>&#125;</tspan>
            &#125;&nbsp;&nbsp;
            <tspan>&#123;</tspan>
            &#123;
            <tspan>&#123;</tspan>
            &#123;&nbsp;
            <tspan>&#125;</tspan>
            &#125;
            <tspan>&#125;</tspan>
            &#125;&nbsp;&nbsp;
          </textPath>
        </text>
        <text dy="70" textLength="1257">
          <textPath textLength="1257" href="#circle4">
            &nbsp;&nbsp;&nbsp;../../ &nbsp;&nbsp;&nbsp;../../
            &nbsp;&nbsp;&nbsp;../../ &nbsp;&nbsp;&nbsp;../../
            &nbsp;&nbsp;&nbsp;../../ &nbsp;&nbsp;&nbsp;../../
            &nbsp;&nbsp;&nbsp;../../
          </textPath>
        </text>
        <text dy="70" textLength="1005">
          <textPath textLength="1005" href="#circle5">
            <tspan>&lt;&gt;</tspan>
            &lt;/&gt;
            <tspan>&lt;&gt;</tspan>
            &lt;/&gt;
            <tspan>&lt;&gt;</tspan>
            &lt;/&gt;
            <tspan>&lt;&gt;</tspan>
            &lt;/&gt;
            <tspan>&lt;&gt;</tspan>
            &lt;/&gt;
            <tspan>&lt;&gt;</tspan>
            &lt;/&gt;
            <tspan>&lt;&gt;</tspan>
            &lt;/&gt;
            <tspan>&lt;&gt;</tspan>
            &lt;/&gt;
            <tspan>&lt;&gt;</tspan>
            &lt;/&gt;
            <tspan>&lt;&gt;</tspan>
            &lt;/&gt;
            <tspan>&lt;&gt;</tspan>
            &lt;/&gt;
            <tspan>&lt;&gt;</tspan>
            &lt;/&gt;
            <tspan>&lt;&gt;</tspan>
            &lt;/&gt;
            <tspan>&lt;&gt;</tspan>
            &lt;/&gt;
            <tspan>&lt;&gt;</tspan>
            &lt;/&gt;
            <tspan>&lt;&gt;</tspan>
            &lt;/&gt;
          </textPath>
        </text>
      </svg>
    </div></div>
      </div>
    
        </div>
        <div class="homepage">
          <mdn-placement-hp-main></mdn-placement-hp-main>
          <div class="homepage-body">
      
      <section>
        <h2>
          Featured articles
        </h2>
        <ul class="featured-articles">
      <li>
            <article class="featured-articles__article">
              <a
                    class="featured-articles__tag"
                    href="/en-US/blog/"
                    data-glean-id="homepage: article_tag 1 -&gt; /en-US/blog/"
                    >Blog</a
                  >
              <h3 class="featured-articles__title">
                <a
                  href="/en-US/blog/mdn-turns-20/"
                  data-glean-id="homepage: article 1 -&gt; /en-US/blog/mdn-turns-20/"
                  >Celebrating 20 years of MDN</a
                >
              </h3>
              <p class="featured-articles__summary">MDN turns 20! Let&#39;s look at how we started, how MDN became the most trusted resource for web developers, the impact it&#39;s had on the open web, and yes, there&#39;s cake, too.
</p>
            </article>
          </li><li>
            <article class="featured-articles__article">
              <a
                    class="featured-articles__tag"
                    href="/en-US/docs/Web/API"
                    data-glean-id="homepage: article_tag 2 -&gt; /en-US/docs/Web/API"
                    >Web APIs</a
                  >
              <h3 class="featured-articles__title">
                <a
                  href="/en-US/docs/Web/API/CSS_Custom_Highlight_API"
                  data-glean-id="homepage: article 2 -&gt; /en-US/docs/Web/API/CSS_Custom_Highlight_API"
                  >CSS Custom Highlight API</a
                >
              </h3>
              <p class="featured-articles__summary">The CSS Custom Highlight API provides a mechanism for styling arbitrary text ranges on a document by using JavaScript to create the ranges, and CSS to style them.
</p>
            </article>
          </li><li>
            <article class="featured-articles__article">
              <a
                    class="featured-articles__tag"
                    href="/en-US/docs/Web/API"
                    data-glean-id="homepage: article_tag 3 -&gt; /en-US/docs/Web/API"
                    >Web APIs</a
                  >
              <h3 class="featured-articles__title">
                <a
                  href="/en-US/docs/Web/API/Performance_API/Server_timing"
                  data-glean-id="homepage: article 3 -&gt; /en-US/docs/Web/API/Performance_API/Server_timing"
                  >Server timing</a
                >
              </h3>
              <p class="featured-articles__summary">Server-Timing is a part of the Performance API and allows servers to communicate metrics about the request-response cycle to the user agent. You can collect this information and act on server-side metrics in the same way as all the other metrics processed with the Performance API.
</p>
            </article>
          </li><li>
            <article class="featured-articles__article">
              <a
                    class="featured-articles__tag"
                    href="/en-US/docs/Web/JavaScript"
                    data-glean-id="homepage: article_tag 4 -&gt; /en-US/docs/Web/JavaScript"
                    >JavaScript</a
                  >
              <h3 class="featured-articles__title">
                <a
                  href="/en-US/docs/Web/JavaScript/Guide/Resource_management"
                  data-glean-id="homepage: article 4 -&gt; /en-US/docs/Web/JavaScript/Guide/Resource_management"
                  >JavaScript resource management</a
                >
              </h3>
              <p class="featured-articles__summary">This guide talks about how to do resource management in JavaScript. Resource management is not exactly the same as memory management, which is a more advanced topic and usually handled automatically by JavaScript. Resource management is about managing resources that are not automatically cleaned up by JavaScript. Sometimes, it&#39;s okay to have some unused objects in memory, because they don&#39;t interfere with application logic, but resource leaks often lead to things not working, or a lot of excess memory usage. Therefore, this is not an optional feature about optimization, but a core feature to write correct programs!
</p>
            </article>
          </li>
    </ul>
      </section>
      <section>
        <h2>Latest news</h2>
        <ul class="latest-news">
      <li>
            <article class="latest-news__item">
              <a
                    class="latest-news__source"
                    href="/en-US/blog/"
                    data-glean-id="homepage: news_source 1 -&gt; /en-US/blog/"
                    >developer.mozilla.org</a
                  >
              <h3 class="latest-news__title">
                <a
                  href="/en-US/blog/mdn-front-end-deep-dive/"
                  data-glean-id="homepage: news 1 -&gt; /en-US/blog/mdn-front-end-deep-dive/"
                  >Under the hood of MDN&#39;s new frontend</a
                >
              </h3>
              <time class="latest-news__date" datetime="2026-04-08">
                3 weeks ago
              </time>
              <p class="latest-news__summary">You may have spotted that MDN has a new frontend. There&#39;s plenty happening under the surface, so let&#39;s unpack the technologies we chose, the architectural decisions we made, and why we did a rebuild at all.
</p>
            </article>
          </li><li>
            <article class="latest-news__item">
              <a
                    class="latest-news__source"
                    href="/en-US/blog/"
                    data-glean-id="homepage: news_source 2 -&gt; /en-US/blog/"
                    >developer.mozilla.org</a
                  >
              <h3 class="latest-news__title">
                <a
                  href="/en-US/blog/image-formats-codecs-compression-tools/"
                  data-glean-id="homepage: news 2 -&gt; /en-US/blog/image-formats-codecs-compression-tools/"
                  >Image formats: Codecs and compression tools</a
                >
              </h3>
              <time class="latest-news__date" datetime="2025-11-05">
                6 months ago
              </time>
              <p class="latest-news__summary">Image compression involves countless trade-offs between quality, size, and speed. In this final part of the series, we experiment with codecs, metrics, and tools to find practical ways to balance efficiency and visual fidelity.</p>
            </article>
          </li><li>
            <article class="latest-news__item">
              <a
                    class="latest-news__source"
                    href="/en-US/blog/"
                    data-glean-id="homepage: news_source 3 -&gt; /en-US/blog/"
                    >developer.mozilla.org</a
                  >
              <h3 class="latest-news__title">
                <a
                  href="/en-US/blog/view-transitions-beginner-guide/"
                  data-glean-id="homepage: news 3 -&gt; /en-US/blog/view-transitions-beginner-guide/"
                  >A beginner-friendly guide to view transitions in CSS</a
                >
              </h3>
              <time class="latest-news__date" datetime="2025-10-09">
                7 months ago
              </time>
              <p class="latest-news__summary">Learn how to bring smooth, animated navigation to multi-page apps with view transitions. With just one line of CSS, you can enable seamless transitions between pages.
</p>
            </article>
          </li><li>
            <article class="latest-news__item">
              <a
                    class="latest-news__source"
                    href="/en-US/blog/"
                    data-glean-id="homepage: news_source 4 -&gt; /en-US/blog/"
                    >developer.mozilla.org</a
                  >
              <h3 class="latest-news__title">
                <a
                  href="/en-US/blog/launching-new-front-end/"
                  data-glean-id="homepage: news 4 -&gt; /en-US/blog/launching-new-front-end/"
                  >Launching MDN&#39;s new front end</a
                >
              </h3>
              <time class="latest-news__date" datetime="2025-08-19">
                8 months ago
              </time>
              <p class="latest-news__summary">MDN is getting a facelift 🎉. Discover what&#39;s changed, what&#39;s improved, and how navigating the site just got smoother.
</p>
            </article>
          </li>
    </ul>
      </section>
      <section>
        <h2>
          Recent contributions
        </h2>
        <ul class="recent-contributions">
      <li class="recent-contributions__item">
            <span class="recent-contributions__repo">
              <a
                class="external"
                href="https://github.com/mdn/content"
                data-glean-id="homepage: contribution_repo 1"
                >mdn/content</a
              >
            </span>
            <time
              class="recent-contributions__date"
              datetime="2026-04-27T17:27:03Z"
            >
              1 day ago
            </time>
            <div class="recent-contributions__title">
              <a
                class="external"
                href="https://github.com/mdn/content/pull/43843"
                data-glean-id="homepage: contribution 1 -&gt; https://github.com/mdn/content/pull/43843"
                >Editorial review: Improve docs for Wasm mutable globals</a
              >
            </div>
          </li><li class="recent-contributions__item">
            <span class="recent-contributions__repo">
              <a
                class="external"
                href="https://github.com/mdn/content"
                data-glean-id="homepage: contribution_repo 2"
                >mdn/content</a
              >
            </span>
            <time
              class="recent-contributions__date"
              datetime="2026-04-27T18:00:07Z"
            >
              1 day ago
            </time>
            <div class="recent-contributions__title">
              <a
                class="external"
                href="https://github.com/mdn/content/pull/43933"
                data-glean-id="homepage: contribution 2 -&gt; https://github.com/mdn/content/pull/43933"
                >[WebExtensions] Chrome 150 plans to limit alarm name lengths</a
              >
            </div>
          </li><li class="recent-contributions__item">
            <span class="recent-contributions__repo">
              <a
                class="external"
                href="https://github.com/mdn/content"
                data-glean-id="homepage: contribution_repo 3"
                >mdn/content</a
              >
            </span>
            <time
              class="recent-contributions__date"
              datetime="2026-04-28T10:34:56Z"
            >
              15 hours ago
            </time>
            <div class="recent-contributions__title">
              <a
                class="external"
                href="https://github.com/mdn/content/pull/43945"
                data-glean-id="homepage: contribution 3 -&gt; https://github.com/mdn/content/pull/43945"
                >Bump ajv from 8.18.0 to 8.20.0</a
              >
            </div>
          </li><li class="recent-contributions__item">
            <span class="recent-contributions__repo">
              <a
                class="external"
                href="https://github.com/mdn/content"
                data-glean-id="homepage: contribution_repo 4"
                >mdn/content</a
              >
            </span>
            <time
              class="recent-contributions__date"
              datetime="2026-04-28T10:35:18Z"
            >
              15 hours ago
            </time>
            <div class="recent-contributions__title">
              <a
                class="external"
                href="https://github.com/mdn/content/pull/43927"
                data-glean-id="homepage: contribution 4 -&gt; https://github.com/mdn/content/pull/43927"
                >Bump @mdn/fred from 2.4.3 to 2.5.0</a
              >
            </div>
          </li><li class="recent-contributions__item">
            <span class="recent-contributions__repo">
              <a
                class="external"
                href="https://github.com/mdn/content"
                data-glean-id="homepage: contribution_repo 5"
                >mdn/content</a
              >
            </span>
            <time
              class="recent-contributions__date"
              datetime="2026-04-28T21:15:32Z"
            >
              4 hours ago
            </time>
            <div class="recent-contributions__title">
              <a
                class="external"
                href="https://github.com/mdn/content/pull/43956"
                data-glean-id="homepage: contribution 5 -&gt; https://github.com/mdn/content/pull/43956"
                >Bump @mdn/fred from 2.5.0 to 2.6.0</a
              >
            </div>
          </li><li class="recent-contributions__item">
            <span class="recent-contributions__repo">
              <a
                class="external"
                href="https://github.com/mdn/translated-content"
                data-glean-id="homepage: contribution_repo 6"
                >mdn/translated-content</a
              >
            </span>
            <time
              class="recent-contributions__date"
              datetime="2026-04-28T23:45:13Z"
            >
              1 hour ago
            </time>
            <div class="recent-contributions__title">
              <a
                class="external"
                href="https://github.com/mdn/translated-content/pull/35645"
                data-glean-id="homepage: contribution 6 -&gt; https://github.com/mdn/translated-content/pull/35645"
                >chore(fr): translation of `Web/CSS/Reference/Values/asin`</a
              >
            </div>
          </li><li class="recent-contributions__item">
            <span class="recent-contributions__repo">
              <a
                class="external"
                href="https://github.com/mdn/translated-content"
                data-glean-id="homepage: contribution_repo 7"
                >mdn/translated-content</a
              >
            </span>
            <time
              class="recent-contributions__date"
              datetime="2026-04-28T23:45:18Z"
            >
              1 hour ago
            </time>
            <div class="recent-contributions__title">
              <a
                class="external"
                href="https://github.com/mdn/translated-content/pull/35646"
                data-glean-id="homepage: contribution 7 -&gt; https://github.com/mdn/translated-content/pull/35646"
                >chore(fr): translation of `Web/CSS/Reference/Values/atan2`</a
              >
            </div>
          </li><li class="recent-contributions__item">
            <span class="recent-contributions__repo">
              <a
                class="external"
                href="https://github.com/mdn/translated-content"
                data-glean-id="homepage: contribution_repo 8"
                >mdn/translated-content</a
              >
            </span>
            <time
              class="recent-contributions__date"
              datetime="2026-04-28T23:45:28Z"
            >
              1 hour ago
            </time>
            <div class="recent-contributions__title">
              <a
                class="external"
                href="https://github.com/mdn/translated-content/pull/35647"
                data-glean-id="homepage: contribution 8 -&gt; https://github.com/mdn/translated-content/pull/35647"
                >chore(fr): update of `Web/CSS/Reference/Values/attr`</a
              >
            </div>
          </li><li class="recent-contributions__item">
            <span class="recent-contributions__repo">
              <a
                class="external"
                href="https://github.com/mdn/translated-content"
                data-glean-id="homepage: contribution_repo 9"
                >mdn/translated-content</a
              >
            </span>
            <time
              class="recent-contributions__date"
              datetime="2026-04-29T00:49:47Z"
            >
              22 minutes ago
            </time>
            <div class="recent-contributions__title">
              <a
                class="external"
                href="https://github.com/mdn/translated-content/pull/35653"
                data-glean-id="homepage: contribution 9 -&gt; https://github.com/mdn/translated-content/pull/35653"
                >[zh-cn] auto-fix content issues</a
              >
            </div>
          </li><li class="recent-contributions__item">
            <span class="recent-contributions__repo">
              <a
                class="external"
                href="https://github.com/mdn/translated-content"
                data-glean-id="homepage: contribution_repo 10"
                >mdn/translated-content</a
              >
            </span>
            <time
              class="recent-contributions__date"
              datetime="2026-04-29T00:50:54Z"
            >
              21 minutes ago
            </time>
            <div class="recent-contributions__title">
              <a
                class="external"
                href="https://github.com/mdn/translated-content/pull/35648"
                data-glean-id="homepage: contribution 10 -&gt; https://github.com/mdn/translated-content/pull/35648"
                >[zh-tw] auto-fix content issues</a
              >
            </div>
          </li>
    </ul>
      </section>
    </div>
        </div>
        <div class="homepage homepage--dark">
          <div class="homepage-footer">
      <section class="homepage-contributor-spotlight">
      <div class="homepage-contributor-spotlight__spotlight">
        <h2>
          Contributor Spotlight
        </h2>
        <a class="homepage-contributor-spotlight__name" href="/en-US/community/spotlight/shrinivass-arunachalam-balasubramanian"
          >Shrinivass Arunachalam Balasubramanian</a
        >
        <blockquote class="homepage-contributor-spotlight__quote">
          MDN closely follows W3C standards which helps me keep up with important topics. It&#39;s a complete package as it caters to everything; complex APIs, new browser functionalities, and best practices. MDN serves as a truly valuable resource and continues to assist me in my everyday development.
        </blockquote>

<a
          class="button"
          href="/en-US/community"
          
          
          aria-labelledby="label-awk5izrmtxg"
          data-variant="primary"
          
          part="button"
        >
          
    <span id="label-awk5izrmtxg" class="label"  part="label"
      >Get involved</span
    >
  <span class="icon" part="icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M5 12h14m-7-7 7 7-7 7"/></svg></span>
        </a>
      
      </div>

<figure class="homepage-contributor-spotlight__logo">
        <img
          loading="lazy"
          width="512"
          height="323"
          src="/static/ssr/mdn_contributor.9e2a105f50828d5a.png"
          alt="Tiled Mozilla Logo"
        />
      </figure>
    </section>
    </div>
        </div>
      </div>
        <div class="page-layout__footer">
      <mdn-placement-bottom></mdn-placement-bottom>
      <footer class="footer">
        <div class="footer__mdn">
          <div class="footer__intro">
            <a
              class="footer__logo"
              href="/"
              aria-label="MDN logo"
              ><svg xmlns="http://www.w3.org/2000/svg" width="83" height="24" viewBox="0 0 83 24"><title>MDN</title><path d="M9.4 0 2.81 21.17H.12L6.69 0zm2.38 0v21.17H9.4V0h2.4Zm9.27 0-6.56 21.17H11.8L18.36 0zm2.39 0v21.17h-2.4V0zm22.11 16.83h-3.93v-1.27h.87v-3.63c0-.85-.16-1.45-.48-1.82a1.65 1.65 0 0 0-1.3-.52c-.74 0-1.3.25-1.66.78a3 3 0 0 0-.58 1.58v3.59h1.38v1.26h-3.93v-1.26h.87v-3.6c0-.88-.16-1.48-.48-1.83a1.7 1.7 0 0 0-1.29-.52 1.93 1.93 0 0 0-1.65.75 2.85 2.85 0 0 0-.58 1.6v3.62h1.59v1.27h-4.64v-1.27h1.37V9.75h-1.4V8.46h3.08v1.47c.28-.48.62-.87 1.08-1.2a3 3 0 0 1 1.68-.45c.67 0 1.22.16 1.73.48.5.32.85.8 1.03 1.47.25-.57.62-1.03 1.13-1.4.5-.37 1.1-.55 1.81-.55.8 0 1.5.25 2.05.75.55.51.85 1.3.85 2.35v4.18h1.4zm9.77 0H52.3v-1.66c-.27.51-.66.95-1.13 1.29-.56.4-1.23.59-1.9.55-1.11 0-2-.37-2.67-1.12a4.4 4.4 0 0 1-1-3.06c0-1.15.3-2.2.93-3.15.6-.94 1.58-1.43 2.94-1.43s2.25.5 2.83 1.5V5.22h-2V3.93h3.63v11.63h1.38v1.27Zm-3.06-3.86v-1.02a2.28 2.28 0 0 0-.73-1.67 2.4 2.4 0 0 0-1.66-.65 2.18 2.18 0 0 0-1.88.9 3.63 3.63 0 0 0-.65 2.2c0 .95.23 1.68.7 2.19.45.5 1.03.76 1.7.76.73 0 1.33-.3 1.79-.88.48-.6.71-1.21.73-1.83m14.14 3.86h-4.43v-1.27h1.37v-3.63c0-.85-.16-1.45-.5-1.82a1.68 1.68 0 0 0-1.31-.52c-.71 0-1.29.23-1.7.69a2.52 2.52 0 0 0-.67 1.6v3.66h1.38v1.26H56.1v-1.26h1.38v-5.8h-1.42V8.47h3.12V9.9c.6-1.06 1.57-1.6 2.92-1.6.83 0 1.54.26 2.12.77.57.5.85 1.28.85 2.34v4.19h1.38v1.24h-.05Zm1.31 5.15H83V24H67.71z"/></svg></a
            >
            <p>
              Your blueprint for a better internet.
            </p>
          </div>

<dl class="footer__links">
                <dt>MDN</dt>
                <dd>
                  <ul>
                    
                        <li>
                          <a
                            href="/en-US/about"
                            class=""
                            target=""
                            rel=""
                            data-glean-id="footer: link -&gt; /en-US/about"
                          >
                            About
                          </a>
                        </li>
                      
                        <li>
                          <a
                            href="/en-US/blog/"
                            class=""
                            target=""
                            rel=""
                            data-glean-id="footer: link -&gt; /en-US/blog/"
                          >
                            Blog
                          </a>
                        </li>
                      
                        <li>
                          <a
                            href="https://www.mozilla.org/en-US/careers/listings/"
                            class="external"
                            target="_blank"
                            rel="noopener"
                            data-glean-id="footer: link -&gt; https://www.mozilla.org/en-US/careers/listings/"
                          >
                            Mozilla careers
                          </a>
                        </li>
                      
                        <li>
                          <a
                            href="/en-US/advertising"
                            class=""
                            target=""
                            rel=""
                            data-glean-id="footer: link -&gt; /en-US/advertising"
                          >
                            Advertise with us
                          </a>
                        </li>
                      
                        <li>
                          <a
                            href="/en-US/plus"
                            class=""
                            target=""
                            rel=""
                            data-glean-id="footer: link -&gt; /en-US/plus"
                          >
                            MDN Plus
                          </a>
                        </li>
                      
                        <li>
                          <a
                            href="https://support.mozilla.org/products/mdn-plus"
                            class="external"
                            target="_blank"
                            rel="noopener"
                            data-glean-id="footer: link -&gt; https://support.mozilla.org/products/mdn-plus"
                          >
                            Product help
                          </a>
                        </li>
                      
                  </ul>
                </dd>
              </dl>
            
              <dl class="footer__links">
                <dt>Contribute</dt>
                <dd>
                  <ul>
                    
                        <li>
                          <a
                            href="/en-US/community"
                            class=""
                            target=""
                            rel=""
                            data-glean-id="footer: link -&gt; /en-US/community"
                          >
                            MDN Community
                          </a>
                        </li>
                      
                        <li>
                          <a
                            href="/en-US/docs/MDN/Community"
                            class=""
                            target=""
                            rel=""
                            data-glean-id="footer: link -&gt; /en-US/docs/MDN/Community"
                          >
                            Community resources
                          </a>
                        </li>
                      
                        <li>
                          <a
                            href="/en-US/docs/MDN/Writing_guidelines"
                            class=""
                            target=""
                            rel=""
                            data-glean-id="footer: link -&gt; /en-US/docs/MDN/Writing_guidelines"
                          >
                            Writing guidelines
                          </a>
                        </li>
                      
                        <li>
                          <a
                            href="/discord"
                            class="external"
                            target="_blank"
                            rel="noopener"
                            data-glean-id="footer: link -&gt; /discord"
                          >
                            MDN Discord
                          </a>
                        </li>
                      
                        <li>
                          <a
                            href="https://github.com/mdn"
                            class="external"
                            target="_blank"
                            rel="noopener"
                            data-glean-id="footer: link -&gt; https://github.com/mdn"
                          >
                            MDN on GitHub
                          </a>
                        </li>
                      
                  </ul>
                </dd>
              </dl>
            
              <dl class="footer__links">
                <dt>Developers</dt>
                <dd>
                  <ul>
                    
                        <li>
                          <a
                            href="/en-US/docs/Web"
                            class=""
                            target=""
                            rel=""
                            data-glean-id="footer: link -&gt; /en-US/docs/Web"
                          >
                            Web technologies
                          </a>
                        </li>
                      
                        <li>
                          <a
                            href="/en-US/docs/Learn_web_development"
                            class=""
                            target=""
                            rel=""
                            data-glean-id="footer: link -&gt; /en-US/docs/Learn_web_development"
                          >
                            Learn web development
                          </a>
                        </li>
                      
                        <li>
                          <a
                            href="/en-US/docs/MDN/Guides"
                            class=""
                            target=""
                            rel=""
                            data-glean-id="footer: link -&gt; /en-US/docs/MDN/Guides"
                          >
                            Guides
                          </a>
                        </li>
                      
                        <li>
                          <a
                            href="/en-US/docs/MDN/Tutorials"
                            class=""
                            target=""
                            rel=""
                            data-glean-id="footer: link -&gt; /en-US/docs/MDN/Tutorials"
                          >
                            Tutorials
                          </a>
                        </li>
                      
                        <li>
                          <a
                            href="/en-US/docs/Glossary"
                            class=""
                            target=""
                            rel=""
                            data-glean-id="footer: link -&gt; /en-US/docs/Glossary"
                          >
                            Glossary
                          </a>
                        </li>
                      
                        <li>
                          <a
                            href="https://hacks.mozilla.org/"
                            class="external"
                            target="_blank"
                            rel="noopener"
                            data-glean-id="footer: link -&gt; https://hacks.mozilla.org/"
                          >
                            Hacks blog
                          </a>
                        </li>
                      
                  </ul>
                </dd>
              </dl>
            
        </div>

<div class="footer__mozilla">
          <a
            class="footer__logo"
            href="https://www.mozilla.org/"
            aria-label="Mozilla logo"
            ><svg xmlns="http://www.w3.org/2000/svg" width="128" height="30" viewBox="0 0 256 60"><title>Mozilla</title><path d="m13.32 22.1 5.1 24.3h2.1l5.1-24.3H39.3v37.34h-7.26V28.46h-2.1l-6.96 30.98h-7.02L9.02 28.46h-2.1v31H-.35V22.1h13.66Zm45.12 8.74c8.73 0 13.8 5.15 13.8 14.57S67.14 60 58.44 60c-8.73 0-13.8-5.17-13.8-14.59 0-9.43 5.07-14.57 13.8-14.57m0 23.34c4.1 0 6.16-2.1 6.16-6.73v-4.12c0-4.62-2.06-6.73-6.16-6.73s-6.15 2.1-6.15 6.73v4.12c0 4.63 2.05 6.73 6.15 6.73m17.68-.14 14.82-17.26H76.32v-5.41h23.31v5.4L84.84 54.05h15.03v5.4H76.13v-5.41Zm28.07-22.67h10.7v28.07h-7.25V36.77h-3.48v-5.4zm3.44-9.27h7.26v5.4h-7.25v-5.4Zm12.62 0h10.72v37.34h-7.24V27.5h-3.48zm16.08 0h10.7v37.34h-7.25V27.5h-3.48v-5.4zm27.8 8.74c4.24 0 7.08 2.05 7.87 5.63h2.1v-5.1h8.88v5.4h-3.47v17.28h3.47v5.4h-4.25c-3 0-4.63-1.63-4.63-4.62v-.48H172c-.78 3.58-3.63 5.63-7.88 5.63-6.68 0-11.4-5.59-11.4-14.58 0-9 4.72-14.55 11.4-14.55m2.2 23.34c4.1 0 5.93-2.1 5.93-6.73v-4.12c0-4.62-1.82-6.73-5.94-6.73-3.99 0-5.92 2.1-5.92 6.73v4.13c0 4.62 1.92 6.72 5.93 6.72m46.28 5.27h-7.26V0h7.26zm6.3-28.41h30.8v-2.1l-20.4-7.32v-5.88l20.4-7.33v-2.1h-24.27V0h30.79v12l-16.62 5.63v2.11l16.61 5.64v12H218.9zm0-24.73h6.5v6.52h-6.5z"/></svg></a
          >
          <ul>
            
                <li>
                  <a
                    href="https://www.mozilla.org/privacy/websites/"
                    class="external"
                    data-glean-id="footer: mozilla -&gt; https://www.mozilla.org/privacy/websites/"
                    >Website Privacy Notice</a
                  >
                </li>
              
                <li>
                  <a
                    href="https://www.mozilla.org/en-US/privacy/websites/data-preferences/"
                    class="external"
                    data-glean-id="footer: mozilla -&gt; https://www.mozilla.org/en-US/privacy/websites/data-preferences/"
                    >Telemetry Settings</a
                  >
                </li>
              
                <li>
                  <a
                    href="https://www.mozilla.org/about/legal/terms/mozilla"
                    class="external"
                    data-glean-id="footer: mozilla -&gt; https://www.mozilla.org/about/legal/terms/mozilla"
                    >Legal</a
                  >
                </li>
              
                <li>
                  <a
                    href="https://www.mozilla.org/about/governance/policies/participation/"
                    class="external"
                    data-glean-id="footer: mozilla -&gt; https://www.mozilla.org/about/governance/policies/participation/"
                    >Community Participation Guidelines</a
                  >
                </li>
              
          </ul>
          <p>
            Visit <a href="https://www.mozilla.org/">Mozilla Corporation’s</a> not-for-profit parent, the <a href="https://foundation.mozilla.org/">Mozilla Foundation</a>.<br />
            Portions of this content are ©1998–2026 by individual mozilla.org contributors. Content available under <a href="/docs/MDN/Writing_guidelines/Attrib_copyright_license">a Creative Commons license</a>.
          </p>
        </div>
      </footer>
    </div>
      </body>
    
      </html>

Ringkasan

Status: 200
Content-Type: text/html
Server: Google Frontend
Cache-Control: public, max-age=3600

Semua Headers

x-cloud-trace-context	400a48225366a2bf915b85b1b7a693fd
server	Google Frontend
content-type	text/html
cache-control	public, max-age=3600
location	/en-US/
via	1.1 google, 1.1 varnish, 1.1 varnish
accept-ranges	bytes
age	976
date	Thu, 30 Apr 2026 00:24:26 GMT
x-served-by	cache-sin-wsss1830041-SIN, cache-sin-wsap440046-SIN
x-cache	MISS, HIT
x-cache-hits	0, 1
x-timer	S1777508667.701354,VS0,VE1
vary	Accept-Encoding
content-length	16779
x-content-type-options	nosniff
etag	"b2d709067dd282b5888a9ee85761dbb5"
x-goog-generation	1777426360256860
x-guploader-uploadid	AAVLpEi7GITJl9kxm4IxLyeidS-svqDGp91SKO9Z70ybnp2ion3spGI8GZ1FGPiStCLqglMV
x-goog-metageneration	1
last-modified	Wed, 29 Apr 2026 01:32:40 GMT
x-goog-hash	crc32c=uQlILw==, md5=stcJBn3SgrWIip7oV2HbtQ==
x-goog-stored-content-length	119859
x-goog-meta-goog-reserved-file-mtime	1777425114
x-goog-stored-content-encoding	identity
content-security-policy	default-src 'self'; script-src 'report-sample' 'self' 'wasm-unsafe-eval' assets.codepen.io production-assets.codepen.io https://js.stripe.com transcend-cdn.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; script-src-elem 'report-sample' 'self' 'wasm-unsafe-eval' assets.codepen.io production-assets.codepen.io https://js.stripe.com transcend-cdn.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; style-src 'report-sample' 'self' 'unsafe-inline' transcend-cdn.com; object-src 'none'; base-uri 'self'; connect-src 'self' developer.allizom.org bcd.developer.allizom.org bcd.developer.mozilla.org updates.developer.allizom.org updates.developer.mozilla.org https://incoming.telemetry.mozilla.org https://observatory-api.mdn.allizom.net https://observatory-api.mdn.mozilla.net telemetry.transcend.io telemetry.us.transcend.io transcend-cdn.com https://api.github.com/search/issues https://api.stripe.com; font-src 'self'; frame-src 'self' mdn.github.io .mdnplay.dev .mdnyalp.dev .play.test.mdn.allizom.net https://v2.scrimba.com https://scrimba.com jsfiddle.net www.youtube-nocookie.com codepen.io survey.alchemer.com https://js.stripe.com; img-src 'self' data: .githubusercontent.com *.gravatar.com mozillausercontent.com firefoxusercontent.com profile.stage.mozaws.net profile.accounts.firefox.com developer.mozilla.org mdn.dev wikipedia.org upload.wikimedia.org https://mdn.github.io/shared-assets/ https://mdn.dev/; manifest-src 'self'; media-src 'self' archive.org videos.cdn.mozilla.net https://mdn.github.io/shared-assets/; child-src 'self'; worker-src 'self';
strict-transport-security	max-age=63072000
expires	Wed, 29 Apr 2026 03:16:31 GMT
referrer-policy	strict-origin-when-cross-origin
x-frame-options	DENY
x-goog-storage-class	STANDARD
content-encoding	gzip

Meta Utama

Language: en-US
Title: MDN Web Docs
Description: The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
Robots
Canonical: https://developer.mozilla.org/en-US/
AMP HTML: -
H1: 0 (Resources for Developers, by Developers)
Img tanpa alt: 0

OpenGraph / Twitter

og:title: MDN Web Docs
og:description: The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
og:image: https://developer.mozilla.org/mdn-social-image.46ac2375.png
og:url: https://developer.mozilla.org/en-US/
twitter:card: summary
twitter:title
twitter:description

Hreflang

hreflang	URL
Tidak ada link hreflang.