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.396ee18213bb0bd7.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-homepage.0980eec27925cc11.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-homepage-header.da8a69fafe1cfb00.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-homepage-hero.61cf31e2c2f1b72c.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-mandala.8fbfeb0567dbde40.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-homepage-body.22274e9a4a78b7ae.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-featured-articles.a2c1f1fd278c9256.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-latest-news.afe0cccaa067269f.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-recent-contributions.ddcab7ad78446b98.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-homepage-footer.5d6588cf8c9b4dc6.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/3391.cf8a6eadcf4a9e30.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-homepage-contributor-spotlight.5dc97e2f6ae1056d.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-page-layout.5a4354f33e894319.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-a11y-menu.5796ee87cb69f93f.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-navigation.3a34ee593a554c40.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-logo.aea5ff6edf1b9cfb.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-menu.3376b3e11656fba0.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-breadcrumbs-bar.9a51a3c76a6231d0.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-breadcrumbs.d06ce8d09f42feb8.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-footer.a2850e459e2d290b.css" fetchpriority="high" />
          <link
                rel="preload"
                href="/static/client/jetbrains-mono-latin.119994ed445212c7.woff2"
                as="font"
                type="font/woff2"
                crossorigin="anonymous"
                fetchpriority="low"
              /><link
                rel="preload"
                href="/static/client/inter-latin.9a3b1bc220d426ef.woff2"
                as="font"
                type="font/woff2"
                crossorigin="anonymous"
                fetchpriority="low"
              />
          <script
            data-cfasync="false"
            data-report-only="on"
            data-prompt="0"
            src="https://transcend-cdn.com/cm/d556c3a1-e57c-4bdf-a490-390a1aebf6dd/airgap.js"
          ></script>
          <script src="/static/client/runtime.c294a6bdc7a42570.js" type="module"></script><script src="/static/client/1111.53dba753dc3eb961.js" type="module"></script><script src="/static/client/8903.f870aafb338b203a.js" type="module"></script><script src="/static/client/index.9a449352d879bbd5.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><li>
                                <a
                                        class="external"
                                        
                                        href="https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar"
                                        
                                        
                                        data-glean-id="menu_click_submenu: learn -&gt; https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar"
                                        >Check out the video course from Scrimba, our partner</a
                                      >
                              </li>
                        </ul></dd>
                            </dl><dl>
                              <dt>Learn HTML</dt>
                              <dd><ul>
                          <li>
                                <a
        
        href="/en-US/docs/Learn_web_development/Core/Structuring_content"
        
        
        data-glean-id="menu_click_submenu: learn -&gt; /en-US/docs/Learn_web_development/Core/Structuring_content"
        >Structuring content with HTML module</a
      >
                              </li>
                        </ul></dd>
                            </dl><dl>
                              <dt>Learn CSS</dt>
                              <dd><ul>
                          <li>
                                <a
        
        href="/en-US/docs/Learn_web_development/Core/Styling_basics"
        
        
        data-glean-id="menu_click_submenu: learn -&gt; /en-US/docs/Learn_web_development/Core/Styling_basics"
        >CSS styling basics module</a
      >
                              </li><li>
                                <a
        
        href="/en-US/docs/Learn_web_development/Core/CSS_layout"
        
        
        data-glean-id="menu_click_submenu: learn -&gt; /en-US/docs/Learn_web_development/Core/CSS_layout"
        >CSS layout module</a
      >
                              </li>
                        </ul></dd>
                            </dl><dl>
                              <dt>Learn JavaScript</dt>
                              <dd><ul>
                          <li>
                                <a
        
        href="/en-US/docs/Learn_web_development/Core/Scripting"
        
        
        data-glean-id="menu_click_submenu: learn -&gt; /en-US/docs/Learn_web_development/Core/Scripting"
        >Dynamic scripting with JavaScript module</a
      >
                              </li>
                        </ul></dd>
                            </dl>
                    </div>
                  </div>
                </mdn-dropdown>
          </div><div class="menu__tab" data-section="tools">
            <mdn-dropdown><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></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-fh56cwr8p3"
          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-fh56cwr8p3" 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">
                8 months ago
              </time>
              <p class="latest-news__summary">MDN is getting a facelift 🎉. Discover what&#39;s changed, what&#39;s improved, and how navigating the site just got smoother.
