article: Default

This is a heading 2

<article>
  <h2>This is a heading 2</h2>
</article>

article: article with aria-labelledby

This is a heading 2

<article aria-labelledby="article_heading">
  <h2 id="article_heading">This is a heading 2</h2>
</article>

article: article with aria-label

This is a heading 2

<article aria-label="This is a heading 2">
  <h2>This is a heading 2</h2>
</article>

section: Default

This is a heading 2

<section>
  <h2>This is a heading 2</h2>
</section>

section: section with aria-labelledby

This is a heading 2

<section aria-labelledby="section_heading">
  <h2 id="section_heading">This is a heading 2</h2>
</section>

section: section with aria-label

This is a heading 2

<section aria-label="This is a heading 2">
  <h2>This is a heading 2</h2>
</section>

nav: Default

<nav>
    <ul>
      <li>
        <a href="#">
          Home
        </a>
      </li>
      <li>
        <a href="#">
          Team
        </a>
      </li>
      <li>
        <a href="#">
          Contact
        </a>
      </li>
    </ul>
  </nav>

nav: section with aria-labelledby

<nav aria-labelledby="nav_heading">
  <h2 id="nav_heading">Main</h2>
  <ul>
    <li>
      <a href="#">
        Home
      </a>
    </li>
    <li>
      <a href="#">
        Team
      </a>
    </li>
    <li>
      <a href="#">
        Contact
      </a>
    </li>
  </ul>
</nav>

nav: section with aria-label

<nav aria-label="Main">
  <ul>
    <li>
      <a href="#">
        Home
      </a>
    </li>
    <li>
      <a href="#">
        Team
      </a>
    </li>
    <li>
      <a href="#">
        Contact
      </a>
    </li>
  </ul>
</nav>

aside: Default

<aside>
  <h2>This is a heading 2</h2>
</aside>

aside: aside with aria-labelledby

<aside aria-labelledby="aside_heading">
  <h2 id="aside_heading">This is a heading 2</h2>
</aside>

aside: aside with aria-label

<aside aria-label="This is a heading 2">
  <h2>This is a heading 2</h2>
</aside>

headings: Default

This is a heading 1

This is a heading 2

This is a heading 3

This is a heading 4

This is a heading 5
This is a heading 6
<h1>This is a heading 1</h1>
<h2>This is a heading 2</h2>
<h3>This is a heading 3</h3>
<h4>This is a heading 4</h4>
<h5>This is a heading 5</h5>
<h6>This is a heading 6</h6>

headings: h1 nested in sections

This is a heading 1

This is a heading 1

This is a heading 1

This is a heading 1

This is a heading 1

This is a heading 1

<h1>This is a heading 1</h1>

<section>
  <h1>This is a heading 1</h1>
  <section>
    <h1>This is a heading 1</h1>
    <section>
      <h1>This is a heading 1</h1>
      <section>
        <h1>This is a heading 1</h1>
        <section>
          <h1>This is a heading 1</h1>
        </section>
      </section>
    </section>
  </section>
</section>

headings: h1 followed by paragraph in hgroup

Dr. Strangelove

Or: How I Learned to Stop Worrying and Love the Bomb

<hgroup>
  <h1>Dr. Strangelove</h1>
  <p>Or: How I Learned to Stop Worrying and Love the Bomb</p>
</hgroup>

header: Default

Header 
<header>
  Header
</header>

header: header in section

Header 
<section>
  <header>
    Header
  </header>
</section>

header: header in article

Header 
<article>
  <header>
    Header
  </header>
</article>

footer: Default

Footer 
<footer>
  Footer
</footer>

footer: footer in section

Footer 
<section>
  <footer>
    Footer
  </footer>
</section>

footer: footer in article

Footer 
<article>
  <footer>
    Footer
  </footer>
</article>

Default

The address
Line 2
Line 3 
<address>
  The address<br>
  Line 2<br>
  Line 3
</address>

p: Default

Let's get you into a radiation suit, we must prepare to reload. Our first television set, Dad just picked it up today. Do you have a television? Who are you? Oh yes sir. Right, gimme a Pepsi free.

Wait a minute. Wait a minute, Doc. Are you telling me that it's 8:25? Uh, I think so. No. whoa, whoa Doc, stuck here, I can't be stuck here, I got a life in 1985. I got a girl. Marty, why are you so nervous?

