HTML | web.dev

<!doctype html> <html lang="en" dir="ltr"> <head> <meta name="google-signin-client-id" content="157101835696-ooapojlodmuabs2do2vuhhnf90bccmoi.apps.googleusercontent.com"> <meta name="google-signin-scope" content="profile email https://www.googleapis.com/auth/developerprofiles https://www.googleapis.com/auth/developerprofiles.award"> <meta property="og:site_name" content="web.dev"> <meta property="og:type" content="website"><meta name="theme-color" content="#3740ff"><meta charset="utf-8"> <meta content="IE=Edge" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="/_pwa/web/manifest.json" crossorigin="use-credentials"> <link rel="preconnect" href="//www.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.googleapis.com" crossorigin> <link rel="preconnect" href="//apis.google.com" crossorigin> <link rel="preconnect" href="//www.google-analytics.com" crossorigin><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"> <link rel="stylesheet" href="//fonts.googleapis.com/css2?family=Material+Icons&family=Material+Symbols+Outlined&display=block"><link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/css/app.css"> <link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/css/dark-theme.css" disabled> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/favicon.png"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/touchicon-180.png"><link rel="canonical" href="https://web.dev/html"><link rel="search" type="application/opensearchdescription+xml" title="web.dev" href="https://web.dev/s/opensearch.xml"> <link rel="alternate" hreflang="en" href="https://web.dev/html" /><link rel="alternate" hreflang="x-default" href="https://web.dev/html" /><link rel="alternate" hreflang="ar" href="https://web.dev/html?hl=ar" /><link rel="alternate" hreflang="bn" href="https://web.dev/html?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://web.dev/html?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://web.dev/html?hl=zh-tw" /><link rel="alternate" hreflang="fa" href="https://web.dev/html?hl=fa" /><link rel="alternate" hreflang="fr" href="https://web.dev/html?hl=fr" /><link rel="alternate" hreflang="de" href="https://web.dev/html?hl=de" /><link rel="alternate" hreflang="he" href="https://web.dev/html?hl=he" /><link rel="alternate" hreflang="hi" href="https://web.dev/html?hl=hi" /><link rel="alternate" hreflang="id" href="https://web.dev/html?hl=id" /><link rel="alternate" hreflang="it" href="https://web.dev/html?hl=it" /><link rel="alternate" hreflang="ja" href="https://web.dev/html?hl=ja" /><link rel="alternate" hreflang="ko" href="https://web.dev/html?hl=ko" /><link rel="alternate" hreflang="pl" href="https://web.dev/html?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://web.dev/html?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://web.dev/html?hl=ru" /><link rel="alternate" hreflang="es-419" href="https://web.dev/html?hl=es-419" /><link rel="alternate" hreflang="th" href="https://web.dev/html?hl=th" /><link rel="alternate" hreflang="tr" href="https://web.dev/html?hl=tr" /><link rel="alternate" hreflang="vi" href="https://web.dev/html?hl=vi" /><link rel="alternate" hreflang="en-cn" href="https://web.developers.google.cn/html" /><link rel="alternate" hreflang="x-default" href="https://web.developers.google.cn/html" /><link rel="alternate" hreflang="ar-cn" href="https://web.developers.google.cn/html?hl=ar" /><link rel="alternate" hreflang="bn-cn" href="https://web.developers.google.cn/html?hl=bn" /><link rel="alternate" hreflang="zh-Hans-cn" href="https://web.developers.google.cn/html?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant-cn" href="https://web.developers.google.cn/html?hl=zh-tw" /><link rel="alternate" hreflang="fa-cn" href="https://web.developers.google.cn/html?hl=fa" /><link rel="alternate" hreflang="fr-cn" href="https://web.developers.google.cn/html?hl=fr" /><link rel="alternate" hreflang="de-cn" href="https://web.developers.google.cn/html?hl=de" /><link rel="alternate" hreflang="he-cn" href="https://web.developers.google.cn/html?hl=he" /><link rel="alternate" hreflang="hi-cn" href="https://web.developers.google.cn/html?hl=hi" /><link rel="alternate" hreflang="id-cn" href="https://web.developers.google.cn/html?hl=id" /><link rel="alternate" hreflang="it-cn" href="https://web.developers.google.cn/html?hl=it" /><link rel="alternate" hreflang="ja-cn" href="https://web.developers.google.cn/html?hl=ja" /><link rel="alternate" hreflang="ko-cn" href="https://web.developers.google.cn/html?hl=ko" /><link rel="alternate" hreflang="pl-cn" href="https://web.developers.google.cn/html?hl=pl" /><link rel="alternate" hreflang="pt-BR-cn" href="https://web.developers.google.cn/html?hl=pt-br" /><link rel="alternate" hreflang="ru-cn" href="https://web.developers.google.cn/html?hl=ru" /><link rel="alternate" hreflang="es-419-cn" href="https://web.developers.google.cn/html?hl=es-419" /><link rel="alternate" hreflang="th-cn" href="https://web.developers.google.cn/html?hl=th" /><link rel="alternate" hreflang="tr-cn" href="https://web.developers.google.cn/html?hl=tr" /><link rel="alternate" hreflang="vi-cn" href="https://web.developers.google.cn/html?hl=vi" /><title>HTML  |  web.dev</title> <meta property="og:title" content="HTML  |  web.dev"><meta property="og:url" content="https://web.dev/html"><meta property="og:image" content="https://web.dev/static/images/social-wide.jpg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="675"><meta property="og:locale" content="en"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://web.dev/static/images/social-wide.jpg"><meta name="twitter:site" content="@ChromiumDev"><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "headline": "HTML" } </script> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="landing" theme="web-theme" type="article" appearance layout="full" pending> <devsite-progress type="indeterminate" id="app-progress"></devsite-progress> <section class="devsite-wrapper"> <devsite-cookie-notification-bar></devsite-cookie-notification-bar><devsite-header role="banner"> <div class="devsite-header--inner nocontent"> <div class="devsite-top-logo-row-wrapper-wrapper"> <div class="devsite-top-logo-row-wrapper"> <div class="devsite-top-logo-row"> <button type="button" id="devsite-hamburger-menu" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Navigation menu button" visually-hidden aria-label="Open menu"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="webDev" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="web.dev"> <img src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/lockup.svg" class="devsite-site-logo" alt="web.dev"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> <div class="devsite-top-logo-row-middle"> <div class="devsite-header-upper-tabs"> <devsite-tabs class="upper-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Upper tabs"> <tab > <a href="https://web.dev/about" track-metadata-eventdetail="https://web.dev/about" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - about" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: About" track-name="about" > About </a> </tab> <tab class="devsite-active"> <a href="https://web.dev/html" track-metadata-eventdetail="https://web.dev/html" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - html" track-metadata-module="primary nav" aria-label="HTML, selected" data-category="Site-Wide Custom Events" data-label="Tab: HTML" track-name="html" > HTML </a> </tab> <tab > <a href="https://web.dev/css" track-metadata-eventdetail="https://web.dev/css" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - css" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: CSS" track-name="css" > CSS </a> </tab> <tab > <a href="https://web.dev/javascript" track-metadata-eventdetail="https://web.dev/javascript" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - javascript" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: JavaScript" track-name="javascript" > JavaScript </a> </tab> <tab > <a href="https://web.dev/blog" track-metadata-eventdetail="https://web.dev/blog" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - blog" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" > Blog </a> </tab> <tab > <a href="https://web.dev/learn" track-metadata-eventdetail="https://web.dev/learn" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - learn" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Learn" track-name="learn" > Learn </a> </tab> <tab > <a href="https://web.dev/explore" track-metadata-eventdetail="https://web.dev/explore" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - explore" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Explore" track-name="explore" > Explore </a> </tab> <tab > <a href="https://web.dev/patterns" track-metadata-eventdetail="https://web.dev/patterns" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - patterns" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Patterns" track-name="patterns" > Patterns </a> </tab> <tab > <a href="https://web.dev/case-studies" track-metadata-eventdetail="https://web.dev/case-studies" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - case studies" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Case studies" track-name="case studies" > Case studies </a> </tab> </nav> </devsite-tabs> </div> <devsite-search enable-signin enable-search enable-suggestions enable-query-completion project-name="web.dev" tenant-name="web.dev" > <form class="devsite-search-form" action="https://web.dev/s/results" method="GET"> <div class="devsite-search-container"> <button type="button" search-open class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Open search"></button> <div class="devsite-searchbox"> <input aria-activedescendant="" aria-autocomplete="list" aria-label="Search" aria-expanded="false" aria-haspopup="listbox" autocomplete="off" class="devsite-search-field devsite-search-query" name="q" placeholder="Search" role="combobox" type="text" value="" > <div class="devsite-search-image material-icons" aria-hidden="true"> </div> <div class="devsite-search-shortcut-icon-container" aria-hidden="true"> <kbd class="devsite-search-shortcut-icon">/</kbd> </div> </div> </div> </form> <button type="button" search-close class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Close search"></button> </devsite-search> </div> <devsite-appearance-selector></devsite-appearance-selector> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> <devsite-user enable-profiles id="devsite-user"> <span class="button devsite-top-button" aria-hidden="true" visually-hidden>Sign in</span> </devsite-user> </div> </div> </div> <div class="devsite-collapsible-section devsite-header-no-lower-tabs "> <div class="devsite-header-background"> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars hidden> <div class="devsite-book-nav-filter" hidden> <span class="filter-list-icon material-icons" aria-hidden="true"></span> <input type="text" placeholder="Filter" aria-label="Type to filter" role="searchbox"> <span class="filter-clear-button hidden" data-title="Clear filter" aria-label="Clear filter" role="button" tabindex="0"></span> </div> <nav class="devsite-book-nav devsite-nav nocontent" aria-label="Side menu"> <div class="devsite-mobile-header"> <button type="button" id="devsite-close-nav" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Close navigation" aria-label="Close navigation"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="webDev" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="web.dev"> <img src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/lockup.svg" class="devsite-site-logo" alt="web.dev"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> </div> <div class="devsite-book-nav-wrapper"> <div class="devsite-mobile-nav-top"> <ul class="devsite-nav-list"> <li class="devsite-nav-item"> <a href="/about" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: About" track-name="about" data-category="Site-Wide Custom Events" data-label="Responsive Tab: About" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > About </span> </a> </li> <li class="devsite-nav-item"> <a href="/html" class="devsite-nav-title gc-analytics-event devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: HTML" track-name="html" data-category="Site-Wide Custom Events" data-label="Responsive Tab: HTML" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > HTML </span> </a> </li> <li class="devsite-nav-item"> <a href="/css" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: CSS" track-name="css" data-category="Site-Wide Custom Events" data-label="Responsive Tab: CSS" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > CSS </span> </a> </li> <li class="devsite-nav-item"> <a href="/javascript" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: JavaScript" track-name="javascript" data-category="Site-Wide Custom Events" data-label="Responsive Tab: JavaScript" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > JavaScript </span> </a> </li> <li class="devsite-nav-item"> <a href="/blog" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Blog" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Blog </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Learn" track-name="learn" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Explore" track-name="explore" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Explore" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Explore </span> </a> </li> <li class="devsite-nav-item"> <a href="/patterns" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Patterns" track-name="patterns" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Patterns" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Patterns </span> </a> </li> <li class="devsite-nav-item"> <a href="/case-studies" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Case studies" track-name="case studies" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Case studies" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Case studies </span> </a> </li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" class="devsite-main-content" > <div class="devsite-sidebar"> <div class="devsite-sidebar-content"> <devsite-toc class="devsite-nav" role="navigation" aria-label="On this page" depth="2" scrollbars disabled></devsite-toc> <devsite-recommendations-sidebar class="nocontent devsite-nav"> </devsite-recommendations-sidebar> </div> </div> <devsite-content> <article class="devsite-article"> <div class="devsite-article-meta nocontent" role="navigation"> <ul class="devsite-breadcrumb-list" aria-label="Breadcrumb"> <li class="devsite-breadcrumb-item "> <a href="https://web.dev/" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="web.dev" > web.dev </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://web.dev/html" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="2" track-type="globalNav" track-name="breadcrumb" track-metadata-position="2" track-metadata-eventdetail="" > HTML </a> </li> </ul> </div> <devsite-feature-tooltip ack-key="AckCollectionsBookmarkTooltipDismiss" analytics-category="Site-Wide Custom Events" analytics-action-show="Callout Profile displayed" analytics-action-close="Callout Profile dismissed" analytics-label="Create Collection Callout" class="devsite-page-bookmark-tooltip nocontent" dismiss-button="true" id="devsite-collections-dropdown" dismiss-button-text="Dismiss" close-button-text="Got it"> <devsite-bookmark></devsite-bookmark> <span slot="popout-heading"> Stay organized with collections </span> <span slot="popout-contents"> Save and categorize content based on your preferences. </span> </devsite-feature-tooltip> <devsite-toc class="devsite-nav" depth="2" devsite-toc-embedded disabled> </devsite-toc> <div class="devsite-article-body clearfix "> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-75 devsite-landing-row-hero devsite-landing-row-no-image-background" background="grey" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item" description-position="bottom" > <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <picture> <img alt="" src="https://web.dev/static/html/image/hero-html.png" srcset="https://web.dev/static/html/image/hero-html_36.png 36w,https://web.dev/static/html/image/hero-html_48.png 48w,https://web.dev/static/html/image/hero-html_72.png 72w,https://web.dev/static/html/image/hero-html_96.png 96w,https://web.dev/static/html/image/hero-html_480.png 480w,https://web.dev/static/html/image/hero-html_720.png 720w,https://web.dev/static/html/image/hero-html_856.png 856w,https://web.dev/static/html/image/hero-html_960.png 960w,https://web.dev/static/html/image/hero-html_1440.png 1440w,https://web.dev/static/html/image/hero-html_1920.png 1920w,https://web.dev/static/html/image/hero-html_2880.png 2880w" sizes="(max-width: 600px) 100vw, (max-width: 840px) 50vw, 342px" fetchpriority="high"> </picture> </figure> </div> <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="html" data-text="HTML" class="hide-from-toc no-link" tabindex="0"> HTML </h3> <div class="devsite-landing-row-item-description-content"> HTML is the document layer of the web, providing the structure and content necessary for web pages to be meaningful. Here, you can find content for HTML such as courses, articles, collections, and other useful bits of information to help you build your knowledge of this crucial part of the web. </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-75 devsite-landing-row-no-image-background" background="white" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="jump-ahead-on-this-page" data-text="Jump ahead on this page:" class="hide-from-toc no-link" tabindex="0"> Jump ahead on this page: </h3> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-2-up" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-column"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://web.dev/html#new-to-html"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> code </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="plearn-htmlp" data-text="Learn HTML" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/html#new-to-html"> <p>Learn HTML</p> </a> </h3> <div class="devsite-landing-row-item-description-content"> New to HTML? We've got you covered with a comprehensive course to help you get started. </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://web.dev/html#check-out-more-courses"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> school </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="pmore-coursesp" data-text="More courses" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/html#check-out-more-courses"> <p>More courses</p> </a> </h3> <div class="devsite-landing-row-item-description-content"> Check out these other courses to dig deeper into specific topics in HTML. </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://web.dev/html#baseline-newly-available-html-features"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="light-blue" size="medium" > <picture> <img class="devsite-landing-row-item-icon" alt="" src="https://web.dev/static/baseline/image/newly-available.svg" srcset="https://web.dev/static/baseline/image/newly-available.svg" sizes="64px" loading="lazy" > </picture> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="pbaseline-newly-available-features-in-htmlp" data-text="Baseline Newly available features in HTML" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/html#baseline-newly-available-html-features"> <p>Baseline Newly available features in HTML</p> </a> </h3> <div class="devsite-landing-row-item-description-content"> Learn about the latest HTML features that are newly available in all major browser engines. </div> </div> </div> </div> </div> <div class="devsite-landing-row-column"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://web.dev/html#html-and-accessibility"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> accessibility </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="phtml-and-accessibilityp" data-text="HTML and accessibility" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/html#html-and-accessibility"> <p>HTML and accessibility</p> </a> </h3> <div class="devsite-landing-row-item-description-content"> Learn HTML patterns and concepts to help you build more accessible web applications. </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://web.dev/html#html-and-performance"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> bolt </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="phtml-and-performancep" data-text="HTML and performance" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/html#html-and-performance"> <p>HTML and performance</p> </a> </h3> <div class="devsite-landing-row-item-description-content"> Learn HTML-based concepts and patterns for making your your web applications faster. </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://web.dev/html#debug-html-and-the-dom-with-chrome-devtools"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> build </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="pdebug-html-and-the-dom-with-chrome-devtoolsp" data-text="Debug HTML and the DOM with Chrome DevTools" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/html#debug-html-and-the-dom-with-chrome-devtools"> <p>Debug HTML and the DOM with Chrome DevTools</p> </a> </h3> <div class="devsite-landing-row-item-description-content"> Learn how to use Chrome DevTools to debug HTML and the DOM in your web applications. </div> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-75 devsite-landing-row-no-image-background" background="grey" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item" description-position="bottom" > <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <a href="https://web.dev/learn/html"> <picture> <img alt="" src="https://web.dev/static/learn/html/card.png" srcset="https://web.dev/static/learn/html/card_36.png 36w,https://web.dev/static/learn/html/card_48.png 48w,https://web.dev/static/learn/html/card_72.png 72w,https://web.dev/static/learn/html/card_96.png 96w,https://web.dev/static/learn/html/card_480.png 480w,https://web.dev/static/learn/html/card_720.png 720w,https://web.dev/static/learn/html/card_856.png 856w,https://web.dev/static/learn/html/card_960.png 960w,https://web.dev/static/learn/html/card_1440.png 1440w,https://web.dev/static/learn/html/card_1920.png 1920w,https://web.dev/static/learn/html/card_2880.png 2880w" sizes="(max-width: 600px) 100vw, (max-width: 840px) 50vw, 342px" loading="lazy" > </picture> </a> </figure> </div> <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <div class="devsite-landing-row-item-labels"> <span class=" " >COURSE</span> </div> <h3 id="new-to-html" data-text="New to HTML?" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/learn/html"> New to HTML? </a> </h3> <div class="devsite-landing-row-item-description-content"> <p>If you're new to HTML, we've got you covered. Our <a href="/learn/html">Learn HTML</a> course guides you through the fundamentals of how HTML works, such as structural concerns, metadata, semantics, and further topics to help you sharpen your skills.</p> </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/learn/html" class="button " >Learn HTML!</a> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-100 devsite-landing-row-padding-small" background="white" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="check-out-more-courses" data-text="Check out more courses." class="hide-from-toc no-link" tabindex="0"> Check out more courses. </h3> <div class="devsite-landing-row-item-description-content"> <p>If you're interested in learning more about HTML, these other courses will teach you about more advanced topics use can use to improve your web applications.</p> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-3-up devsite-landing-row-cards devsite-landing-row-padding-small devsite-landing-row-no-image-background devsite-landing-row-item-centered" background="white" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item" description-position="bottom" > <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <a href="https://web.dev/learn/forms"> <picture> <img alt="" src="https://web.dev/static/learn/forms/card.png" srcset="https://web.dev/static/learn/forms/card_36.png 36w,https://web.dev/static/learn/forms/card_48.png 48w,https://web.dev/static/learn/forms/card_72.png 72w,https://web.dev/static/learn/forms/card_96.png 96w,https://web.dev/static/learn/forms/card_480.png 480w,https://web.dev/static/learn/forms/card_720.png 720w,https://web.dev/static/learn/forms/card_856.png 856w,https://web.dev/static/learn/forms/card_960.png 960w,https://web.dev/static/learn/forms/card_1440.png 1440w,https://web.dev/static/learn/forms/card_1920.png 1920w,https://web.dev/static/learn/forms/card_2880.png 2880w" sizes="(max-width: 840px) 50vw, 464px" loading="lazy" > </picture> </a> </figure> </div> <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="forms" data-text="Forms" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/learn/forms"> Forms </a> </h3> <div class="devsite-landing-row-item-description-content"> HTML forms give users the ability to provide input for your web applications—and this course will teach you all you need to know about using them effectively. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/learn/forms" class="button button-primary " >Learn Forms!</a> </div> </div> </div> </div> <div class="devsite-landing-row-item" description-position="bottom" > <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <a href="https://web.dev/learn/images"> <picture> <img alt="" src="https://web.dev/static/learn/images/card.png" srcset="https://web.dev/static/learn/images/card_36.png 36w,https://web.dev/static/learn/images/card_48.png 48w,https://web.dev/static/learn/images/card_72.png 72w,https://web.dev/static/learn/images/card_96.png 96w,https://web.dev/static/learn/images/card_480.png 480w,https://web.dev/static/learn/images/card_720.png 720w,https://web.dev/static/learn/images/card_856.png 856w,https://web.dev/static/learn/images/card_960.png 960w,https://web.dev/static/learn/images/card_1440.png 1440w,https://web.dev/static/learn/images/card_1920.png 1920w,https://web.dev/static/learn/images/card_2880.png 2880w" sizes="(max-width: 840px) 50vw, 464px" loading="lazy" > </picture> </a> </figure> </div> <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="images" data-text="Images" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/learn/images"> Images </a> </h3> <div class="devsite-landing-row-item-description-content"> While images are commonly used on the web, there's more to it than using the <code translate="no" dir="ltr">img</code> element. This course teaches you all you need to know about how to use images on the web. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/learn/images" class="button button-primary " >Learn Images!</a> </div> </div> </div> </div> <div class="devsite-landing-row-item" description-position="bottom" > <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <a href="https://web.dev/learn/accessibility"> <picture> <img alt="" src="https://web.dev/static/learn/accessibility/card.png" srcset="https://web.dev/static/learn/accessibility/card_36.png 36w,https://web.dev/static/learn/accessibility/card_48.png 48w,https://web.dev/static/learn/accessibility/card_72.png 72w,https://web.dev/static/learn/accessibility/card_96.png 96w,https://web.dev/static/learn/accessibility/card_480.png 480w,https://web.dev/static/learn/accessibility/card_720.png 720w,https://web.dev/static/learn/accessibility/card_856.png 856w,https://web.dev/static/learn/accessibility/card_960.png 960w,https://web.dev/static/learn/accessibility/card_1440.png 1440w,https://web.dev/static/learn/accessibility/card_1920.png 1920w,https://web.dev/static/learn/accessibility/card_2880.png 2880w" sizes="(max-width: 840px) 50vw, 464px" loading="lazy" > </picture> </a> </figure> </div> <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="accessibility" data-text="Accessibility" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/learn/accessibility"> Accessibility </a> </h3> <div class="devsite-landing-row-item-description-content"> While accessibility spans all parts of the web platform, writing accessible HTML is the cornerstone of building accessible web applications. This course teaches you everything you need to know to write accessible markup. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/learn/accessibility" class="button button-primary " >Learn Accessibility!</a> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-100 devsite-landing-row-padding-small" background="grey" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="baseline-newly-available-html-features" data-text="Baseline Newly available HTML features" class="hide-from-toc no-link" tabindex="0"> Baseline Newly available HTML features </h3> <div class="devsite-landing-row-item-description-content"> <p><a href="/baseline">Baseline</a> signals to web developers when web platform features can be safely used in all major browser engines. Here are some HTML features that are now Baseline Newly available.</p> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-2-up" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-column"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media wd-2col-icons-list" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://developer.chrome.com/docs/css-ui/declarative-shadow-dom"> <div class="devsite-landing-row-item-icon-container" size="medium" > <picture> <img class="devsite-landing-row-item-icon" alt="" src="https://web.dev/static/baseline/image/newly-available.svg" srcset="https://web.dev/static/baseline/image/newly-available.svg" sizes="64px" loading="lazy" > </picture> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="declarative-shadow-dom" data-text="Declarative Shadow DOM" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/css-ui/declarative-shadow-dom"> Declarative Shadow DOM </a> </h3> <div class="devsite-landing-row-item-description-content"> Declarative Shadow DOM became Baseline Newly available in 2024. </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media wd-2col-icons-list" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://web.dev/blog/popover-api"> <div class="devsite-landing-row-item-icon-container" size="medium" > <picture> <img class="devsite-landing-row-item-icon" alt="" src="https://web.dev/static/baseline/image/newly-available.svg" srcset="https://web.dev/static/baseline/image/newly-available.svg" sizes="64px" loading="lazy" > </picture> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="the-popover-api" data-text="The Popover API" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/blog/popover-api"> The Popover API </a> </h3> <div class="devsite-landing-row-item-description-content"> The Popover API became Baseline Newly available in 2024. </div> </div> </div> </div> </div> <div class="devsite-landing-row-column"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media wd-2col-icons-list" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://web.dev/articles/inert"> <div class="devsite-landing-row-item-icon-container" size="medium" > <picture> <img class="devsite-landing-row-item-icon" alt="" src="https://web.dev/static/baseline/image/newly-available.svg" srcset="https://web.dev/static/baseline/image/newly-available.svg" sizes="64px" loading="lazy" > </picture> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="the-code-translateno-dirltrinertcode-attribute" data-text="The inert attribute" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/articles/inert"> The <code translate="no" dir="ltr">inert</code> attribute </a> </h3> <div class="devsite-landing-row-item-description-content"> The <code translate="no" dir="ltr">inert</code> attribute became Baseline Newly available in 2023. </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media wd-2col-icons-list" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://web.dev/articles/iframe-lazy-loading"> <div class="devsite-landing-row-item-icon-container" size="medium" > <picture> <img class="devsite-landing-row-item-icon" alt="" src="https://web.dev/static/baseline/image/newly-available.svg" srcset="https://web.dev/static/baseline/image/newly-available.svg" sizes="64px" loading="lazy" > </picture> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="lazy-load-offscreen-iframes" data-text="Lazy-load offscreen iframes" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/articles/iframe-lazy-loading"> Lazy-load offscreen iframes </a> </h3> <div class="devsite-landing-row-item-description-content"> Lazy-loading of iframes became Baseline Newly available in 2023. </div> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-100 devsite-landing-row-padding-small" background="grey" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="html-and-accessibility" data-text="HTML and accessibility" class="hide-from-toc no-link" tabindex="0"> HTML and accessibility </h3> <div class="devsite-landing-row-item-description-content"> <p>HTML is a fundamental part of building accessible web applications. In this section, you'll find articles and resources to help you learn more about how to use HTML to build accessible web applications.</p> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-4-up devsite-landing-row-cards devsite-landing-row-item-centered" background="grey" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <a href="https://web.dev/articles/headings-and-landmarks"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> article </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="headings-and-landmarks" data-text="Headings and landmarks" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/articles/headings-and-landmarks"> Headings and landmarks </a> </h3> <div class="devsite-landing-row-item-description-content"> By using the correct elements for headings and landmarks, you can dramatically improve the navigation experience for users of assitive technology. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/articles/headings-and-landmarks" class="button button-primary " >Learn more</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <a href="https://web.dev/articles/use-semantic-html"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> article </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="use-semantic-html-for-easy-keyboard-wins" data-text="Use semantic HTML for easy keyboard wins" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/articles/use-semantic-html"> Use semantic HTML for easy keyboard wins </a> </h3> <div class="devsite-landing-row-item-description-content"> By using the correct semantic HTML elements you may be able to meet most or all of your keyboard access needs. That means less time fiddling with tabindex, and more happy users! </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/articles/use-semantic-html" class="button button-primary " >Learn more</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <a href="https://web.dev/articles/keyboard-access"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> article </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="keyboard-access-fundamentals" data-text="Keyboard access fundamentals" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/articles/keyboard-access"> Keyboard access fundamentals </a> </h3> <div class="devsite-landing-row-item-description-content"> Many users with temporary and permanent motor impairments rely on keyboard shortcuts to navigate applications more efficiently. Having a good keyboard navigation strategy for your application creates a better experience for everyone. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/articles/keyboard-access" class="button button-primary " >Learn more</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <a href="https://web.dev/articles/labels-and-text-alternatives"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> article </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="labels-and-text-alternatives" data-text="Labels and text alternatives" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/articles/labels-and-text-alternatives"> Labels and text alternatives </a> </h3> <div class="devsite-landing-row-item-description-content"> In order for a screen reader to present a spoken UI to the user, meaningful elements must have proper labels or text alternatives. A label or text alternative gives an element its accessible name, one of the key properties for expressing element semantics in the accessibility tree. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/articles/labels-and-text-alternatives" class="button button-primary " >Learn more</a> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-100 devsite-landing-row-padding-small" background="white" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="html-and-performance" data-text="HTML and performance" class="hide-from-toc no-link" tabindex="0"> HTML and performance </h3> <div class="devsite-landing-row-item-description-content"> <p>How you use HTML can affect the performance of your web applications. In this section, you'll find articles and resources to help you learn more about how to use HTML to make your web applications faster.</p> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-4-up devsite-landing-row-cards devsite-landing-row-item-centered" background="white" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" background="grey" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <a href="https://web.dev/articles/preload-scanner"> <div class="devsite-landing-row-item-icon-container" background="white" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> article </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="dont-fight-the-browser-preload-scanner" data-text="Don't fight the browser preload scanner" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/articles/preload-scanner"> Don't fight the browser preload scanner </a> </h3> <div class="devsite-landing-row-item-description-content"> The browser preload scanner is a specialized HTML parser that the browser uses to discover resources earlier than it otherwise would. Find out how it helps the performance of web applications, and how you can stay out of its way. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/articles/preload-scanner" class="button button-primary " >Learn more</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" background="grey" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <a href="https://web.dev/articles/fetch-priority"> <div class="devsite-landing-row-item-icon-container" background="white" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> article </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="optimize-resource-loading-with-the-fetch-priority-api" data-text="Optimize resource loading with the Fetch Priority API" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/articles/fetch-priority"> Optimize resource loading with the Fetch Priority API </a> </h3> <div class="devsite-landing-row-item-description-content"> The Fetch Priority API uses the <code translate="no" dir="ltr">fetchpriority</code> HTML attribute to indicate the relative priority of resources to the browser. It can enable optimal loading and improve <a href="/articles/vitals">Core Web Vitals</a>. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/articles/fetch-priority" class="button button-primary " >Learn more</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" background="grey" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <a href="https://web.dev/articles/preload-critical-assets"> <div class="devsite-landing-row-item-icon-container" background="white" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> article </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="preload-critical-assets-to-improve-loading-speed" data-text="Preload critical assets to improve loading speed" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/articles/preload-critical-assets"> Preload critical assets to improve loading speed </a> </h3> <div class="devsite-landing-row-item-description-content"> Resource preloading a technique that uses the HTML <code translate="no" dir="ltr">link</code> element to tell the browser to fetch a resource before it is needed. Learn how to use it to improve the performance of your web applications in this guide. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/articles/preload-critical-assets" class="button button-primary " >Learn more</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" background="grey" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <a href="https://web.dev/articles/browser-level-image-lazy-loading"> <div class="devsite-landing-row-item-icon-container" background="white" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> article </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="browser-level-image-lazy-loading-for-the-web" data-text="Browser-level image lazy loading for the web" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/articles/browser-level-image-lazy-loading"> Browser-level image lazy loading for the web </a> </h3> <div class="devsite-landing-row-item-description-content"> Lazy loading images is an effective technique for conserving bandwidth during the initial loading of a page. In this guide, can learn how to use the HTML <code translate="no" dir="ltr">loading</code> to lazy load images. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/articles/browser-level-image-lazy-loading" class="button button-primary " >Learn more</a> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-100 devsite-landing-row-padding-small" background="grey" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="debug-html-and-the-dom-with-chrome-devtools" data-text="Debug HTML and the DOM with Chrome DevTools" class="hide-from-toc no-link" tabindex="0"> Debug HTML and the DOM with Chrome DevTools </h3> <div class="devsite-landing-row-item-description-content"> <p><a href="https://developer.chrome.com/docs/devtools">Chrome DevTools</a> is a suite of tools for developers to debug web applications. Here are a few suggested tools for you to check out to help you debug your page's HTML and DOM in your web applications, as well as other adjacent concepts.</p> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-3-up devsite-landing-row-cards devsite-landing-row-item-centered" background="grey" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <a href="https://developer.chrome.com/docs/devtools/dom"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> code </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="get-started-with-viewing-and-changing-the-dom" data-text="Get started with viewing and changing the DOM" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/devtools/dom"> Get started with viewing and changing the DOM </a> </h3> <div class="devsite-landing-row-item-description-content"> DevTools offers the Elements panel, which lets you view, edit, and debug your web application's DOM. Read this guide to get started with using the Elements panel. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://developer.chrome.com/docs/devtools/dom" class="button button-primary " >Learn more</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <a href="https://developer.chrome.com/docs/devtools/javascript/breakpoints#dom"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> code </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="listen-for-dom-changes" data-text="Listen for DOM changes" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/devtools/javascript/breakpoints#dom"> Listen for DOM changes </a> </h3> <div class="devsite-landing-row-item-description-content"> The Elements panel in DevTools lets you listen for changes to the DOM triggered by JavaScript. Learn how to use this useful feature to debug changes to your web application's DOM. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://developer.chrome.com/docs/devtools/javascript/breakpoints#dom" class="button button-primary " >Learn more</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <a href="https://developer.chrome.com/docs/devtools/coverage"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> code </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="find-unused-code-loaded-by-your-web-applications-html" data-text="Find unused code loaded by your web application's HTML" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/devtools/coverage"> Find unused code loaded by your web application's HTML </a> </h3> <div class="devsite-landing-row-item-description-content"> The Coverage panel is a useful tool for finding unused CSS and JavaScript code loaded by your web application's HTML. This guide shows you how to use it, and how it can improve the performance of your web applications. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://developer.chrome.com/docs/devtools/coverage" class="button button-primary " >Learn more</a> </div> </div> </div> </div> </div> </div> </section> </div> <div class="devsite-floating-action-buttons"> </div> </article> <devsite-notification > </devsite-notification> <div class="devsite-content-data"> <template class="devsite-content-data-template"> [[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],[],[],[]] </template> </div> </devsite-content> </main> <devsite-footer-promos class="devsite-footer"> </devsite-footer-promos> <devsite-footer-linkboxes class="devsite-footer"> <nav class="devsite-footer-linkboxes nocontent" aria-label="Footer links"> <ul class="devsite-footer-linkboxes-list"> <li class="devsite-footer-linkbox wd-footer-promo"> <h3 class="devsite-footer-linkbox-heading no-link">web.dev</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <h3 class="devsite-footer-linkbox-heading no-link"> web.dev </h3> <div class="devsite-footer-linkbox-description">We want to help you build beautiful, accessible, fast, and secure websites that work cross-browser, and for all of your users. This site is our home for content to help you on that journey, written by members of the Chrome team, and external experts.</div> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Contribute</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://issuetracker.google.com/issues/new?component=1400680&template=1857359" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > File a bug </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://issuetracker.google.com/issues?q=status:open%20componentid:1400680&s=created_time:desc" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > See open issues </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Related Content</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://developer.chrome.com/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Chrome for Developers </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://blog.chromium.org/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Chromium updates </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/case-studies" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Case studies </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/shows" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Podcasts & shows </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Follow</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://twitter.com/ChromiumDev" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > @ChromiumDev on X </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.youtube.com/user/ChromeDevelopers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > YouTube </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.linkedin.com/showcase/chrome-for-developers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Chrome for Developers on LinkedIn </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/static/blog/feed.xml" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > RSS </a> </li> </ul> </li> </ul> </nav> </devsite-footer-linkboxes> <devsite-footer-utility class="devsite-footer"> <div class="devsite-footer-utility nocontent"> <nav class="devsite-footer-utility-links" aria-label="Utility links"> <ul class="devsite-footer-utility-list"> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/terms" data-category="Site-Wide Custom Events" data-label="Footer Terms link" > Terms </a> </li> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/privacy" data-category="Site-Wide Custom Events" data-label="Footer Privacy link" > Privacy </a> </li> <li class="devsite-footer-utility-item glue-cookie-notification-bar-control"> <a class="devsite-footer-utility-link gc-analytics-event" href="#" data-category="Site-Wide Custom Events" data-label="Footer Manage cookies link" aria-hidden="true" > Manage cookies </a> </li> </ul> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> </nav> </div> </devsite-footer-utility> <devsite-panel></devsite-panel> </section></section> <devsite-sitemask></devsite-sitemask> <devsite-snackbar></devsite-snackbar> <devsite-tooltip ></devsite-tooltip> <devsite-heading-link></devsite-heading-link> <devsite-analytics> <script type="application/json" analytics>[]</script> <script type="application/json" tag-management>{"at": "True", "ga4": [], "ga4p": [], "gtm": [{"id": "GTM-MZWCJPP", "purpose": 0}], "parameters": {"internalUser": "False", "language": {"machineTranslated": "False", "requested": "en", "served": "en"}, "pageType": "article", "projectName": "web.dev", "signedIn": "False", "tenant": "web", "recommendations": {"sourcePage": "", "sourceType": 0, "sourceRank": 0, "sourceIdenticalDescriptions": 0, "sourceTitleWords": 0, "sourceDescriptionWords": 0, "experiment": ""}, "experiment": {"ids": ""}}}</script> </devsite-analytics> <devsite-badger></devsite-badger> <script nonce="kIcNxktCnvn8d8/Cna3uEXxD5HENqH"> (function(d,e,v,s,i,t,E){d['GoogleDevelopersObject']=i; t=e.createElement(v);t.async=1;t.src=s;E=e.getElementsByTagName(v)[0]; E.parentNode.insertBefore(t,E);})(window, document, 'script', 'https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/js/app_loader.js', '[27,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web","https://web-dot-devsite-v2-prod-3p.appspot.com",1,null,["/_pwa/web/manifest.json","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/favicon.png","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/lockup.svg","https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"],1,null,[1,6,8,12,14,17,21,25,50,52,63,70,75,76,80,87,91,92,93,97,98,100,101,102,103,104,105,107,108,109,110,112,113,117,118,120,122,124,125,126,127,129,130,131,132,133,134,135,136,138,140,141,147,148,149,151,152,156,157,158,159,161,163,164,168,169,170,179,180,182,183,186,191,193,196],"AIzaSyCNm9YxQumEXwGJgTDjxoxXK6m1F-9720Q","AIzaSyCc76DZePGtoyUjqKrLdsMGk_ry7sljLbY","web.dev","AIzaSyB9bqgQ2t11WJsOX8qNsCQ6U-w91mmqF-I","AIzaSyAdYnStPdzjcJJtQ0mvIaeaMKj7_t6J_Fg",null,null,null,["Cloud__enable_cloud_shell_fte_user_flow","OnSwitch__enable","Cloud__enable_cloudx_ping","Cloud__enable_legacy_calculator_redirect","CloudShell__cloud_shell_button","Cloud__enable_cloud_shell","MiscFeatureFlags__enable_explain_this_code","Experiments__reqs_query_experiments","Cloud__enable_cloud_facet_chat","Profiles__enable_recognition_badges","BookNav__enable_tenant_cache_key","Concierge__enable_pushui","Profiles__enable_completecodelab_endpoint","Search__enable_dynamic_content_confidential_banner","Search__enable_suggestions_from_borg","Profiles__enable_release_notes_notifications","DevPro__enable_cloud_innovators_plus","Profiles__enable_developer_profiles_callout","MiscFeatureFlags__developers_footer_dark_image","Profiles__enable_awarding_url","CloudShell__cloud_code_overflow_menu","Profiles__require_profile_eligibility_for_signin","Analytics__enable_clearcut_logging","Profiles__enable_dashboard_curated_recommendations","MiscFeatureFlags__enable_firebase_utm","TpcFeatures__enable_mirror_tenant_redirects","Cloud__enable_free_trial_server_call","Profiles__enable_profile_collections","MiscFeatureFlags__emergency_css","MiscFeatureFlags__enable_variable_operator","Profiles__enable_public_developer_profiles","Search__enable_page_map","Cloud__enable_cloudx_experiment_ids","MiscFeatureFlags__developers_footer_image","Cloud__enable_llm_concierge_chat","Profiles__enable_complete_playlist_endpoint","Search__enable_ai_eligibility_checks","TpcFeatures__enable_required_headers","MiscFeatureFlags__enable_project_variables","Profiles__enable_page_saving","MiscFeatureFlags__enable_view_transitions","DevPro__enable_developer_subscriptions","EngEduTelemetry__enable_engedu_telemetry","Cloud__enable_cloud_dlp_service"],null,null,"AIzaSyA58TaKli1DculwmAmbpzLVGuWc8eCQgQc","https://developerscontentserving-pa.googleapis.com","AIzaSyDWBU60w0P9hEkr29kkksYs8Z7gvZ8u_wc","https://developerscontentsearch-pa.googleapis.com",2,4,null,"https://developerprofiles-pa.googleapis.com",[27,"web","web.dev","web.dev",null,"web-dot-devsite-v2-prod-3p.appspot.com",null,null,[null,null,null,null,null,null,null,null,null,null,null,[1],null,null,null,null,null,null,[1],null,null,null,null,[1,null,1],[1,1,null,1,1]],null,[38,null,null,null,null,null,"/images/lockup.svg","/images/touchicon-180.png",null,null,null,1,1,null,null,null,null,null,null,null,null,2,null,null,null,"/images/lockup-dark-theme.svg",[]],[],null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,[[],[1,1]],[[null,null,null,null,null,["GTM-MZWCJPP"],null,null,null,null,null,[["GTM-MZWCJPP",1]],1]],null,4]]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>

CINXE.COM

HTML | web.dev