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.7b7ce1fc93175c86.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.b4ecc71ab736bd5b.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-latest-news.ef3b9e57333a87bc.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.2bcbb1476c70410c.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.013b4a4ed330892a.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-logo.aea5ff6edf1b9cfb.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-menu.c41c14be9597dcd9.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 src="/static/client/runtime.db26ef553cfc06d8.js" type="module"></script><script src="/static/client/1111.53dba753dc3eb961.js" type="module"></script><script src="/static/client/8903.ce3ee42276c345b9.js" type="module"></script><script src="/static/client/index.8f4a79968ee5cab0.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">Skip to main content</a></li>
      <li><a href="#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><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><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><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><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><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><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>
                        </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><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><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 locale="en-US"></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"
                ><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-nvdp2mv9arl"
          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-nvdp2mv9arl" 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/"
              >Deutsch</a
            >
          </li>
        
          <li>
            <a
              class="language-switcher__option"
              data-current
              
              href="/en-US/"
              >English (US)</a
            >
          </li>
        
          <li>
            <a
              class="language-switcher__option"
              
              
              href="/es/"
              >Español</a
            >
          </li>
        
          <li>
            <a
              class="language-switcher__option"
              
              
              href="/fr/"
              >Français</a
            >
          </li>
        
          <li>
            <a
              class="language-switcher__option"
              
              
              href="/ja/"
              >日本語</a
            >
          </li>
        
          <li>
            <a
              class="language-switcher__option"
              
              
              href="/ko/"
              >한국어</a
            >
          </li>
        
          <li>
            <a
              class="language-switcher__option"
              
              
              href="/pt-BR/"
              >Português (do Brasil)</a
            >
          </li>
        
          <li>
            <a
              class="language-switcher__option"
              
              
              href="/ru/"
              >Русский</a
            >
          </li>
        
          <li>
            <a
              class="language-switcher__option"
              
              
              href="/zh-CN/"
              >中文 (简体)</a
            >
          </li>
        
          <li>
            <a
              class="language-switcher__option"
              
              
              href="/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/"
                    >Blog</a
                  >
              <h3 class="featured-articles__title">
                <a href="/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"
                    >Web APIs</a
                  >
              <h3 class="featured-articles__title">
                <a href="/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"
                    >Web APIs</a
                  >
              <h3 class="featured-articles__title">
                <a href="/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"
                    >JavaScript</a
                  >
              <h3 class="featured-articles__title">
                <a href="/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/"
                    >developer.mozilla.org</a
                  >
              <h3 class="latest-news__title">
                <a href="/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">
                6 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><li>
            <article class="latest-news__item">
              <a class="latest-news__source" href="/en-US/blog/"
                    >developer.mozilla.org</a
                  >
              <h3 class="latest-news__title">
                <a href="/en-US/blog/image-formats-pixels-graphics/">Image formats: Pixel data from encoders to decoders</a>
              </h3>
              <time class="latest-news__date" datetime="2025-08-04">
                7 months ago
              </time>
              <p class="latest-news__summary">From individual pixels to fully decoded images on your screen, raw pixel data gets transformed, compressed, and efficiently delivered. Learn about the techniques and optimizations that shrink image information without any perceivable loss in quality.</p>
            </article>
          </li><li>
            <article class="latest-news__item">
              <a class="latest-news__source" href="/en-US/blog/"
                    >developer.mozilla.org</a
                  >
              <h3 class="latest-news__title">
                <a href="/en-US/blog/color-models-humans-devices/">Image formats: Color models for humans and devices</a>
              </h3>
              <time class="latest-news__date" datetime="2025-05-06">
                10 months ago
              </time>
              <p class="latest-news__summary">Images help bring more color and life to the web. This post describes how images are represented by humans and on different devices, with details about color spaces and vision theory.</p>
            </article>
          </li><li>
            <article class="latest-news__item">
              <a class="latest-news__source" href="/en-US/blog/"
                    >developer.mozilla.org</a
                  >
              <h3 class="latest-news__title">
                <a href="/en-US/blog/h1-element-styles/">Default styles for h1 elements are changing</a>
              </h3>
              <time class="latest-news__date" datetime="2025-04-11">
                11 months ago
              </time>
              <p class="latest-news__summary">Browsers are starting to roll out changes in default UA styles for nested section headings. This post describes the incoming changes, how to identify if it&#39;s an issue on your websites, and hints for conformant and better-structured pages.
