--- title: New Things You Should Know About HTML Here in Mid 2026 –... description: A sweeping tour of newer and lesser-known HTML features developers may have missed, including specialized permission elements like <geolocation> and... canonical: https://daily.dev/posts/new-things-you-should-know-about-html-here-in-mid-2026-master-dev-blog-exp0rgmog twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: New Things You Should Know About HTML Here in Mid 2026 – Master.dev Blog | daily.dev og:description: A sweeping tour of newer and lesser-known HTML features developers may have missed, including specialized permission elements like <geolocation> and... og:url: https://daily.dev/posts/new-things-you-should-know-about-html-here-in-mid-2026-master-dev-blog-exp0rgmog og:image: https://api.daily.dev/og/posts/EXp0rGMog.png og:image:alt: New Things You Should Know About HTML Here in Mid 2026 – Master.dev Blog og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # New Things You Should Know About HTML Here in Mid 2026 – Master.dev Blog **[Frontend Masters](https://daily.dev/sources/frontendmasters)** · 15 min read · 10 upvotes · 0 comments ## Summary A sweeping tour of newer and lesser-known HTML features developers may have missed, including specialized permission elements like and that improve permission-denial recovery flows, the experimental element for PWA installation, CSS-customizable , scoped custom element registries, declarative shadow DOM, reference target for cross-shadow-DOM label/input linking, declarative CSS module scripts, streaming HTML includes and persistent widgets, HTML-in-Canvas rendering, the commands/invokers API (including hover-based interest invokers), the element for 3D content, the focusgroup attribute for roving tabindex, hidden="until-found", browser h1 sizing changes, and sizes="auto" for responsive images. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### What does the sizes="auto" attribute do for responsive images in HTML? Setting sizes="auto" on an img element lets the browser automatically pick the right image from the srcset candidates without the developer having to manually calculate a sizes value. It only applies when the image is lazy loaded (loading="lazy"), since browsers need to know the image's rendered size before it enters the viewport, which isn't possible for above-the-fold images. _Developers wiring up responsive images can track browser support changes like this one on daily.dev._ ### What is the difference between the HTML popover attribute and the newer commandfor/command attributes? The popover attribute (e.g. popovertarget="mypopover") is the original way to toggle a popover from a button, while commandfor and command generalize that into a broader commands API with built-in values like show-modal, request-close, show-popover, hide-popover, and toggle-popover, plus support for custom commands identified with a double-dash prefix (e.g. command="--play") that fire a 'command' event developers can listen for. _Teams standardizing on interactive UI patterns can follow shifts like popovers-to-commands on daily.dev._ ### What changed about how browsers size h1 elements nested inside section elements? Browsers changed their default user-agent styling so that h1 no longer shrinks based on section nesting depth. Previously, a section > h1 rendered like an h2, and a section > section > h1 rendered like an h3, which caused confusion about where h1 could be used and made the outline algorithm unreliable; all major browsers updated this behavior together. _Developers auditing heading styles after a browser default change like this can stay ahead of it on daily.dev._ --- Tags: [#css](https://daily.dev/tags/css), [#html](https://daily.dev/tags/html), [#google-chrome](https://daily.dev/tags/google-chrome), [#accessibility](https://daily.dev/tags/accessibility), [#web-components](https://daily.dev/tags/web-components) [View this post on daily.dev](https://daily.dev/posts/new-things-you-should-know-about-html-here-in-mid-2026-master-dev-blog-exp0rgmog) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"New Things You Should Know About HTML Here in Mid 2026 – Master.dev Blog","url":"https://daily.dev/posts/new-things-you-should-know-about-html-here-in-mid-2026-master-dev-blog-exp0rgmog","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/new-things-you-should-know-about-html-here-in-mid-2026-master-dev-blog-exp0rgmog"},"datePublished":"2026-09-02T13:06:52.007Z","dateModified":"2026-09-02T13:16:51.022Z","description":"A sweeping tour of newer and lesser-known HTML features developers may have missed, including specialized permission elements like and...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/1208a7db80bf9bbc2fd0b883ac50d400?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/1208a7db80bf9bbc2fd0b883ac50d400?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Frontend Masters","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Frontend Masters","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/d34dd87208f24090bfb0917307fcf89f","url":"https://daily.dev/sources/frontendmasters"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/new-things-you-should-know-about-html-here-in-mid-2026-master-dev-blog-exp0rgmog","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":10},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"css,html,google-chrome,accessibility,web-components","timeRequired":"PT15M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Frontend Masters","item":"https://daily.dev/sources/frontendmasters"},{"@type":"ListItem","position":3,"name":"New Things You Should Know About HTML Here in Mid 2026 – Master.dev Blog"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/new-things-you-should-know-about-html-here-in-mid-2026-master-dev-blog-exp0rgmog#faq","mainEntity":[{"@type":"Question","name":"What does the sizes=\"auto\" attribute do for responsive images in HTML?","acceptedAnswer":{"@type":"Answer","text":"Setting sizes=\"auto\" on an img element lets the browser automatically pick the right image from the srcset candidates without the developer having to manually calculate a sizes value. It only applies when the image is lazy loaded (loading=\"lazy\"), since browsers need to know the image's rendered size before it enters the viewport, which isn't possible for above-the-fold images. Developers wiring up responsive images can track browser support changes like this one on daily.dev."}},{"@type":"Question","name":"What is the difference between the HTML popover attribute and the newer commandfor/command attributes?","acceptedAnswer":{"@type":"Answer","text":"The popover attribute (e.g. popovertarget=\"mypopover\") is the original way to toggle a popover from a button, while commandfor and command generalize that into a broader commands API with built-in values like show-modal, request-close, show-popover, hide-popover, and toggle-popover, plus support for custom commands identified with a double-dash prefix (e.g. command=\"--play\") that fire a 'command' event developers can listen for. Teams standardizing on interactive UI patterns can follow shifts like popovers-to-commands on daily.dev."}},{"@type":"Question","name":"What changed about how browsers size h1 elements nested inside section elements?","acceptedAnswer":{"@type":"Answer","text":"Browsers changed their default user-agent styling so that h1 no longer shrinks based on section nesting depth. Previously, a section > h1 rendered like an h2, and a section > section > h1 rendered like an h3, which caused confusion about where h1 could be used and made the outline algorithm unreliable; all major browsers updated this behavior together. Developers auditing heading styles after a browser default change like this can stay ahead of it on daily.dev."}}]} ```