Does your mom know about tomorrow night? Okay, alright, Saturday is good, Saturday's good, I could spend a week in 1955. I could hang out, you could show me around. Ah. That's good advice, Marty. Okay, that's enough. Now stop the microphone. I'm sorry fellas. I'm afraid you're just too darn loud. Next, please. Where's the next group, please. 

<p>
  Let's get you into a radiation suit, we must prepare to reload. Our first television set, Dad just picked it up today. Do you have a television? Who are you? Oh yes sir. Right, gimme a Pepsi free.
</p>

<p>
  Wait a minute. Wait a minute, Doc. Are you telling me that it's 8:25? Uh, I think so. No. whoa, whoa Doc, stuck here, I can't be stuck here, I got a life in 1985. I got a girl. Marty, why are you so nervous?
</p>

<p>
  Does your mom know about tomorrow night? Okay, alright, Saturday is good, Saturday's good, I could spend a week in 1955. I could hang out, you could show me around. Ah. That's good advice, Marty. Okay, that's enough. Now stop the microphone. I'm sorry fellas. I'm afraid you're just too darn loud. Next, please. Where's the next group, please.
</p>

hr: Default

<hr>

pre: default

^__^
(oo)\_______
(__)\       )\/\
    ||----w |
    ||     ||

<pre>
^__^
(oo)\_______
(__)\       )\/\
    ||----w |
    ||     ||
</pre>

blockquote: Default

Underline your fucking links you sociopaths.

<blockquote>
  <p>Underline your fucking links you sociopaths.</p>
</blockquote>

blockquote: with cite

Underline your fucking links you sociopaths.

<blockquote cite="https://vimeo.com/377175838">
  <p>Underline your fucking links you sociopaths.</p>
</blockquote>

ol: Default

  1. HTML
  2. CSS
  3. JavaScript
<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

ol: with reversed attribute

  1. HTML
  2. CSS
  3. JavaScript
<ol reversed>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

ol: with start attribute

  1. HTML
  2. CSS
  3. JavaScript
<ol start="5">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

ol: with type lower-alpha

  1. HTML
  2. CSS
  3. JavaScript
<ol type="a">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

ol: with type upper-alpha

  1. HTML
  2. CSS
  3. JavaScript
<ol type="A">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

ol: with type lower-roman

  1. HTML
  2. CSS
  3. JavaScript
<ol type="i">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

ol: with type upper-roman

  1. HTML
  2. CSS
  3. JavaScript
<ol type="I">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

ol: Nested

  1. HTML
    1. HTML
      1. HTML
      2. CSS
      3. JavaScript
    2. CSS
    3. JavaScript
  2. CSS
  3. JavaScript
<ol>
  <li>
    HTML

    <ol>
      <li>
        HTML
        <ol>
          <li>HTML</li>
          <li>CSS</li>
          <li>JavaScript</li>
        </ol>
      </li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ol>
  </li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

ol: custom values

  1. HTML
  2. CSS
  3. JavaScript
<ol>
  <li value="3">HTML</li>
  <li value="5">CSS</li>
  <li value="19">JavaScript</li>
</ol>

ul: Default

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

ul: Nested

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>
    JavaScript
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>
        JavaScript

        <ul>
          <li>HTML</li>
          <li>CSS</li>
          <li>JavaScript</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