</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-02-27T06:52:09Z"
            >
              18 hours ago
            </time>
            <div class="recent-contributions__title">
              <a class="external" href="https://github.com/mdn/content/pull/43257"
                >Fix capitalization</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-02-27T08:31:01Z"
            >
              16 hours ago
            </time>
            <div class="recent-contributions__title">
              <a class="external" href="https://github.com/mdn/content/pull/43273"
                >fix: replace &quot;Whack-a-Mole&quot; idiom per inclusive language guide</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-02-27T12:14:17Z"
            >
              13 hours ago
            </time>
            <div class="recent-contributions__title">
              <a class="external" href="https://github.com/mdn/content/pull/43274"
                >Update the collation descriptions</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-02-27T15:24:40Z"
            >
              9 hours ago
            </time>
            <div class="recent-contributions__title">
              <a class="external" href="https://github.com/mdn/content/pull/42935"
                >Add font-width property and descriptor</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-02-27T19:13:49Z"
            >
              6 hours ago
            </time>
            <div class="recent-contributions__title">
              <a class="external" href="https://github.com/mdn/content/pull/43109"
                >[WebDriver Classic] Add pages for Back, Forward, Refresh, Get Title, and New Session commands</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-02-27T23:58:31Z"
            >
              48 minutes ago
            </time>
            <div class="recent-contributions__title">
              <a class="external" href="https://github.com/mdn/translated-content/pull/33752"
                >chore(fr): update of `Web/JavaScript/Reference/Global_Objects/JSON`</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-02-27T23:58:40Z"
            >
              48 minutes ago
            </time>
            <div class="recent-contributions__title">
              <a class="external" href="https://github.com/mdn/translated-content/pull/33753"
                >chore(fr): translation of `Web/JavaScript/Reference/Global_Objects/JSON/isRawJSON`</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-02-27T23:58:48Z"
            >
              48 minutes ago
            </time>
            <div class="recent-contributions__title">
              <a class="external" href="https://github.com/mdn/translated-content/pull/33754"
                >chore(fr): update of `Web/JavaScript/Reference/Global_Objects/JSON/parse`</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-02-27T23:58:56Z"
            >
              47 minutes ago
            </time>
            <div class="recent-contributions__title">
              <a class="external" href="https://github.com/mdn/translated-content/pull/33755"
                >chore(fr): translation of `Web/JavaScript/Reference/Global_Objects/JSON/rawJSON`</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-02-27T23:59:09Z"
            >
              47 minutes ago
            </time>
            <div class="recent-contributions__title">
              <a class="external" href="https://github.com/mdn/translated-content/pull/33756"
                >chore(fr): update of `Web/JavaScript/Reference/Global_Objects/JSON/stringify`</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-g6i8zosutl"
          data-variant="primary"
          
          part="button"
        >
          
    <span id="label-g6i8zosutl" 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"><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=""
                          >
                            About
                          </a>
                        </li>
                      
                        <li>
                          <a
                            href="/en-US/blog/"
                            class=""
                            target=""
                            rel=""
                          >
                            Blog
                          </a>
                        </li>
                      
                        <li>
                          <a
                            href="https://www.mozilla.org/en-US/careers/listings/"
                            class="external"
                            target="_blank"
                            rel="noopener"
                          >
                            Mozilla careers
                          </a>
                        </li>
                      
                        <li>
                          <a
                            href="/en-US/advertising"
                            class=""
                            target=""
                            rel=""
                          >
                            Advertise with us
                          </a>
                        </li>
                      
                        <li>
                          <a
                            href="/en-US/plus"
                            class=""
                            target=""
                            rel=""
                          >
                            MDN Plus
                          </a>
                        </li>
                      
                        <li>
                          <a
                            href="https://support.mozilla.org/products/mdn-plus"
                            class="external"
                            target="_blank"
                            rel="noopener"
                          >
                            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=""
                          >
                            MDN Community
                          </a>
                        </li>
                      
                        <li>
                          <a
                            href="/en-US/docs/MDN/Community"
                            class=""
                            target=""
                            rel=""
                          >
                            Community resources
                          </a>
                        </li>
                      
                        <li>
                          <a
                            href="/en-US/docs/MDN/Writing_guidelines"
                            class=""
                            target=""
                            rel=""
                          >
                            Writing guidelines
                          </a>
                        </li>
                      
                        <li>
                          <a
                            href="/discord"
                            class="external"
                            target="_blank"
                            rel="noopener"
                          >
                            MDN Discord
                          </a>
                        </li>
                      
                        <li>
                          <a
                            href="https://github.com/mdn"
                            class="external"
                            target="_blank"
                            rel="noopener"
                          >
                            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=""
                          >
                            Web technologies
                          </a>
                        </li>
                      
                        <li>
                          <a
                            href="/en-US/docs/Learn_web_development"
                            class=""
                            target=""
                            rel=""
                          >
                            Learn web development
                          </a>
                        </li>
                      
                        <li>
                          <a
                            href="/en-US/docs/MDN/Guides"
                            class=""
                            target=""
                            rel=""
                          >
                            Guides
                          </a>
                        </li>
                      
                        <li>
                          <a
                            href="/en-US/docs/MDN/Tutorials"
                            class=""
                            target=""
                            rel=""
                          >
                            Tutorials
                          </a>
                        </li>
                      
                        <li>
                          <a
                            href="/en-US/docs/Glossary"
                            class=""
                            target=""
                            rel=""
                          >
                            Glossary
                          </a>
                        </li>
                      
                        <li>
                          <a
                            href="https://hacks.mozilla.org/"
                            class="external"
                            target="_blank"
                            rel="noopener"
                          >
                            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"><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"
                    >Website Privacy Notice</a
                  >
                </li>
              
                <li>
                  <a href="https://www.mozilla.org/en-US/privacy/websites/data-preferences/" class="external"
                    >Telemetry Settings</a
                  >
                </li>
              
                <li>
                  <a href="https://www.mozilla.org/about/legal/terms/mozilla" class="external"
                    >Legal</a
                  >
                </li>
              
                <li>
                  <a href="https://www.mozilla.org/about/governance/policies/participation/" class="external"
                    >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