</p>
            </article>
          </li><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">
                8 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">
                11 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">
                1 year 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-04-17T12:08:41Z"
            >
              13 hours ago
            </time>
            <div class="recent-contributions__title">
              <a class="external" href="https://github.com/mdn/content/pull/43813"
                >Add CSS overscroll-behavior fix to Firefox 150 release notes</a
              >
            </div>
          </li><li class="recent-contributions__item">
            <span class="recent-contributions__repo">
              <a
                class="external"
                href="https://github.com/mdn/content"
                data-glean-id="homepage: contribution_repo 2"
                >mdn/content</a
              >
            </span>
            <time
              class="recent-contributions__date"
              datetime="2026-04-17T14:29:45Z"
            >
              10 hours ago
            </time>
            <div class="recent-contributions__title">
              <a class="external" href="https://github.com/mdn/content/pull/43840"
                >added boolean container style queries to syntax</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 3"
                >mdn/translated-content</a
              >
            </span>
            <time
              class="recent-contributions__date"
              datetime="2026-04-17T15:30:22Z"
            >
              9 hours ago
            </time>
            <div class="recent-contributions__title">
              <a class="external" href="https://github.com/mdn/translated-content/pull/35129"
                >2026/03/17 時点の英語版に基づき更新</a
              >
            </div>
          </li><li class="recent-contributions__item">
            <span class="recent-contributions__repo">
              <a
                class="external"
                href="https://github.com/mdn/content"
                data-glean-id="homepage: contribution_repo 4"
                >mdn/content</a
              >
            </span>
            <time
              class="recent-contributions__date"
              datetime="2026-04-17T15:33:48Z"
            >
              9 hours ago
            </time>
            <div class="recent-contributions__title">
              <a class="external" href="https://github.com/mdn/content/pull/43421"
                >Document backdrop root concept on backdrop-filter page</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 5"
                >mdn/translated-content</a
              >
            </span>
            <time
              class="recent-contributions__date"
              datetime="2026-04-17T22:52:35Z"
            >
              2 hours ago
            </time>
            <div class="recent-contributions__title">
              <a class="external" href="https://github.com/mdn/translated-content/pull/35258"
                >fix(fr): add missing indentation</a
              >
            </div>
          </li><li class="recent-contributions__item">
            <span class="recent-contributions__repo">
              <a
                class="external"
                href="https://github.com/mdn/translated-content"
                data-glean-id="homepage: contribution_repo 6"
                >mdn/translated-content</a
              >
            </span>
            <time
              class="recent-contributions__date"
              datetime="2026-04-17T22:56:09Z"
            >
              2 hours ago
            </time>
            <div class="recent-contributions__title">
              <a class="external" href="https://github.com/mdn/translated-content/pull/35264"
                >chore(sync-fr): sync french content with en-us</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 7"
                >mdn/content</a
              >
            </span>
            <time
              class="recent-contributions__date"
              datetime="2026-04-17T22:58:04Z"
            >
              2 hours ago
            </time>
            <div class="recent-contributions__title">
              <a class="external" href="https://github.com/mdn/content/pull/43845"
                >Synchronize with BCD v7.3.12</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 8"
                >mdn/content</a
              >
            </span>
            <time
              class="recent-contributions__date"
              datetime="2026-04-17T23:00:02Z"
            >
              2 hours ago
            </time>
            <div class="recent-contributions__title">
              <a class="external" href="https://github.com/mdn/content/pull/43839"
                >added release notes for nested @container style() queries</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-w7mew9gmq2h"
          data-variant="primary"
          
          part="button"
        >
          
    <span id="label-w7mew9gmq2h" class="label"  part="label"
      >Get involved</span
    >
  <span class="icon" part="icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M5 12h14m-7-7 7 7-7 7"/></svg></span>
        </a>
      
      </div>

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

<dl class="footer__links">
                <dt>MDN</dt>
                <dd>
                  <ul>
                    
                        <li>
                          <a
                            href="/en-US/about"
                            class=""
                            target=""
                            rel=""
                          >
                            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"><title>Mozilla</title><path d="m13.32 22.1 5.1 24.3h2.1l5.1-24.3H39.3v37.34h-7.26V28.46h-2.1l-6.96 30.98h-7.02L9.02 28.46h-2.1v31H-.35V22.1h13.66Zm45.12 8.74c8.73 0 13.8 5.15 13.8 14.57S67.14 60 58.44 60c-8.73 0-13.8-5.17-13.8-14.59 0-9.43 5.07-14.57 13.8-14.57m0 23.34c4.1 0 6.16-2.1 6.16-6.73v-4.12c0-4.62-2.06-6.73-6.16-6.73s-6.15 2.1-6.15 6.73v4.12c0 4.63 2.05 6.73 6.15 6.73m17.68-.14 14.82-17.26H76.32v-5.41h23.31v5.4L84.84 54.05h15.03v5.4H76.13v-5.41Zm28.07-22.67h10.7v28.07h-7.25V36.77h-3.48v-5.4zm3.44-9.27h7.26v5.4h-7.25v-5.4Zm12.62 0h10.72v37.34h-7.24V27.5h-3.48zm16.08 0h10.7v37.34h-7.25V27.5h-3.48v-5.4zm27.8 8.74c4.24 0 7.08 2.05 7.87 5.63h2.1v-5.1h8.88v5.4h-3.47v17.28h3.47v5.4h-4.25c-3 0-4.63-1.63-4.63-4.62v-.48H172c-.78 3.58-3.63 5.63-7.88 5.63-6.68 0-11.4-5.59-11.4-14.58 0-9 4.72-14.55 11.4-14.55m2.2 23.34c4.1 0 5.93-2.1 5.93-6.73v-4.12c0-4.62-1.82-6.73-5.94-6.73-3.99 0-5.92 2.1-5.92 6.73v4.13c0 4.62 1.92 6.72 5.93 6.72m46.28 5.27h-7.26V0h7.26zm6.3-28.41h30.8v-2.1l-20.4-7.32v-5.88l20.4-7.33v-2.1h-24.27V0h30.79v12l-16.62 5.63v2.11l16.61 5.64v12H218.9zm0-24.73h6.5v6.52h-6.5z"/></svg></a
          >
          <ul>
            
                <li>
                  <a href="https://www.mozilla.org/privacy/websites/" class="external"
                    >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