menu: Default

    •  
    <menu>
     <li><button onclick="alert('copy')">Copy</button></li>
     <li><button onclick="alert('cut')">Cut</button></li>
     <li><button onclick="alert('paste')">Paste</button></li>
    </menu>

    dl: Default

    HTML
    Content and structure
    CSS
    Styling
    CSS
    Interactivity and dynamic content
    <dl>
      <dt>HTML</dt>
      <dd>Content and structure</dd>
      <dt>CSS</dt>
      <dd>Styling</dd>
      <dt>CSS</dt>
      <dd>Interactivity and dynamic content</dd>
    </dl>

    dl: divs for grouping

    HTML
    Content and structure
    CSS
    Styling
    CSS
    Interactivity and dynamic content
    <dl>
      <div>
        <dt>HTML</dt>
        <dd>Content and structure</dd>
      </div>

      <div>
        <dt>CSS</dt>
        <dd>Styling</dd>
      </div>
      
      <div>
        <dt>CSS</dt>
        <dd>Interactivity and dynamic content</dd>
      </div>
    </dl>

    figure: Default

    Filled with light gray color only.
    A description for the image 
    <figure>
      <img src="/media/images/400x200.svg" alt="Filled with light gray color only.">

      <figcaption>
        A description for the image
      </figcaption>
    </figure>

    main: Default

    Main 
    <main>
      Main
    </main>

    search: Default

    Filter results

     
    <search>
      <h2>Filter results</h2>
      <label for="search1">
        Search term
      </label>
      <input id="search1">
    </search>

    search: search with aria-labelledby

    Filter results

     
    <search aria-labelledby="search_heading">
      <h2 id="search_heading">Filter results</h2>
      <label for="search2">
        Search term
      </label>
      <input id="search2">
    </search>

    search: search with aria-label

    Search

     
    <search aria-label="Filter results">
      <h2>Search</h2>
      <label for="search3">
        Search term
      </label>
      <input id="search3">
    </search>

    div: Default

    A div is not a button. 
    <div>
      A div is not a button.
    </div>

    picture: Default

    A 1200 times 600 image 
    <picture>
      <source srcset="/media/images/1200x600.svg">
      <img src="/media/images/1200x600.svg" alt="A 1200 times 600 image">
    </picture>

    img: Default

    A 1200 times 600 image 
    <img src="/media/images/1200x600.svg" alt="A 1200 times 600 image">

    img: with a max width of 600px

    A 1200 times 600 image wrapped in a div with a max width of 600px 
    <div style="max-width: 600px">
      <img src="/media/images/1200x600.svg" alt="A 1200 times 600 image wrapped in a div with a max width of 600px">
    </div>

    img: with a height of 250px

    1200 times 600 image wrapped in a div with a height of 400px 
    <div style="height: 250px">
      <img src="/media/images/1200x600.svg" alt="1200 times 600 image wrapped in a div with a height of 400px">
    </div>

    img: with a max width of 600px

    A 1200 times 600 image wrapped in a div with a max width of 600px 
    <div style="max-width: 600px">
      <img src="/media/images/1200x600.svg" alt="A 1200 times 600 image wrapped in a div with a max width of 600px">
    </div>

    iframe: Default

    <iframe src="/" title="Homepage"></iframe>

    iframe: Third-party

    <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ?si=cLSirheMHs7CYGWP" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

    video: Default

    <video src="/media/videos/video1.mp4"></video>

    video: with controls

    <video src="/media/videos/video1.mp4" controls></video>

    audio: Default

    <audio src="/media/audio/audio1.m4a" controls></audio>

    a: Default

    Relative 
    <a href="/">
      Relative
    </a>

    a: Absolute

    Absolute 
    <a href="https://htmhell.dev">
      Absolute
    </a>

    a: target=blank

    Absolute in new window 
    <a href="https://htmhell.dev" target="_blank">
      Absolute in new window
    </a>

    a: Anchor

    Anchor link to next example 
    <a href="#next">
      Anchor link to next example
    </a>

    a: Phone number

    Call me 
    <a href="tel://8675309">
    Call me
    </a>

    a: E-Mail

    E-Mail me 
    <a href="mailto:manuel@matuzo.at">
    E-Mail me
    </a>

    a: with hreflang

    Absolute 
    <a href="https://orf.at" hreflang="de">
      Absolute
    </a>

    em: Default

    Let's get you into a radiation suit, we must prepare to reload. 

    <p>
      Let's get you into a radiation suit, we <em>must</em> prepare to reload.
    </p>

    strong: Default

    Let's get you into a radiation suit, we must prepare to reload. 

    <p>
      Let's get you into a radiation suit, we <strong>must</strong> prepare to reload.
    </p>

    small: Default

    Example Corp today announced record profits for the second quarter (Full Disclosure: Foo News is a subsidiary of Example Corp), leading to speculation about a third quarter merger with Demo Group. 

    <p>
      Example Corp today announced record profits for the second quarter <small>(Full Disclosure: Foo News is a subsidiary of Example Corp)</small>, leading to speculation about a third quarter merger with Demo Group.
    </p>

    s: Default

    € 19.99 € 9.99 
    <s>€ 19.99</s> € 9.99

    q: Default

    The man said Things that are impossible just take longer. I disagreed with him. 

    <p>
      The man said <q>Things that are impossible just take longer</q>. I disagreed with him.
    </p>

    dfn: Default

    The HTML Definition element (<dfn>) is used to indicate the term being defined within the context of a definition phrase or sentence. 

    <p>
      The
      <strong>HTML Definition element (<dfn id="definition-dfn">&lt;dfn&gt;</dfn>)</strong>
      is used to indicate the term being defined within the context of a definition
      phrase or sentence.
    </p>

    abbr: Default

    HTML 
    <abbr>
      HTML
    </abbr>

    abbr: with title

    HTML 
    <abbr title="Hypertext Markup Language">
      HTML
    </abbr>

    cite: Default

    My favorite book is Web Accessibility Cookbook by Manuel Matuzović.

    <p>My favorite book is <cite>Web Accessibility Cookbook</cite> by Manuel Matuzović.</p>

    data: Default

    ruby: Default

    日本(にほん) の 文化(ぶんか) はとても 豊(ゆた) かです。 
    <ruby>
        日本<rp>(</rp><rt>にほん</rt><rp>)</rp>
      </ruby>
      の
      <ruby>
        文化<rp>(</rp><rt>ぶんか</rt><rp>)</rp>
      </ruby>
      はとても
      <ruby>
        豊<rp>(</rp><rt>ゆた</rt><rp>)</rp>
      </ruby>
      かです。

    rt: Default

    日本にほん の 文化ぶんか はとても 豊ゆた かです。 
    <ruby>
        日本<rt>にほん</rt>
      </ruby>
      の
      <ruby>
        文化<rt>ぶんか</rt>
      </ruby>
      はとても
      <ruby>
        豊<rt>ゆた</rt>
      </ruby>
      かです。

    rp: Default

    日本(にほん) の 文化(ぶんか) はとても 豊(ゆた) かです。 
    <ruby>
        日本<rp>(</rp><rt>にほん</rt><rp>)</rp>
      </ruby>
      の
      <ruby>
        文化<rp>(</rp><rt>ぶんか</rt><rp>)</rp>
      </ruby>
      はとても
      <ruby>
        豊<rp>(</rp><rt>ゆた</rt><rp>)</rp>
      </ruby>
      かです。

    time: Default

    Born on 
    Born on <time datetime="1987-03-12">March 12th</time>

    time: with datetime

    Published 
    Published <time datetime="2023-12-01">two days ago</time>

    code: Default

    The <code> element 
    The <code>&lt;code&gt;</code> element

    var: Default

    If there are n pipes leading to the ice cream factory then I expect at least n flavors of ice cream to be available for purchase!

    <p>If there are <var>n</var> pipes leading to the ice
    cream factory then I expect at <em>least</em> <var>n</var>
    flavors of ice cream to be available for purchase!</p>

    samp: Default

    The computer said Too much cheese in tray two but I didn't know what that meant. 

    <p>
      The computer said <samp>Too much cheese in tray two</samp> but I didn't know what that meant.
    </p>

    kbd: Default

    To make George eat an apple, press Shift + F3 

    <p>
        To make George eat an apple, press <kbd><kbd>Shift</kbd> + <kbd>F3</kbd></kbd>
      </p>

    sub: Default

    Drink more H2O! 
    Drink more H<sub>2</sub>O!

    sup: Default

    Mme Denise 
    <span lang="fr">
        <abbr>M<sup>me</sup></abbr>
        Denise
      </span>

    i: Default

    There is a certain je ne sais quoi in the air. 

    <p>
        There is a certain <i lang="fr">je ne sais quoi</i> in the air.
      </p>

    b: Default

    You enter a small room. Your sword glows brighter. A rat scurries past the corner wall. 

    <p>
      You enter a small room. Your <b>sword</b> glows brighter. A <b>rat</b> scurries past the corner wall.
    </p>

    u: Default

    The see is full of fish.

    <p>The <u>see</u> is full of fish.</p>

    mark: Default

    I also have some kittens who are visiting me these days. They're really cute. I think they like my garden! Maybe I should adopt a kitten. 

    <p>
      I also have some <mark>kitten</mark>s who are visiting me these days. They're really cute. I think they like my garden! Maybe I should adopt a <mark>kitten</mark>.
    </p>

    bdi: Default

    الرجل القوي إيان: 1st place
    الرجل القوي إيان: 1st place
    <bdi>الرجل القوي إيان</bdi>: 1st place<br>
    <span>الرجل القوي إيان</span>: 1st place<br>

    bdo: Default

    This text will go right to left. 
    <bdo dir="rtl">This text will go right to left.</bdo>

    span: Default

    A span is not a button. 
    A span is not a button.

    br: Default

    Some
    text 
    Some<br>text

    wbr: Default

    So then she pointed at the tiger and screamed "thereisnowayyouareevergoingtocatchme"! 

    <p>
      So then she pointed at the tiger and screamed "there<wbr>is<wbr>no<wbr>way<wbr>you<wbr>are<wbr>ever<wbr>going<wbr>to<wbr>catch<wbr>me"!
    </p>

    del: Default

    The nose flute is the mots most beautiful instrument in the world. 

    <p>
      The nose flute is the <del datetime="2021-09-03">mots</del> <ins datetime="2021-09-03">most</ins> beautiful instrument in the world.
    </p>

    ins: Default

    The nose flute is the mots most beautiful instrument in the world. 

    <p>
      The nose flute is the <del datetime="2021-09-03">mots</del> <ins datetime="2021-09-03">most</ins> beautiful instrument in the world.
    </p>

    form: Default

    <form>
      <label for="form_text1">
        Name
      </label>
      <input type="text" id="form_text1">

      <label for="form_text2">
        E-mail
      </label>
      <input type="email" id="form_text2">

      <button>Submit</button>
    </form>

    label: Default

    <div>
      <label for="label_text1">
        Name
      </label>
      <input type="text" id="label_text1">
    </div>

    label: Implicit label

    <div>
      <label>
        Name
      <input type="text">
      </label>
    </div>

    input: Default

    <label for="text1">
      Name
    </label>
    <input type="text" id="text1">

    input: Implicit label

    <label>
      Name
    <input type="text">
    </label>

    input: with default value

    <label for="text2">
      Name
    </label>
    <input type="text" id="text2" value="Biggie Smalls">

    input: with placeholder

    <label for="text3">
      Name
    </label>
    <input type="text" placeholder="your name" id="text3">

    input: with size

    <label for="text4">
      Name
    </label>
    <input type="text" size="15" id="text4">

    input: disabled

    <label for="text5">
      Name
    </label>
    <input type="text" disabled id="text5">

    input: aria-disabled

    <label for="text6">
      Name
    </label>
    <input type="text" aria-disabled="true" id="text6">

    input: readonly

    <label for="text7">
      Name
    </label>
    <input type="text" readonly id="text7">

    input: datalist

    <label for="text8">
      Name
    </label>
    <input type="text" id="text8" list="names">
    <datalist id="names">
      <option value="Danny Brown"></option>
      <option value="Freddie Gibbs"></option>
      <option value="Marshall Matters"></option>
    </datalist>

    input: with autocomplete

    <label for="text9">
      Name
    </label>
    <input type="text" autocomplete="family-name" id="text9">

    input: search type

    <label for="text10">
      Search
    </label>
    <input type="search" id="text10">

    input: tel type

    <label for="text11">
      Phone number
    </label>
    <input type="tel" id="text11">

    input: Default

    <label for="text12">
      URL
    </label>
    <input type="url" id="text12">

    input: email type

    <label for="text13">
      E-Mail
    </label>
    <input type="email" id="text13">

    input: password type

    <label for="text14">
      Password
    </label>
    <input type="password" id="text14">

    input: date type

    <label for="text15">
      Date
    </label>
    <input type="date" id="text15">

    input: month type

    <label for="text16">
      Month
    </label>
    <input type="month" id="text16">

    input: week type

    <label for="text17">
      Week
    </label>
    <input type="week" id="text17">

    input: time type

    <label for="text18">
      Time
    </label>
    <input type="time" id="text18">

    input: datetime-local type

    <label for="text19">
      Date and time
    </label>
    <input type="datetime-local" id="text19">

    input: number type

    <label for="text20">
      Number
    </label>
    <input type="number" id="text20">

    input: range type

    <label for="text21">
      Range
    </label>
    <input type="range" id="text21">

    input: color type

    <label for="text22">
      Color
    </label>
    <input type="color" id="text22">

    input: file type

    <label for="text23">
      File
    </label>
    <input type="file" id="text23">

    input: Text right to left

    <div dir="rtl">
      <label for="text24">
        Name
      </label>
      <input type="text" id="text24">
    </div>

    input: E-Mail right to left

    <div dir="rtl">
      <label for="text25">
        E-Mail
      </label>
      <input type="email" id="text25">
    </div>

    input: E-Mail right to left with placeholder

    <div dir="rtl">
      <label for="text26">
        E-Mail
      </label>
      <input type="email" id="text26" placeholder="Please enter…">
    </div>

    button: Default

    <button>Submit</button>

    button: disabled

    <button disabled>
      Don't submit
    </button>

    button: aria-disabled

    <button aria-disabled="true">
      Don't submit
    </button>

    button: input type=submit

    <input type="submit" value="Submit">

    button: input type=image

    <input type="image" src="/media/images/button.jpg" alt="Submit">

    button: input type=reset

    <input type="reset" value="Reset">

    button: input type=button

    <input type="button" value="Show">

    button: with commandfor and command=show-modal

    My modal

     
    <button commandfor="my-modal" command="show-modal" aria-haspopup="dialog">
      Show modal
    </button>

    <dialog id="my-modal" closedby="any">
      <button command="close" commandfor="my-modal">close</button>

      <h1>My modal</h1>
    </dialog>

    button: with commandfor and command=toggle-popover

    My content

    <button commandfor="my-content" command="toggle-popover">
      Show modal
    </button>

    <div id="my-content" popover>
      <h1>My content</h1>
    </div>

    checkbox: Default

    <div>
      <input type="checkbox" id="checkbox1">
      <label for="checkbox1">Checkbox</label>
    </div>

    checkbox: Implicit label

    <div>
      <label>
        Checkbox
        <input type="checkbox">
      </label>
    </div>

    checkbox: Checked

    <div>
      <input type="checkbox" checked id="checkbox2">
      <label for="checkbox2">Checkbox</label>
    </div>

    checkbox: Indeterminate

    <div>
      <input type="checkbox" id="checkbox3">
      <label for="checkbox3">Checkbox</label>
    </div>
    <script>
      document.querySelector('#checkbox3').indeterminate = true;
    </script>

    checkbox: disabled

    <div>
      <input type="checkbox" disabled id="checkbox4">
      <label for="checkbox4">Checkbox</label>
    </div>

    checkbox: aria-disabled

    <div>
      <input type="checkbox" aria-disabled="true" id="checkbox5">
      <label for="checkbox5">Checkbox</label>
    </div>

    radio: Default

    <div>
      <input type="radio" id="radio1">
      <label for="radio1">Radio</label>
    </div>

    radio: Implicit label

    <div>
      <label>
        <input type="radio">
        Radio
      </label>
    </div>

    radio: Checked

    <div>
      <input type="radio" checked id="radio2">
      <label for="radio2">Radio</label>
    </div>

    radio: disabled

    <div>
      <input type="radio" disabled id="radio3">
      <label for="radio3">Radio</label>
    </div>

    radio: aria-disabled

    <div>
      <input type="radio" aria-disabled="true" id="radio4">
      <label for="radio4">Radio</label>
    </div>

    radio: Group

    <div>
      <input type="radio" id="radio5" name="radios">
      <label for="radio5">Radio 1</label>
    </div>

    <div>
      <input type="radio" id="radio6" name="radios">
      <label for="radio6">Radio 2</label>
    </div>

    select: Default

    <div>
      <label for="select">
        Options
      </label>
      <select id="select">
        <option>Option A</option>
        <option>Option B</option>
        <option>Option C</option>
        <option>Option D</option>
      </select>
    </div>

    select: Implicit label

    <div>
      <label>
        Options
        <select>
          <option>Option A</option>
          <option>Option B</option>
          <option>Option C</option>
          <option>Option D</option>
        </select>
      </label>
    </div>

    select: Selected

    <div>
      <label for="select2">
        Options
      </label>
      <select id="select2">
        <option>Option A</option>
        <option selected>Option B</option>
        <option>Option C</option>
        <option>Option D</option>
      </select>
    </div>

    select: with size

    <div>
      <label for="select3">
        Options
      </label>
      <select size="6" id="select3">
        <option>Option A</option>
        <option>Option B</option>
        <option>Option C</option>
        <option>Option D</option>
      </select>
    </div>

    select: with size and multiple

    <div>
      <label for="select4">
        Options
      </label>
      <select size="6" multiple id="select4">
        <option>Option A</option>
        <option>Option B</option>
        <option>Option C</option>
        <option>Option D</option>
      </select>
    </div>

    select: with optgroup

    <div>
      <label for="select5">
        Options
      </label>
      <select id="select5">
        <optgroup label="Group">
          <option>Option A</option>
          <option>Option B</option>
          <option>Option C</option>
          <option>Option D</option>
        </optgroup>
      </select>
    </div>

    select: disabled

    <div>
      <label for="select6">
        Options
      </label>
      <select disabled id="select6">
        <option>Option A</option>
        <option>Option B</option>
        <option>Option C</option>
        <option>Option D</option>
      </select>
    </div>

    select: aria-disabled

    <div>
      <label for="select7">
        Options
      </label>
      <select aria-disabled="true" id="select7">
        <option>Option A</option>
        <option>Option B</option>
        <option>Option C</option>
        <option>Option D</option>
      </select>
    </div>

    fieldset: Default

    Radios 
    <fieldset>
        <legend>Radios</legend>

        <div>
          <input type="radio" id="radio7" name="radios">
          <label for="radio7">Radio 1</label>
        </div>

        <div>
          <input type="radio" id="radio8" name="radios">
          <label for="radio8">Radio 2</label>
        </div>
      </fieldset>

    fieldset: disabled

    Radios 
    <fieldset disabled>
        <legend>Radios</legend>

        <div>
          <input type="radio" id="radio9" name="radios">
          <label for="radio9">Radio 1</label>
        </div>

        <div>
          <input type="radio" id="radio10" name="radios">
          <label for="radio10">Radio 2</label>
        </div>
      </fieldset>

    textarea: Default

    <div>
      <label for="textarea">
        Comment
      </label>
      <textarea id="textarea"></textarea>
    </div>

    textarea: Implicit label

    <div>
      <label>
        Comment
        <textarea></textarea>
      </label>
    </div>

    textarea: with default value

    <div>
      <label for="textarea2">
        Comment
      </label>
      <textarea id="textarea2">Default value</textarea>
    </div>

    textarea: with placeholder

    <div>
      <label for="textarea3">
        Comment
      </label>
      <textarea id="textarea3" placeholder="Add comment here…"></textarea>
    </div>

    textarea: with rows

    <div>
      <label for="textarea4">
        Comment
      </label>
      <textarea id="textarea4" rows="6"></textarea>
    </div>

    textarea: with cols

    <div>
      <label for="textarea5">
        Comment
      </label>
      <textarea id="textarea5" cols="40"></textarea>
    </div>

    textarea: disabled

    <div>
      <label for="textarea6">
        Comment
      </label>
      <textarea id="textarea6" disabled></textarea>
    </div>

    textarea: aria-disabled

    <div>
      <label for="textarea7">
        Comment
      </label>
      <textarea id="textarea7" aria-disabled="true"></textarea>
    </div>

    textarea: readonly

    <div>
      <label for="textarea8">
        Comment
      </label>
      <textarea id="textarea8" readonly></textarea>
    </div>

    output: Default

    +
    = 
    <form onsubmit="return false" oninput="o.value = a.valueAsNumber + b.valueAsNumber">
      <label for="a">
        Number one
      </label>
     <input id="a" type="number" step="any"> +
     <label for="b">
        Number two
      </label>
     <input id="b" type="number" step="any">
     <br>
     =
     <output id="o" for="a b"></output>
    </form>

    progress: Default

    0% 
    <progress id="progress" value="0"><span>0</span>%</progress>

    progress: with max

    50% 
    <progress id="progress1" max="10" value="5"><span>50</span>%</progress>

    meter: Default

    Storage space usage: 0 blocks used (out of 1 total) 
    Storage space usage: <meter value=0>0 blocks used (out of 1 total)</meter>

    meter: with value

    Storage space usage: 1 blocks used (out of 1 total) 
    Storage space usage: <meter value=1>1 blocks used (out of 1 total)</meter>

    meter: with max

    Storage space usage: 2 blocks used (out of 10 total) 
    Storage space usage: <meter value=2 max=10>2 blocks used (out of 10 total)</meter>

    colgroup: Default

    Revenue 2025
    Q1 Q2 Q3 Q4
    100 40 30 400
    20 10 8 100 
    <style>
      .first-half {
        background-color: var(--c1);
      }
      .second-half {
        background-color: var(--c6);
      }
    </style>
    <table>
      <caption>Revenue 2025</caption>
      <colgroup>
        <col span="2" class="first-half">
        <col span="2" class="second-half">
      </colgroup>

      <tr>
        <th>Q1</th>
        <th>Q2</th>
        <th>Q3</th>
        <th>Q4</th>
      </tr>
      <tr>
        <td>100</td>
        <td>40</td>
        <td>30</td>
        <td>400</td>
      </tr>
      <tr>
        <td>20</td>
        <td>10</td>
        <td>8</td>
        <td>100</td>
      </tr>
    </table>

    table: Default

    Q1 Q2 Q3 Q4
    100 40 30 400
    20 10 8 100 
    <table>
      <tr>
        <th>Q1</th>
        <th>Q2</th>
        <th>Q3</th>
        <th>Q4</th>
      </tr>
      <tr>
        <td>100</td>
        <td>40</td>
        <td>30</td>
        <td>400</td>
      </tr>
      <tr>
        <td>20</td>
        <td>10</td>
        <td>8</td>
        <td>100</td>
      </tr>
    </table>

    table: with caption

    Revenue 2025
    Q1 Q2 Q3 Q4
    100 40 30 400
    20 10 8 100 
    <table>
      <caption>Revenue 2025</caption>

      <tr>
        <th>Q1</th>
        <th>Q2</th>
        <th>Q3</th>
        <th>Q4</th>
      </tr>
      <tr>
        <td>100</td>
        <td>40</td>
        <td>30</td>
        <td>400</td>
      </tr>
      <tr>
        <td>20</td>
        <td>10</td>
        <td>8</td>
        <td>100</td>
      </tr>
    </table>

    tbody: Default

    Revenue 2025
    Q1 Q2 Q3 Q4
    100 40 30 400
    20 10 8 100
    120 50 38 500 
    <table>
      <caption>Revenue 2025</caption>
      <thead>
        <tr>
          <th>Q1</th>
          <th>Q2</th>
          <th>Q3</th>
          <th>Q4</th>
        </tr>
      </thead>
      <tbody>
      <tr>
        <td>100</td>
        <td>40</td>
        <td>30</td>
        <td>400</td>
      </tr>
      <tr>
        <td>20</td>
        <td>10</td>
        <td>8</td>
        <td>100</td>
      </tr>
      </tbody>
      <tfoot>
      <tr>
        <td>120</td>
        <td>50</td>
        <td>38</td>
        <td>500</td>
      </tr>
      </tfoot>
    </table>

    details: Default

    There's more Here's more! 
    <details>
      <summary>There's more</summary>

      Here's more!
    </details>

    details: open

    There's more Here's more! 
    <details open>
      <summary>There's more</summary>

      Here's more!
    </details>

    dialog: Default

    Content in a dialog 
    <button  id="btn1">Show me content in a dialog</button>

    <dialog>
      <form method="dialog">
        <button>close</button>
      </form>
      
      Content in a dialog
    </dialog>

    <script>
      document.querySelector('#btn1').addEventListener('click', e => {
        document.querySelector('#btn1').nextElementSibling.show()
      })
    </script>

    dialog: modal dialog

    Content in a dialog 
    <button id="btn2">Show me content in a modal dialog</button>

    <dialog closedby="any">
      <form method="dialog">
        <button class="close">close</button>
      </form>
      
      Content in a dialog
    </dialog>

    <script>
      document.querySelector('#btn2').addEventListener('click', e => {
        document.querySelector('#btn2').nextElementSibling.showModal()
      })
    </script>

    dialog: with closedby=any

    Content in a dialog. Click outside in some browsers to close. 
    <button id="btn3">Show me content in a modal dialog</button>

    <dialog closedby="any">
      <form method="dialog">
        <button class="close">close</button>
      </form>
      
      Content in a dialog. Click outside in some browsers to close.
    </dialog>

    <script>
      document.querySelector('#btn3').addEventListener('click', e => {
        document.querySelector('#btn3').nextElementSibling.showModal()
      })
    </script>

    dialog: with commandfor and command=show-modal

    My modal

     
    <button commandfor="my-modal1" command="show-modal">
      Show modal
    </button>

    <dialog id="my-modal1" closedby="any">
      <button command="close" commandfor="my-modal1">close</button>

      <h1>My modal</h1>
    </dialog>

    hidden: Hidden element

    <div hidden>
      I'm hidden
    </div>

    hidden: Hidden element with display: block

    <div hidden style="display: block">
      I'm hidden
    </div>

    hidden: Hidden until found element

    <div hidden="until-found">
      I'm not hidden
    </div>

    svg: Default

    <svg xmlns="http://www.w3.org/2000/svg" width="1200" height="600" viewBox="0 0 1200 600" role="img" aria-label="1200 times 600 inline svg">
      <rect width="100%" height="100%" fill="#DDDDDD"/>
    </svg>

    svg: Icon

    <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" width="48">
      <path d="m36.77 116.11 35.91 41.9 94.78-114.72" fill="none" stroke-miterlimit="10" stroke-width="25" stroke="currentColor"/>
    </svg>