server	Google Frontend
cache-control	public, max-age=3600
x-cloud-trace-context	00282115b58fe334ceb74b6ade760a55
content-type	text/html
location	/en-US/
accept-ranges	bytes
via	1.1 google, 1.1 varnish, 1.1 varnish
date	Sun, 01 Mar 2026 01:05:07 GMT
x-served-by	cache-sin-wsss1830041-SIN, cache-sin-wsat1880032-SIN
x-cache	MISS, HIT
x-cache-hits	0, 1
x-timer	S1772327108.713053,VS0,VE1
vary	Accept-Encoding
content-length	15938
x-goog-storage-class	STANDARD
x-goog-meta-goog-reserved-file-mtime	1772239587
strict-transport-security	max-age=63072000
x-goog-stored-content-length	111646
x-frame-options	DENY
x-guploader-uploadid	AGQBYWxmRbb5OC-50KLWKwMIzPa8h_4wo9e1ocsm-k1_MtRclmnKJ_jyc7_8dh9xgHhhOMiPyLrUQWw
last-modified	Sat, 28 Feb 2026 01:07:28 GMT
expires	Sat, 28 Feb 2026 02:07:29 GMT
referrer-policy	strict-origin-when-cross-origin
x-content-type-options	nosniff
x-goog-metageneration	1
content-security-policy	default-src 'self'; script-src 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://.googletagmanager.com assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; script-src-elem 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://.googletagmanager.com assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; style-src 'report-sample' 'self' 'unsafe-inline'; 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://.google-analytics.com https://.analytics.google.com https://.googletagmanager.com https://incoming.telemetry.mozilla.org https://observatory-api.mdn.allizom.net https://observatory-api.mdn.mozilla.net https://api.github.com/search/issues stats.g.doubleclick.net 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 .googleusercontent.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/ https://.google-analytics.com https://*.googletagmanager.com www.gstatic.com; manifest-src 'self'; media-src 'self' archive.org videos.cdn.mozilla.net https://mdn.github.io/shared-assets/; child-src 'self'; worker-src 'self';
x-goog-hash	crc32c=gDKOCQ==, md5=D9o2RiV0ly4tytwjuDYh/g==
etag	"0fda36462574972e2dcadc23b83621fe"
x-goog-stored-content-encoding	identity
x-goog-generation	1772240848785615
content-encoding	gzip
age	3364

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.