x-cloud-trace-context	cc62be1842539e43c08d9575d6b8a2a4;o=1
cache-control	public, max-age=3600
content-type	text/html
via	1.1 google, 1.1 varnish, 1.1 varnish
location	/en-US/
server	Google Frontend
accept-ranges	bytes
age	2106
date	Sat, 18 Apr 2026 20:56:00 GMT
x-served-by	cache-sin-wsss1830041-SIN, cache-sin-wsat1880094-SIN
x-cache	MISS, HIT
x-cache-hits	0, 0
x-timer	S1776545760.170880,VS0,VE1
vary	Accept-Encoding
content-length	16098
x-content-type-options	nosniff
x-guploader-uploadid	AMNfjG25Qy-EuwsdBlK6cNXcCGoAJqUuzfsajWhKhYUOwql0lOUUKXUyLpnbxb_Ds_YalhSD
last-modified	Sat, 18 Apr 2026 01:23:42 GMT
x-goog-hash	crc32c=/vLcOg==, md5=rwzFyB/j8fdSSBGu+7j8Qw==
x-goog-storage-class	STANDARD
x-goog-metageneration	1
x-goog-generation	1776475422580731
x-goog-meta-goog-reserved-file-mtime	1776473968
referrer-policy	strict-origin-when-cross-origin
strict-transport-security	max-age=63072000
x-frame-options	DENY
etag	"af0cc5c81fe3f1f7524811aefbb8fc43"
expires	Sat, 18 Apr 2026 20:20:46 GMT
x-goog-stored-content-length	110910
x-goog-stored-content-encoding	identity
content-security-policy	default-src 'self'; script-src 'report-sample' 'self' 'wasm-unsafe-eval' assets.codepen.io production-assets.codepen.io https://js.stripe.com transcend-cdn.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; script-src-elem 'report-sample' 'self' 'wasm-unsafe-eval' assets.codepen.io production-assets.codepen.io https://js.stripe.com transcend-cdn.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; style-src 'report-sample' 'self' 'unsafe-inline' transcend-cdn.com; object-src 'none'; base-uri 'self'; connect-src 'self' developer.allizom.org bcd.developer.allizom.org bcd.developer.mozilla.org updates.developer.allizom.org updates.developer.mozilla.org https://incoming.telemetry.mozilla.org https://observatory-api.mdn.allizom.net https://observatory-api.mdn.mozilla.net telemetry.transcend.io telemetry.us.transcend.io transcend-cdn.com https://api.github.com/search/issues https://api.stripe.com; font-src 'self'; frame-src 'self' mdn.github.io .mdnplay.dev .mdnyalp.dev .play.test.mdn.allizom.net https://v2.scrimba.com https://scrimba.com jsfiddle.net www.youtube-nocookie.com codepen.io survey.alchemer.com https://js.stripe.com; img-src 'self' data: .githubusercontent.com *.gravatar.com mozillausercontent.com firefoxusercontent.com profile.stage.mozaws.net profile.accounts.firefox.com developer.mozilla.org mdn.dev wikipedia.org upload.wikimedia.org https://mdn.github.io/shared-assets/ https://mdn.dev/; manifest-src 'self'; media-src 'self' archive.org videos.cdn.mozilla.net https://mdn.github.io/shared-assets/; child-src 'self'; worker-src 'self';
content-encoding	gzip

Meta Utama

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

OpenGraph / Twitter

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

Hreflang

hreflang	URL
Tidak ada link hreflang.