<!doctype html>
<html
lang="en-US"
data-theme="light dark"
data-renderer="Doc"
>
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>HTML: HyperText Markup Language | MDN</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.372b82f47e6f3110.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-reference-layout.2c2d031dc83d605a.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-content-section.980484810866c4f3.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-heading-anchor.0eec5185ab9425b7.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-reference-toc.9b9bd019efd16b86.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-article-footer.81ae18c89fc527dc.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-left-sidebar.4d5208e5cb72af05.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-page-layout.e9b295138adbd4bc.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-a11y-menu.5796ee87cb69f93f.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-navigation.013b4a4ed330892a.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-logo.aea5ff6edf1b9cfb.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-menu.c41c14be9597dcd9.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-breadcrumbs-bar.02910e49bb8b2372.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-breadcrumbs.d06ce8d09f42feb8.css" fetchpriority="high" /><link rel="stylesheet" href="/static/client/styles-footer.a2850e459e2d290b.css" fetchpriority="high" />
<link
rel="preload"
href="/static/client/jetbrains-mono-latin.119994ed445212c7.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"
fetchpriority="low"
/><link
rel="preload"
href="/static/client/inter-latin.9a3b1bc220d426ef.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"
fetchpriority="low"
/>
<script src="/static/client/runtime.9ec1e04a0746cef9.js" type="module"></script><script src="/static/client/1111.758a0ef999631930.js" type="module"></script><script src="/static/client/8903.3b8e2acd32393bf2.js" type="module"></script><script src="/static/client/index.9d683ac47d6c85d1.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="HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript)." /><meta name="og:url" content="https://developer.mozilla.org/en-US/docs/Web/HTML" /><meta name="og:title" content="HTML: HyperText Markup Language | MDN" /><meta name="og:locale" content="en_US" /><meta name="og:description" content="HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript)." /><meta name="og:image" content="https://developer.mozilla.org/mdn-social-share.d893525a4fb5fb1f67a2.png" /><meta name="og:image:type" content="image/png" /><meta name="og:image:height" content="1080" /><meta name="og:image:width" content="1920" /><meta name="og:image:alt" content="The MDN Web Docs logo, featuring a blue accent color, displayed on a solid black background." /><meta name="og:site_name" content="MDN Web Docs" /><meta name="twitter:card" content="summary_large_image" /><meta name="twitter:creator" content="MozDevNet" />
<link
rel="canonical"
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
/>
<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="">
<mdn-placement-top></mdn-placement-top>
</div>
<header class="page-layout__header">
<nav class="navigation" data-scheme="" 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><!--lit-part PwhADO+m7/M=--><!--lit-node 0--><button
class="mdn-search-button"
title="Search the site"
data-glean-id="quick-search-open: menu"
>
<!--lit-part ijtgkDNyZhc=--><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><!--/lit-part-->
</button><!--/lit-part--></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><!--lit-part NrjKVwpqTpA=-->
<!--lit-node 0--><slot name="button" ></slot>
<!--lit-node 1--><slot name="dropdown" ></slot>
<!--/lit-part--></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 -> /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 -> /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 -> /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 -> /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 -> /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 -> /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 -> /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 -> /en-US/docs/Web/HTML/Guides/Date_and_time_formats"
>Date & 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 -> /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 -> /en-US/docs/Web/SVG"
>SVG</a
>
</li><li>
<a
href="/en-US/docs/Web/MathML"
data-glean-id="menu_click_submenu: html -> /en-US/docs/Web/MathML"
>MathML</a
>
</li><li>
<a
href="/en-US/docs/Web/XML"
data-glean-id="menu_click_submenu: html -> /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><!--lit-part NrjKVwpqTpA=-->
<!--lit-node 0--><slot name="button" ></slot>
<!--lit-node 1--><slot name="dropdown" ></slot>
<!--/lit-part--></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 -> /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 -> /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 -> /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 -> /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 -> /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 -> /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 -> /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 -> /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 -> /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 -> /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 -> /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 -> /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 -> /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 -> /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 -> /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><!--lit-part NrjKVwpqTpA=-->
<!--lit-node 0--><slot name="button" ></slot>
<!--lit-node 1--><slot name="dropdown" ></slot>
<!--/lit-part--></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 -> /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 -> /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 -> /en-US/docs/Web/JavaScript/Reference/Operators"
>Expressions & operators</a
>
</li><li>
<a
href="/en-US/docs/Web/JavaScript/Reference/Statements"
data-glean-id="menu_click_submenu: javascript -> /en-US/docs/Web/JavaScript/Reference/Statements"
>Statements & declarations</a
>
</li><li>
<a
href="/en-US/docs/Web/JavaScript/Reference/Functions"
data-glean-id="menu_click_submenu: javascript -> /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 -> /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 -> /en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling"
>Control flow & error handing</a
>
</li><li>
<a
href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration"
data-glean-id="menu_click_submenu: javascript -> /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 -> /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 -> /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 -> /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><!--lit-part NrjKVwpqTpA=-->
<!--lit-node 0--><slot name="button" ></slot>
<!--lit-node 1--><slot name="dropdown" ></slot>
<!--/lit-part--></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 -> /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 -> /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 -> /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 -> /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 -> /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 -> /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 -> /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 -> /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 -> /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 -> /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 -> /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 -> /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 -> /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><!--lit-part NrjKVwpqTpA=-->
<!--lit-node 0--><slot name="button" ></slot>
<!--lit-node 1--><slot name="dropdown" ></slot>
<!--/lit-part--></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 -> /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 -> /en-US/docs/Web/Accessibility"
>Accessibility</a
>
</li><li>
<a
href="/en-US/docs/Web/HTTP"
data-glean-id="menu_click_submenu: all -> /en-US/docs/Web/HTTP"
>HTTP</a
>
</li><li>
<a
href="/en-US/docs/Web/URI"
data-glean-id="menu_click_submenu: all -> /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 -> /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 -> /en-US/docs/WebAssembly"
>WebAssembly</a
>
</li><li>
<a
href="/en-US/docs/Web/WebDriver"
data-glean-id="menu_click_submenu: all -> /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 -> /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 -> /en-US/docs/Web/Media"
>Media</a
>
</li><li>
<a
href="/en-US/docs/Web/Performance"
data-glean-id="menu_click_submenu: all -> /en-US/docs/Web/Performance"
>Performance</a
>
</li><li>
<a
href="/en-US/docs/Web/Privacy"
data-glean-id="menu_click_submenu: all -> /en-US/docs/Web/Privacy"
>Privacy</a
>
</li><li>
<a
href="/en-US/docs/Web/Security"
data-glean-id="menu_click_submenu: all -> /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 -> /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><!--lit-part NrjKVwpqTpA=-->
<!--lit-node 0--><slot name="button" ></slot>
<!--lit-node 1--><slot name="dropdown" ></slot>
<!--/lit-part--></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 -> /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 -> /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 -> /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 -> /en-US/curriculum/"
>MDN Curriculum</a
>
</li>
</ul></dd>
</dl><dl>
<dt>Learn HTML</dt>
<dd><ul>
<li>
<a
href="/en-US/docs/Learn_web_development/Core/Structuring_content"
data-glean-id="menu_click_submenu: learn -> /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 -> /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 -> /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 -> /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><!--lit-part NrjKVwpqTpA=-->
<!--lit-node 0--><slot name="button" ></slot>
<!--lit-node 1--><slot name="dropdown" ></slot>
<!--/lit-part--></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 -> /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 -> /en-US/observatory"
>HTTP Observatory</a
>
</li>
</ul><ul>
<li>
<a
href="/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Border-image_generator"
data-glean-id="menu_click_submenu: tools -> /en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Border-image_generator"
>Border-image generator</a
>
</li><li>
<a
href="/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Border-radius_generator"
data-glean-id="menu_click_submenu: tools -> /en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Border-radius_generator"
>Border-radius generator</a
>
</li><li>
<a
href="/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Box-shadow_generator"
data-glean-id="menu_click_submenu: tools -> /en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Box-shadow_generator"
>Box-shadow generator</a
>
</li><li>
<a
href="/en-US/docs/Web/CSS/CSS_colors/Color_format_converter"
data-glean-id="menu_click_submenu: tools -> /en-US/docs/Web/CSS/CSS_colors/Color_format_converter"
>Color format converter</a
>
</li><li>
<a
href="/en-US/docs/Web/CSS/CSS_colors/Color_mixer"
data-glean-id="menu_click_submenu: tools -> /en-US/docs/Web/CSS/CSS_colors/Color_mixer"
>Color mixer</a
>
</li><li>
<a
href="/en-US/docs/Web/CSS/CSS_shapes/Shape_generator"
data-glean-id="menu_click_submenu: tools -> /en-US/docs/Web/CSS/CSS_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><!--lit-part NrjKVwpqTpA=-->
<!--lit-node 0--><slot name="button" ></slot>
<!--lit-node 1--><slot name="dropdown" ></slot>
<!--/lit-part--></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 -> /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 -> /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 -> /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 -> 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 -> /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><!--lit-part PwhADO+m7/M=--><!--lit-node 0--><button
class="mdn-search-button"
title="Search the site"
data-glean-id="quick-search-open: menu"
>
<!--lit-part ijtgkDNyZhc=--><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><!--/lit-part-->
</button><!--/lit-part--></template></mdn-search-button>
</div>
<mdn-user-menu locale="en-US"></mdn-user-menu>
</div>
</nav>
<mdn-search-modal id="search"></mdn-search-modal>
<div class="breadcrumbs-bar" data-scheme="">
<mdn-toggle-sidebar><template shadowroot="open" shadowrootmode="open"><style>:host{border-right:1px solid var(--color-border-primary);display:block;height:100%}mdn-button{height:100%}</style><!--lit-part gv6WcfvvaIc=--><!--lit-node 0--><mdn-button
icon-only variant="plain" aria-controls="main-sidebar" 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><!--lit-part ds8wn4pKxlc=-->
<!--lit-node 0--><button
class="button"
aria-labelledby="label-r0dwzqhrvr"
data-variant="plain"
part="button"
>
<!--lit-part--><!--lit-part bRP2a5ux/uw=--><span class="icon" part="icon"><!--lit-part 6ks+zZ9KZSc=--><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"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/></svg><!--/lit-part--></span><!--/lit-part--><!--lit-part rI2hX8LXYZM=-->
<!--lit-node 0--><span id="label-r0dwzqhrvr" class="label" hidden part="label"
><!--lit-part Pz0gobCCM4E=--><slot></slot><!--/lit-part--></span
>
<!--/lit-part--><!--/lit-part-->
</button>
<!--/lit-part--></template>
<!--lit-part-->Toggle sidebar<!--/lit-part-->
</mdn-button><!--/lit-part--></template></mdn-toggle-sidebar>
<ol
class="breadcrumbs"
vocab="https://schema.org/"
typeof="BreadcrumbList"
>
<li property="itemListElement" typeof="ListItem">
<a href="/en-US/docs/Web" property="item" typeof="WebPage"
><span property="name">Web</span></a
>
<meta property="position" content="1" />
</li>
<li property="itemListElement" typeof="ListItem">
<a href="/en-US/docs/Web/HTML" property="item" typeof="WebPage"
><span property="name">HTML</span></a
>
<meta property="position" content="2" />
</li>
</ol>
<mdn-collection-save-button
doc-url="/en-US/docs/Web/HTML"
doc-title="HTML: HyperText Markup Language"
></mdn-collection-save-button>
<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><!--lit-part jjbrVed3TRM=--><div class="color-theme">
<!--lit-node 1--><mdn-dropdown defer-hydration><template shadowroot="open" shadowrootmode="open"><style>:host{display:contents}:host(:not([loaded],:focus-within)) slot[name=dropdown]{display:none}</style><!--lit-part NrjKVwpqTpA=-->
<!--lit-node 0--><slot name="button" ></slot>
<!--lit-node 1--><slot name="dropdown" ></slot>
<!--/lit-part--></template>
<!--lit-node 2--><button
part="button"
slot="button"
class="color-theme__button"
data-mode="light dark"
type="button"
aria-label="Switch color theme"
>
<span><!--lit-part-->Theme<!--/lit-part--></span>
</button>
<div
slot="dropdown"
class="color-theme__dropdown"
id="color-theme__dropdown"
>
<ul class="color-theme__list">
<!--lit-part--><!--lit-part oXzlp8XhpzI=--><li>
<!--lit-node 1--><button
class="color-theme__option"
data-mode="light dark"
data-current
type="button"
>
<!--lit-part-->OS default<!--/lit-part-->
</button>
</li><!--/lit-part--><!--lit-part oXzlp8XhpzI=--><li>
<!--lit-node 1--><button
class="color-theme__option"
data-mode="light"
type="button"
>
<!--lit-part-->Light<!--/lit-part-->
</button>
</li><!--/lit-part--><!--lit-part oXzlp8XhpzI=--><li>
<!--lit-node 1--><button
class="color-theme__option"
data-mode="dark"
type="button"
>
<!--lit-part-->Dark<!--/lit-part-->
</button>
</li><!--/lit-part--><!--/lit-part-->
</ul>
</div>
</mdn-dropdown>
</div><!--/lit-part--></template></mdn-color-theme>
<mdn-language-switcher
locale="en-US" native="English (US)" translations="[{"locale":"en-US","title":"HTML: HyperText Markup Language","native":"English (US)"},{"locale":"de","title":"HTML: HyperText Markup Language","native":"Deutsch"},{"locale":"es","title":"HTML: Lenguaje de etiquetas de hipertexto","native":"Español"},{"locale":"fr","title":"HTML : HyperText Markup Language","native":"Français"},{"locale":"ja","title":"HTML: ハイパーテキストマークアップ言語","native":"日本語"},{"locale":"ko","title":"HTML: Hypertext Markup Language","native":"한국어"},{"locale":"pt-BR","title":"HTML: Linguagem de Marcação de Hipertexto","native":"Português (do Brasil)"},{"locale":"ru","title":"HTML","native":"Русский"},{"locale":"zh-CN","title":"HTML（超文本标记语言）","native":"中文 (简体)"},{"locale":"zh-TW","title":"HTML：超文本標記語言","native":"正體中文 (繁體)"}]" url="/en-US/docs/Web/HTML"><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><!--lit-part chc5lPcfcrc=--><div class="language-switcher">
<!--lit-node 1--><mdn-dropdown defer-hydration><template shadowroot="open" shadowrootmode="open"><style>:host{display:contents}:host(:not([loaded],:focus-within)) slot[name=dropdown]{display:none}</style><!--lit-part NrjKVwpqTpA=-->
<!--lit-node 0--><slot name="button" ></slot>
<!--lit-node 1--><slot name="dropdown" ></slot>
<!--/lit-part--></template>
<button
part="button"
slot="button"
class="language-switcher__button"
type="button"
aria-labelledby="current-locale"
>
<span id="current-locale"><!--lit-part-->English (US)<!--/lit-part--></span>
</button>
<div
slot="dropdown"
class="language-switcher__dropdown"
id="language-switcher__dropdown"
>
<div class="language_switcher__remember">
<!--lit-node 7--><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><!--lit-part 5r9QLJvcF6A=--> <label class="switch">
<!--lit-node 1--><input
class="switch__input"
type="checkbox"
/>
<slot></slot>
</label><!--/lit-part--></template><!--lit-part-->Remember language<!--/lit-part--></mdn-switch
>
<!--lit-node 9--><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><!--lit-part uJUpfbi3Sk0=-->
<!--lit-node 0--><a
class="button"
href="https://github.com/orgs/mdn/discussions/739"
target="_blank"
aria-labelledby="label-8zrrle9pgzv"
data-variant="plain"
part="button"
>
<!--lit-part--><!--lit-part bRP2a5ux/uw=--><span class="icon" part="icon"><!--lit-part quQU0uIDm5U=--><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><!--/lit-part--></span><!--/lit-part--><!--lit-part rI2hX8LXYZM=-->
<!--lit-node 0--><span id="label-8zrrle9pgzv" class="label" hidden part="label"
><!--lit-part Pz0gobCCM4E=--><slot></slot><!--/lit-part--></span
>
<!--/lit-part--><!--/lit-part-->
</a>
<!--/lit-part--></template><!--lit-part-->Learn more<!--/lit-part--></mdn-button
>
</div>
<ul class="language-switcher__list">
<!--lit-part--><!--lit-part FGon1f+Z4tQ=-->
<li>
<!--lit-node 1--><a
class="language-switcher__option"
href="/de/docs/Web/HTML"
><!--lit-part-->Deutsch<!--/lit-part--></a
>
</li>
<!--/lit-part--><!--lit-part FGon1f+Z4tQ=-->
<li>
<!--lit-node 1--><a
class="language-switcher__option"
data-current
href="/en-US/docs/Web/HTML"
><!--lit-part-->English (US)<!--/lit-part--></a
>
</li>
<!--/lit-part--><!--lit-part FGon1f+Z4tQ=-->
<li>
<!--lit-node 1--><a
class="language-switcher__option"
href="/es/docs/Web/HTML"
><!--lit-part-->Español<!--/lit-part--></a
>
</li>
<!--/lit-part--><!--lit-part FGon1f+Z4tQ=-->
<li>
<!--lit-node 1--><a
class="language-switcher__option"
href="/fr/docs/Web/HTML"
><!--lit-part-->Français<!--/lit-part--></a
>
</li>
<!--/lit-part--><!--lit-part FGon1f+Z4tQ=-->
<li>
<!--lit-node 1--><a
class="language-switcher__option"
href="/ja/docs/Web/HTML"
><!--lit-part-->日本語<!--/lit-part--></a
>
</li>
<!--/lit-part--><!--lit-part FGon1f+Z4tQ=-->
<li>
<!--lit-node 1--><a
class="language-switcher__option"
href="/ko/docs/Web/HTML"
><!--lit-part-->한국어<!--/lit-part--></a
>
</li>
<!--/lit-part--><!--lit-part FGon1f+Z4tQ=-->
<li>
<!--lit-node 1--><a
class="language-switcher__option"
href="/pt-BR/docs/Web/HTML"
><!--lit-part-->Português (do Brasil)<!--/lit-part--></a
>
</li>
<!--/lit-part--><!--lit-part FGon1f+Z4tQ=-->
<li>
<!--lit-node 1--><a
class="language-switcher__option"
href="/ru/docs/Web/HTML"
><!--lit-part-->Русский<!--/lit-part--></a
>
</li>
<!--/lit-part--><!--lit-part FGon1f+Z4tQ=-->
<li>
<!--lit-node 1--><a
class="language-switcher__option"
href="/zh-CN/docs/Web/HTML"
><!--lit-part-->中文 (简体)<!--/lit-part--></a
>
</li>
<!--/lit-part--><!--lit-part FGon1f+Z4tQ=-->
<li>
<!--lit-node 1--><a
class="language-switcher__option"
href="/zh-TW/docs/Web/HTML"
><!--lit-part-->正體中文 (繁體)<!--/lit-part--></a
>
</li>
<!--/lit-part--><!--/lit-part-->
</ul>
</div>
</mdn-dropdown>
</div><!--/lit-part--></template></mdn-language-switcher>
</div>
</header>
<div class="page-layout__main">
<div class="reference-layout">
<main id="content" class="reference-layout__content">
<div class="reference-layout__header">
<mdn-survey></mdn-survey>
<h1>HTML: HyperText Markup Language</h1>
<section
class="content-section"
>
<p><strong>HTML</strong> (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (<a href="/en-US/docs/Web/CSS">CSS</a>) or functionality/behavior (<a href="/en-US/docs/Web/JavaScript">JavaScript</a>).</p>
<p>"Hypertext" refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.</p>
<p>HTML uses "markup" to annotate text, images, and other content for display in a Web browser. HTML markup includes special "elements" such as <a href="/en-US/docs/Web/HTML/Reference/Elements/head"><code><head></code></a>, <a href="/en-US/docs/Web/HTML/Reference/Elements/title"><code><title></code></a>, <a href="/en-US/docs/Web/HTML/Reference/Elements/body"><code><body></code></a>, <a href="/en-US/docs/Web/HTML/Reference/Elements/header"><code><header></code></a>, <a href="/en-US/docs/Web/HTML/Reference/Elements/footer"><code><footer></code></a>, <a href="/en-US/docs/Web/HTML/Reference/Elements/article"><code><article></code></a>, <a href="/en-US/docs/Web/HTML/Reference/Elements/section"><code><section></code></a>, <a href="/en-US/docs/Web/HTML/Reference/Elements/p"><code><p></code></a>, <a href="/en-US/docs/Web/HTML/Reference/Elements/div"><code><div></code></a>, <a href="/en-US/docs/Web/HTML/Reference/Elements/span"><code><span></code></a>, <a href="/en-US/docs/Web/HTML/Reference/Elements/img"><code><img></code></a>, <a href="/en-US/docs/Web/HTML/Reference/Elements/aside"><code><aside></code></a>, <a href="/en-US/docs/Web/HTML/Reference/Elements/audio"><code><audio></code></a>, <a href="/en-US/docs/Web/HTML/Reference/Elements/canvas"><code><canvas></code></a>, <a href="/en-US/docs/Web/HTML/Reference/Elements/datalist"><code><datalist></code></a>, <a href="/en-US/docs/Web/HTML/Reference/Elements/details"><code><details></code></a>, <a href="/en-US/docs/Web/HTML/Reference/Elements/embed"><code><embed></code></a>, <a href="/en-US/docs/Web/HTML/Reference/Elements/nav"><code><nav></code></a>, <a href="/en-US/docs/Web/HTML/Reference/Elements/search"><code><search></code></a>, <a href="/en-US/docs/Web/HTML/Reference/Elements/output"><code><output></code></a>, <a href="/en-US/docs/Web/HTML/Reference/Elements/progress"><code><progress></code></a>, <a href="/en-US/docs/Web/HTML/Reference/Elements/video"><code><video></code></a>, <a href="/en-US/docs/Web/HTML/Reference/Elements/ul"><code><ul></code></a>, <a href="/en-US/docs/Web/HTML/Reference/Elements/ol"><code><ol></code></a>, <a href="/en-US/docs/Web/HTML/Reference/Elements/li"><code><li></code></a> and many others.</p>
<p>An HTML element is set off from other text in a document by "tags", which consist of the element name surrounded by <code><</code> and <code>></code>. The name of an element inside a tag is case-insensitive. That is, it can be written in uppercase, lowercase, or a mixture. For example, the <code><title></code> tag can be written as <code><Title></code>, <code><TITLE></code>, or in any other way. However, the convention and recommended practice is to write tags in lowercase.</p>
<p>The articles below can help you learn more about HTML.</p>
</section>
</div>
<aside class="reference-layout__toc">
<nav class="reference-toc">
<h2>In this article</h2>
<ul>
<li><a href="#beginners_tutorials">Beginner's tutorials</a></li><li><a href="#guides">Guides</a></li><li><a href="#how_to">How to</a></li><li><a href="#reference">Reference</a></li><li><a href="#related_topics">Related topics</a></li>
</ul>
</nav>
<mdn-placement-sidebar></mdn-placement-sidebar>
</aside>
<div class="reference-layout__body">
<section
class="content-section"
aria-labelledby="beginners_tutorials"
>
<!--lit-part FdhgxYOrDkw=--><!--lit-node 0--><h2 id="beginners_tutorials" class="heading"><!--lit-node 1--><a class="heading-anchor" href="#beginners_tutorials">Beginner's tutorials</a></h2><!--/lit-part-->
<p>Our <a href="/en-US/docs/Learn_web_development/Core">learn web development core modules</a> contain modern, up-to-date tutorials covering HTML fundamentals.</p>
<dl>
<dt id="your_first_website_creating_the_content"><a href="/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content">Your first website: Creating the content</a></dt>
<dd>
<p>This article provides a brief tour of what HTML is and how to use it, aimed at people who are completely new to web development.</p>
</dd>
<dt id="structuring_content_with_html"><a href="/en-US/docs/Learn_web_development/Core/Structuring_content">Structuring content with HTML</a></dt>
<dd>
<p>This module covers the basics of the HTML language, before looking at key areas such as document structure, links, lists, images, forms, and more.</p>
</dd>
<dt id="html_forms"><a href="/en-US/docs/Learn_web_development/Extensions/Forms">HTML forms</a></dt>
<dd>
<p>Forms are a very important part of the Web — these provide much of the functionality you need for interacting with websites, e.g., registering and logging in, sending feedback, buying products, and more. This module gets you started with creating the client-side/front-end parts of forms.</p>
</dd>
</dl>
</section><section
class="content-section"
aria-labelledby="guides"
>
<!--lit-part yGeNwEJNrYM=--><!--lit-node 0--><h2 id="guides" class="heading"><!--lit-node 1--><a class="heading-anchor" href="#guides">Guides</a></h2><!--/lit-part-->
<p>The <a href="/en-US/docs/Web/HTML/Guides">HTML guides</a> help you build with HTML on the web. They cover topics such as forms, CORS, content preloading, and responsive images.</p>
<dl>
<dt id="html_cheatsheet_for_syntax_and_common_tasks"><a href="/en-US/docs/Web/HTML/Guides/Cheatsheet">HTML cheatsheet for syntax and common tasks</a></dt>
<dd>
<p>Quick reference for common HTML syntax and tasks.</p>
</dd>
<dt id="using_html_comments_!--_…_--"><a href="/en-US/docs/Web/HTML/Guides/Comments">Using HTML comments <code><!-- … --></code></a></dt>
<dd>
<p>HTML comments are used to add explanatory notes to the markup or to prevent the browser from interpreting specific parts of the document.</p>
</dd>
<dt id="using_html_form_validation_and_the_constraint_validation_api"><a href="/en-US/docs/Web/HTML/Guides/Constraint_validation">Using HTML form validation and the Constraint Validation API</a></dt>
<dd>
<p>HTML5 introduced constraint validation to ease form validation on the client side. Basic constraints can be checked without JavaScript by setting attributes on form elements.</p>
</dd>
<dt id="content_categories"><a href="/en-US/docs/Web/HTML/Guides/Content_categories">Content categories</a></dt>
<dd>
<p>HTML is comprised of several kinds of content, each of which is allowed to be used in certain contexts and is disallowed in others. Similarly, each context has a set of other content categories it can contain and elements that can or can't be used in them. This is a guide to these categories.</p>
</dd>
<dt id="using_date_and_time_formats_in_html"><a href="/en-US/docs/Web/HTML/Guides/Date_and_time_formats">Using date and time formats in HTML</a></dt>
<dd>
<p>Certain HTML elements use date and/or time values. This guide describes the formats of the strings that specify these values.</p>
</dd>
<dt id="using_microdata_in_html"><a href="/en-US/docs/Web/HTML/Guides/Microdata">Using microdata in HTML</a></dt>
<dd>
<p>Microdata is used to nest metadata within existing content on web pages. Search engines and web crawlers can extract and process microdata to provide a richer browsing experience.</p>
</dd>
<dt id="using_microformats_in_html"><a href="/en-US/docs/Web/HTML/Guides/Microformats">Using microformats in HTML</a></dt>
<dd>
<p>Microformats are standards used to embed semantics and structured data in HTML for use by social web applications, search engines, aggregators, and other tools.</p>
</dd>
<dt id="understanding_quirks_and_standards_modes"><a href="/en-US/docs/Web/HTML/Guides/Quirks_mode_and_standards_mode">Understanding quirks and standards modes</a></dt>
<dd>
<p>Historical information on quirks mode and standards mode.</p>
</dd>
<dt id="using_responsive_images_in_html"><a href="/en-US/docs/Web/HTML/Guides/Responsive_images">Using responsive images in HTML</a></dt>
<dd>
<p>Learn about responsive images that work well on devices with widely differing screen sizes, resolutions, and other features, improving performance across different devices.</p>
</dd>
<dt id="media_types_and_formats_on_the_web"><a href="/en-US/docs/Web/Media/Guides/Formats">Media types and formats on the web</a></dt>
<dd>
<p>The <a href="/en-US/docs/Web/HTML/Reference/Elements/audio"><code><audio></code></a> and <a href="/en-US/docs/Web/HTML/Reference/Elements/video"><code><video></code></a> elements allow you to play audio and video media natively within your content without the need for external software support.</p>
</dd>
</dl>
</section><section
class="content-section"
aria-labelledby="how_to"
>
<!--lit-part yCMTtgDHyWo=--><!--lit-node 0--><h2 id="how_to" class="heading"><!--lit-node 1--><a class="heading-anchor" href="#how_to">How to</a></h2><!--/lit-part-->
<dl>
<dt id="define_terms_with_html"><a href="/en-US/docs/Web/HTML/How_to/Define_terms_with_HTML">Define terms with HTML</a></dt>
<dd>
<p>HTML provides several ways to convey description semantics, whether inline or as structured glossaries. This article shows how to properly mark up keywords when defining them.</p>
</dd>
<dt id="use_data_attributes"><a href="/en-US/docs/Web/HTML/How_to/Use_data_attributes">Use data attributes</a></dt>
<dd>
<p>HTML5 is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning. <code>data-*</code> attributes allow us to store extra information on standard, semantic HTML elements.</p>
</dd>
<dt id="use_cross-origin_images_in_a_canvas"><a href="/en-US/docs/Web/HTML/How_to/CORS_enabled_image">Use cross-origin images in a canvas</a></dt>
<dd>
<p>Some HTML elements that provide support for <a href="/en-US/docs/Web/HTTP/Guides/CORS">CORS</a>, such as <a href="/en-US/docs/Web/HTML/Reference/Elements/img"><code><img></code></a> or <a href="/en-US/docs/Web/HTML/Reference/Elements/video"><code><video></code></a>, have a <code>crossorigin</code> attribute (<code>crossOrigin</code> property), which lets you configure the CORS requests for the element's fetched data.</p>
</dd>
<dt id="add_a_hitmap_on_top_of_an_image"><a href="/en-US/docs/Web/HTML/How_to/Add_a_hit_map_on_top_of_an_image">Add a hitmap on top of an image</a></dt>
<dd>
<p>Image maps allow hyperlinks to be associated with different parts of an image. This article shows how to create and implement them.</p>
</dd>
<dt id="author_fast-loading_html_pages"><a href="/en-US/docs/Web/HTML/How_to/Author_fast-loading_HTML_pages">Author fast-loading HTML pages</a></dt>
<dd>
<p>These tips are based on common knowledge and experimentation. An optimized web page not only provides for a more responsive site for your visitors but also reduces the load on your web servers and internet connection.</p>
</dd>
<dt id="add_javascript_to_your_web_page"><a href="/en-US/docs/Web/HTML/How_to/Add_JavaScript_to_your_web_page">Add JavaScript to your web page</a></dt>
<dd>
<p>This article explains how to add JavaScript code to an HTML file.</p>
</dd>
</dl>
</section><section
class="content-section"
aria-labelledby="reference"
>
<!--lit-part lelxAP0jhHo=--><!--lit-node 0--><h2 id="reference" class="heading"><!--lit-node 1--><a class="heading-anchor" href="#reference">Reference</a></h2><!--/lit-part-->
<p>HTML consists of <strong>elements</strong>, each of which may be modified by some number of <strong>attributes</strong>. HTML documents are connected to each other with <strong>links</strong>. Browse the complete <a href="/en-US/docs/Web/HTML/Reference">HTML reference</a> documentation.</p>
<dl>
<dt id="html_elements"><a href="/en-US/docs/Web/HTML/Reference/Elements">HTML elements</a></dt>
<dd>
<p>Reference for all HTML <a href="/en-US/docs/Glossary/Element">elements</a>.</p>
</dd>
<dt id="html_attributes"><a href="/en-US/docs/Web/HTML/Reference/Attributes">HTML attributes</a></dt>
<dd>
<p>Reference for all HTML attributes. Attributes are additional values that configure elements or adjust their behavior in various ways.</p>
</dd>
<dt id="global_attributes"><a href="/en-US/docs/Web/HTML/Reference/Global_attributes">Global attributes</a></dt>
<dd>
<p>Reference for global attributes that may be specified on all HTML elements, <em>even those not specified in the standard</em>. This means that any non-standard elements must still permit these attributes, even though those elements make the document HTML5-noncompliant.</p>
</dd>
</dl>
</section><section
class="content-section"
aria-labelledby="attributes_by_element"
>
<!--lit-part XDeZanU7+mQ=--><!--lit-node 0--><h3 id="attributes_by_element" class="heading"><!--lit-node 1--><a class="heading-anchor" href="#attributes_by_element">Attributes by element</a></h3><!--/lit-part-->
<dl>
<dt id="input_types"><a href="/en-US/docs/Web/HTML/Reference/Elements/input">Input types</a></dt>
<dd>
<p>Used to create interactive controls for web-based forms.</p>
</dd>
<dt id="script_types"><a href="/en-US/docs/Web/HTML/Reference/Elements/script/type">Script types</a></dt>
<dd>
<p>Indicates the type of script represented by the element.</p>
</dd>
<dt id="meta_name"><a href="/en-US/docs/Web/HTML/Reference/Elements/meta/name">meta name</a></dt>
<dd>
<p>Provides metadata in name-value pairs for the whole page.</p>
</dd>
</dl>
</section><section
class="content-section"
aria-labelledby="attribute_values"
>
<!--lit-part UbZj2NbmMOs=--><!--lit-node 0--><h3 id="attribute_values" class="heading"><!--lit-node 1--><a class="heading-anchor" href="#attribute_values">Attribute values</a></h3><!--/lit-part-->
<dl>
<dt id="rel_keywords"><a href="/en-US/docs/Web/HTML/Reference/Attributes/rel">rel keywords</a></dt>
<dd>
<p>Defines the relationship between a linked resource and the current document.</p>
</dd>
</dl>
</section><section
class="content-section"
aria-labelledby="related_topics"
>
<!--lit-part KvZ/bBQxm04=--><!--lit-node 0--><h2 id="related_topics" class="heading"><!--lit-node 1--><a class="heading-anchor" href="#related_topics">Related topics</a></h2><!--/lit-part-->
<dl>
<dt id="applying_color_to_html_elements_using_css"><a href="/en-US/docs/Web/CSS/Guides/Colors/Applying_color">Applying color to HTML elements using CSS</a></dt>
<dd>
<p>This article covers most of the ways you use CSS to add color to HTML content, listing what parts of HTML documents can be colored and what CSS properties to use when doing so.</p>
</dd>
</dl>
</section>
<section
class="content-section article-footer"
aria-labelledby="feedback"
>
<div class="article-footer__inner">
<div class="article-footer__svg-container"><!--lit-part +YwD1wS6984=--><svg xmlns="http://www.w3.org/2000/svg" width="162" height="162" fill="none" viewBox="0 0 162 162"><mask id="b" fill="#fff"><path d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z"/></mask><path stroke="url(#a)" stroke-dasharray="6, 6" stroke-width="2" d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z" mask="url(#b)" style="stroke:url(#a)" transform="translate(-63.992 -25.587)"/><ellipse cx="8.066" cy="111.597" fill="currentColor" rx="53.677" ry="53.699" transform="matrix(.71707 -.697 .7243 .6895 0 0)"/><g clip-path="url(#c)" transform="translate(-63.992 -25.587)"><path fill="#9abff5" d="m144.256 137.379 32.906 12.434a4.41 4.41 0 0 1 2.559 5.667l-9.326 24.679a4.41 4.41 0 0 1-5.667 2.559l-8.226-3.108-2.332 6.17c-.466 1.233-.375 1.883-1.609 1.417l-2.253-.527c-.411-.155-.95-.594-1.206-1.161l-4.734-10.484-12.545-4.741a4.41 4.41 0 0 1-2.559-5.667l9.325-24.679a4.41 4.41 0 0 1 5.667-2.559m9.961 29.617 8.227 3.108 3.264-8.638-.498-6.768-4.113-1.555.548 7.258-4.319-1.632zm-12.339-4.663 8.226 3.108 3.264-8.637-.498-6.769-4.113-1.554.548 7.257-4.319-1.632z"/></g><g clip-path="url(#d)" transform="translate(-63.992 -25.587)"><path fill="#81b0f3" d="M135.35 60.136 86.67 41.654c-3.346-1.27-7.124.428-8.394 3.775L64.414 81.938c-1.27 3.347.428 7.125 3.774 8.395l12.17 4.62-3.465 9.128c-.693 1.826-1.432 2.457.394 3.15l3.014 1.625c.609.231 1.637.274 2.477-.104l15.53-6.983 18.56 7.047c3.346 1.27 7.124-.428 8.395-3.775l13.862-36.51c1.27-3.346-.428-7.124-3.775-8.395M95.261 83.207l-12.17-4.62 4.852-12.779 7.19-7.017 6.085 2.31-7.725 7.51 6.389 2.426zm18.255 6.93-12.17-4.62 4.852-12.778 7.189-7.017 6.085 2.31-7.725 7.51 6.39 2.426z"/></g><defs><clipPath id="c"><path fill="#fff" d="m198.638 146.586-65.056-24.583-24.583 65.057 65.056 24.582z"/></clipPath><clipPath id="d"><path fill="#fff" d="m66.438 14.055 96.242 36.54-36.54 96.243-96.243-36.54z"/></clipPath><linearGradient id="a" x1="97.203" x2="199.995" y1="47.04" y2="152.793" gradientUnits="userSpaceOnUse"><stop stop-color="#086DFC"/><stop offset=".246" stop-color="#2C81FA"/><stop offset=".516" stop-color="#5497F8"/><stop offset=".821" stop-color="#80B0F6"/><stop offset="1" stop-color="#9ABFF5"/></linearGradient></defs></svg><!--/lit-part--></div>
<h2 id="feedback">Help improve MDN</h2>
<mdn-content-feedback locale="en-US"><template shadowroot="open" shadowrootmode="open"><style>.content-feedback{border:none;margin:0 0 .25rem;padding:0}.content-feedback>label{display:block;margin-bottom:.25rem}.content-feedback .thank-you{display:block;margin-bottom:calc(2.75rem + 2px)}.content-feedback mdn-button{flex:1;min-width:0}.content-feedback--buttons{display:inline-flex;gap:.75rem;margin:.25rem 0}.content-feedback--radios{align-items:center;display:flex;gap:.25rem;margin:.25rem 0}</style><!--lit-part wnhNI9MhleE=--><fieldset class="content-feedback">
<!--lit-part abqF9JTZmM8=--><label
><!--lit-part-->Was this page helpful to you?<!--/lit-part-->
</label>
<div class="content-feedback--buttons">
<!--lit-node 3--><mdn-button
data-vote="yes" variant="secondary" action="positive" 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><!--lit-part ds8wn4pKxlc=-->
<!--lit-node 0--><button
class="button"
aria-labelledby="label-d7cxkm6bi9k"
data-variant="secondary"
data-action="positive"
part="button"
>
<!--lit-part--><!--lit-part bRP2a5ux/uw=--><span class="icon" part="icon"><!--lit-part GjE5cW6UBoM=--><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="M7 10v12m8-16.12L14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88"/></svg><!--/lit-part--></span><!--/lit-part--><!--lit-part rI2hX8LXYZM=-->
<!--lit-node 0--><span id="label-d7cxkm6bi9k" class="label" part="label"
><!--lit-part Pz0gobCCM4E=--><slot></slot><!--/lit-part--></span
>
<!--/lit-part--><!--/lit-part-->
</button>
<!--/lit-part--></template>
<!--lit-part-->Yes<!--/lit-part-->
</mdn-button>
<!--lit-node 5--><mdn-button
data-vote="no" variant="secondary" action="negative" 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><!--lit-part ds8wn4pKxlc=-->
<!--lit-node 0--><button
class="button"
aria-labelledby="label-grdxlrel83j"
data-variant="secondary"
data-action="negative"
part="button"
>
<!--lit-part--><!--lit-part bRP2a5ux/uw=--><span class="icon" part="icon"><!--lit-part IggRHjbPj/Q=--><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="M17 14V2M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88"/></svg><!--/lit-part--></span><!--/lit-part--><!--lit-part rI2hX8LXYZM=-->
<!--lit-node 0--><span id="label-grdxlrel83j" class="label" part="label"
><!--lit-part Pz0gobCCM4E=--><slot></slot><!--/lit-part--></span
>
<!--/lit-part--><!--/lit-part-->
</button>
<!--/lit-part--></template>
<!--lit-part-->No<!--/lit-part-->
</mdn-button>
</div><!--/lit-part-->
</fieldset><!--/lit-part--></template></mdn-content-feedback>
<a
class="article-footer__contribute"
href="/en-US/docs/MDN/Community/Getting_started"
>Learn how to contribute</a
> <p class="article-footer__last-modified">
This page was last modified on <time datetime="2025-12-22T01:06:28.000Z">Dec 22, 2025</time> by <a href="/en-US/docs/Web/HTML/contributors.txt">MDN contributors</a>.
</p> <div class="article-footer__links">
<a
class="external"
href="https://github.com/mdn/content/blob/main/files/en-us/web/html/index.md?plain=1"
title="Folder: en-us/web/html (Opens in a new tab)"
target="_blank"
rel="noopener"
>View this page on GitHub</a
> • <a
class="external"
href="https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTML&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Fweb%2Fhtml%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTML%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fweb%2Fhtml%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2Fd1f3f179175c80c18b1b78ba0df0ea7d15ca32cc%0A*+Document+last+modified%3A+2025-12-22T01%3A06%3A28.000Z%0A%0A%3C%2Fdetails%3E"
title="This will take you to GitHub to file a new issue."
target="_blank"
rel="noopener"
>Report a problem with this content</a
>
</div>
</div>
</section>
</div>
</main>
<aside class="reference-layout__sidebar" id="main-sidebar">
<nav class="left-sidebar">
<div class="left-sidebar__header">
<mdn-sidebar-filter><template shadowroot="open" shadowrootmode="open"><style>.visually-hidden{border:0!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}*,: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}:host{align-items:center;display:grid;grid-template-areas:"icon input button";grid-template-columns:2.2rem 1fr min-content}.icon{background-color:var(--color-text-secondary);content:"";grid-area:icon;height:1.25rem;justify-self:center;margin-left:.4rem;-webkit-mask-image:url(/static/ssr/filter.b77a4ccbfb57e2ef.svg);mask-image:url(/static/ssr/filter.b77a4ccbfb57e2ef.svg);-webkit-mask-size:cover;mask-size:cover;width:1.25rem}.input{background-color:initial;border:1px solid var(--color-border-primary);border-radius:var(--radius-full);grid-area:1/1/-1/-1;margin:0;padding:.3rem 4.2rem .3rem 2.2rem;width:100%}.input::placeholder{color:var(--color-text-secondary)}.input:focus{border-color:#0000}.counter{background-color:var(--color-background-yellow);border-radius:var(--radius-normal);font-size:var(--font-size-small);grid-area:input;justify-self:end;line-height:var(--font-line-ui);padding:.25rem;white-space:nowrap}.button{grid-area:button}.button::part(button){border-radius:50%}.button::part(button):hover{background-color:initial}:placeholder-shown~.button{visibility:hidden}</style><!--lit-part 13ydgKu/7QQ=-->
<label class="icon" for="input">
<span class="visually-hidden"><!--lit-part-->Filter sidebar<!--/lit-part--></span>
</label>
<!--lit-node 3--><input
id="input"
autocomplete="off"
class="input"
type="text"
placeholder="Filter"
value=""
/>
<!--lit-part--><!--/lit-part-->
<!--lit-node 5--><mdn-button
class="button" variant="plain" icon-only label="Clear filter input" 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><!--lit-part ds8wn4pKxlc=-->
<!--lit-node 0--><button
class="button"
aria-labelledby="label-1x320iccvbb"
data-variant="plain"
part="button"
>
<!--lit-part--><!--lit-part bRP2a5ux/uw=--><span class="icon" part="icon"><!--lit-part 67EVkvpPdvk=--><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="M18 6 6 18M6 6l12 12"/></svg><!--/lit-part--></span><!--/lit-part--><!--lit-part rI2hX8LXYZM=-->
<!--lit-node 0--><span id="label-1x320iccvbb" class="label" hidden part="label"
><!--lit-part Pz0gobCCM4E=--><slot></slot><!--/lit-part--></span
>
<!--/lit-part--><!--/lit-part-->
</button>
<!--/lit-part--></template></mdn-button>
<!--/lit-part--></template></mdn-sidebar-filter>
</div>
<div class="left-sidebar__content"><ol><li class="section"><em><a href="/en-US/docs/Web/HTML" aria-current="page">HTML</a></em></li><li><details><summary><a href="/en-US/docs/Web/HTML/Guides">Guides</a></summary><ol><li><a href="/en-US/docs/Web/HTML/Guides/Cheatsheet">Cheatsheet</a></li><li><a href="/en-US/docs/Web/HTML/Guides/Comments">Comments</a></li><li><a href="/en-US/docs/Web/HTML/Guides/Constraint_validation">Constraint validation</a></li><li><a href="/en-US/docs/Web/HTML/Guides/Content_categories">Content categories</a></li><li><a href="/en-US/docs/Web/HTML/Guides/Date_and_time_formats">Date and time formats</a></li><li><a href="/en-US/docs/Web/HTML/Guides/Microdata">Microdata</a></li><li><a href="/en-US/docs/Web/HTML/Guides/Microformats">Microformats</a></li><li><a href="/en-US/docs/Web/HTML/Guides/Quirks_mode_and_standards_mode">Quirks and standards modes</a></li><li><a href="/en-US/docs/Web/HTML/Guides/Responsive_images">Responsive images</a></li></ol></details></li><li class="section"><a href="/en-US/docs/Web/HTML/How_to">How to</a></li><li><a href="/en-US/docs/Web/HTML/How_to/Define_terms_with_HTML">Define terms with HTML</a></li><li><a href="/en-US/docs/Web/HTML/How_to/Use_data_attributes">Use data attributes</a></li><li><a href="/en-US/docs/Web/HTML/How_to/CORS_enabled_image">Use cross-origin images</a></li><li><a href="/en-US/docs/Web/HTML/How_to/Add_a_hit_map_on_top_of_an_image">Add a hitmap on top of an image</a></li><li><a href="/en-US/docs/Web/HTML/How_to/Author_fast-loading_HTML_pages">Author fast-loading HTML pages</a></li><li><a href="/en-US/docs/Web/HTML/How_to/Add_JavaScript_to_your_web_page">Add JavaScript</a></li><li class="section"><a href="/en-US/docs/Web/HTML/Reference">Reference</a></li><li><details><summary><a href="/en-US/docs/Web/HTML/Reference/Elements">Elements</a></summary><ol><li><a href="/en-US/docs/Web/HTML/Reference/Elements/a"><code><a></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/abbr"><code><abbr></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/acronym"><code><acronym></code></a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites.">
<span class="visually-hidden">Deprecated</span>
</abbr></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/address"><code><address></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/area"><code><area></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/article"><code><article></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/aside"><code><aside></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/audio"><code><audio></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/b"><code><b></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/base"><code><base></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/bdi"><code><bdi></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/bdo"><code><bdo></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/big"><code><big></code></a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites.">
<span class="visually-hidden">Deprecated</span>
</abbr></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/blockquote"><code><blockquote></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/body"><code><body></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/br"><code><br></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/button"><code><button></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/canvas"><code><canvas></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/caption"><code><caption></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/center"><code><center></code></a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites.">
<span class="visually-hidden">Deprecated</span>
</abbr></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/cite"><code><cite></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/code"><code><code></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/col"><code><col></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/colgroup"><code><colgroup></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/data"><code><data></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/datalist"><code><datalist></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/dd"><code><dd></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/del"><code><del></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/details"><code><details></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/dfn"><code><dfn></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/dialog"><code><dialog></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/dir"><code><dir></code></a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites.">
<span class="visually-hidden">Deprecated</span>
</abbr></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/div"><code><div></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/dl"><code><dl></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/dt"><code><dt></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/em"><code><em></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/embed"><code><embed></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/fencedframe"><code><fencedframe></code></a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future.">
<span class="visually-hidden">Experimental</span>
</abbr></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/fieldset"><code><fieldset></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/figcaption"><code><figcaption></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/figure"><code><figure></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/font"><code><font></code></a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites.">
<span class="visually-hidden">Deprecated</span>
</abbr></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/footer"><code><footer></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/form"><code><form></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/frame"><code><frame></code></a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites.">
<span class="visually-hidden">Deprecated</span>
</abbr></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/frameset"><code><frameset></code></a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites.">
<span class="visually-hidden">Deprecated</span>
</abbr></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements"><code><h1></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/head"><code><head></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/header"><code><header></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/hgroup"><code><hgroup></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/hr"><code><hr></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/html"><code><html></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/i"><code><i></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/iframe"><code><iframe></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/img"><code><img></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/input"><code><input></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/ins"><code><ins></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/kbd"><code><kbd></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/label"><code><label></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/legend"><code><legend></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/li"><code><li></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/link"><code><link></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/main"><code><main></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/map"><code><map></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/mark"><code><mark></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/marquee"><code><marquee></code></a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites.">
<span class="visually-hidden">Deprecated</span>
</abbr></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/menu"><code><menu></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/meta"><code><meta></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/meter"><code><meter></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/nav"><code><nav></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/nobr"><code><nobr></code></a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites.">
<span class="visually-hidden">Deprecated</span>
</abbr></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/noembed"><code><noembed></code></a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites.">
<span class="visually-hidden">Deprecated</span>
</abbr></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/noframes"><code><noframes></code></a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites.">
<span class="visually-hidden">Deprecated</span>
</abbr></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/noscript"><code><noscript></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/object"><code><object></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/ol"><code><ol></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/optgroup"><code><optgroup></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/option"><code><option></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/output"><code><output></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/p"><code><p></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/param"><code><param></code></a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites.">
<span class="visually-hidden">Deprecated</span>
</abbr></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/picture"><code><picture></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/plaintext"><code><plaintext></code></a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites.">
<span class="visually-hidden">Deprecated</span>
</abbr></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/pre"><code><pre></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/progress"><code><progress></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/q"><code><q></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/rb"><code><rb></code></a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites.">
<span class="visually-hidden">Deprecated</span>
</abbr></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/rp"><code><rp></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/rt"><code><rt></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/rtc"><code><rtc></code></a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites.">
<span class="visually-hidden">Deprecated</span>
</abbr></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/ruby"><code><ruby></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/s"><code><s></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/samp"><code><samp></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/script"><code><script></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/search"><code><search></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/section"><code><section></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/select"><code><select></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/selectedcontent"><code><selectedcontent></code></a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future.">
<span class="visually-hidden">Experimental</span>
</abbr></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/slot"><code><slot></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/small"><code><small></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/source"><code><source></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/span"><code><span></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/strike"><code><strike></code></a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites.">
<span class="visually-hidden">Deprecated</span>
</abbr></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/strong"><code><strong></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/style"><code><style></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/sub"><code><sub></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/summary"><code><summary></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/sup"><code><sup></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/table"><code><table></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/tbody"><code><tbody></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/td"><code><td></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/template"><code><template></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/textarea"><code><textarea></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/tfoot"><code><tfoot></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/th"><code><th></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/thead"><code><thead></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/time"><code><time></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/title"><code><title></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/tr"><code><tr></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/track"><code><track></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/tt"><code><tt></code></a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites.">
<span class="visually-hidden">Deprecated</span>
</abbr></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/u"><code><u></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/ul"><code><ul></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/var"><code><var></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/video"><code><video></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/wbr"><code><wbr></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/xmp"><code><xmp></code></a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites.">
<span class="visually-hidden">Deprecated</span>
</abbr></li></ol></details></li><li><details><summary><a href="/en-US/docs/Web/HTML/Reference/Attributes">Attributes</a></summary><ol><li><a href="/en-US/docs/Web/HTML/Reference/Attributes/accept"><code>accept</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Attributes/autocomplete"><code>autocomplete</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Attributes/capture"><code>capture</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Attributes/content"><code>content</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Attributes/crossorigin"><code>crossorigin</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Attributes/dirname"><code>dirname</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Attributes/disabled"><code>disabled</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Attributes/elementtiming"><code>elementtiming</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Attributes/fetchpriority"><code>fetchpriority</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Attributes/for"><code>for</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Attributes/form"><code>form</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Attributes/max"><code>max</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Attributes/maxlength"><code>maxlength</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Attributes/min"><code>min</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Attributes/minlength"><code>minlength</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Attributes/multiple"><code>multiple</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Attributes/pattern"><code>pattern</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Attributes/placeholder"><code>placeholder</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Attributes/readonly"><code>readonly</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Attributes/rel"><code>rel</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Attributes/required"><code>required</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Attributes/size"><code>size</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Attributes/step"><code>step</code></a></li></ol></details></li><li><details><summary><a href="/en-US/docs/Web/HTML/Reference/Global_attributes">Global attributes</a></summary><ol><li><a href="/en-US/docs/Web/HTML/Reference/Global_attributes/accesskey"><code>accesskey</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Global_attributes/anchor"><code>anchor</code></a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future.">
<span class="visually-hidden">Experimental</span>
</abbr><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using.">
<span class="visually-hidden">Non-standard</span>
</abbr></li><li><a href="/en-US/docs/Web/HTML/Reference/Global_attributes/autocapitalize"><code>autocapitalize</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Global_attributes/autocorrect"><code>autocorrect</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Global_attributes/autofocus"><code>autofocus</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Global_attributes/class"><code>class</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Global_attributes/contenteditable"><code>contenteditable</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Global_attributes/data-*"><code>data-*</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Global_attributes/dir"><code>dir</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Global_attributes/draggable"><code>draggable</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Global_attributes/enterkeyhint"><code>enterkeyhint</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Global_attributes/exportparts"><code>exportparts</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Global_attributes/hidden"><code>hidden</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Global_attributes/id"><code>id</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Global_attributes/inert"><code>inert</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Global_attributes/inputmode"><code>inputmode</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Global_attributes/is"><code>is</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Global_attributes/itemid"><code>itemid</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Global_attributes/itemprop"><code>itemprop</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Global_attributes/itemref"><code>itemref</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Global_attributes/itemscope"><code>itemscope</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Global_attributes/itemtype"><code>itemtype</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Global_attributes/lang"><code>lang</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Global_attributes/nonce"><code>nonce</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Global_attributes/part"><code>part</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Global_attributes/popover"><code>popover</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Global_attributes/slot"><code>slot</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Global_attributes/spellcheck"><code>spellcheck</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Global_attributes/style"><code>style</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex"><code>tabindex</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Global_attributes/title"><code>title</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Global_attributes/translate"><code>translate</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Global_attributes/virtualkeyboardpolicy"><code>virtualkeyboardpolicy</code></a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future.">
<span class="visually-hidden">Experimental</span>
</abbr></li><li><a href="/en-US/docs/Web/HTML/Reference/Global_attributes/writingsuggestions"><code>writingsuggestions</code></a></li></ol></details></li><li><details><summary><span>Attributes by element</span></summary><ol><li><details><summary><span><code><input></code> type</span></summary><ol><li><a href="/en-US/docs/Web/HTML/Reference/Elements/input/button"><code><input type="button"></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/input/checkbox"><code><input type="checkbox"></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/input/color"><code><input type="color"></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/input/date"><code><input type="date"></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/input/datetime-local"><code><input type="datetime-local"></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/input/email"><code><input type="email"></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/input/file"><code><input type="file"></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/input/hidden"><code><input type="hidden"></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/input/image"><code><input type="image"></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/input/month"><code><input type="month"></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/input/number"><code><input type="number"></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/input/password"><code><input type="password"></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/input/radio"><code><input type="radio"></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/input/range"><code><input type="range"></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/input/reset"><code><input type="reset"></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/input/search"><code><input type="search"></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/input/submit"><code><input type="submit"></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/input/tel"><code><input type="tel"></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/input/text"><code><input type="text"></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/input/time"><code><input type="time"></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/input/url"><code><input type="url"></code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/input/week"><code><input type="week"></code></a></li></ol></details></li><li><details><summary><a href="/en-US/docs/Web/HTML/Reference/Elements/script/type"><code><script></code> type</a></summary><ol><li><a href="/en-US/docs/Web/HTML/Reference/Elements/script/type/importmap"><code>importmap</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/script/type/speculationrules"><code>speculationrules</code></a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future.">
<span class="visually-hidden">Experimental</span>
</abbr></li></ol></details></li><li><details><summary><a href="/en-US/docs/Web/HTML/Reference/Elements/meta/name"><meta> name</a></summary><ol><li><a href="/en-US/docs/Web/HTML/Reference/Elements/meta/name/color-scheme"><code>color-scheme</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/meta/name/referrer"><code>referrer</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/meta/name/robots"><code>robots</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/meta/name/theme-color"><code>theme-color</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport"><code>viewport</code></a></li></ol></details></li><li><a href="/en-US/docs/Web/HTML/Reference/Elements/meta/http-equiv"><meta> http-equiv</a></li></ol></details></li><li><details><summary><span>Attribute values</span></summary><ol><li><details><summary><span><code>rel</code> keywords</span></summary><ol><li><a href="/en-US/docs/Web/HTML/Reference/Attributes/rel/alternate_stylesheet"><code>rel="alternate stylesheet"</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Attributes/rel/compression-dictionary"><code>rel="compression-dictionary"</code></a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future.">
<span class="visually-hidden">Experimental</span>
</abbr></li><li><a href="/en-US/docs/Web/HTML/Reference/Attributes/rel/dns-prefetch"><code>rel="dns-prefetch"</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Attributes/rel/manifest"><code>rel="manifest"</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Attributes/rel/me"><code>rel="me"</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Attributes/rel/modulepreload"><code>rel="modulepreload"</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Attributes/rel/noopener"><code>rel="noopener"</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Attributes/rel/noreferrer"><code>rel="noreferrer"</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Attributes/rel/preconnect"><code>rel="preconnect"</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Attributes/rel/prefetch"><code>rel=prefetch</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Attributes/rel/preload"><code>rel=preload</code></a></li><li><a href="/en-US/docs/Web/HTML/Reference/Attributes/rel/prerender"><code>rel=prerender</code></a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using.">
<span class="visually-hidden">Non-standard</span>
</abbr><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites.">
<span class="visually-hidden">Deprecated</span>
</abbr></li></ol></details></li></ol></details></li></ol></div>
</nav>
</aside>
</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"
><!--lit-part eLWenVoT9SE=--><svg xmlns="http://www.w3.org/2000/svg" width="83" height="24" viewBox="0 0 83 24"><path d="M9.4 0 2.81 21.17H.12L6.69 0zm2.38 0v21.17H9.4V0h2.4Zm9.27 0-6.56 21.17H11.8L18.36 0zm2.39 0v21.17h-2.4V0zm22.11 16.83h-3.93v-1.27h.87v-3.63c0-.85-.16-1.45-.48-1.82a1.65 1.65 0 0 0-1.3-.52c-.74 0-1.3.25-1.66.78a3 3 0 0 0-.58 1.58v3.59h1.38v1.26h-3.93v-1.26h.87v-3.6c0-.88-.16-1.48-.48-1.83a1.7 1.7 0 0 0-1.29-.52 1.93 1.93 0 0 0-1.65.75 2.85 2.85 0 0 0-.58 1.6v3.62h1.59v1.27h-4.64v-1.27h1.37V9.75h-1.4V8.46h3.08v1.47c.28-.48.62-.87 1.08-1.2a3 3 0 0 1 1.68-.45c.67 0 1.22.16 1.73.48.5.32.85.8 1.03 1.47.25-.57.62-1.03 1.13-1.4.5-.37 1.1-.55 1.81-.55.8 0 1.5.25 2.05.75.55.51.85 1.3.85 2.35v4.18h1.4zm9.77 0H52.3v-1.66c-.27.51-.66.95-1.13 1.29-.56.4-1.23.59-1.9.55-1.11 0-2-.37-2.67-1.12a4.4 4.4 0 0 1-1-3.06c0-1.15.3-2.2.93-3.15.6-.94 1.58-1.43 2.94-1.43s2.25.5 2.83 1.5V5.22h-2V3.93h3.63v11.63h1.38v1.27Zm-3.06-3.86v-1.02a2.28 2.28 0 0 0-.73-1.67 2.4 2.4 0 0 0-1.66-.65 2.18 2.18 0 0 0-1.88.9 3.63 3.63 0 0 0-.65 2.2c0 .95.23 1.68.7 2.19.45.5 1.03.76 1.7.76.73 0 1.33-.3 1.79-.88.48-.6.71-1.21.73-1.83m14.14 3.86h-4.43v-1.27h1.37v-3.63c0-.85-.16-1.45-.5-1.82a1.68 1.68 0 0 0-1.31-.52c-.71 0-1.29.23-1.7.69a2.52 2.52 0 0 0-.67 1.6v3.66h1.38v1.26H56.1v-1.26h1.38v-5.8h-1.42V8.47h3.12V9.9c.6-1.06 1.57-1.6 2.92-1.6.83 0 1.54.26 2.12.77.57.5.85 1.28.85 2.34v4.19h1.38v1.24h-.05Zm1.31 5.15H83V24H67.71z"/></svg><!--/lit-part--></a
>
<p>
Your blueprint for a better internet.
</p>
</div>
<ul class="footer__socials">
<li>
<a
href="https://github.com/mdn/"
target="_blank"
rel="noopener"
aria-label="MDN on GitHub"
data-icon="github"
></a>
</li>
<li>
<a
href="https://bsky.app/profile/developer.mozilla.org"
target="_blank"
rel="noopener"
aria-label="MDN on Bluesky"
data-icon="bluesky"
></a>
</li>
<li>
<a
href="https://x.com/mozdevnet"
target="_blank"
rel="noopener"
aria-label="MDN on X"
data-icon="x"
></a>
</li>
<li>
<a
href="https://mastodon.social/@mdn"
target="_blank"
rel="noopener"
aria-label="MDN on Mastodon"
data-icon="mastodon"
></a>
</li>
<li>
<a
href="/en-US/blog/rss.xml"
target="_blank"
rel="noopener"
aria-label="MDN blog RSS feed"
data-icon="rss"
></a>
</li>
</ul>
<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"
><!--lit-part /TOdX171+us=--><svg xmlns="http://www.w3.org/2000/svg" width="128" height="30" viewBox="0 0 256 60"><path d="m13.32 22.1 5.1 24.3h2.1l5.1-24.3H39.3v37.34h-7.26V28.46h-2.1l-6.96 30.98h-7.02L9.02 28.46h-2.1v31H-.35V22.1h13.66Zm45.12 8.74c8.73 0 13.8 5.15 13.8 14.57S67.14 60 58.44 60c-8.73 0-13.8-5.17-13.8-14.59 0-9.43 5.07-14.57 13.8-14.57m0 23.34c4.1 0 6.16-2.1 6.16-6.73v-4.12c0-4.62-2.06-6.73-6.16-6.73s-6.15 2.1-6.15 6.73v4.12c0 4.63 2.05 6.73 6.15 6.73m17.68-.14 14.82-17.26H76.32v-5.41h23.31v5.4L84.84 54.05h15.03v5.4H76.13v-5.41Zm28.07-22.67h10.7v28.07h-7.25V36.77h-3.48v-5.4zm3.44-9.27h7.26v5.4h-7.25v-5.4Zm12.62 0h10.72v37.34h-7.24V27.5h-3.48zm16.08 0h10.7v37.34h-7.25V27.5h-3.48v-5.4zm27.8 8.74c4.24 0 7.08 2.05 7.87 5.63h2.1v-5.1h8.88v5.4h-3.47v17.28h3.47v5.4h-4.25c-3 0-4.63-1.63-4.63-4.62v-.48H172c-.78 3.58-3.63 5.63-7.88 5.63-6.68 0-11.4-5.59-11.4-14.58 0-9 4.72-14.55 11.4-14.55m2.2 23.34c4.1 0 5.93-2.1 5.93-6.73v-4.12c0-4.62-1.82-6.73-5.94-6.73-3.99 0-5.92 2.1-5.92 6.73v4.13c0 4.62 1.92 6.72 5.93 6.72m46.28 5.27h-7.26V0h7.26zm6.3-28.41h30.8v-2.1l-20.4-7.32v-5.88l20.4-7.33v-2.1h-24.27V0h30.79v12l-16.62 5.63v2.11l16.61 5.64v12H218.9zm0-24.73h6.5v6.52h-6.5z"/></svg><!--/lit-part--></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–2025 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>