# entry

guid: https://htmhell.dev/tips/the-document-outline/
title: the document outline
author: ;Manuel Matuzovic
link: https://htmhell.dev/tips/the-document-outline/
hash: m�S&�ӆ�� Z�6
attributes: {"enclosures":[]}
content:
<p>
  In May to June 2021, WebAIM surveyed <a href="https://webaim.org/projects/screenreadersurvey9">preferences of screen reader users</a> and the results show that most respondents find proper heading structures useful.
</p>

<p>
<a href="https://webaim.org/projects/screenreadersurvey9/#heading">
<picture>
  <source type="image/avif">
  <img src="https://htmhell.dev/images/6_piechart.jpg" width="700" height="390" alt="Pie chart showing that 52.8% find headings very useful and 32.9% somewhat useful." loading="lazy">
</picture>
</a>
</p>



<p>
  There are several reasons proper heading structures are important:
</p>

<ul>
  <li>
    <p>
      The headings on a page form the document outline of a page and the document outline tells third-party tools how your page is structured. <br>When you <a href="https://validator.w3.org/#validate_by_uri+with_options">validate a page</a>, you can check “Show outline” under “More Options” to list your document outline.
    </p>
    <p>
      <picture>
        <source type="image/avif">
        <img src="https://htmhell.dev/images/6_validator.jpg" width="700" height="634" alt="The W3 Validator shows the document outline of the HTMHell tips page. A single h1 followed by several h2s." loading="lazy">
      </picture>
    </p>
  </li>
  <li>
    Headings communicate the organization of the content on the page. The <code>&lt;h1&gt;</code> tells users what the page is about. The <code>&lt;h2&gt;</code>s split the page into large sections, <code>&lt;h3&gt;</code> - <code>&lt;h6&gt;</code> structure these larger sections even more.
  </li>
  <li>
    The proper usage of headings helps search engines understand what your page is about and how it's structured.
  </li>
  <li>
    <p>
      Screen reader users can get an overview of the content on a page by only going through the headings. The software usually announces the content of the headings along with their level (1 - 6). That's why it's important to keep a sound document outline. Skipping headings can be confusing and should be avoided where possible.
    </p>
    <p>
      </p><figure>
        <picture>
          <source type="image/avif">
          <img src="https://htmhell.dev/images/6_voiceover-heading.jpg" width="700" height="453" alt="VoiceOver Rotor on macOS on the HTMHell tips page." loading="lazy">
        </picture>
        <figcaption>
          The VoiceOver rotor on macOS lists all headings on the page with their level and allows users to jump to a selected heading.
        </figcaption>
      </figure>
    <p></p>
  </li>
  <li>
    Screen readers allow navigation by heading. That means that you can not just go through the headings on a page, but you can select them and jump directly to the position of the selected heading in the DOM and read the site starting from there.
  </li>
  <li>
    Headings also help sighted users understand how a page is structured and how different sections on a page relate to each other.
  </li>
</ul>

<p>
  An advice I like to give my students is to imagine that they're writing a paper for university when they're creating the outline for a web page. A paper always needs a title, and it has just one title (<code>&lt;h1&gt;</code>). There are usually several main chapters in a paper (<code>&lt;h2&gt;</code>) and sometimes there are also subchapters (<code>&lt;h3&gt;</code> - <code>&lt;h6&gt;</code>).
</p>
<p>
  It's much better to imagine how the page <em>should</em> be structured than to look at a design and only follow visual cues. Sometimes it makes sense to add headings to the page that aren't visible in the design in order to create a sound document outline. You can hide these headings accessibly by using a combination of properties. 
</p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h2</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>sr-only<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>I'm visually hidden<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h2</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>

<pre data-sanitized-class="language-css"><code data-sanitized-class="language-css"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token selector">.sr-only</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">position</span><span data-sanitized-class="token punctuation">:</span> absolute<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">white-space</span><span data-sanitized-class="token punctuation">:</span> nowrap<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">width</span><span data-sanitized-class="token punctuation">:</span> 1px<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">height</span><span data-sanitized-class="token punctuation">:</span> 1px<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">overflow</span><span data-sanitized-class="token punctuation">:</span> hidden<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">border</span><span data-sanitized-class="token punctuation">:</span> 0<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">padding</span><span data-sanitized-class="token punctuation">:</span> 0<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">clip</span><span data-sanitized-class="token punctuation">:</span> <span data-sanitized-class="token function">rect</span><span data-sanitized-class="token punctuation">(</span>0 0 0 0<span data-sanitized-class="token punctuation">)</span><span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">clip-path</span><span data-sanitized-class="token punctuation">:</span> <span data-sanitized-class="token function">inset</span><span data-sanitized-class="token punctuation">(</span>50%<span data-sanitized-class="token punctuation">)</span><span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">margin</span><span data-sanitized-class="token punctuation">:</span> -1px<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">}</span></span></code></pre>


guid: https://htmhell.dev/tips/the-avif-image-format/
title: the avif image format
author: ;Manuel Matuzovic
link: https://htmhell.dev/tips/the-avif-image-format/
hash: �<��ߧ?�-N���J
attributes: {"enclosures":[]}
content:
<p>
  <code>avif</code> is a fairly new image format and for me it's one of the most exciting recent additions to web development. Why? On a website I recently built, I could reduce the total image size from 1.72MB to 172KB just by converting images to <code>avif</code>.
</p>



<p>
  That sounds too good to be true, so let me start with the bad news: Chrome, Chrome for Android, Opera, Opera Mobile and Samsung Internet are the only browsers to support <code>avif</code> at the moment. Firefox supports it behind a flag.
</p>

<p>
  <a href="https://caniuse.com/avif">
    <picture>
      <source type="image/avif">
      <img src="https://htmhell.dev/images/7_avif-support.jpg" width="700" height="390" alt="caniuse.com browser support chart for the avif image format" loading="lazy">
    </picture>
  </a>
</p>

<h2>Progressive Enhancement</h2>

<p>
  That’s not terrible, but it isn’t good either. The good news is that we can leverage the built-in progressive enhancement mechanisms of HTML to provide users with fallback image formats in case they’re using a browser that doesn’t suppor <code>avif</code>.
</p>

<p>
  The markup for the screenshot above looks like this:
</p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>picture</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>source</span> <span data-sanitized-class="token attr-name">srcset</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/images/7_avif-support.avif<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">type</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>image/avif<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>source</span> <span data-sanitized-class="token attr-name">srcset</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/images/7_avif-support.webp<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">type</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>image/webp<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>img</span> <span data-sanitized-class="token attr-name">src</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/images/7_avif-support.jpg<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">width</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>740<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">height</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>251<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">alt</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>caniuse.com browser support chart for the avif image format<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">loading</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>lazy<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>picture</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>

<p>
  We provide browsers with a set of images. The browser goes through this set and stops at the first format it can interpret. Chrome stops at the first <code>&lt;source&gt;</code> element because it supports the <code>avif</code> format, Edge skips the first line and uses the <code>webp</code> image in the second line and IE skips both lines and uses the <code>jpg</code> referenced in the <code>&lt;img&gt;</code> element.
</p>

<h2>webp Browser Support</h2>

<p>
  You might even stop using <code>jpg</code> altogether because support for the <code>webp</code> image format is pretty good these days. All modern browsers, Safari starting with Big Sur, support it.
</p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>picture</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>source</span> <span data-sanitized-class="token attr-name">srcset</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/images/7_avif-support.avif<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">type</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>image/avif<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>img</span> <span data-sanitized-class="token attr-name">src</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/images/7_avif-support.webp<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">width</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>740<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">height</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>251<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">alt</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>caniuse.com browser support chart for the avif image format<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">loading</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>lazy<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>picture</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>

<p>
  <a href="https://caniuse.com/webp">
    <picture>
      <source type="image/avif">
      <img src="https://htmhell.dev/images/7_webp-support.jpg" width="740" height="291" alt="caniuse.com browser support chart for the webp image format" loading="lazy">
    </picture>
  </a>
</p>

<h2>Image size comparison</h2>

<p>I took a screenshot of the HTMHell website and compressed it with OxiPNG and converted it to <code>webp</code> and <code>avif</code>.</p>

<ul>
  <li>
    <a href="https://htmhell.dev/images/7_example-orig.png">png untouched: 936KB</a>
  </li>
  <li>
    <a href="https://htmhell.dev/images/7_example-comp.png">png compressed: 438KB</a>
  </li>
  <li>
    <a href="https://htmhell.dev/images/7_example.webp">webp: 132KB</a>
  </li>
  <li>
    <a href="https://htmhell.dev/images/7_example.avif">avif: 71KB</a>
  </li>
</ul>

<p>
  Pretty amazing, if you ask me. :)<br>
  There are already several compression tools out there, but I can recommend the <a href="https://squoosh.app/">Squoosh web app</a>, if you want to get started.
</p>


guid: https://htmhell.dev/tips/the-section-element/
title: the section element
author: ;Manuel Matuzovic
link: https://htmhell.dev/tips/the-section-element/
hash:  �(�<�0�q��e
attributes: {"enclosures":[]}
content:
<p>
  Use the <code>&lt;section&gt;</code> element to mark up a grouping of related content, typically introduced with a heading.
</p>

<p>
</p><figure>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h1</span><span data-sanitized-class="token punctuation">&gt;</span></span>Welcome to GOV.UK<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h1</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>section</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h2</span><span data-sanitized-class="token punctuation">&gt;</span></span>Services and information<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h2</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  …</span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>section</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>section</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h2</span><span data-sanitized-class="token punctuation">&gt;</span></span>Departments and policy<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h2</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  …</span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>section</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">…</span></code></pre>
<figcaption>An extract of the gov.uk home page.
</figcaption></figure>
<p></p>



<p>
  It’s not always clear when it’s appropriate to use the <code>&lt;section&gt;</code> element and how to use it properly. I’ve collected some guidelines to help you decide.
</p>

<h2>Implicit region and exposed role</h2>
<p>
  By default, there’s no difference between a <code>&lt;section&gt;</code> and a <code>&lt;div&gt;</code> regarding the semantic information exposed to assistive technology. For a screen reader, the following two code snippets are practically the same:
</p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>section</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h2</span><span data-sanitized-class="token punctuation">&gt;</span></span>Services and information<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h2</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  …</span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>section</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h2</span><span data-sanitized-class="token punctuation">&gt;</span></span>Services and information<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h2</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  …</span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>

<p>
  Regardless of the information exposed to assistive technology, it still makes sense to use <code>&lt;section&gt;</code> when appropriate. It’s a semantic element that allows us to structure a page and maybe style it accordingly using the <code>section</code> tag selector.
</p>

<h2><code>div</code> vs. <code>section</code></h2>

<p>
  <code>&lt;section&gt;</code> is no replacement for the <code>&lt;div&gt;</code> element and must not be used for styling purposes only.
</p>

<p>
  The class names in the following code snippet and the fact that the sections are nested in a <code>&lt;header&gt;</code> indicate that their only purpose is to split the header into four columns visually. They’re not important sections of the page. (Of course, the search and the navigation are important parts of a page, but <code>&lt;nav&gt;</code> is a landmark on its own and you can turn a search form into a landmark by applying the <code>role="search"</code> attribute and value. )
</p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>header</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>site-header<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>section</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>site-header__title<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>section</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>section</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>site-header__logo<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>section</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>section</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>site-header__search<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>section</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>section</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>site-header__nav<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>section</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>header</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>

<p>
  There’s a useful rule of thumb in the <a href="https://html.spec.whatwg.org/multipage/sections.html#the-section-element">HTML specification</a>:


</p><blockquote>
 A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.
</blockquote>

<p>
  You can read about the document outline in <a href="https://htmhell.dev/tips/the-document-outline/">Issue #6 - the document outline</a>.

</p><h2>region landmark</h2>

<p>
  The <code>&lt;section&gt;</code>’s exposed <code>role</code> and purpose change when you label it using <code>aria-label</code>, <code>aria-labelledby</code> or with the <code>title</code> attribute. Labelling it using these attributes turns it into a <a href="https://htmhell.dev/tips/landmarks/">landmark</a>, which exposes a different role (<code>region</code>) and gives screen reader users easier access to the section. (Note: Safari doesn’t expose the <code>region</code> role when named via <code>title</code>)
</p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>section</span> <span data-sanitized-class="token attr-name">aria-labelledby</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>results<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h2</span> <span data-sanitized-class="token attr-name">id</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>results<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Results<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h2</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  …</span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>section</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>

<p>
  Other landmarks are, for example, <code>&lt;header&gt;</code>, <code>&lt;main&gt;</code> or <code>&lt;footer&gt;</code>, important sections of the page. With that said, only promote a <code>&lt;section&gt;</code> to a landmark if it plays an important part in the current page.
</p>

<h2>The document outline</h2>

<p>
  If you have multiple <code>&lt;h1&gt;</code> elements in a page and you’ve nested some of them in <code>&lt;section&gt;</code>s, semantically you still have multiple level 1 headings. The font size of an <code>&lt;h1&gt;</code> nested in a <code>&lt;section&gt;</code> may decrease, but the level exposed to assistive technology is still 1. <a href="https://adrianroselli.com/2016/08/there-is-no-document-outline-algorithm.html">There Is No Document Outline Algorithm</a>.
</p>

<h2>Conclusion</h2>

<p>
  If you’re not sure whether to use a <code>&lt;section&gt;</code>, it’s probably best to not bother with it. It’s much more important that you create <a href="https://htmhell.dev/tips/the-document-outline/">a sound document outline</a>.
</p>

<p>PS: Thanks a lot, <a href="https://twitter.com/scottohara/">Scott</a>, for writing <a href="https://www.scottohara.me/blog/2021/07/16/section.html">Accessibility of the section element</a> which helped me understand the section element much better.
</p>


guid: https://htmhell.dev/tips/the-mailto-uri-scheme/
title: the mailto: URI scheme
author: ;Manuel Matuzovic
link: https://htmhell.dev/tips/the-mailto-uri-scheme/
hash: +(�hdh���ֆ&�
attributes: {"enclosures":[]}
content:
<p>
  You can pre-fill header fields and the message body, when you link to e-mail addresses.
</p>

<p>
</p><figure>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>mailto:manuel@matuzo.at?subject=HTMHell%20issue%209%20was%20fantastic&amp;body=Thanks,%0D%0AManuel!<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  manuel@matuzo.at</span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<figcaption>When you click this link, your default e-mail browser should open a new e-mail window with the subject “HTMHell issue 9 was fantastic” and the message “Thanks, Manuel”.</figcaption>
</figure>
<p></p>

<p>
<a href="mailto:manuel@matuzo.at?subject=HTMHell%20issue%209%20was%20fantastic&amp;body=Thanks,%0D%0AManuel!">
  manuel@matuzo.at
</a>
</p>



<p>When linking to e-mail addresses, you can provide the subject, recipients, and the e-mail body. You do this by writing the e-mail address followed by a ?, the header name, =, and the header value (see example above).

</p><h2>Recipients</h2>

<p>
  There are different ways to link to no, one or multiple e-mail address(es).
</p>

<h3>mailto: only</h3>

<p>
  If you don't provide a value for <code>mailto:</code>, your default e-mail client opens a new e-mail window with all fields empty.
</p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>mailto:<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  mailto: only</span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>

<p>
  <a href="mailto:">
    mailto: only
  </a>
</p>

<h3>mailto: only, with single address</h3>

<p>
  The “To:” field filled with a single e-mail address.
</p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>mailto:manuel@matuzo.at<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  mailto: only, with single address</span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>

<p>
  <a href="mailto:manuel@matuzo.at">
    mailto: only, with single address
  </a>
</p>

<h3>mailto: only, with multiple addresses</h3>

<p>Separate multiple recipients with a , (comma) and no space between.</p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>mailto:manuel@matuzo.at,manuel@webclerks.at<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  mailto: only, with multiple addresses</span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>

<p>
  <a href="mailto:manuel@matuzo.at,manuel@webclerks.at">
    mailto: only, with multiple addresses
  </a>
</p>

<h3>mailto: + <code>to</code> parameter</h3>

<p>
  You can also define multiple recipients by using the <code>to</code> parameter.
</p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>mailto:manuel@matuzo.at?to=manuel@webclerks.at,info@webclerks.at<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  mailto: + to parameter</span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>

<p>
  <a href="mailto:manuel@matuzo.at?to=manuel@webclerks.at,info@webclerks.at">
    mailto: + to parameter
  </a>
</p>

<h3>mailto: + <code>cc</code> parameter</h3>

<p>
  The “To:” and “Cc:” field filled with different e-mail addresses.
</p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>mailto:manuel@matuzo.at?cc=manuel@webclerks.at<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    mailto: + cc parameter</span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>

<p>
  <a href="mailto:manuel@matuzo.at?cc=manuel@webclerks.at">
    mailto: + cc parameter
  </a>
</p>

<h3>mailto: + <code>bcc</code> parameter</h3>

<p>
  The “To:” and “Bcc:” field filled with different e-mail addresses.
</p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>mailto:manuel@matuzo.at?bcc=manuel@webclerks.at<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    mailto: + bcc parameter</span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>

<p>
  <a href="mailto:manuel@matuzo.at?bcc=manuel@webclerks.at">
    mailto: + bcc parameter
  </a>
</p>

<h2>Subject</h2>

<p>
  You can define a subject by using the <code>subject</code> parameter. Special characters and spaces must be <a href="https://meyerweb.com/eric/tools/dencoder/">url encoded</a>.
</p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>mailto:manuel@matuzo.at?subject=This%20is%20a%20subject<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    mailto: + subject parameter</span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>

<p>
  <a href="mailto:manuel@matuzo.at?subject=This%20is%20a%20subject">
    mailto: + subject parameter
  </a>
</p>

<h2>Body</h2>

<p>
  You can define a message body by using the <code>body</code> parameter.
</p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>mailto:manuel@matuzo.at?body=Hi!<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    mailto: + body parameter</span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>

<p>
  <a href="mailto:manuel@matuzo.at?body=Hi!">
    mailto: + body parameter
  </a>
</p>

<p>Special characters, line breaks and spaces must be <a href="https://meyerweb.com/eric/tools/dencoder/">url encoded</a></p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>mailto:manuel@matuzo.at?body=Hi!%0D%0A%0D%0ATom%20%26%20Jerry%20are%20the%20best!<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    mailto: + body parameter</span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>

<p>
  <a href="mailto:manuel@matuzo.at?body=Hi!%0D%0A%0D%0ATom%20%26%20Jerry%20are%20the%20best!">
    mailto: + body parameter with special characters and line breaks
  </a>
</p>

<p>It's not possible to add HTML to the message, it's plain text only.</p>

<h2>Additional considerdations</h2>

<ul>
  <li>
    Spaces must be encoded with <code>%20</code>.
  </li>
  <li>
    Line breaks must be encoded with <code>%0D%0A</code>.
  </li>
  <li>
    To avoid interoperability problems, the same header value shouldn't be used multiple times (e.g. <code>?to=a@b.at?to=b@c.at</code>)
  </li>
</ul>


guid: https://htmhell.dev/tips/reversing-ordered-lists/
title: reversing ordered lists
author: ;Manuel Matuzovic
link: https://htmhell.dev/tips/reversing-ordered-lists/
hash: �I����/��r��
attributes: {"enclosures":[]}
content:
<p>
  You can reverse ordered lists by using the <code>reversed</code> attribute.
</p>

<p>
</p><figure>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>ol</span> <span data-sanitized-class="token attr-name">reversed</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span>Curly Sue (1991)<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span>Uncle Buck (1989)<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span>She's Having a Baby (1988)<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span>Planes, Trains &amp; Automobiles (1987)<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span>Ferris Bueller's Day Off (1986)<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span>Weird Science (1985)<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span>The Breakfast Club (1985)<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span>Sixteen Candles (1984)<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>ol</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<figcaption>The reversed attribute numbers items from high to low.</figcaption>
</figure>
<p></p>



<h2>Ordered lists</h2>

<ol reversed="">
  <li>Curly Sue (1991)</li>
  <li>Uncle Buck (1989)</li>
  <li>She's Having a Baby (1988)</li>
  <li>Planes, Trains &amp; Automobiles (1987)</li>
  <li>Ferris Bueller's Day Off (1986)</li>
  <li>Weird Science (1985)</li>
  <li>The Breakfast Club (1985)</li>
  <li>Sixteen Candles (1984)</li>
</ol>

<p>
  With the <code>reversed</code> attribute in place, the visual order of list items stays the same, but they are be numbered from high to low.
</p>

<p>You can also combine the <code>reversed</code> and <code>start</code> attributes to change the number the list counts down from.</p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>ol</span> <span data-sanitized-class="token attr-name">reversed</span> <span data-sanitized-class="token attr-name">start</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>5<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span>Fifth<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span>Fourth<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span>Third<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>ol</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>

<ol reversed="" start="5">
  <li>Fifth</li>
  <li>Fourth</li>
  <li>Third</li>
</ol>

<h2>Unordered lists</h2>

<p>
  The attribute has no effect on unordered lists (<code>ul</code>), even if you change the type.
</p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>ul</span> <span data-sanitized-class="token attr-name">reversed</span> <span data-sanitized-class="token attr-name">type</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>1<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span>Third<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span>Second<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span>First<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>ul</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>

<ul reversed="" type="1">
  <li>Third</li>
  <li>Second</li>
  <li>First</li>
</ul>


guid: https://htmhell.dev/tips/print-style-sheets/
title: print style sheets
author: ;Manuel Matuzovic
link: https://htmhell.dev/tips/print-style-sheets/
hash: ��g�e���m���ɕ�
attributes: {"enclosures":[]}
content:
<p>
  Improve user experience by providing a print style sheet for your website.
</p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>link</span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>stylesheet<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>style.css<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>link</span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>stylesheet<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>print.css<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">media</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>print<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>



<p>
  One of the most exciting and challenging things about web development is that we can’t predict how users will consume content on our pages. There are different devices, browsers, and input modalities and different ways of accessing and reading content. Some people prefer using the navigation, others like using search. Some people prefer <a href="https://css-tricks.com/reader-mode-the-button-to-beat/">reader mode</a> and others like to print pages.
</p>

<p>
  Yes, I know, it’s 2021, but people still have printers and they still like to print pages sometimes. Printed web pages don’t have to be perfect, but we should make sure that the important content on a page is at least accessible when printed on paper. We can do that by providing a print style sheet and including it in HTML. 
</p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>link</span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>stylesheet<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>print.css<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">media</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>print<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>

<p>
  The styles in this file only apply if users print the page. Note: The file will be downloaded, regardless, but without delaying page rendering. 
</p>

<h2>Debugging print style sheets</h2>

<p>When debugging print style sheets, we don’t have to print pages with every change we make. Browsers can emulate printing.</p>

<h3>Firefox</h3>

<p>
  You’ll find an icon that looks like a document or printed page (“Toggle print media simulation for the page”) in the rules panel in Firefox Dev Tools. Clicking it applies the print styles to the page.
</p>

<a href="https://htmhell.dev/images/11-dev-tools-ff.png">
  <picture>
    <source type="image/avif">
    <img src="https://htmhell.dev/images/11-dev-tools-ff.jpg" width="740" height="469" alt="Firefox Dev Tools Screenshot.">
  </picture>
</a>

<h3>Chrome/Edge</h3>

<p>
  In Chrome/Edge DevTools you can click the button with the three dots (“Customize and control DevTools”), select “More tools”, “Rendering” and finally “print” under “Emulate CSS”.
</p>

<a href="https://htmhell.dev/images/11-dev-tools-chrome.png">
  <picture>
    <source type="image/avif">
    <img src="https://htmhell.dev/images/11-dev-tools-chrome.jpg" width="740" height="469" alt="Chrome Dev Tools Screenshot.">
  </picture>
</a>

<h3>Safari</h3>

<p>
  You’ll find an icon that looks like a printer (“Use default media styles”) in the elements panel in Safari Dev Tools. Clicking it applies the print styles to the page.
</p>

<a href="https://htmhell.dev/images/11-dev-tools-safari.png">
  <picture>
    <source type="image/avif">
    <img src="https://htmhell.dev/images/11-dev-tools-safari.jpg" width="740" height="469" alt="Safari Dev Tools Screenshot.">
  </picture>
</a>


guid: https://htmhell.dev/tips/crossed-out-content/
title: crossed out content
author: ;Manuel Matuzovic
link: https://htmhell.dev/tips/crossed-out-content/
hash: ��G����d�mݻB
attributes: {"enclosures":[]}
content:
<p>
  HTML provides us with 2 different ways of identifying crossed out text<span aria-labelledby="note">*</span>, the <code>s</code> and the <code>del</code> element.
</p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h3</span><span data-sanitized-class="token punctuation">&gt;</span></span>Vietnamese Rose Wood Nose Flute<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h3</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  The nose flute is the <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>del</span><span data-sanitized-class="token punctuation">&gt;</span></span>mots<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>del</span><span data-sanitized-class="token punctuation">&gt;</span></span> <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>ins</span><span data-sanitized-class="token punctuation">&gt;</span></span>most<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>ins</span><span data-sanitized-class="token punctuation">&gt;</span></span> beautiful instrument in the world.</span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>s</span><span data-sanitized-class="token punctuation">&gt;</span></span>Original price: € 19.99<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>s</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>strong</span><span data-sanitized-class="token punctuation">&gt;</span></span>Special offer: € 9.99!<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>strong</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>

<p data-sanitized-id="note">
  * <mark>“Crossed out”</mark> in terms of its semantic meaning, usually but not necessarily displayed as crossed out text.
</p>



<h2>The <code>s</code> element</h2>

<p>
  Use the <code>s</code> element to highlight contents that are no longer accurate or no longer relevant. A typical example is the old and the new price for a product.
</p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>s</span><span data-sanitized-class="token punctuation">&gt;</span></span>Original price: € 19.99<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>s</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>strong</span><span data-sanitized-class="token punctuation">&gt;</span></span>Special offer: € 9.99!<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>strong</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>

<p><s>Original price: € 19.99</s></p>
<p><strong>Special offer: € 9.99!</strong></p>

<p>
  The important bit here is that you don't display the price alone with no text because not all screen readers announce the <code>s</code> element as such.
</p>

<p><s>€ 19.99</s></p>
<p><strong>€ 9.99!</strong></p>

<p>
</p><figure>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>s</span><span data-sanitized-class="token punctuation">&gt;</span></span>€ 19.99<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>s</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>strong</span><span data-sanitized-class="token punctuation">&gt;</span></span>€ 9.99!<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>strong</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<figcaption>
  Screen readers might announce this as “19 Euro point 99 9 Euro point 99” which can confuse and lead to false expectations.
</figcaption>
</figure>
<p></p>

<p>
  If you have to display the price only, hide the text visually.
</p>

<pre data-sanitized-class="language-css"><code data-sanitized-class="language-css"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token selector">.sr-only</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">position</span><span data-sanitized-class="token punctuation">:</span> absolute<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">white-space</span><span data-sanitized-class="token punctuation">:</span> nowrap<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">width</span><span data-sanitized-class="token punctuation">:</span> 1px<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">height</span><span data-sanitized-class="token punctuation">:</span> 1px<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">overflow</span><span data-sanitized-class="token punctuation">:</span> hidden<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">border</span><span data-sanitized-class="token punctuation">:</span> 0<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">padding</span><span data-sanitized-class="token punctuation">:</span> 0<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">clip</span><span data-sanitized-class="token punctuation">:</span> <span data-sanitized-class="token function">rect</span><span data-sanitized-class="token punctuation">(</span>0 0 0 0<span data-sanitized-class="token punctuation">)</span><span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">clip-path</span><span data-sanitized-class="token punctuation">:</span> <span data-sanitized-class="token function">inset</span><span data-sanitized-class="token punctuation">(</span>50%<span data-sanitized-class="token punctuation">)</span><span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">margin</span><span data-sanitized-class="token punctuation">:</span> -1px<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">}</span></span></code></pre>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>sr-only<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Original price: <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>s</span><span data-sanitized-class="token punctuation">&gt;</span></span>€ 19.99<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>s</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>sr-only<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Special offer<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>strong</span><span data-sanitized-class="token punctuation">&gt;</span></span>€ 9.99!<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>strong</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>

<p>
  <span data-sanitized-class="u-hidden">Original price: </span><s>€ 19.99</s>
</p>
<p>
  <span data-sanitized-class="u-hidden">Special offer</span><strong>€ 9.99!</strong>
</p>

<p>
  Steve Faulkner and Adrian Roselli present a different technique involving pseudo elements for making the <code>s</code> element accessible in <a href="https://www.tpgi.com/short-note-on-making-your-mark-more-accessible/">Short note on making your mark (more accessible)</a> and <a href="https://adrianroselli.com/2017/12/tweaking-text-level-styles.html">Tweaking Text Level Styles</a>.
</p>

<h2>The <code>del</code> element</h2>

<p>
  Use the <code>del</code> element to highlight a removal from the document. Use the optional <code>cite</code> attribute to link to more information about the edit and the <code>datetime</code> attribute to add the date (and time) of the edit.
</p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  The nose flute is the <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>del</span> <span data-sanitized-class="token attr-name">datetime</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>2021-09-03T17:42:30<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>mots<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>del</span><span data-sanitized-class="token punctuation">&gt;</span></span> <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>ins</span> <span data-sanitized-class="token attr-name">datetime</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>2021-09-03T17:42:36<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>most<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>ins</span><span data-sanitized-class="token punctuation">&gt;</span></span> beautiful instrument in the world.</span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>

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

<p>
  Talkback on Android announces this sentence as <em>“The nose flute is the mots deletion most insertion beautiful instrument in the world“</em>, but VoiceOver and other screen readers announce  <em>“The nose flute is the mots most beautiful instrument in the world“</em>. To force screen readers to announce the edit, Adrian and Steve recommend using pseudo elements.
</p>



<pre data-sanitized-class="language-css"><code data-sanitized-class="language-css"><span data-sanitized-class="token selector">del::before, del::after, <br>ins::before, ins::after</span> <span data-sanitized-class="token punctuation">{</span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">clip-path</span><span data-sanitized-class="token punctuation">:</span> <span data-sanitized-class="token function">inset</span><span data-sanitized-class="token punctuation">(</span>100%<span data-sanitized-class="token punctuation">)</span><span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">clip</span><span data-sanitized-class="token punctuation">:</span> <span data-sanitized-class="token function">rect</span><span data-sanitized-class="token punctuation">(</span>1px<span data-sanitized-class="token punctuation">,</span> 1px<span data-sanitized-class="token punctuation">,</span> 1px<span data-sanitized-class="token punctuation">,</span> 1px<span data-sanitized-class="token punctuation">)</span><span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">height</span><span data-sanitized-class="token punctuation">:</span> 1px<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">width</span><span data-sanitized-class="token punctuation">:</span> 1px<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">overflow</span><span data-sanitized-class="token punctuation">:</span> hidden<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">position</span><span data-sanitized-class="token punctuation">:</span> absolute<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">white-space</span><span data-sanitized-class="token punctuation">:</span> nowrap<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token selector">del::before</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">content</span><span data-sanitized-class="token punctuation">:</span> <span data-sanitized-class="token string">" [deletion start] "</span><span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token selector">del::after</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">content</span><span data-sanitized-class="token punctuation">:</span> <span data-sanitized-class="token string">" [deletion end] "</span><span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token selector">ins::before</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">content</span><span data-sanitized-class="token punctuation">:</span> <span data-sanitized-class="token string">" [insertion start] "</span><span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token selector">ins::after</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">content</span><span data-sanitized-class="token punctuation">:</span> <span data-sanitized-class="token string">" [insertion end] "</span><span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">}</span></span></code></pre>

<p>
  Using this technique results in VoiceOver announcing <em>“The nose flute is the deletion start mots deletion end insertion start most insertion end beautiful instrument in the world“</em>.
</p>

<p>As always, test with your users to find the best solutions for them.</p>


guid: https://htmhell.dev/tips/ol-vs-ul-vs-div/
title: ol vs. ul vs. div
author: ;Manuel Matuzovic
link: https://htmhell.dev/tips/ol-vs-ul-vs-div/
hash: �M���HT�l9�<
attributes: {"enclosures":[]}
content:
<p>
  The difference between using <code>ol</code>, <code>ul</code>, and <code>div</code> for a list of items.
</p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token comment">&lt;!-- An ordered list --&gt;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>ol</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span>Clerks (1994)<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span>Mallrats (1995)<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span>Jay and Silent Bob Strike Back (2001)<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>ol</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token comment">&lt;!-- Just text --&gt;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span>Clerks (1994)<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span>Mallrats (1995)<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span>Jay and Silent Bob Strike Back (2001)<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>


<p>
  Recently someone on Twitter asked <q>Is semantic HTML really that useful?</q>. That's a great question because most people know <em>how</em> to write HTML but not <em>why</em>. In a series of posts, I'll try to explain why semantic HTML is useful. I want to begin with the <code>ol</code> and <code>ul</code> elements.
</p>

<h2>Why is the <code>&lt;ul&gt;</code> / <code>&lt;ol&gt;</code> element useful?</h2>

<ul>
  <li>Screen readers might announce it as a list of items</li>
  <li>Screen readers might announce the number of items in the list</li>
  <li>Screen readers might announce the bullet or number of each item</li>
  <li>Screen reader users can use shortcuts to jump from list to list on a page</li>
  <li>It groups related content visually</li>
  <li>It provides a selector for styling (un)ordered lists in CSS</li>
</ul>

<h2 data-sanitized-id="ul">Unordered lists</h2>

<p>
  We use the <code>&lt;ul&gt;</code> element for identifying an element as a group of <var>n</var> items that thematically belong together, listed in no particular order.
</p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h3</span><span data-sanitized-class="token punctuation">&gt;</span></span>Some of my favorite movies directed by Kevin Smith<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h3</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>ul</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span>Jay and Silent Bob Strike Back<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span>Mallrats<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span>Clerks<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>ul</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>

<p>Here's what you get when you use NVDA with Firefox:</p>

<p>
</p><figure>
<video src="https://htmhell.dev/images/ul_nvda.mp4" controls="controls" preload="none">
  <p>Something went wrong, please visit <a href="https://htmhell.dev/tips/ol-vs-ul-vs-div/">htmhell.dev/tips/the-current-page</a> to view this video.
</p></video>
<figcaption>
NVDA announces “List with 3 items, Bullet Jay and Silent Bob Strike Back, Bullet Mallrats, Bullet Clerks, Out of list”
</figcaption>
</figure>
<p></p>

<h2 data-sanitized-id="ol">Ordered lists</h2>

<p>
  We use the <code>&lt;ol&gt;</code> element for identifying an element as a group of <var>n</var> items that thematically belong together, listed in a particular order.
</p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h3</span><span data-sanitized-class="token punctuation">&gt;</span></span>Movies directed by Kevin Smith sorted by release date<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h3</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>ol</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span>Clerks (1994)<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span>Mallrats (1995)<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span>Jay and Silent Bob Strike Back (2001)<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>ol</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>


<p>Here's what you get when you use NVDA with Firefox:</p>

<p>
</p><figure>
<video src="https://htmhell.dev/images/ol_nvda.mp4" controls="controls" preload="none">
  <p>Something went wrong, please visit <a href="https://htmhell.dev/tips/ol-vs-ul-vs-div/">htmhell.dev/tips/the-current-page</a> to view this video.
</p></video>
<figcaption>
NVDA announces “List with 3 items, 1 Clerks, 2 Mallrats, 3 Jay and Silent Bob Strike Back, Out of list”
</figcaption>
</figure>
<p></p>

<h2 data-sanitized-id="div">Divs</h2>

<p>
  If we don't use semantic elements, screen readers just announce a bunch of unrelated strings. This might work, too, but sometimes it's better to provide structure and convey more information.
</p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h3</span><span data-sanitized-class="token punctuation">&gt;</span></span>Movies directed by Kevin Smith sorted by release date<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h3</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span>Clerks (1994)<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span>Mallrats (1995)<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span>Jay and Silent Bob Strike Back (2001)<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>


<p>
</p><figure>
<video src="https://htmhell.dev/images/divlist_nvda.mp4" controls="controls" preload="none">
  <p>Something went wrong, please visit <a href="https://htmhell.dev/tips/ol-vs-ul-vs-div/">htmhell.dev/tips/the-current-page</a> to view this video.
</p></video>
<figcaption>
NVDA announces “Jay and Silent Bob Strike Back, Mallrats, Clerks”
</figcaption>
</figure>
<p></p>

<h2>Styling lists</h2>

<p>
  Things get a little complicated as soon as we style our lists, but that’s something I’ll cover in another issue. In the meantime, check out <a href="https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html">"Fixing" Lists</a> by Scott O'Hara.
</p>


guid: https://htmhell.dev/tips/autocapitalization/
title: Autocapitalization
author: ;Manuel Matuzovic
link: https://htmhell.dev/tips/autocapitalization/
hash: XAĽ�{��*����
attributes: {"enclosures":[]}
content:
<p>
  Control how virtual keyboards capitalize words and characters by default.
</p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>label</span> <span data-sanitized-class="token attr-name">for</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>words<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Words<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>label</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>input</span> <span data-sanitized-class="token attr-name">type</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>text<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">id</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>words<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">autocapitalize</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>words<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>



<p>
  Let’s say you have an input field that demands users to enter text in lowercase letters only. If you focus the field, by default the virtual keyboard starts with uppercase letters. You can improve the experience for some users by changing the default auto-capitalization behaviour. By setting <code>autocapitalize</code> to <code>none</code>, virtual keyboards won’t capitalize letters automatically anymore.
</p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>label</span> <span data-sanitized-class="token attr-name">for</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>none<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>All lowercase<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>label</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>input</span> <span data-sanitized-class="token attr-name">type</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>text<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">id</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>none<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">autocapitalize</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>none<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>

<div data-sanitized-class="u-df u-gs u-fww u-mb">
  <picture>
    <source type="image/avif">
    <img src="https://htmhell.dev/images/14_default.jpg" width="365" height="791" alt="The virtual keyboard on Android showing uppercase letters by default." loading="lazy" data-sanitized-class="h-img-shadow">
  </picture>
  <picture>
    <source type="image/avif">
    <img src="https://htmhell.dev/images/14_none.jpg" width="365" height="791" alt="The virtual keyboard on Android showing lowercase letters with autocapitalize set to none." loading="lazy" data-sanitized-class="h-img-shadow">
  </picture>
</div>

<p>
  The attribute is supported by Safari on iOS and Chrome, Edge and Samsung Internet on Android. The attribute is not supported by Firefox on Android and it has no effect on physical keyboards.</p>
<p>
  Besides <code>none</code>, there are three more allowed values:
</p>

<dl>
  <dt><code>none</code></dt>
  <dd>No autocapitalization should be applied (all letters should default to lowercase).</dd>

  <dt><code>characters</code></dt>
  <dd>All letters should default to uppercase.</dd>

  <dt><code>sentences</code></dt>
  <dd>The first letter of each sentence should default to a capital letter; all other letters should default to lowercase.</dd>

  <dt><code>words</code></dt>
  <dd>The first letter of each word should default to a capital letter; all other letters should default to lowercase.</dd>

</dl>

<p>
  Source: <a href="https://html.spec.whatwg.org/#attr-autocapitalize">6.7.6 Autocapitalization</a>
</p>
    
<div data-sanitized-class="u-df u-gs u-fww u-mb">
  <picture>
    <source type="image/avif">
    <img src="https://htmhell.dev/images/14_none_exmp.jpg" width="365" height="791" alt="“a div is not a” written in all lowercase letters." loading="lazy" data-sanitized-class="h-img-shadow">
  </picture>
  <picture>
    <source type="image/avif">
    <img src="https://htmhell.dev/images/14_characters_exmp.jpg" width="365" height="791" alt="“a div is not a” written in all uppercase letters." loading="lazy" data-sanitized-class="h-img-shadow">
  </picture>
  <picture>
    <source type="image/avif">
    <img src="https://htmhell.dev/images/14_sentences_exmp.jpg" width="365" height="791" alt="“a div is not a” written in lowercase letters except for the first letter of the sentence." loading="lazy" data-sanitized-class="h-img-shadow">
  </picture>
  <picture>
    <source type="image/avif">
    <img src="https://htmhell.dev/images/14_words_exmp.jpg" width="365" height="791" alt="“a div is not a” with every word beginning with a uppercase letter." loading="lazy" data-sanitized-class="h-img-shadow">
  </picture>
</div>


guid: https://htmhell.dev/tips/spell-check/
title: Spell check
author: ;Manuel Matuzovic
link: https://htmhell.dev/tips/spell-check/
hash: �`�]�wؑGA�l�
attributes: {"enclosures":[]}
content:
<p>
  You can disable spell check in input, textarea and contenteditable fields.
</p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>label</span> <span data-sanitized-class="token attr-name">for</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>msg<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Message<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>label</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>textarea</span> <span data-sanitized-class="token attr-name">spellcheck</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>false<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">id</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>msg<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>HTML is amazzing!<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>textarea</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>



<p>
  <code>spellcheck</code> is an enumerated attribute, so we must provide a value, either “true” or “false”. If no attribute is present, the browser decides whether it checks an element for spelling errors.
</p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>label</span> <span data-sanitized-class="token attr-name">for</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>msg<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Message<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>label</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>input</span> <span data-sanitized-class="token attr-name">value</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>HTML is amazzing!<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">id</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>msg<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>label</span> <span data-sanitized-class="token attr-name">for</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>msg2<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Message<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>label</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>textarea</span> <span data-sanitized-class="token attr-name">id</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>msg2<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>HTML is amazzing!<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>textarea</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>strong</span><span data-sanitized-class="token punctuation">&gt;</span></span>Message:<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>strong</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span> <span data-sanitized-class="token attr-name">contenteditable</span><span data-sanitized-class="token punctuation">&gt;</span></span>HTML is amazzing!<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>

<p>
  If you click one of the fields below (in some browsers you have to type something), you should see a squiggly, dashed or dotted red line indicating that “amazzing” isn’t spelled correctly. Please note: Results may differ depending on your browser and default language. The attribute is merely a hint, browsers are not required to check for spelling errors.
</p>

<div data-sanitized-class="demo">
  <div>
    <label for="msg">Message</label>
    
  </div>

  <div>
    <label for="msg2">Message</label>
    <textarea data-sanitized-id="msg2">HTML is amazzing!</textarea>
  </div>

  <div>
    <strong>Message:</strong>
    <div contenteditable="">HTML is amazzing!</div>
  </div>
</div>

<p>We can hint browsers at (not) checking an element for spelling errors.</p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>label</span> <span data-sanitized-class="token attr-name">for</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>msg2<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Message<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>label</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>textarea</span> <span data-sanitized-class="token attr-name">spellcheck</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>false<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">id</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>msg2<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>HTML is amazzing!<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>textarea</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>

<p>
  In the following <code>textarea</code> you shouldn't see a squiggly red line because <code>spellcheck</code> is set to “false”.
</p>

<div data-sanitized-class="demo">
  <div>
    <label for="msg2">Message</label>
    <textarea spellcheck="false" data-sanitized-id="msg2">HTML is amazzing!</textarea>
  </div>
</div>

<p>
  In the following <code>input</code> field you should see a squiggly red line because <code>spellcheck</code> is set to true.
</p>

<div data-sanitized-class="demo">
  <div>
    <label for="msg">Message</label>
    
  </div>
</div>


guid: https://htmhell.dev/tips/landmarks/
title: Landmarks
author: ;Manuel Matuzovic
link: https://htmhell.dev/tips/landmarks/
hash: �B :��:5m�� ;
attributes: {"enclosures":[]}
content:
<p>
  HTML allows us to define so-called landmarks, important areas in a page. They can be really helpful, especially for screen reader users.
</p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>body</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token comment">&lt;!-- banner landmark --&gt;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>header</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token comment">&lt;!-- navigation landmark --&gt;</span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>nav</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>nav</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>header</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token comment">&lt;!-- main landmark --&gt;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>main</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token comment">&lt;!-- search landmark --&gt;</span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>form</span> <span data-sanitized-class="token attr-name">role</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>search<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>form</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>main</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token comment">&lt;!-- contentinfo landmark --&gt;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>footer</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>footer</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>body</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>



<h2>Benefits</h2>

<ol>
  <li>Landmarks help screen reader users with orientation on the page.</li>
  <li>Screen reader users may jump from landmark to landmark using keyboard shortcuts.</li>
  <li>Screen reader users may list all landmarks on a page and select them.</li>
  <li>Sighted users may add <a href="http://matatk.agrip.org.uk/landmarks/">a browser extension</a> to jump to landmarks by using keyboard shortcuts.</li>
</ol>

<h2>Landmarks</h2>

<div tabindex="0" data-sanitized-class="u-oa">
  <table width="740">
    <caption>Landmarks in HTML</caption>
    <colgroup>
      <col width="100">
      <col width="150">
      <col>
    </colgroup>
    <thead>
      <tr>
        <th>Element</th>
        <th>ARIA role</th>
        <th>Conditions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><code>header</code></td>
        <td>banner</td>
        <td>Only in context of the body element, not when it's a descendant of <code>&lt;article&gt;</code>, <code>&lt;aside&gt;</code>, <code>&lt;main&gt;</code>, <code>&lt;nav&gt;</code>, or <code>&lt;section&gt;</code>.</td>
      </tr>
      <tr>
        <td><code>nav</code></td>
        <td>navigation</td>
        <td></td>
      </tr>
      <tr>
        <td><code>main</code></td>
        <td>main</td>
        <td></td>
      </tr>
      <tr>
        <td><code>section</code></td>
        <td>region</td>
        <td>When it has an accessible name using <code>aria-labelledby</code>, <code>aria-label</code> or <code>title</code></td>
      </tr>
      <tr>
        <td><code>form</code></td>
        <td>form</td>
        <td>when it has an accessible name using <code>aria-labelledby</code>, <code>aria-label</code> or <code>title</code></td>
      </tr>
      <tr>
        <td><code>form</code></td>
        <td>search</td>
        <td>with <code>role="search"</code></td>
      </tr>
      <tr>
        <td><code>aside</code></td>
        <td>complementary</td>
        <td></td>
      </tr>
      <tr>
        <td><code>footer</code></td>
        <td>contentinfo</td>
        <td>Only in context of the body element, not when it's a descendant of <code>&lt;article&gt;</code>, <code>&lt;aside&gt;</code>, <code>&lt;main&gt;</code>, <code>&lt;nav&gt;</code>, or <code>&lt;section&gt;</code>.</td>
      </tr>
    </tbody>
  </table>
</div>


<h2>Tips</h2>

<p>
  Here are some tips for using landmarks:
</p>

<ul>
  <li>
    If there are multiple <code>navigation</code> landmarks on a page, each should have a unique label (<code>aria-label</code> or <code>aria-labelledby</code>).


<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>body</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>header</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>nav</span> <span data-sanitized-class="token attr-name">aria-label</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>Primary<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>nav</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>header</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>footer</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>nav</span> <span data-sanitized-class="token attr-name">aria-label</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>Secondary<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>nav</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>footer</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>body</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>

  <figure data-sanitized-class="u-mb">
    <picture>
      <source type="image/avif">
      <img src="https://htmhell.dev/images/16_nav_unlabelled.jpg" width="700" height="634" alt="banner, navigation, content information, navigation" loading="lazy">
    </picture> 
    <figcaption>Landmarks listed in VoiceOver on macOS without labels
  </figcaption></figure> 

  <figure>
    <picture>
      <source type="image/avif">
      <img src="https://htmhell.dev/images/16_nav_labelled.jpg" width="700" height="634" alt="banner, Primary navigation, content information, Secondary navigation" loading="lazy">
    </picture> 
    <figcaption>Landmarks listed in VoiceOver on macOS with labels
  </figcaption></figure> 
    
  </li>
  <li>Avoid redundancy when labelling navigations. A label like “primary navigation” may be announced as “primary navigation navigation”, just label it “primary".</li>
  <li>If a navigation landmark has an identical set of links as another navigation landmark on the page, use the same label for each navigation landmark.</li>
  <li>Don't add too many landmarks to a page. Too many landmarks can make navigation more difficult and confusing.</li>
  <li>There should be only one <code>banner</code> landmark.</li>
  <li>There should be only one <code>contentinfo</code> landmark.</li>
  <li>A document must not have more than one <code>&lt;main&gt;</code> element that does not have the <code>hidden</code> attribute specified. Having more than one visible <code>&lt;main&gt;</code> element can confuse users because screen readers don’t announce the number of <code>main</code> elements.</li>
  <li>If there are multiple <code>complementary</code> landmarks on a page, each should have a unique label (<code>aria-label</code> or <code>aria-labelledby</code>).</li>
  <li>If there are multiple <code>form</code> landmarks on a page, each should have a unique label (<code>aria-label</code> or <code>aria-labelledby</code>).</li>
  <li>Generally, you shouldn't need explicit roles on landmarks with implicit roles. For example, <code>&lt;header&gt;&lt;/header&gt;</code> is sufficient, you don't need <code>&lt;header role="banner"&gt;&lt;/header&gt;</code>.</li>
  <li>
    Most landmarks are well supported, but support may vary, especially with form landmarks. It’s advised to test your landmarks with different screen readers and browsers. Some screen readers may intentionally not announce certain landmarks. Don’t worry too much about it, as long as you have a <a href="https://htmhell.dev/tips/the-document-outline/">sound document outline</a>.
  </li>
</ul>


guid: https://htmhell.dev/tips/the-track-element/
title: the track element
author: ;Manuel Matuzovic
link: https://htmhell.dev/tips/the-track-element/
hash: �J���#D:o�}8lW
attributes: {"enclosures":[]}
content:
<p>
  The track element allows you to specify timed text tracks (e.g. captions or subtitles) for media elements. 
</p>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>video</span> <span data-sanitized-class="token attr-name">src</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>workshop_promo.mp4<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">controls</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>track</span> <span data-sanitized-class="token attr-name">default</span> <span data-sanitized-class="token attr-name">kind</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>captions<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">srclang</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>en<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">src</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>workshop_promo.vtt<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">label</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>English<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>track</span> <span data-sanitized-class="token attr-name">kind</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>subtitles<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">srclang</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>de<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">src</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>workshop_promo_de.vtt<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">label</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>Deutsch<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  Sorry, your browser doesn't support embedded videos.</span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>video</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>



<p>
  If you want to provide captions or subtitles for a <code>&lt;video&gt;</code>, you can use the native <code>&lt;track&gt;</code> element in HTML.<br>
  Here's the result of the above code:
</p>

<video src="https://htmhell.dev/images/workshop_promo.mp4" controls="controls" preload="none">
  <track default="" kind="captions" srclang="en" src="https://htmhell.dev/images/workshop_promo.vtt" label="English"></track>
  <track kind="subtitles" srclang="de" src="https://htmhell.dev/images/workshop_promo_de.vtt" label="Deutsch"></track>
  Sorry, your browser doesn't support embedded videos.
</video>

<p>
  Your browser should automatically show captions in English and somewhere in the controls there's should be an additional button that allows you to switch or turn the text track off.
</p>

<p>There are several attributes you can use with the track element.</p>

<ul>
  <li>
    <code>src</code> specifies the path to the <code>.vtt</code> file that contains the text.
  </li>
  <li>
    <code>kind</code> defines the type of text track you're adding.<br>
    “subtitles” for translations of the spoken content<br>
    “captions” for a transcript of the audio and important non-verbal information.<br>
    “descriptions” for textual descriptions of the video content. (<a href="https://twitter.com/pauljadam/status/1090352784564719621">doesn't seem to work in any browser</a>)<br>
    “chapters” and “metadata” are tracks intended for use from script. Not displayed by the user agent. 
  </li>
  <li>
    <code>label</code> gives a user-readable title for the track, displayed in the video's UI.
  </li>
  <li>
    <code>srclang</code> defines the language of the text track.
  </li>
  <li>
    <code>default</code> defines the default track.
  </li>
</ul>

<h2>CSS</h2>

<p>
  It's possible to style captions and subtitles using CSS. Visit MDN for a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::cue">list of supported properties</a>.
</p>

<pre data-sanitized-class="language-css"><code data-sanitized-class="language-css"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token selector">::cue</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">background-color</span><span data-sanitized-class="token punctuation">:</span> red<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">}</span></span></code></pre>

<p>
  The block below is editable. If you change the value of the <code>background-color</code> property, the color of the cue in the video at the top of the page should change accordingly (On macOS: Firefox only, Windows: Chrome and Firefox).
</p>



<h2>JavaScript</h2>

<p>
  There's a <code>cuechange</code> event in JavaScript that fires when a text track has changed the currently displaying cues. Select the English track (default) and open the console to see it in action while the video is playing.
</p>

<pre data-sanitized-class="language-javascript"><code data-sanitized-class="language-javascript"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token keyword">let</span> textTrackElem <span data-sanitized-class="token operator">=</span> document<span data-sanitized-class="token punctuation">.</span><span data-sanitized-class="token function">querySelectorAll</span><span data-sanitized-class="token punctuation">(</span><span data-sanitized-class="token string">"track"</span><span data-sanitized-class="token punctuation">)</span><span data-sanitized-class="token punctuation">[</span><span data-sanitized-class="token number">0</span><span data-sanitized-class="token punctuation">]</span><span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line">textTrackElem<span data-sanitized-class="token punctuation">.</span><span data-sanitized-class="token function">addEventListener</span><span data-sanitized-class="token punctuation">(</span><span data-sanitized-class="token string">"cuechange"</span><span data-sanitized-class="token punctuation">,</span> <span data-sanitized-class="token punctuation">(</span><span data-sanitized-class="token parameter">event</span><span data-sanitized-class="token punctuation">)</span> <span data-sanitized-class="token operator">=&gt;</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token keyword">let</span> cues <span data-sanitized-class="token operator">=</span> event<span data-sanitized-class="token punctuation">.</span>target<span data-sanitized-class="token punctuation">.</span>track<span data-sanitized-class="token punctuation">.</span>activeCues<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  console<span data-sanitized-class="token punctuation">.</span><span data-sanitized-class="token function">log</span><span data-sanitized-class="token punctuation">(</span>cues<span data-sanitized-class="token punctuation">)</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">}</span><span data-sanitized-class="token punctuation">)</span><span data-sanitized-class="token punctuation">;</span></span></code></pre>



<h2>.vtt</h2>

<p>
  In case you were wondering how the <code>.vtt</code> file for the English track looks like.
</p>

<pre>
WEBVTT

00:00:00.240 --&gt; 00:00:07.040
Hi! My name is Manuel and if you know me, you know
that I like to complain about HTML others have

00:00:07.040 --&gt; 00:00:14.880
written. I post about it on Twitter, I even have a
website called htmhell.dev where I post bad code,

00:00:14.880 --&gt; 00:00:20.400
but complaining is not the only thing I can do.
I can also, and I also like to, share my knowledge

00:00:20.400 --&gt; 00:00:25.440
and this is why I've teamed up with my friends
at Smashing Magazine. We've prepared a workshop

00:00:25.440 --&gt; 00:00:31.840
called “Deep dive on accessibility testing” where
I show you how I use automatic testing tools,

00:00:31.840 --&gt; 00:00:38.160
browser extensions and even CSS and JavaScript,
manual testing, like testing with the keyboard

00:00:38.160 --&gt; 00:00:43.760
and screen readers, to discover these bad
things, to discover accessibility issues.

00:00:43.760 --&gt; 00:00:49.520
If that sounds interesting, it would be great if
you would join me for my workshop. Below the video

00:00:49.520 --&gt; 00:00:56.560
you will find a special link with a discounted
price just for you. I hope to see you soon! Tthanks!
</pre>


guid: https://htmhell.dev/26-tasty-buttons/
title: #26 HTMHell special: tasty buttons
author: ;Manuel Matuzovic
link: https://htmhell.dev/26-tasty-buttons/
hash: ����H(t�dsX�E�4
attributes: {"enclosures":[]}
content:
<div data-sanitized-class="section">
<p>The second HTMHell special focuses on another highly controversial pattern in front-end development:</p>
<p>🔥 the burger button. 🔥</p>
<p>The burger button and his tasty friends (kebab, meatball and bento) usually reveal a list of links when activated. According to our studies, these buttons are highly optimized for mouse and touch users, but lack support for keyboard and screen reader users in most cases.</p>
<p>After less than 1 hours of research, HTMHell presents a collection of 18 different bad practices found on real websites.</p>
<h2 data-sanitized-id="pattern-1-the-unsemantic-burger">Pattern 1: the unsemantic burger</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>burger<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<pre data-sanitized-class="language-css"><code data-sanitized-class="language-css"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token selector">.burger</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">display</span><span data-sanitized-class="token punctuation">:</span> flex<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">flex-direction</span><span data-sanitized-class="token punctuation">:</span> column<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">justify-content</span><span data-sanitized-class="token punctuation">:</span> space-between<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">width</span><span data-sanitized-class="token punctuation">:</span> 30px<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">height</span><span data-sanitized-class="token punctuation">:</span> 20px<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">cursor</span><span data-sanitized-class="token punctuation">:</span> pointer<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token selector">.burger span</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">height</span><span data-sanitized-class="token punctuation">:</span> 1px<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">display</span><span data-sanitized-class="token punctuation">:</span> block<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">background</span><span data-sanitized-class="token punctuation">:</span> #000<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">}</span></span></code></pre>
<h3 data-sanitized-id="issues-and-how-to-fix-them">Issues and how to fix them</h3>
<ol>
<li>The <code>&lt;div&gt;</code> element is an element of last resort, for when no other element is suitable. Use of the <code>&lt;div&gt;</code> element instead of more appropriate elements leads to poor accessibility. If you need a button, use the <code>&lt;button&gt;</code> element.</li>
<li>A click event on a <code>div</code> triggers only on click. A click event on a <code>button</code> triggers on click and if the user presses the <kbd>Enter</kbd> or <kbd>Space</kbd> key.</li>
<li>A <code>div</code> isn’t keyboard focusable.</li>
<li>There’s no text label.</li>
<li>The “button” should indicate whether the element it controls is currently expanded or collapsed (<code>aria-expanded="false"</code> if collapsed).</li>
<li>Screen readers announce: Nothing.</li>
</ol>
<h3 data-sanitized-id="other-variations-of-this-pattern">Other variations of this pattern</h3>
<h4>The empty burger</h4>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>burger<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<h4>The all div burger</h4>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>burger<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="pattern-2-the-classic-image-burger">Pattern 2: The classic image burger</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>img</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>menu<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">src</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>menu.png<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<h3 data-sanitized-id="issues-and-how-to-fix-them-2">Issues and how to fix them</h3>
<ol>
<li>A click event on an <code>img</code> triggers only on click. A click event on a <code>button</code> triggers on click and if the user presses the <kbd>Enter</kbd> or <kbd>Space</kbd> key.</li>
<li>An <code>img</code> isn’t keyboard focusable.</li>
<li>There’s no text alternative for the image. Screen readers may announce the filename instead.</li>
<li>The “button” should indicate whether the element it controls is currently expanded or collapsed (<code>aria-expanded="false"</code> if collapsed).</li>
<li>Screen readers may announce: menu.png, image.”</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="pattern-3-the-modern-image-burger">Pattern 3: The modern image burger</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>svg</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>hamburger<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">viewBox</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>0 0 20 20<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-labelledby</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>title<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>title</span><span data-sanitized-class="token punctuation">&gt;</span></span>Open Navigation<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>title</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>g</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>rect</span> <span data-sanitized-class="token attr-name">y</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>3<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">width</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>20<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">height</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>2<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>rect</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>rect</span> <span data-sanitized-class="token attr-name">y</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>9<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">width</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>20<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">height</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>2<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>rect</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>rect</span> <span data-sanitized-class="token attr-name">y</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>15<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">width</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>20<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">height</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>2<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>rect</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>g</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>svg</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<h3 data-sanitized-id="issues-and-how-to-fix-them-3">Issues and how to fix them</h3>
<ol>
<li>A click event on an <code>svg</code> triggers only on click. A click event on a <code>button</code> triggers on click and if the user presses the <kbd>Enter</kbd> or <kbd>Space</kbd> key.</li>
<li>An <code>svg</code> isn’t keyboard focusable in most browsers (IE 11 is an exception).</li>
<li>The value of <code>aria-labelledby</code> references elements by their id, not by tag name.</li>
<li>The “button” should indicate whether the element it controls is currently expanded or collapsed (<code>aria-expanded="false"</code> if collapsed).</li>
<li>Screen readers interpret <code>svg</code> elements differently. To get a consistent result the <code>role="img"</code> attribute should be present on the <code>svg</code>.</li>
<li>Screen readers may announce: “Open Navigation, graphic” or “Open Navigation, group.”</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="pattern-4-almost-a-burger">Pattern 4: Almost a burger</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>button</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>navbar-toggle<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">type</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>button<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>icon-bar<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>icon-bar<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>icon-bar<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>button</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<h3 data-sanitized-id="issues-and-how-to-fix-them-4">Issues and how to fix them</h3>
<ol>
<li>There’s no text label.</li>
<li>The “button” should indicate whether the element it controls is currently expanded or collapsed (<code>aria-expanded="false"</code> if collapsed).</li>
<li>Screen readers announce: button.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="pattern-5-the-placeholder-link-burger-button">Pattern 5: The placeholder link burger button</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>menuButton<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<h3 data-sanitized-id="issues-and-how-to-fix-them-5">Issues and how to fix them</h3>
<ol>
<li>A link without <code>href</code> is still not a button.</li>
<li>If the <code>&lt;a&gt;</code> element has no <code>href</code> attribute, then the element represents a placeholder for where a link might otherwise have been placed.<sup><a href="https://htmhell.dev/26-tasty-buttons/#resources"><span data-sanitized-class="u-hidden">Footnote</span>2</a></sup></li>
<li>If you’re adding a click event to a placeholder link, you probably don’t want to use a placeholder link, but an actual link with an <code>href</code> attribute or a <code>&lt;button&gt;</code>, depending on what's happening on click.</li>
<li>Placeholder links aren't focusable.</li>
<li>There’s no text label.</li>
<li>The “button” should indicate whether the element it controls is currently expanded or collapsed (<code>aria-expanded="false"</code> if collapsed).</li>
<li>Screen readers announce: probably nothing.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="pattern-6-the-wannabe-button-burger-link">Pattern 6: The wannabe button burger link</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">role</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>button<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-label</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>menu<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-expanded</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>false<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>burger<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">aria-hidden</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>true<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">aria-hidden</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>true<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">aria-hidden</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>true<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<ol>
<li>Do not change native semantics, unless you really have to.</li>
<li>If the <code>&lt;a&gt;</code> element has no <code>href</code> attribute, then the element represents a placeholder for where a link might otherwise have been placed.<sup><a href="https://htmhell.dev/26-tasty-buttons/#resources"><span data-sanitized-class="u-hidden">Footnote</span>2</a></sup></li>
<li>If you’re adding a click event to a placeholder link, you probably don’t want to use a placeholder link, but an actual link with an <code>href</code> attribute or a <code>&lt;button&gt;</code>, depending on what's happening on click.</li>
<li>Placeholder links aren't focusable.</li>
<li>Screen readers may announce: “menu, collapsed, button”</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="pattern-7-the-unsemantic-burger-with-extra-bacon">Pattern 7: The unsemantic burger with extra bacon</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>mobile-nav<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-hidden</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>true<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  Show nav</span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<h3 data-sanitized-id="issues-and-how-to-fix-them-6">Issues and how to fix them</h3>
<ol>
<li>Pretty much the same as <a href="https://htmhell.dev/26-tasty-buttons/#pattern-1-the-unsemantic-burger">Pattern 1: The unsemantic burger</a> except that this button has a label which is good, but it also has <code>aria-hidden="true"</code> which means that it's completely inaccessible to screen reader users.</li>
<li>Screen readers announce: Nothing.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="pattern-8-the-javascript-link-burger-button">Pattern 8: The JavaScript link burger button</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>toggle-link<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>javascript:<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>i</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>fa fa-reorder<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>i</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<pre data-sanitized-class="language-css"><code data-sanitized-class="language-css"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token selector">.fa-reorder::before</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">content</span><span data-sanitized-class="token punctuation">:</span> <span data-sanitized-class="token string">""</span><span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">}</span></span></code></pre>
<h3 data-sanitized-id="issues-and-how-to-fix-them-7">Issues and how to fix them</h3>
<ol>
<li>Screen readers may announce CSS generated content.<sup><a href="https://htmhell.dev/26-tasty-buttons/#resources"><span data-sanitized-class="u-hidden">Footnote</span>1</a></sup></li>
<li><a href="https://fontawesome.com/v4.7.0/accessibility/">Font Awesome advises to hide icons semantically</a> by settings <code>aria-hidden="true"</code> on the <code>&lt;i&gt;</code> element.</li>
<li>The <code>i</code> element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text.<sup><a href="https://htmhell.dev/26-tasty-buttons/#resources"><span data-sanitized-class="u-hidden">Footnote</span>2</a></sup> If you just want italic text, use <code>font-style: italic;</code> in CSS.</li>
<li>There’s no text label.</li>
<li>If you’re not sure when to use <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code>, watch <a href="https://www.youtube.com/watch?v=8XjwDq9zG4I">The Links vs. Buttons Showdown</a> by <a href="https://twitter.com/marcysutton">Marcy Sutton</a>.</li>
<li>The “button” should indicate whether the element it controls is currently expanded or collapsed (<code>aria-expanded="false"</code> if collapsed).</li>
<li>Screen readers announce: “link”.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id='pattern-9-the-"i-have-no-idea-what-im-doing-lets-just-add-some-attributes"-burger-button'>Pattern 9: The “I have no idea what I'm doing, let's just add some attributes” burger button</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>mega-toggle-block<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">tabindex</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>0<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>mega-toggle-label<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">role</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>button<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-expanded</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>false<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span> <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<h3 data-sanitized-id="issues-and-how-to-fix-them-8">Issues and how to fix them</h3>
<ol>
<li>The <code>&lt;div&gt;</code> element is an element of last resort, for when no other element is suitable. Use of the <code>&lt;div&gt;</code> element instead of more appropriate elements leads to poor accessibility. If you need a button, use the <code>&lt;button&gt;</code> element.</li>
<li>A click event on a <code>div</code> triggers only on click. A click event on a <code>button</code> triggers on click and if the user presses the <kbd>Enter</kbd> or <kbd>Space</kbd> key.</li>
<li>The <code>div</code> is focusable, but it has no <code>role</code> or label.</li>
<li>The <code>span</code> tries to mimic a <code>button</code>, but it's not focusable and it has no label.</li>
<li>You don’t need the <code>tabindex</code> attribute if you use a <code>button</code>. HTML buttons are focusable by default.</li>
<li>There’s no text label.</li>
<li>Screen readers may announce: “group”.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="pattern-10-the-heavenly-anchor-link-burger-button">Pattern 10: The heavenly anchor link burger button</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>#menutoggle<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">id</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>menutoggle<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>☰<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<h3 data-sanitized-id="issues-and-how-to-fix-them-9">Issues and how to fix them</h3>
<ol>
<li>A screen reader may announce this as <em>trigram for heaven</em>, because ☰ is the unicode character for the <a href="https://en.wikipedia.org/wiki/Bagua">trigram for heaven</a>.</li>
<li>The purpose of the icon is decorative, it should be hidden from screen readers. Consider adding decorative images using background properties in CSS.</li>
<li>An anchor link is not a <code>&lt;button&gt;</code>.</li>
<li>An anchor link should not refer to itself.</li>
<li>If you’re not sure when to use <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code>, watch <a href="https://www.youtube.com/watch?v=8XjwDq9zG4I">The Links vs. Buttons Showdown</a> by <a href="https://twitter.com/marcysutton">Marcy Sutton</a>.</li>
<li>The “button” should indicate whether the element it controls is currently expanded or collapsed (<code>aria-expanded="false"</code> if collapsed).</li>
<li>Screen readers announce: “trigram for heaven, link”.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="pattern-11-the-bento-checkbox-button">Pattern 11: The bento checkbox button</h2>

<p data-component="burger">
  
  <label for="burger"></label>
</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>bento<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>input</span> <span data-sanitized-class="token attr-name">type</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>checkbox<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">id</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>bento<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>label</span> <span data-sanitized-class="token attr-name">for</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>bento<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>label</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<pre data-sanitized-class="language-css"><code data-sanitized-class="language-css"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token selector">.bento label</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">background-image</span><span data-sanitized-class="token punctuation">:</span> <span data-sanitized-class="token url"><span data-sanitized-class="token function">url</span><span data-sanitized-class="token punctuation">(</span>data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxwYXRoIGQ9J00zIDNoNHY0SDN6bTE0IDBoNHY0aC00em0tNyAwaDR2NGgtNHptLTcgN2g0djRIM3ptMTQgMGg0djRoLTR6bS03IDBoNHY0aC00em0tNyA3aDR2NEgzem0xNCAwaDR2NGgtNHptLTcgMGg0djRoLTR6JyBmaWxsPScjQTdBQUIyJy8+PC9zdmc+<span data-sanitized-class="token punctuation">)</span></span><span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">width</span><span data-sanitized-class="token punctuation">:</span> 30px<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">height</span><span data-sanitized-class="token punctuation">:</span> 30px<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">display</span><span data-sanitized-class="token punctuation">:</span> block<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token selector">.bento input</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">position</span><span data-sanitized-class="token punctuation">:</span> absolute<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">opacity</span><span data-sanitized-class="token punctuation">:</span> 0<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">pointer-events</span><span data-sanitized-class="token punctuation">:</span> none<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">left</span><span data-sanitized-class="token punctuation">:</span> -9999px<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">top</span><span data-sanitized-class="token punctuation">:</span> -9999px<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">}</span></span></code></pre>
<h3 data-sanitized-id="issues-and-how-to-fix-them-10">Issues and how to fix them</h3>
<ol>
<li>A checkbox is not a <code>&lt;button&gt;</code>.</li>
<li>The default key events on a checkbox and a button are not the same.</li>
<li>If you’re not sure when to use <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code>, watch <a href="https://www.youtube.com/watch?v=8XjwDq9zG4I">The Links vs. Buttons Showdown</a> by <a href="https://twitter.com/marcysutton">Marcy Sutton</a>.</li>
<li>The “button” should indicate whether the element it controls is currently expanded or collapsed (<code>aria-expanded="false"</code> if collapsed).</li>
<li>This “button” has no label.</li>
<li>Screen readers may announce: “unticked tickbox”.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="pattern-12-the-bento-list-anchor-link-button">Pattern 12: The bento list anchor link button</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>ul</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>offcanvas-icon<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>#<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>menu-button<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>dot1<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>dot2<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>dot3<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>dot4<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>dot5<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>dot6<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>dot7<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>dot8<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>dot9<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>ul</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<h3 data-sanitized-id="issues-and-how-to-fix-them-11">Issues and how to fix them</h3>
<ol>
<li>Use <code>&lt;ul&gt;</code> to group and list related items, not as a button wrapper.</li>
<li>An anchor link is not a <code>&lt;button&gt;</code>.</li>
<li>CSS is quite powerful, you don't need 9 <code>span</code>s to display 9 dots.</li>
<li>If you’re not sure when to use <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code>, watch <a href="https://www.youtube.com/watch?v=8XjwDq9zG4I">The Links vs. Buttons Showdown</a> by <a href="https://twitter.com/marcysutton">Marcy Sutton</a>.</li>
<li>The “button” should indicate whether the element it controls is currently expanded or collapsed (<code>aria-expanded="false"</code> if collapsed).</li>
<li>This “button” has no label.</li>
<li>Screen readers may announce: “list 1 item”.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="pattern-13-the-meatball-link">Pattern 13: The meatball link</h2>

<p><a href="https://example.com/" data-sanitized-class="meatball">• • •</a></p>
<p>(Note: There was a click event on the link that prevented default.)</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>https://example.com/<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>• • •<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<h3 data-sanitized-id="issues-and-how-to-fix-them-12">Issues and how to fix them</h3>
<ol>
<li>A link is not a <code>&lt;button&gt;</code>.</li>
<li>The default key events on a link and a button are not the same.</li>
<li>If you’re not sure when to use <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code>, watch <a href="https://www.youtube.com/watch?v=8XjwDq9zG4I">The Links vs. Buttons Showdown</a> by <a href="https://twitter.com/marcysutton">Marcy Sutton</a>.</li>
<li>The “button” should indicate whether the element it controls is currently expanded or collapsed (<code>aria-expanded="false"</code> if collapsed).</li>
<li>This “button” has no label.</li>
<li>Screen readers may announce: “link, bullet bullet bullet”.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="pattern-14-the-kebab-div-button">Pattern 14: The kebab div button</h2>

<p title="Menu" data-sanitized-class="kebab">
	<i></i>
	<i></i>
	<i></i>
</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>menu<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">title</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>Menu<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>i</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>i</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>i</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>i</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>i</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>i</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<h3 data-sanitized-id="issues-and-how-to-fix-them-13">Issues and how to fix them</h3>
<ol>
<li>Pretty much the same as <a href="https://htmhell.dev/26-tasty-buttons/#pattern-1-the-unsemantic-burger">Pattern 1: The unsemantic burger</a>.</li>
<li>The <code>i</code> element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text.<sup><a href="https://htmhell.dev/26-tasty-buttons/#resources"><span data-sanitized-class="u-hidden">Footnote</span>2</a></sup> If you just want italic text, use <code>font-style: italic;</code> in CSS.</li>
<li>Screen readers may announce: nothing.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="pattern-15-the-hamburger">Pattern 15: The hamburger</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>button</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>nav__toggle-button<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-label</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>Hamburger Menu<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>svg</span> <span data-sanitized-class="token attr-name">xmlns</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>http://www.w3.org/2000/svg<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">width</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>24<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">height</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>24<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">viewBox</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>0 0 24 24<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>path</span> <span data-sanitized-class="token attr-name">d</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>M0 0h24v24H0z<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">fill</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>none<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>path</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>path</span> <span data-sanitized-class="token attr-name">d</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">fill</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>currentColor<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>path</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>svg</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>button</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<h3 data-sanitized-id="issues-and-how-to-fix-them-14">Issues and how to fix them</h3>
<ol>
<li>Not as bad as all the others, but the term “Hamburger” might confuse users.</li>
<li>The “button” should indicate whether the element it controls is currently expanded or collapsed (<code>aria-expanded="false"</code> if collapsed).</li>
<li>Screen readers may announce: “button, Hamburger Menu”.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="pattern-16-the-chatty-burger-button">Pattern 16: The chatty burger button</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>button</span> <span data-sanitized-class="token attr-name">aria-label</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>All Company expand to see list of Company products and services<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-expanded</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>false<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>button</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<h3 data-sanitized-id="issues-and-how-to-fix-them-15">Issues and how to fix them</h3>
<ol>
<li>Not as bad as all the others, but the label is too long. Keep it short and simple.</li>
<li>Screen readers may announce: “button, All Company expand to see list of Company products and services, expanded”.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="alternatives">Alternatives</h2>
<h3 data-sanitized-id="solution-1-a-button-with-visible-text-and-no-icon">Solution 1: A button with visible text and no icon.</h3>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>button</span> <span data-sanitized-class="token attr-name">type</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>button<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-expanded</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>false<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  Menu</span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>button</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p><button aria-expanded="false" type="button">Menu</button></p>
<ol>
<li>Text only: easy to implement and comprehensible.</li>
<li>Screen readers may announce: Menu, button”.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h3 data-sanitized-id="solution-2-a-button-with-visible-text-and-only-visually-accessible-icon">Solution 2: A button with visible text and only visually accessible icon.</h3>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>button</span> <span data-sanitized-class="token attr-name">type</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>button<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-expanded</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>false<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>svg</span> <span data-sanitized-class="token attr-name">aria-hidden</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>true<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span> … <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>svg</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  Menu</span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>button</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p><button aria-expanded="false" type="button"><path fill-rule="evenodd" d="M1 2.75A.75.75 0 011.75 2h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 2.75zm0 5A.75.75 0 011.75 7h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 7.75zM1.75 12a.75.75 0 100 1.5h12.5a.75.75 0 100-1.5H1.75z" fill="currentColor"></path>Menu</button></p>
<ol>
<li>If you want to use an icon, hide it from screen readers by wrapping it in a <code>span</code> with <code>aria-hidden="true"</code>.</li>
<li>Screen readers may announce: Menu, button”.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h3 data-sanitized-id="solution-3-a-button-with-hidden-text-and-only-visually-accessible-icon">Solution 3: A button with hidden text and only visually accessible icon.</h3>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>button</span> <span data-sanitized-class="token attr-name">type</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>button<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-expanded</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>false<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>sr-only<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Menu<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>svg</span> <span data-sanitized-class="token attr-name">aria-hidden</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>true<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span> … <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>svg</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>button</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<pre data-sanitized-class="language-css"><code data-sanitized-class="language-css"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token selector">.sr-only</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">position</span><span data-sanitized-class="token punctuation">:</span> absolute<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">white-space</span><span data-sanitized-class="token punctuation">:</span> nowrap<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">width</span><span data-sanitized-class="token punctuation">:</span> 1px<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">height</span><span data-sanitized-class="token punctuation">:</span> 1px<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">overflow</span><span data-sanitized-class="token punctuation">:</span> hidden<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">border</span><span data-sanitized-class="token punctuation">:</span> 0<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">padding</span><span data-sanitized-class="token punctuation">:</span> 0<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">clip-path</span><span data-sanitized-class="token punctuation">:</span> <span data-sanitized-class="token function">inset</span><span data-sanitized-class="token punctuation">(</span>50%<span data-sanitized-class="token punctuation">)</span><span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">margin</span><span data-sanitized-class="token punctuation">:</span> -1px<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">}</span></span></code></pre>
<p><button aria-expanded="false" type="button"><span data-sanitized-class="u-hidden">Menu</span><path fill-rule="evenodd" d="M1 2.75A.75.75 0 011.75 2h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 2.75zm0 5A.75.75 0 011.75 7h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 7.75zM1.75 12a.75.75 0 100 1.5h12.5a.75.75 0 100-1.5H1.75z" fill="currentColor"></path></button></p>
<ol>
<li>Unfortunately, there’s no native way of hiding content only visually.<br>The <code>.sr-only</code> class makes sure that content is visually hidden but still accessible to screen reader users.</li>
<li>Screen readers may announce: Menu, button”.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h3 data-sanitized-id="solution-4-a-button-with-accessible-text-and-only-visually-accessible-icon">Solution 4: A button with accessible text and only visually accessible icon.</h3>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>button</span> <span data-sanitized-class="token attr-name">type</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>button<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-label</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>Menu<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-expanded</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>false<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>svg</span> <span data-sanitized-class="token attr-name">aria-hidden</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>true<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span> … <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>svg</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>button</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p><button aria-expanded="false" type="button" aria-label="Menu"><path fill-rule="evenodd" d="M1 2.75A.75.75 0 011.75 2h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 2.75zm0 5A.75.75 0 011.75 7h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 7.75zM1.75 12a.75.75 0 100 1.5h12.5a.75.75 0 100-1.5H1.75z" fill="currentColor"></path></button></p>
<ol>
<li>If you don’t want to show text on screen, provide a text alternative for your icon or SVG by adding <code>aria-label</code> to the button.</li>
<li>Screen readers may announce: Menu, button”.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="resources">Resources</h2>
<ol>
<li><a href="https://tink.uk/accessibility-support-for-css-generated-content/">Accessibility support for CSS generated content</a></li>
<li><a href="https://html.spec.whatwg.org/#the-a-element">The a element</a></li>
<li><a href="https://www.scottohara.me/note/2019/07/17/placeholder-link.html">The accessibility of placeholder links </a></li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="wanna-learn-accessibility-testing?">Wanna learn accessibility testing?</h2>
<p>Are you interested in learning how to discover these accessibility issues and a lot more? Then join me for a <a href="https://smashingconf.com/online-workshops/workshops/manuel-matuzovic/">Smashing Magazine workshop</a> starting on November 4th.</p>
<p><strong>Deep Dive On Accessibility Testing</strong><br>
Workshop, 5×2.5h + Q&amp;A<br>
Thu &amp; Fri, November 4–18 202109:00 – 11:30 AM PT (Pacific, US) • 18:00 – 20:30 CET (Europe)</p>
<p>Use this link for a <a href="https://ti.to/smashingmagazine/online-workshops/discount/welcometomyworkshop">special -15% discount</a>.</p>
</div>


guid: https://htmhell.dev/tips/debugging-html-accessibility/
title: Debugging HTML: Accessibility
author: ;Manuel Matuzovic
link: https://htmhell.dev/tips/debugging-html-accessibility/
hash: v�Jv��*�� ��nO
attributes: {"enclosures":[]}
content:
<p>
  You can debug accessibility features of HTML elements using DevTools in Firefox, Chrome, and Edge.
</p>





<p>
  Let’s say your users report that they can’t access the burger button in your navigation using a keyboard or switch device, or they report that they’re confused by the label of the button when they use a screen reader. There are several ways of debugging that using DevTools.
</p>

<p>First, let’s summarize the requirements for a proper button:</p>

<ul>
  <li><strong>Label</strong>  - It has a visible text label or text alternative</li>
  <li><strong>Semantics</strong>  - It has a proper ARIA button role</li>
  <li><strong>Focus</strong> - You can access it using a keyboard by pressing Tab</li>
  <li><strong>Events</strong> - You can activate the button by clicking or pressing <kbd>Space</kbd> or <kbd>Enter</kbd></li>
</ul>

<h2>Chrome Dev Tools - Accessibility pane</h2>

<p>
  In Chrome or Edge open DevTools, click the Elements tab, select the element  you want to inspect and click the Accessibility tab. The accessibility pane shows you how the element is represented in the accessibility tree, which ARIA attributes it has, and its computed properties.
</p>

<p>
  If you inspect the following button in Chrome, here's what you’ll learn about it:
</p>

<h3>Button 1</h3>

<button aria-label="Navigation" data-sanitized-class="btn">
  
    <rect y="3" width="20" height="2"></rect>
    <rect y="9" width="20" height="2"></rect>
    <rect y="15" width="20" height="2"></rect>
  
</button>

<p>
  <a href="https://htmhell.dev/images/18_chrome1.jpg">
    <picture>
      <source type="image/avif">
      <img src="https://htmhell.dev/images/18_chrome1.jpg" width="740" height="463" alt="The virtual keyboard on Android showing uppercase letters by default." loading="lazy" data-sanitized-class="h-img-shadow">
    </picture>
  </a>
</p>

<ul>
  <li><strong>Label</strong>  - The button gets its label “Navigation” from the <code>aria-label</code> attribute (<code>Name: "Navigation"</code>)</li>
  <li><strong>Semantics</strong>  - It has a proper button role (<code>Role: button</code>)</li>
  <li><strong>Focus</strong> - It’s focusable (<code>Focusable: true</code>)</li>
</ul>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>button</span> <span data-sanitized-class="token attr-name">aria-label</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>Navigation<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>btn<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>svg</span> <span data-sanitized-class="token attr-name">viewBox</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>0 0 20 20<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-hidden</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>true<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>rect</span> <span data-sanitized-class="token attr-name">y</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>3<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">width</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>20<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">height</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>2<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>rect</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>rect</span> <span data-sanitized-class="token attr-name">y</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>9<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">width</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>20<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">height</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>2<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>rect</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>rect</span> <span data-sanitized-class="token attr-name">y</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>15<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">width</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>20<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">height</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>2<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>rect</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>svg</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>button</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>

<p>
  Let’s look at another example. This button looks the same, but it's less accessible.
</p>

<h3>Button 2</h3>

<div type="button" data-sanitized-class="btn">
  
    <g>
      <rect y="3" width="20" height="2"></rect>
      <rect y="9" width="20" height="2"></rect>
      <rect y="15" width="20" height="2"></rect>
    </g>
  
</div>

<p>
  <a href="https://htmhell.dev/images/18_chrome2.jpg">
    <picture>
      <source type="image/avif">
      <img src="https://htmhell.dev/images/18_chrome2.jpg" width="740" height="463" alt="The virtual keyboard on Android showing uppercase letters by default." loading="lazy" data-sanitized-class="h-img-shadow">
    </picture>
  </a>
</p>

<ul>
  <li><strong>Label</strong>  - The button has no label (<code>Name: ""</code>)</li>
  <li><strong>Semantics</strong>  - Its role is “generic” which means that it doesn't have any semantic meaning (<code>Role: generic</code>)</li>
  <li><strong>Focus</strong> - It’s not focusable (Missing <code>Focusable</code> property)</li>
</ul>

<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span> <span data-sanitized-class="token attr-name">type</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>button<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>btn<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>svg</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>hamburger<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">viewBox</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>0 0 20 20<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>g</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>rect</span> <span data-sanitized-class="token attr-name">y</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>3<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">width</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>20<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">height</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>2<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>rect</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>rect</span> <span data-sanitized-class="token attr-name">y</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>9<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">width</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>20<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">height</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>2<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>rect</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>rect</span> <span data-sanitized-class="token attr-name">y</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>15<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">width</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>20<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">height</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>2<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>rect</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>g</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>svg</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>

<h2>Firefox Dev Tools - Accessibility panel</h2>

<p>
  In Firefox, right-click the button and select “Inspect accessibility properties” or open DevTools and click the “Accessibility” tab and find the button in the accessibility tree.
</p>

<h3>Button 1</h3>

<button aria-label="Navigation" data-sanitized-class="btn">
  
    <rect y="3" width="20" height="2"></rect>
    <rect y="9" width="20" height="2"></rect>
    <rect y="15" width="20" height="2"></rect>
  
</button>

<p>
  <a href="https://htmhell.dev/images/18_Firefox1.jpg">
    <picture>
      <source type="image/avif">
      <img src="https://htmhell.dev/images/18_Firefox1.jpg" width="740" height="463" alt="The virtual keyboard on Android showing uppercase letters by default." loading="lazy" data-sanitized-class="h-img-shadow">
    </picture>
  </a>
</p>

<ul>
  <li><strong>Label</strong>  - The label of the button is “Navigation” (<code>Name: "Navigation"</code>)</li>
  <li><strong>Semantics</strong>  - It has a proper pushbutton role (<code>Role: "pushbutton"</code>)</li>
  <li><strong>Focus</strong> - It’s focusable (the implicit tabindex is 1)</li>
</ul>

<p>
  Note 1: Firefox uses a different accessibility API, that’s why the names of roles aren’t the same as in Chrome. <code>pushbutton</code> corresponds to the ARIA role <code>button</code>.
</p>

<p>
  Note 2: You can check if an element is focusable by ticking the “Show Tabbing Order” checkbox. If there’s an outline on the element with a numbered arrow pointing to it, it means that it’s focusable. The number represents the tabindex.
</p>

<h3>Button 2</h3>

<div type="button" data-sanitized-class="btn">
  
    <g>
      <rect y="3" width="20" height="2"></rect>
      <rect y="9" width="20" height="2"></rect>
      <rect y="15" width="20" height="2"></rect>
    </g>
  
</div>

<p>
  <a href="https://htmhell.dev/images/18_Firefox2.jpg">
    <picture>
      <source type="image/avif">
      <img src="https://htmhell.dev/images/18_Firefox2.jpg" width="740" height="463" alt="The virtual keyboard on Android showing uppercase letters by default." loading="lazy" data-sanitized-class="h-img-shadow">
    </picture>
  </a>
</p>

<ul>
  <li><strong>Label</strong>  - The button has no label  (<code>Name: null</code>)</li>
  <li><strong>Semantics</strong>  -  Its role is “section” which means that it doesn't have any semantic meaning  (<code>Role: "section"</code>)</li>
  <li><strong>Focus</strong> - It’s not focusable (No outline and number when pressing “Show Tabbing Order”)</li>

</ul>


<p>
  Note: Just like <code>generic</code> in Chrome, <code>section</code> in Firefox corresponds no ARIA role.
</p>


guid: https://htmhell.dev/27-a6/
title: #27 &lt;a6&gt;
author: ;Manuel Matuzovic
link: https://htmhell.dev/27-a6/
hash: �e�o�� & ������
attributes: {"enclosures":[]}
content:
<div data-sanitized-class="section">
Context: Visually a list of links.
</div>
<div data-sanitized-class="section bad">
<h2 data-sanitized-id="bad-code">Bad code</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h6</span><span data-sanitized-class="token punctuation">&gt;</span></span>Popular Cities<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h6</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h6</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>footerLinks<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Amsterdam<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h6</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h6</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>footerLinks<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Rotterdam<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h6</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h6</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>footerLinks<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Utrecht<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h6</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h6</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>footerLinks<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Den Haag<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h6</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h6</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>footerLinks<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Eindhoven<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h6</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
</div>
<div data-sanitized-id="issues" data-sanitized-class="section">
<h2 data-sanitized-id="issues-and-how-to-fix-them">Issues and how to fix them</h2>
<ol>
<li>Use headings (<code>&lt;h1&gt;</code>-<code>&lt;h6&gt;</code>) to structure the page, don’t use heading elements arbitrarily or only to comply with visual requirements.</li>
<li>By default, a click event on an <code>&lt;h6&gt;</code> triggers only on click. A click event on an <code>a</code> triggers on click and if the user presses the <kbd>Enter</kbd> key.</li>
<li>An <code>&lt;h6&gt;</code> isn’t keyboard focusable.</li>
<li>If your content it so comprehensive and deeply structured that you need levels as deep as <code>&lt;h5&gt;</code> and <code>&lt;h6&gt;</code> in order to describe the structure, consider splitting your large page into multiple smaller pages.</li>
<li>The <code>&lt;div&gt;</code> element is an element of last resort, for when no other element is suitable. Use of the <code>&lt;div&gt;</code> element instead of more appropriate elements leads to poor accessibility.</li>
<li>If you’re listing items that thematically belong together, consider grouping them semantically using <code>&lt;ol&gt;</code> or <code>&lt;ul&gt;</code>.</li>
<li><code>&lt;a&gt;</code> allows users to right click and copy link / open in new tab.</li>
<li>Linking to pages using the <code>&lt;a&gt;</code> element works without JavaScript.</li>
<li>An <code>&lt;a&gt;</code> has the right cursor without having to add CSS.</li>
</ol>
<p>Check out the <a href="https://htmhell.dev/27-a6/#resources">resources section</a> at the bottom of this page for more.</p>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="good-code">Good code</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"> <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h3</span><span data-sanitized-class="token punctuation">&gt;</span></span>Popular Cities<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h3</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"> <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>ul</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">   <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">     <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/amsterdam.html<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Amsterdam<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">   <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">   <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">     <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/rotterdam.html<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Rotterdam<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">   <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">   <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">     <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/utrecht.html<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Utrecht<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">   <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">   <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">     <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/denhaag.html<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Den Haag<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">   <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">   <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">     <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/eindhoven.html<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Eindhoven<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">   <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"> <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>ul</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="resources">Resources</h2>
<ul>
<li><a href="https://www.youtube.com/watch?v=YG9WQUfH7ZU">Hidde de Vries - Semantics and How to Get Them Right - beyond tellerrand Düsseldorf 2021</a></li>
</ul>
</div>


guid: https://htmhell.dev/tips/debugging-html-linting/
title: Debugging HTML: Linting
author: ;Manuel Matuzovic
link: https://htmhell.dev/tips/debugging-html-linting/
hash: {:"^.KH����`�
attributes: {"enclosures":[]}
content:
<p>
  Edge highlights potential issues in your document directly in the elements panel of DevTools and it lists details and further issues in the issues panel.
</p>



<p>
  One of my favourite features in Edge DevTools is the built-in linter that highlights potential issues in your HTML by marking affected elements with a squiggly yellow line. 
</p>

<p>
  <a href="https://htmhell.dev/images/19_edge_elements.jpg">
    <picture>
      <source type="image/avif">
      <img src="https://htmhell.dev/images/19_edge_elements.jpg" width="740" height="463" alt="Edge dev tools screenshot: A demo site with broken html like empty buttons, img without alt, wrong aria roles, missing aria roles, and aria-hidden on focusable elements." loading="lazy" data-sanitized-class="h-img-shadow">
    </picture>
  </a>
</p>

<p>
  If you hover over the opening tag, a tooltip with a description of the issue appears. You can <kbd>Shift</kbd> + click or right-click it and select “View Issues” to view details about the issue or you can open the issues panel directly (<kbd>CMD</kbd>/<kbd>Ctrl</kbd> + <kbd>Shit</kbd> + <kbd>P</kbd> -&gt; Show Issues) to get a list of all issues found on the page. The data is coming from <a href="https://www.deque.com/axe/">axe</a>, <a href="https://github.com/mdn/browser-compat-data">@mdn/browser-compat-data</a>, and <a href="https://webhint.io/">webhint</a>.</p> 
  <p>You can also jump from the issues panel directly to the affected element in the elements or sources panel, and there are links to learning resources.</p>
<p></p>

<p>
  <a href="https://htmhell.dev/images/19_edge_elements2.jpg">
    <picture>
      <source type="image/avif">
      <img src="https://htmhell.dev/images/19_edge_elements2.jpg" width="740" height="463" alt="A list of accessiblity issues in the issues panel. The message '&lt;ul&gt; and &lt;ol&gt; must only directly contain &lt;li&gt;, &lt;script&gt; or &lt;template&gt; elements' expanded." loading="lazy" data-sanitized-class="h-img-shadow">
    </picture>
  </a>
</p>

<p>
  To learn more about this feature, check out the links in the resources section of this page.
</p>


guid: yt:video:81txe0KgILI
title: Zoom meeting 2021 11 20 Update 1 on Part 2 of book
author: ;Anton Chaitkin
link: https://www.youtube.com/watch?v=81txe0KgILI
hash: �쉢�5��D_H P�.e
attributes:
{"enclosures":[{"url":"https://www.youtube.com/v/81txe0KgILI?version=3","title":"Zoom meeting 2021 11 20 Update 1 on Part 2 of book","description":"for more information: https://whowearebook.com\n\nOn Nov. 20, 2021, Tony Chaitkiin addressed a group of friends and supporters via Zoom.  He presented a picture of the work he's been doing in American History. This is part of his ongoing work to publish Volume 2 of &quot;Who We Are: America's Fight for Universal Progress&quot;.  \n\nVolume 1 left off in the 1850s as the Philadelphia-based group of idealistic nation-builders were striving to industrialize America.  Meanwhile, the storm clouds of treason and secession were gathering.\n\nVolume 2 starts with the provocative question, why is Abraham Lincoln unknown today?\n\nThough Lincoln is revered, most people today are ignorant of his lifelong political philosophy,  and are unaware of how the fight for these principles gave mankind the chance for a brilliant future. Sadly, teachers and historians who conform their thinking to prevailing ideology bury their natural curiosity and simply omit any reference to views such as Lincoln’s.\n\nWho We Are, Volume 2,  will follow the world contest of Lincoln and his allies versus the imperial system of slavery and permanent war. This will be a new look behind the scenes at the core American leadership that built the railroads, brought about the new age of electricity, and made universal human progress the law of nations.\n\nA lively Q&amp;A session follows the initial presentation.","type":"application/x-shockwave-flash","height":390,"width":640,"thumbnails":["https://i1.ytimg.com/vi/81txe0KgILI/hqdefault.jpg"]}]}


guid: https://htmhell.dev/28-alert-level-1/
title: #28 alert level 1
author: ;Manuel Matuzovic
link: https://htmhell.dev/28-alert-level-1/
hash: q � +�J�Y2*O�$=
attributes: {"enclosures":[]}
content:
<div data-sanitized-class="section bad">
<h2 data-sanitized-id="bad-code">Bad code</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h1</span> <span data-sanitized-class="token attr-name">aria-busy</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>true<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-live</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>polite<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">role</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>alert<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>sr-only<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  Done</span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h1</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
</div>
<div data-sanitized-id="issues" data-sanitized-class="section">
<h2 data-sanitized-id="issues-and-how-to-fix-them">Issues and how to fix them</h2>
<ul>
<li>The element is used for communicating status updates, not to structure the page. A <code>div</code> with a <code>role</code> of <code>status</code> or <code>alert</code> is more suitable than a <code>h1</code>.</li>
<li>The heading is semantically not a <code>heading</code> anymore, but an <code>alert</code> container. This can be confusing, NVDA, for example, announces “alert busy Done level 1”. Do not change native semantics, unless you really have to.</li>
<li><code>aria-live="polite"</code> turns the element explicitly into a <em>polite</em> live region. This behavior is overwritten by <code>role="alert"</code> which turns it implicitly into an <em>assertive</em> live region.</li>
<li>For frequent updates it might be better to use a polite (<code>role="status"</code>) and a not an assertive (<code>role="alert"</code>) live region.</li>
<li><code>aria-busy</code> indicates whether an element, and its subtree, are currently being updated. The text of the live region “Done” indicates that all the necessary updates have finished. If that's the case, <code>aria-busy</code> should be removed or set to <code>false</code>.</li>
<li>“Done” might not be descriptive enough, consider a brief but more informative status message, something like “Changes saved” or “Product added to cart”.</li>
<li>The heading/live region is visually hidden. Consider showing it because everyone might benefit from the information.</li>
</ul>
<p>Check out the <a href="https://htmhell.dev/28-alert-level-1/#resources">resources section</a> at the bottom of this page for more.</p>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="good-code">Good code</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"> <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span> <span data-sanitized-class="token attr-name">role</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>status<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">   Changes saved.</span><br><span data-sanitized-class="highlight-line"> <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="resources">Resources</h2>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions">ARIA live regions (MDN)</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-busy">aria-busy (MDN)</a></li>
<li><a href="https://www.w3.org/TR/wai-aria/#aria-busy">aria-busy (WAI-ARIA 1.1 spec)</a></li>
<li><a href="https://www.w3.org/TR/wai-aria/#aria-live">aria-live (WAI-ARIA 1.1 spec)</a></li>
<li><a href="https://dequeuniversity.com/library/aria/liveregion-playground">Live Region Playground</a></li>
</ul>
</div>


guid: https://htmhell.dev/29-randomly-grouping-content/
title: #29 Randomly grouping content
author: ;Manuel Matuzovic
link: https://htmhell.dev/29-randomly-grouping-content/
hash: �B�X���j��8e��%�
attributes: {"enclosures":[]}
content:
<div data-sanitized-class="section bad">
<h2 data-sanitized-id="bad-code">Bad code</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>section</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>aside</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>section</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">        <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>header</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">          <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">            <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>img</span> <span data-sanitized-class="token attr-name">src</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>logo.svg<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">alt</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>Logo<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">          <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">        <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>header</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">        <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>main</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">          <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/services<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Services<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">          <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/products<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Products<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">          <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/aboutus<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Aboutus<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">        <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>main</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">        <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>footer</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>footer</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>section</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>aside</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>section</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>footer</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>footer</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>main</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h1</span><span data-sanitized-class="token punctuation">&gt;</span></span>Welcome to Hell<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h1</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>main</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>footer</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>footer</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>section</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>section</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
</div>
<div data-sanitized-id="issues" data-sanitized-class="section">
<h2 data-sanitized-id="issues-and-how-to-fix-them">Issues and how to fix them</h2>
<ul>
<li>Use the <code>&lt;section&gt;</code> element only to mark up a grouping of related content, typically introduced with a heading. Learn more about sections in <a href="https://htmhell.dev/tips/the-section-element/">Issue #8 - the section element</a>.</li>
<li>Use the <code>&lt;aside&gt;</code> element only for content that is tangentially related to the main content and not for important parts of the page or site.</li>
<li>Use the <code>&lt;nav&gt;</code> elements for important navigational groupings of links. Learn more about landmarks in <a href="https://htmhell.dev/tips/landmarks/">Issue #16 - Landmarks</a>.</li>
<li>If a link contains an image and no text, the <code>alt</code> attribute of the image serves as the link text. In such a case it might make sense to use the attribute not to describe the image, but the functionality of the link.</li>
<li>You can structure the links in a <code>&lt;nav&gt;</code> by wrapping them in an <code>&lt;ul&gt;</code> or <code>&lt;ol&gt;</code>. Learn more about lists in <a href="https://htmhell.dev/tips/ol-vs-ul-vs-div/">Issue #13 - ol vs. ul vs. div</a></li>
<li>Try to avoid empty elements.</li>
<li>A document must not have more than one <code>&lt;main&gt;</code> element that does not have the <code>hidden</code> attribute specified. Having more than one visible <code>&lt;main&gt;</code> element can confuse users because screen readers don’t announce the number of <code>&lt;main&gt;</code> elements.</li>
<li>The <code>&lt;main&gt;</code> element must not appear as a descendant of the <code>&lt;section&gt;</code> or <code>&lt;aside&gt;</code> element.</li>
<li>A page or sectioning content like <code>&lt;article&gt;</code> or <code>&lt;section&gt;</code> should only contain a single <code>&lt;footer&gt;</code>.</li>
</ul>
<p>Check out the <a href="https://htmhell.dev/29-randomly-grouping-content/#resources">resources section</a> at the bottom of this page for more.</p>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="good-code">Good code</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"> <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>header</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">   <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">     <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>img</span> <span data-sanitized-class="token attr-name">src</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>logo.svg<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">alt</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>Homepage<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">   <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">   <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>nav</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">     <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>ul</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">       <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">         <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/services<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Services<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">       <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">       <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">         <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/products<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Products<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">       <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">       <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">         <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/aboutus<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Aboutus<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">       <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">     <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>ul</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">   <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>nav</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"> <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>header</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"> <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>main</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">   <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h1</span><span data-sanitized-class="token punctuation">&gt;</span></span>Welcome to Hell<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h1</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"> <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>main</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="resources">Resources</h2>
<ul>
<li><a href="https://adrianroselli.com/2015/09/use-only-one-main-on-a-page.html">Use Only One main on a Page</a></li>
<li><a href="https://www.scottohara.me/blog/2021/07/16/section.html">Accessibility of the section element</a></li>
</ul>
</div>


guid: https://htmhell.dev/30-bullet-list/
title: #30 Bullet “list”
author: ;Manuel Matuzovic
link: https://htmhell.dev/30-bullet-list/
hash: q���)|�X��R K�
attributes: {"enclosures":[]}
content:
<div data-sanitized-class="section bad">
<h2 data-sanitized-id="bad-code">Bad code</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  • HTML</span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>br</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  • CSS</span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>br</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  • JavaScript</span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
</div>
<div data-sanitized-id="issues" data-sanitized-class="section">
<h2 data-sanitized-id="issues-and-how-to-fix-them">Issues and how to fix them</h2>
<ol>
<li>Use <code>&lt;p&gt;</code> for paragraphs, not lists. The standard way for creating basic lists is <code>&lt;ul&gt;</code> (when the order doesn't matter) or <code>&lt;ol&gt;</code> (when the order matters), and <code>&lt;li&gt;</code> for each item.</li>
<li>The “list” won't be announced as a list when using a screen reader.</li>
<li><code>&lt;ul&gt;</code> and <code>&lt;ol&gt;</code> provide <a href="https://htmhell.dev/tips/ol-vs-ul-vs-div/">useful semantic information</a>. What and how assistive technology announces information differs, but:
<ol>
<li>screen readers might announce it as a “list with items”</li>
<li>screen readers might announce the number of items in the list, e.g. “list with 3 items”</li>
<li>screen readers might announce the bullet or number of each item</li>
<li>screen readers might announce when you enter or leave a list</li>
</ol>
</li>
<li>Screen reader users may use shortcuts to jump from list to list on a page</li>
<li><code>&lt;ul&gt;</code> and <code>&lt;ol&gt;</code> provide a selector for styling in CSS</li>
<li>When copying the fake list, all the bullets will go along with it</li>
<li>You can turn the bullet into a fire emoji using <code>::marker</code> 🔥</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="good-code">Good code</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>ul</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span>HTML<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span>CSS<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span>JavaScript<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>ul</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
</div>


guid: yt:video:IPgkQImBalQ
title: How to Avoid WWIII - Anton Chaitkin. An appeal and a challenge to the American people
author: ;Anton Chaitkin
link: https://www.youtube.com/watch?v=IPgkQImBalQ
hash: ����Q�;�ƒ|��:[
attributes:
{"enclosures":[{"url":"https://www.youtube.com/v/IPgkQImBalQ?version=3","title":"How to Avoid WWIII - Anton Chaitkin. An appeal and a challenge to the American people","description":"For more information: https://WhoWeAreBook.com\n\nOn March 1, 2022, Edward Lozansky, president of the American University in Moscow, and President of the World Russia Forum in Washington, DC, hosted a seminar on the ongoing war in Ukraine.\n\nAnton Chaitkin, author of &quot;Who We Are, America's Fight for Universal Progress,&quot; gave a presentation as part of the forum that was an appeal to the American People and a challenge to peace activists to change the dynamic that led to this disastrous war.","type":"application/x-shockwave-flash","height":390,"width":640,"thumbnails":["https://i2.ytimg.com/vi/IPgkQImBalQ/hqdefault.jpg"]}]}


guid: https://htmhell.dev/31-additional-assistance/
title: #31 additional “assistance”
author: ;Manuel Matuzovic
link: https://htmhell.dev/31-additional-assistance/
hash: 0�}n4K�qxi!��C�
attributes: {"enclosures":[]}
content:
<div data-sanitized-class="section bad">
<h2 data-sanitized-id="bad-code">Bad code</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"> <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/contact<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-label</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>If you find that you need additional <br><span data-sanitized-class="highlight-line">assistance in navigating or accessing the content of this website, </span><br><span data-sanitized-class="highlight-line">please call our customer service toll free number 1-800-666-8654309<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">title</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>If</span><br><span data-sanitized-class="highlight-line">you find that you need additional assistance in navigating or accessing </span><br><span data-sanitized-class="highlight-line">the content of this website, please call our customer service </span><br>toll free number 1-800-666-8654309<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><br><span data-sanitized-class="highlight-line">   Contact</span><br><span data-sanitized-class="highlight-line"> <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"> <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/login<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-label</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>If you find that you need additional assistance in navigating or accessing the content of this website, please call our customer service toll free number 1-800-666-8654309<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">title</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>If you find that you need additional assistance in navigating or accessing the content of this website, please call our customer service toll free number 1-800-666-8654309<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">   Login</span><br><span data-sanitized-class="highlight-line"> <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
</div>
<div data-sanitized-id="issues" data-sanitized-class="section">
<h2 data-sanitized-id="issues-and-how-to-fix-them">Issues and how to fix them</h2>
<ol>
<li><code>aria-label</code>, <code>aria-labelledby</code>, etc. must not be misused for dumping contact information or other unrelated content.</li>
<li>Text in a link must describe the purpose or the target of the link.</li>
<li>The visible label of an element should match the accessible name.</li>
<li>Information concerning accessibility should be on a dedicated page (e.g. an <a href="https://www.w3.org/WAI/planning/statements/">accessibility statement</a>) and/or the contact page.</li>
<li>The <code>title</code> attribute shouldn't be used for important contact information due to inconsistent browser support and lack of accessibility.</li>
<li>Redundant link text should be avoided.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="good-code">Good code</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/contact<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  Contact</span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/login<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  Login</span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="resources">Resources</h2>
<ul>
<li><a href="https://www.24a11y.com/2017/the-trials-and-tribulations-of-the-title-attribute/">The Trials and Tribulations of the Title Attribute</a></li>
</ul>
</div>


guid: https://thechainedmuse.substack.com/p/escaping-the-brave-new-world-0ce
title: Escaping the Brave New World
author: ;David Gosselin
link: https://thechainedmuse.substack.com/p/escaping-the-brave-new-world-0ce
hash: ĽE�,,z��`���
content:
<p>Watch with video <a href="https://youtu.be/smVvJzijAek">here</a>.</p><p>How did western civilization lose its connections to the historic moral and philosophical traditions that imbued it with a love of progress, respect for the past, and sacrifice for the future for centuries?</p><p>In this discussion between poet and host of <em>Escaping the Brave New World,</em> David Gosselin, and <em>RTF</em> director, Matthew Ehret, this question is unpacked from a variety of angles.</p><p>This episode deals with the rise of social engineering during the 20th century with a focus on London’s Tavistock Clinic, MK Ultra, CIA cultural warfare in the post-war age under the Congress for Cultural Freedom and much more. We explore the roots of epistemological warfare stretching back to the days of ancient Athens to our present age, and the post-WWII techniques deployed in the form of the Frankfurt School, political correctness, and the “authoritarian personality project” which aimed to proclaim that individual genius, moral leadership or love of truth were merely forms of fascism that must be destroyed by new forms of “group think” and “popular opinion” in order for free capitalist democracy to win the Cold War.</p><p><br><br>Thank you for subscribing. <a href="https://davidgosselin.substack.com/p/escaping-the-brave-new-world/comments?token=eyJ1c2VyX2lkIjoyNDcyNDM1NCwicG9zdF9pZCI6NTI4OTM1NzcsImlhdCI6MTY5OTUwMDYyNSwiZXhwIjoxNjk5NzU5ODI1LCJpc3MiOiJwdWItNDQwMjc3Iiwic3ViIjoicG9zdC1jb21tZW50cyJ9.h3FUHBVHhLhBI6_tbWUjYRQbTQBbbZ1PBWYQxXk_hf0&amp;r=epxfm&amp;utm_medium=podcast&amp;utm_campaign=CTA_5">Leave a comment</a> or <a href="https://davidgosselin.substack.com/p/escaping-the-brave-new-world?utm_source=substack&amp;utm_medium=podcast&amp;utm_content=share&amp;action=share&amp;token=eyJ1c2VyX2lkIjoyNDcyNDM1NCwicG9zdF9pZCI6NTI4OTM1NzcsImlhdCI6MTY5OTUwMDYyNSwiZXhwIjoxNzAyMDkyNjI1LCJpc3MiOiJwdWItNDQwMjc3Iiwic3ViIjoicG9zdC1yZWFjdGlvbiJ9.FSiBupdOaFev63oMQSFmp789yW1b_YVL7fFT2OCBz6s&amp;utm_campaign=CTA_5">share this episode</a>.</p>

attributes:
{"enclosures":[{"url":"https://api.substack.com/feed/podcast/138718678/990bcf08126d308d3496c9aa88ffe111.mp3","type":"audio/mpeg","length":0}]}


guid: https://thechainedmuse.substack.com/p/escaping-the-brave-new-world-apollonians-f45
title: Escaping the Brave New World: Apollonians, Dionysians, Prometheans and Epicureans
author: ;David Gosselin
link: https://thechainedmuse.substack.com/p/escaping-the-brave-new-world-apollonians-f45
hash: ��;M* �Q0�&��
content:
<p>In this episode of <em>Escaping the Brave New World</em>, the Confucian doctrine of the “Rectification of Names” and the current attempt to deconstruct Western civilization are explored in depth.</p><p>In the <em>Analects of Confucius</em>, the philosopher says:</p><p>“A superior man, in regard to what he does not know, shows a cautious reserve. If names be not correct, language is not in accordance with the truth of things. If language be not in accordance with the truth of things, affairs cannot be carried on to success. When affairs cannot be carried on to success, proprieties and music do not flourish. When proprieties and music do not flourish, punishments will not be properly awarded. When punishments are not properly awarded, the people do not know how to move hand or foot. Therefore a superior man considers it necessary that the names he uses may be spoken appropriately, and also that what he speaks may be carried out appropriately. What the superior man requires is just that in his words there may be nothing incorrect.”</p><p>— Confucius, Analects, Book XIII, Chapter 3, verses 4–7, Analect 13.3, translated by James Legge</p><p>Today, many words and labels are thrown around, often with little appreciation for their historical development and origins. As a result, political discourse has been polarized into two very narrow categories: the Left and the Right. However, with a broader historical perspective, and a consideration of four diverse but very relevant ancient outlooks—the Promethean, Apollonian, Dionysian and Epicurean—we are afforded the opportunity to approach the paradoxes of the modern binary system of political control (and its alternatives) in a more nuanced and revealing light.</p><p>Stay tuned for the next installment where we will discuss the various personae involved in the affairs of managing a state using Plato’s definitions of the Aristocratic man, the Timocratic man, the Democratic man, and the Tyrant.</p><p>Watch more episodes of <em>Escaping the Brave New World</em> <a href="https://www.youtube.com/watch?v=VyUmuQJBo5s">here</a>.</p><p><br><br>Thank you for subscribing. <a href="https://davidgosselin.substack.com/p/escaping-the-brave-new-world-apollonians/comments?token=eyJ1c2VyX2lkIjoyNDcyNDM1NCwicG9zdF9pZCI6NTg0ODQ2NzYsImlhdCI6MTY5OTUwMDYyNSwiZXhwIjoxNjk5NzU5ODI1LCJpc3MiOiJwdWItNDQwMjc3Iiwic3ViIjoicG9zdC1jb21tZW50cyJ9.qKaBf33RHAey9Htj2qNpA-Bi3M2T1f8nrBAd4KdO1yg&amp;r=epxfm&amp;utm_medium=podcast&amp;utm_campaign=CTA_5">Leave a comment</a> or <a href="https://davidgosselin.substack.com/p/escaping-the-brave-new-world-apollonians?utm_source=substack&amp;utm_medium=podcast&amp;utm_content=share&amp;action=share&amp;token=eyJ1c2VyX2lkIjoyNDcyNDM1NCwicG9zdF9pZCI6NTg0ODQ2NzYsImlhdCI6MTY5OTUwMDYyNSwiZXhwIjoxNzAyMDkyNjI1LCJpc3MiOiJwdWItNDQwMjc3Iiwic3ViIjoicG9zdC1yZWFjdGlvbiJ9.unxwD27usuOWRBNcsGwqkvyfd50oEdIgl-HhkDUtEM8&amp;utm_campaign=CTA_5">share this episode</a>.</p>

attributes:
{"enclosures":[{"url":"https://api.substack.com/feed/podcast/138718677/2ac0800d6415e67f95c5777718f6a094.mp3","type":"audio/mpeg","length":0}]}


guid: https://htmhell.dev/32-almost-a-proper-close-button/
title: #32 almost a proper close button
author: ;Manuel Matuzovic
link: https://htmhell.dev/32-almost-a-proper-close-button/
hash: �V�#����U�ҭd�
attributes: {"enclosures":[]}
content:
<div data-sanitized-class="section bad">
<h2 data-sanitized-id="bad-code">Bad code</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>button</span> <span data-sanitized-class="token attr-name">display</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>flex<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">role</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>button<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>svg</span> <span data-sanitized-class="token attr-name">role</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>img<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">viewBox</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>0 0 13 13<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-hidden</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>true<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">xmlns</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>http://www.w3.org/2000/svg<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">height</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>15px<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">width</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>15px<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">fill</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>#000<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">name</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>close<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>title</span><span data-sanitized-class="token punctuation">&gt;</span></span>Close dialog<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>title</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>path</span> <span data-sanitized-class="token attr-name">d</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>…<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span> <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>path</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>svg</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>button</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
</div>
<div data-sanitized-id="issues" data-sanitized-class="section">
<h2 data-sanitized-id="issues-and-how-to-fix-them">Issues and how to fix them</h2>
<ol>
<li>Either turn the <code>&lt;svg&gt;</code> into a semantic element (<code>role="img"</code>) or exclude it from the accessibility tree (<code>aria-hidden="true"</code>). Doing both makes no sense.</li>
<li>The button has no accessible name (a text alternative). The <code>title</code> element in the <code>svg</code> would serve as the accessible name, but <code>aria-hidden="true"</code> makes the whole SVG inaccessible to assistive technology.</li>
<li>Even without <code>aria-hidden="true"</code>, some screen reader/browser combinations might not recognise the <code>&lt;title&gt;</code> element. Label the <code>&lt;svg&gt;</code> using <code>aria-labelledby</code> or <code>aria-label</code>.</li>
<li>The <code>role=button</code> attribute and value for the button is redundant. Its implicit default role is “button”.</li>
<li>There's no <code>display</code> attribute. If you need custom attributes, use the <code>data-</code>  prefix.</li>
<li>The <code>name</code> attribute is not allowed on <code>&lt;svg&gt;</code></li>
<li>The value of the <code>width</code> and <code>height</code> attributes should be a valid non-negative integer.</li>
<li>Add a <code>type="button"</code> attribute and value to prevent the button from submitting a form, if there is one.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="good-code">Good code</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>button</span> <span data-sanitized-class="token attr-name">type</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>button<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">data-display</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>flex<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>svg</span> <span data-sanitized-class="token attr-name">role</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>img<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">viewBox</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>0 0 13 13<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">xmlns</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>http://www.w3.org/2000/svg<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">height</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>15<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">width</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>15<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">fill</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>#000<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-labelledby</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>title<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>title</span> <span data-sanitized-class="token attr-name">id</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>title<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Close<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>title</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>path</span> <span data-sanitized-class="token attr-name">d</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>…<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span> <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>path</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>svg</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>button</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="demo-of-voice-over-on-macos">Demo of Voice Over on macOS</h2>
<p>Voice Over doesn't recognize the title element nested in a svg nested in a button.</p>
<video src="https://htmhell.dev/images/svgbutton.mov" controls="controls" width="200" preload="none">
  <p>Something went wrong, please visit <a href="https://htmhell.dev/32-almost-a-proper-close-button/">htmhell.dev/32-almost-a-proper-close-button/</a> to view this video.
</p></video>
<p>Code on <a href="https://codepen.io/matuzo/pen/LYdWpwP?editors=1000">CodePen</a>.</p>
</div>


guid: https://thechainedmuse.substack.com/p/exiting-the-cave-timocrats-democrats-5bc
title: Exiting the Cave: Timocrats, Democrats, Oligarchs and Tyranny
author: ;David Gosselin
link: https://thechainedmuse.substack.com/p/exiting-the-cave-timocrats-democrats-5bc
hash: ,��@�v���ot�c
content:
<p>Psychiatrist and Confucian scholar Dr. Quan Lu joins <em>Escaping the Brave New World</em> to discuss the transcendental leap and epistemological challenge faced by civilization at this critical juncture in human history. Beyond mere politics and rhetoric, whether expressed in their ancient forms or embodied in the latest social engineering, Dr. Lu outlines the nature of humanity's ascent from the animal kingdom of vitality, intellect, and psyche into the timeless realm of Beauty, Truth, and Goodness.</p><p>After an initial discussion of the various categories and cast of characters encountered within the lower realm of politics—the Democratic, Tyrannical, Oligarchical and fake Timocratic souls—we venture into the realm of the true Timocratic, Aristocratic and Philosophical souls. These reflections lead into a playful exploration concerning the nature of great art, culture, and civilization, with special attention paid to the many subversive “imitations” and perversions of “the real thing.”</p><p>Disabused from the imitations found in both <a href="https://davidgosselin.substack.com/p/lifting-the-veil-from-ancient-rhetoric">the ancient and modern world</a> of political psy-ops and <a href="https://www.youtube.com/watch?v=VyUmuQJBo5s">epistemological warfare</a>, the dialogue culminates with an exploration of the many possibilities that arise as a civilization begins “exiting the cave.”</p><p>Video of this discussion available <a href="https://www.youtube.com/watch?v=jWKrlQ8fepA&amp;t=0s">here</a>.</p><p><br><br>Thank you for subscribing. <a href="https://davidgosselin.substack.com/p/exiting-the-cave-timocrats-democrats/comments?token=eyJ1c2VyX2lkIjoyNDcyNDM1NCwicG9zdF9pZCI6NjkwODg3MDMsImlhdCI6MTY5OTUwMDYyNSwiZXhwIjoxNjk5NzU5ODI1LCJpc3MiOiJwdWItNDQwMjc3Iiwic3ViIjoicG9zdC1jb21tZW50cyJ9.PxU-gmg3ePnODQYidcNAuoifC3WSpwk3tvV4he0gThE&amp;r=epxfm&amp;utm_medium=podcast&amp;utm_campaign=CTA_5">Leave a comment</a> or <a href="https://davidgosselin.substack.com/p/exiting-the-cave-timocrats-democrats?utm_source=substack&amp;utm_medium=podcast&amp;utm_content=share&amp;action=share&amp;token=eyJ1c2VyX2lkIjoyNDcyNDM1NCwicG9zdF9pZCI6NjkwODg3MDMsImlhdCI6MTY5OTUwMDYyNSwiZXhwIjoxNzAyMDkyNjI1LCJpc3MiOiJwdWItNDQwMjc3Iiwic3ViIjoicG9zdC1yZWFjdGlvbiJ9.jRjzk5gxsDdMUJkiAa9EzD-nLDGR4uB5GRIhqy6SNEA&amp;utm_campaign=CTA_5">share this episode</a>.</p>

attributes:
{"enclosures":[{"url":"https://api.substack.com/feed/podcast/138718676/078c01a1d92b3b4ba19b9db32de071b1.mp3","type":"audio/mpeg","length":0}]}


guid: yt:video:jlyru5YXCfY
title: Auto-Resize Text Layers with Expressions in After Effects
author: ;ukramedia
link: https://www.youtube.com/watch?v=jlyru5YXCfY
hash: �s�tq:PY�譨��
attributes:
{"enclosures":[{"url":"https://www.youtube.com/v/jlyru5YXCfY?version=3","title":"Auto-Resize Text Layers with Expressions in After Effects","description":"Hey there! Get ready for some After Effects magic in this fun tutorial video! In this step-by-step guide, I'll show you how to effortlessly auto-resize text layers to a custom size using expressions. Say goodbye to the hassle of manually adjusting your text when it gets too wide! With just a few lines of code, you can create a super cool effect that automatically resizes your text once it hits a specific limit. Let's simplify your workflow and create some awesome auto-resizing text layers together! \n\n/// Free After Effects Project File:\n     Project File: https://ukramedia.com/?add-to-cart=361407\n\n/// Links from the Video:\n     Smart Resizer: https://ukramedia.com/SmartResizer\n\n/// Let's Connect:\n     Facebook: https://www.facebook.com/ukramedia\n     Sergei's Facebook Page: https://www.facebook.com/sergeiprokhn...\n     Twitter: https://twitter.com/ukramedia\n     TikTok: https://www.tiktok.com/@ukramedia\n     Instagram: https://www.instagram.com/ukramedia/\n     Pinterest: https://www.pinterest.com/ukramedia/\n     Linkedin: https://www.linkedin.com/company/ukra...\n     YouTube: https://www.youtube.com/c/ukramedia\n     Ukramedia Online Community: https://www.ukramedia.com/community\n\n#AeExpressions #AfterEffects #AdobeAfterEffects","type":"application/x-shockwave-flash","height":390,"width":640,"thumbnails":["https://i3.ytimg.com/vi/jlyru5YXCfY/hqdefault.jpg"]}]}


guid: yt:video:JfHoXEXwdCg
title: How to Add Dividers to Dropdown Menus in After Effects
author: ;ukramedia
link: https://www.youtube.com/watch?v=JfHoXEXwdCg
hash: �<�mb�4�.<��6�a
attributes:
{"enclosures":[{"url":"https://www.youtube.com/v/JfHoXEXwdCg?version=3","title":"How to Add Dividers to Dropdown Menus in After Effects","description":"/// About:\n     In this video, I will show you how to quickly add dividers inside dropdown menus in Adobe After Effects.\n\n     *** Learn more about how to use the Dropdown Menu in After Effects by watching this tutorial: https://youtu.be/nPTNtwSx9SE.\n\n/// Let's Connect:\n     Facebook: https://www.facebook.com/ukramedia\n     Sergei's Facebook Page: https://www.facebook.com/sergeiprokhn...\n     Twitter: https://twitter.com/ukramedia\n     TikTok: https://www.tiktok.com/@ukramedia\n     Instagram: https://www.instagram.com/ukramedia/\n     Pinterest: https://www.pinterest.com/ukramedia/\n     Linkedin: https://www.linkedin.com/company/ukra...\n     YouTube: https://www.youtube.com/c/ukramedia\n     Ukramedia Online Community: https://www.ukramedia.com/community\n\n##AfterEffects #AdobeAfterEffects","type":"application/x-shockwave-flash","height":390,"width":640,"thumbnails":["https://i3.ytimg.com/vi/JfHoXEXwdCg/hqdefault.jpg"]}]}


guid: https://odysee.com/zaitsevo-gomovsky:d72a6d58d3ef95c3dc2f252ba8d50bd6e376c310
title: Donbass Frontline Villager: "Ukraine Doesn't Consider Us Human", Wants To "Annihilate Us”
author: ;Eva K Bartlett
link: https://odysee.com/zaitsevo-gomovsky:d72a6d58d3ef95c3dc2f252ba8d50bd6e376c310
hash: v��-��&*@{)m
content:
<p><img src="https://thumbs.odycdn.com/90bd40c2a4ed1da9613e9ddb6a41ad4e.webp" width="480" alt="thumbnail" title="Donbass Frontline Villager: " ukraine doesn consider us human wants to></p>Zaitsevo, a front-line village north of Gorlovka, in the north of the Donetsk People's Republic, has been extremely hard-hit by Ukrainian shelling, since 2014. What was once a village of 3,500, with a school &amp; kindergarten, is now a shell of a village, with at most 1,000 residents, most of whom don't stay in the village, but come for brief visits &amp; retreat to relative safety in Gorlovka,a city likewise heavily shelled, including with HIMARs on November 12.<br><br>Not far away, in Golmovsky, I spoke with some of the residents who remain. One told me he'd fled his own town, Dolomoti, NE of Golmovsky, which he said was destroyed by Ukrainian shelling, and has lost three homes, burned down after Ukrainian shelling. He said they were evicted from Dolomoti in 2019, and in 2020, Ukraine completely destroyed the village, “every single house”.<br><br>He collected money to rent an apartment in Golmovsky, “but three days ago it was hit. I just bought it, and it was already hit. They don't consider us humans. They say it on tv, that we are not human. In 2019, 2020, they told us they don't consider us human and if they enter this place there would be nobody left, they'd annihilate us.”<br><br>These are but glimpses of the horror Donbass civilians have been living since Ukraine began shelling them in 2014. Complicit media, with blood on their hands, claim this isn't happening. The people being bombed beg to differ.

attributes:
{"enclosures":[{"url":"https://player.odycdn.com/api/v3/streams/free/zaitsevo-gomovsky/d72a6d58d3ef95c3dc2f252ba8d50bd6e376c310/0104ab.mp4","type":"video/mp4","length":563148295}]}


title: Censortube Deletes My Video. Here's How To Watch It.
author: ;Eva K Bartlett
hash: � ��O��"�K� 
guid:
https://odysee.com/censortube-deletes-my-video.-here%27s-how:de4643e273ca85616275f427bcc9f95264ee5d82

content:
<p><img src="https://thumbnails.lbry.com/-MPlfHBMomA" width="480" alt="thumbnail" title="Censortube Deletes My Video. Here's How To Watch It."></p>If you would like to watch the clip which a certain platform (cough cough) deleted, please visit:<br><br>https://odysee.com/@EvaKareneBartlett:9/outpost-soldiers-humnity:5<br>https://rumble.com/v1qvf0c-donbass-commanders-ukrainian-people-are-our-friends-relatives.-well-liberat.html<br>...<br>https://www.youtube.com/watch?v=-MPlfHBMomA

link:
https://odysee.com/censortube-deletes-my-video.-here%27s-how:de4643e273ca85616275f427bcc9f95264ee5d82

attributes:
{"enclosures":[{"url":"https://player.odycdn.com/api/v3/streams/free/censortube-deletes-my-video.-here's-how/de4643e273ca85616275f427bcc9f95264ee5d82/0cb815.mp4","type":"video/mp4","length":1688674}]}


guid: yt:video:Q3pFqdaZWV4
title: Smart Anchor: The AE Tool You Never Knew You Needed
author: ;ukramedia
link: https://www.youtube.com/watch?v=Q3pFqdaZWV4
hash: T�at��?AZ�k�#m=
attributes:
{"enclosures":[{"url":"https://www.youtube.com/v/Q3pFqdaZWV4?version=3","title":"Smart Anchor: The AE Tool You Never Knew You Needed","description":"*/// About*\nIntroducing Smart Anchor - the ultimate time-saving tool for After Effects users! With Smart Anchor, you can easily adjust the anchor point on the fly, streamlining your workflow and allowing you to focus on creating stunning visual effects. But that's just the beginning - Smart Anchor also includes a host of other features that make it an essential addition to any After Effects toolkit. Check out the trailer video to see Smartanchor in action and see how it can revolutionize your AE workflow.\n\n*/// Chapters*\n00:00 - Adjust Anchors For Multiple Layers\n00:11 - Save Clicks with CTRL + CLICK Shortcut\n00:20 - Advanced Text Height Options\n00:45 - Lock Anchors To Custom Positions\n01:07 - Adjustable Layer Anchor Points\n01:26 - Ignore Ascenders &amp; Descenders When Centering Text\n01:43 - Set Anchors At Custom Layer Time\n02:02 - Quickly Remove Smart Anchors From Selected Layers\n02:11 - Where To Get Smart Anchor 2.0\n\n*/// Smart Tools Links*\nSmart Anchor: https://ukramedia.com/product/smart-anchor/\nSmart Tools Bundle: https://ukramedia.com/product/smart-t...\n\n*/// What's New In Smart Anchor 2.0*\n- *SCRIPT UI CHANGES*\n    - The Run button has been added and it changed the main functionality of the script. In the previous versions of Smart Anchor, the user had to click on any Anchor Point buttons to run the script. Now, the script runs when the Run button is clicked. This means that the Anchor Point buttons are now selectable. The main reason for this change is to stay consistent with the workflow of our other Smart Tools.\n    - Users can still apply Smart Anchor the old way without the Run button by holding down Control and clicking on any Anchor Point buttons.\n    - Separate Code Mode buttons were added to the top shelf.\n    - Tabs were introduced to separate Anchor, Text Height, and Anchor Time At. This will help to keep the UI more compact when new features are added in the future.\n    - Global Reset buttons were added to reset values in a single tab or multiple tabs\n    - A new Text Height tab has been added with 3 layer text height options: Full Height, Cap Height, and x-Height.\n    - A Custom Time text field has been added to manually insert the custom Anchor At Time value.\n    - The Get Comp Time button has been added to quickly insert the comp time into the Custom Time text field.\n    - The Remove Smart Anchor function has been fixed. The layer position doesn’t change when the Remove Smart Anchor button is pressed.\n\n- *PSEUDO EFFECT CHANGES*\n    - Anchor Based On Time properties have been simplified and no longer have separate X &amp; Y properties.\n    - Text x-Height Offset slider was added to allow users to manually adjust the x-Height value. This is needed because not all fonts have the same x-Height value.\n    - Additional Anchor Point options were added to the Y Anchor Point dropdown menu. These new Anchor Point options are for Text layers and will help users when creating Motion Graphic Templates (MoGrts).\n        - Top (Text x-Height)\n        - Top (Text Baseline)\n        - Center (Text Cap Height)\n        - Center (Text x-Height)\n        - Bottom (Text Baseline)\n    - The Custom Time property gets automatically updated each time the user runs the script. The updated Custom Time value comes from the Anchor At Time selection in the Script UI.\n    - Dividers were added to all dropdown menus to separate items.\n- *CODE CHANGES*\n    - The Expressions Code has been updated.\n\n*/// How To Upgrade to Smart Anchor 2.0*\nIf you purchased Smart Anchor or Smart Tools bundle from us in the past, you automatically get free upgrades. This means you also get Smart Anchor 2.0 for free at ukramedia.com. Thank you for your support!\n\n*/// Let's Connect*\nFacebook: https://www.facebook.com/ukramedia\nSergei's Facebook Page: https://www.facebook.com/sergeiprokhn...\nTwitter: https://twitter.com/ukramedia\nTikTok: https://www.tiktok.com/@ukramedia\nInstagram: https://www.instagram.com/ukramedia/\nPinterest: https://www.pinterest.com/ukramedia/\nLinkedin: https://www.linkedin.com/company/ukra...\nYouTube: https://www.youtube.com/c/ukramedia\nUkramedia Online Community: https://www.ukramedia.com/community\n\n#AeScripts #AfterEffects #AdobeAfterEffects","type":"application/x-shockwave-flash","height":390,"width":640,"thumbnails":["https://i2.ytimg.com/vi/Q3pFqdaZWV4/hqdefault.jpg"]}]}


guid: https://htmhell.dev/adventcalendar/2022/1/
title: How to transfigure wireframes into HTML
author: ;Manuel Matuzovic
link: https://htmhell.dev/adventcalendar/2022/1/
hash: �i9�2-�f�݉�:���
attributes: {"enclosures":[]}
content:
<p>Soon enough in your career as a web developer, you encounter the situation where a designer hands over a wonderful web design in all its large-screen glory. Your mission now is to transform it into code to present a prototype as soon as possible, starting with nothing but an empty text file.</p>
<h2 data-sanitized-id="facts-questions-and-the-truth">Facts, questions and the truth</h2>
<p>This task comes with a few challenges and most of the time there’s no single correct way to do it. In this article, I’m going to describe how I personally approach these tasks.</p>
<p>Our goal for today is to build an HTML prototype for an online newspaper homepage, “The Weekly Prophet”. The only information we have is the following wireframe:</p>
<a href="https://htmhell.dev/images/advent2022/8/01-wireframe-initial.jpg">
<img src="https://htmhell.dev/images/advent2022/8/01-wireframe-initial.jpg" alt="A wireframe of a newspaper called “The weekly prophet”. There’s a large header on top and below a horizontal navigation bar. The main content are four sections filled with articles: “Top stories”, “Latest news”, “Most viewed”, and “What’s going on in Hogwarts?”. At the end of the page there’s a section with a newsletter subscription form and a footer with three lists of links." width="1402" height="3072">
</a>
<p>There’s a lot to unpack here.</p>
<p>The first important fact is that in HTML there’s no such thing as placing elements on a page next to each other (we need CSS—Cascading Style Sheets—for that). There’s just <strong>one element at a time</strong>. When there’s no one-column layout for small screen sizes provided by a designer, we need to define an order of elements on our own.</p>
<p>The next big questions, especially when you’re new to web development, are: <strong>where to start now?</strong> How do I know which elements I need to build this? How should they be nested?</p>
<p>The truth is, it is probably hard to come up with a final version of the HTML code without ever thinking about CSS and its features, because <strong>a lot of markup decisions are based on what CSS can do</strong>. As this article is purely about HTML, the outcome is most likely not complete, but a good starting point from a semantics and accessibility point of view.</p>
<h2 data-sanitized-id="semantics-and-accessibility">Semantics and accessibility</h2>
<p>HTML might look like an easy-to-learn language, but comes with a lot of (hidden) power. It’s the heart of every web page. The better you understand the meaning and functionality of certain tags and attributes, the better your code will be. Sure, you can build the whole newspaper homepage by just using <code>div</code> and <code>span</code> elements, but that’s not what we’re here for.</p>
<p>We are going to think about…</p>
<ul>
<li>the meaning of sections of the page</li>
<li>the document’s outline and hierarchy of the content</li>
<li>the interactivity of elements</li>
</ul>
<p>…because when you build a solid foundation, everything you add on top (i.e., styling with CSS and interaction with JavaScript) will be better. When working <em>with</em> the features HTML gives you and not against them, you can save a lot of time and code (and money) down the road. And as a nice side effect, you automatically build an accessible product that will make your users happy and this is what our work should be all about.</p>
<h2 data-sanitized-id="dont-think-outside-the-box">Don’t think outside the box</h2>
<p>Enough of the talking, let’s start coding!</p>
<p>Every time I see a web design or a wireframe, I immediately start imagining boxes. <a href="https://mxb.dev/blog/the-css-mindset/#h-everything-is-a-rectangle">On a website, every element is a box</a>, so I start grouping elements that belong together, draw boxes around them, and give them names.</p>
<a href="https://htmhell.dev/images/advent2022/8/02-wireframe-landmarks.jpg">
<img src="https://htmhell.dev/images/advent2022/8/02-wireframe-landmarks.jpg" alt="The same wireframe of a newspaper called “The weekly prophet” as described above. The important areas are highlighted and numbered from one to eight." width="1388" height="3072">
</a>
<p>I identified the following eight areas in the wireframe:</p>
<ol>
<li>Header</li>
<li>Navigation</li>
<li>Section: Top Stories</li>
<li>Section: Latest News</li>
<li>Section: Most viewed</li>
<li>Section What’s going on in Hogwarts?</li>
<li>Subscription form</li>
<li>Footer</li>
</ol>
<p>Sections three to six contain all the interesting articles from the main content of the page.</p>
<p>I don’t start coding a very specific element on the page, but always begin with the overall page structure, the large content elements and then work my way <strong>from the outside to the inside</strong>.</p>
<h2 data-sanitized-id="step-1-a-minimal-html-page-starter">Step 1: A minimal HTML page starter</h2>
<p>I have a very small starter HTML template I always use when creating a new web page from scratch. It looks like this:</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token doctype"><span data-sanitized-class="token punctuation">&lt;!</span><span data-sanitized-class="token doctype-tag">DOCTYPE</span> <span data-sanitized-class="token name">html</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>html</span> <span data-sanitized-class="token attr-name">lang</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>en<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>head</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">	  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>meta</span> <span data-sanitized-class="token attr-name">charset</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>utf-8<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span><br><span data-sanitized-class="highlight-line">	  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>title</span><span data-sanitized-class="token punctuation">&gt;</span></span>Webpage starter<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>title</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>head</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>body</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h1</span><span data-sanitized-class="token punctuation">&gt;</span></span>Hello World!<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h1</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>body</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>html</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p>I’m not going into every little detail here, there are <a href="https://www.matuzo.at/blog/html-boilerplate/">other articles and tutorials about that</a>. We are going to change the page’s title according to the text in the wireframe and focus on the document’s <code>&lt;body&gt;</code> from now on.</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>title</span><span data-sanitized-class="token punctuation">&gt;</span></span>The Weekly Prophet – Magical News from the Wizarding World<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>title</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<h2 data-sanitized-id="step-2-landmarks">Step 2: Landmarks</h2>
<p>Now is the time to place our first content areas we’ve already defined above in our HTML document. The great thing about HTML is that for all these areas we have semantic tags that describe exactly what the specific area means, so let’s make use of them!</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>body</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>header</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">	  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h1</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">		  The Weekly Prophet</span><br><span data-sanitized-class="highlight-line">		  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span>Magical News from the Wizarding World<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">	  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h1</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>header</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>nav</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>nav</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>main</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">	  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>section</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">		  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h2</span><span data-sanitized-class="token punctuation">&gt;</span></span>Top Stories<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h2</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">	  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>section</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">	  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>section</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">		  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h2</span><span data-sanitized-class="token punctuation">&gt;</span></span>Latest News<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h2</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">	  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>section</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">	  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>section</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">		  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h2</span><span data-sanitized-class="token punctuation">&gt;</span></span>Most Viewed<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h2</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">	  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>section</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">	  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>section</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">		  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h2</span><span data-sanitized-class="token punctuation">&gt;</span></span>What's Going on in Hogwarts?<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h2</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">	  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>section</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>main</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>aside</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">	  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h2</span><span data-sanitized-class="token punctuation">&gt;</span></span>Subscribe to our Owl Newsletter<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h2</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>aside</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>footer</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>footer</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>body</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p>When using semantic HTML tags like <code>header</code>, <code>nav</code>, <code>main</code>, and so on, we automatically define so-called <em>landmarks</em>, which are subsections of a page with a special role attached to them. This way, screenreader users, for example, can jump from one landmark to another and are enabled to get an overview of the page more quickly.</p>
<p>Sections are <a href="https://htmhell.dev/adventcalendar/2022/4/">only turned into landmarks when giving them an accessible name</a>, for example, by adding IDs to the <code>h2</code> headlines and using an <code>aria-labelledby</code> attribute on each section referencing the respective title.</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>section</span> <span data-sanitized-class="token attr-name">aria-labelledby</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>top-stories<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">	<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h2</span> <span data-sanitized-class="token attr-name">id</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>top-stories<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Top Stories<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h2</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>section</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<h2 data-sanitized-id="step-3-reusable-sections">Step 3: Reusable sections</h2>
<p>Next, I’d like to create the “frame” of the page, that means everything except the main content. The header contains the current date, a search input field, and the title. When I look at the page, the first element that draws my attention is the title, so I would put that first in the HTML code. This way, a screenreader would start reading the title and not the date. I can change the order of elements according to the design later using CSS.</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>header</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h1</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">	  The Weekly Prophet</span><br><span data-sanitized-class="highlight-line">	  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span>Magical News from the Wizarding World<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h1</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>time</span> <span data-sanitized-class="token attr-name">datetime</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>2022-09-01<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Thu, September 1st 2022<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>time</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>input</span> <span data-sanitized-class="token attr-name">type</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>search<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">placeholder</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>Search…<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>header</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>nav</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">	<span data-sanitized-class="token comment">&lt;!-- see below --&gt;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>nav</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<h3 data-sanitized-id="the-time-element">The time element</h3>
<p>To provide additional meaning, we can wrap the date with a <code>&lt;time&gt;</code> tag. With the additional <code>datetime</code> attribute we specify the exact date and make the value more accessible to e.g. search engines.</p>
<h3 data-sanitized-id="the-search-field-form">The search <s>field</s> form</h3>
<p>The thing about wireframes and screen designs is that not all required HTML elements and attributes might be obvious at first sight. We only see one input field in the top right corner, but there’s a lot more functionality required. Just adding this one field is not enough. The search functionality might be added by JavaScript later, but wouldn’t it be nice if we had a fallback in case this doesn’t work? To achieve that, we need a form that is going to replace the search input from above:</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>form</span> <span data-sanitized-class="token attr-name">action</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/search<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">role</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>search<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">	<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>label</span> <span data-sanitized-class="token attr-name">for</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>search-input<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Search articles<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>label</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">	<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>input</span> <span data-sanitized-class="token attr-name">type</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>search<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">id</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>search-input<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">placeholder</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>Search…<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">name</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>q<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span><br><span data-sanitized-class="highlight-line">	<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>input</span> <span data-sanitized-class="token attr-name">type</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>submit<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">value</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>Submit search<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>form</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p>Using CSS, we can hide the elements we don’t want to display while still providing accessible and robust HTML code for everyone. Including an action and a submit button in the <code>form</code> makes it possible to send a search request without no JavaScript involved. The label helps screenreader users find out what the input field is all about—a placeholder cannot replace a label. We use the <code>role</code> attribute to specify a search landmark—this is the only landmark role without a dedicated HTML tag.</p>
<h3 data-sanitized-id="the-navigation">The navigation</h3>
<p>One center piece of any website is <a href="https://web.dev/website-navigation/">the navigation</a>. It’s a place to start for the user to get an overview of the site and its subsections. To build a navigation, there’s no magic required, just a list of some good old anchor elements a.k.a. hyperlinks.</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>nav</span> <span data-sanitized-class="token attr-name">aria-label</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>Main<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">	<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>ul</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">		<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/news<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>News<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">		<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/ministry-magic<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Ministry of Magic<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">		<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/gringotts<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Gringotts<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">		<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/hogwarts<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Hogwarts<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">		<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/quidditch<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Quidditch<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">	<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>ul</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>nav</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p>I add an <code>aria-label</code> attribute to the navigation because there will be more <code>nav</code> elements in the footer; we need an indicator to distinguish the purpose of these navigation elements.</p>
<h3 data-sanitized-id="the-website-footer">The website footer</h3>
<p>At the end of the page, we can find a newsletter form and additional navigation content, similar to the header.</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>aside</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h2</span><span data-sanitized-class="token punctuation">&gt;</span></span>Subscribe to our Owl Newsletter<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h2</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>form</span> <span data-sanitized-class="token attr-name">action</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/subscribe<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">method</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>post<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">	  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>label</span> <span data-sanitized-class="token attr-name">for</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>name-input<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Name<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>label</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">	  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>input</span> <span data-sanitized-class="token attr-name">name</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>name<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">id</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>name-input<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span><br><span data-sanitized-class="highlight-line">	  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>label</span> <span data-sanitized-class="token attr-name">for</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>address-input<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Address<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>label</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">	  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>input</span> <span data-sanitized-class="token attr-name">name</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>address<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">id</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>address-input<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span><br><span data-sanitized-class="highlight-line">	  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>input</span> <span data-sanitized-class="token attr-name">type</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>submit<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">value</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>Subscribe<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>form</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>aside</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>footer</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">	<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">		<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h2</span> <span data-sanitized-class="token attr-name">id</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>footer-categories<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Top Categories<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h2</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">		<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>nav</span> <span data-sanitized-class="token attr-name">aria-labelledby</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>footer-categories<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">			<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>#<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>...<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">		<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>nav</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">	<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">	<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">		<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h2</span> <span data-sanitized-class="token attr-name">id</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>footer-company<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>The Company<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h2</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">		<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>nav</span> <span data-sanitized-class="token attr-name">aria-labelledby</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>footer-company<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">			<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>#<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>...<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">		<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>nav</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">	<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">	<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">		<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h2</span> <span data-sanitized-class="token attr-name">id</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>footer-spells<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Spells and Charms<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h2</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">		<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>nav</span> <span data-sanitized-class="token attr-name">aria-labelledby</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>footer-spells<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">			<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>#<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>...<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">		<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>nav</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">	<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>footer</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p>The <code>aside</code> tag contains additional content that is not directly related to the main content. I could take it and place it on a different page and it would still make sense. Similar to the search field above, a form is required to collect user data for newsletter subscriptions. Make sure that every input field gets its own meaningful label.</p>
<p>The columns in the footer are wrapped by <code>div</code> elements. They don’t carry any semantic information, but I’m sure I’m going to need this structure later when creating a layout in CSS. I don’t fill the navigations with all the links, but you get the idea.</p>
<p>Using the <code>aria-labelledby</code> attribute, I describe the navigation and its content similar to the <code>aria-label</code> attribute used above. The difference this time is that I use the ID of the describing element—the headlines above in our case—as the attribute value.</p>
<h2 data-sanitized-id="step-4-thinking-in-components">Step 4: Thinking in components</h2>
<p>Next, I’d like to focus on the main content: the four sections containing all the interesting articles. Each section looks slightly different, but nonetheless, it’s articles everywhere. They all have a lot in common. In the image below there are all different variants of articles where the same parts are highlighted in the same color:</p>
<ul>
<li>title (2)</li>
<li>image (1)</li>
<li>teaser text (3)</li>
<li>author (4)</li>
<li>date and time (4)</li>
</ul>
<a href="https://htmhell.dev/images/advent2022/8/03-wireframe-articles.png">
<img src="https://htmhell.dev/images/advent2022/8/03-wireframe-articles.png" alt="A drawing of the five different article layouts that can be found in the wireframe. The first one is the largest one and contains all elements that are described in the following section of this article. There are other layouts that contain only an image and a title or just a title and a teaser text." width="2510" height="1576">
</a>
<p>With a lot of libraries, frameworks, and design systems out there, we live in a component-driven web development world. When implementing a design, we try to find out which elements function the same and create reusable components for them. This is what I plan to do for the articles.</p>
<p>The first article in the “Top Stories” section contains all parts listed above, so this is the HTML structure I would use for it:</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>article</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>header</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">	  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h3</span><span data-sanitized-class="token punctuation">&gt;</span></span>Students returning to hogwarts<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h3</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">	  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>img</span> <span data-sanitized-class="token attr-name">src</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/path/to/image.jpg<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">alt</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>A descriptive alternative text for the image<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>header</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span>The day 73 kids waited the whole summer long is finally here: there first day at Hogwarts. The Sorting Hat is awaiting them in the castle already…<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>footer</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">	  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span>Rita Skeeter<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">	  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>time</span> <span data-sanitized-class="token attr-name">datetime</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>2022-09-01<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>01/09/2022<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>time</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>footer</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>article</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p>All the other articles use a reduced version of the snippet above, depending on the section where they occur. Here are three particularities in the code snippet above I’d like to highlight:</p>
<h3 data-sanitized-id="images-and-alternative-text">Images and alternative text</h3>
<p>Images that provide content should always have a meaningful alternative text that describes what’s in the image. This way, people who are visually impaired can consume the same content just another way. I always try writing good image descriptions right from the beginning to not forget about it when deadlines and launch dates come closer.</p>
<p>A common mistake is to just use the article’s title as alternative text, but it’s not likely that the title describes what can be seen on the image. In case the image is just a decorative item that does not provide any useful content, add an empty alternative text (<code>alt=""</code>), so a screenreader will ignore it.</p>
<h3 data-sanitized-id="the-document-outline">The document outline</h3>
<p>One problem I find on many websites on my daily journeys through the World Wide Web is a wrong order of headlines. People tend to choose the headline level (from one to six) based on the headline’s font size as defined by the user agent’s (the browser’s) style sheet and not their meaning.</p>
<p>In the end, it doesn’t matter whether the <code>h1</code> headline is smaller than the <code>h3</code> headline because the page is designed this way; what matters is that when only looking at the headlines on a page (by actually <em>looking</em> at the page or by using a screenreader that only <em>reads</em> the headlines), the user should get an idea of the content and its hierarchy. Imagine writing an article, a thesis, or a book and structuring your content into main sections, chapters, and sub-chapters—it’s the same principle for the web pages you create.</p>
<p>This is why I chose the <code>&lt;h3&gt;</code> tag for the article headline, because the <code>h1</code> headline is reserved for the page title “The Weekly Prophet” (there should only be <em>one</em> <code>&lt;h1&gt;</code> on a web page), and the <code>h2</code> headlines are used as headlines for the content sections.</p>
<h3 data-sanitized-id="multiple-headers-and-footers">Multiple headers and footers</h3>
<p>Unlike the <code>main</code> or the <code>h1</code> element, it is allowed to have several <code>header</code> and <code>footer</code> elements on a single page. The tags are not reserved solely for the page header and footer, but can be used in sub-components as well to define additional meaning for elements within so-called <em>sectioning content</em>. In our example, the sectioning content element is the <code>article</code> and we define a header for image and title and a footer for the meta information about the author and publish date. In this case, the header and footer aren’t landmarks, but add useful semantic information nonetheless.</p>
<h2 data-sanitized-id="step-5-last-small-details">Step 5: Last small details</h2>
<p>In two of the article sections, we can find additional links to category sub-pages. These should be implemented as simple links.</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/latest-news<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>View all articles<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/hogwarts<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Read more hogwarts news<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p>The wireframe is helpful here, as understandable link texts are already provided. Sometimes you have to work with designs that use just some generic texts for such links like “read more” or similar. When there are a lot of links with the same text on a page, it gets hard to find out where these links lead to without further context. Make sure to always provide meaningful link texts that tell the user what to expect when clicking on it.</p>
<h3 data-sanitized-id="one-more-thing">One more thing</h3>
<p>The section about the most viewed articles is about ranking. Therefore, I’d use an ordered list to wrap the articles that show up there.</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>section</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">	<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h2</span><span data-sanitized-class="token punctuation">&gt;</span></span>Most Viewed<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h2</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">	<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>ol</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">		<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">			<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>article</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token comment">&lt;!-- article content ---&gt;</span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>article</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">		<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">		<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">			<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>article</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token comment">&lt;!-- article content ---&gt;</span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>article</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">		<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">		<span data-sanitized-class="token comment">&lt;!-- and so on… --&gt;</span></span><br><span data-sanitized-class="highlight-line">	<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>ol</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>section</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<h2 data-sanitized-id="wrapping-up">Wrapping up</h2>
<p>That’s it, we’re done, we’ve built a fundamental HTML structure based on the given wireframe. 🎉</p>
<p>Here are my key takeaways for you:</p>
<ul>
<li>always remember to use available semantic HTML tags to define the content’s meaning</li>
<li>use only one <code>h1</code>  and <code>main</code> tag per page</li>
<li>take care of proper headline order, count from one to six and don’t skip levels</li>
<li>provide descriptive alternative texts for images (or leave the alt attribute empty when the image is just decorative)</li>
<li>use built-in functionality like links and forms for the user to interact with your site</li>
</ul>
<p>To make sure there are no syntax or semantic errors in your code, I recommend using tools like the <a href="https://validator.w3.org/">W3C validator</a> to run a quick check on your code. Sometimes you get helpful insights about what’s wrong and how to fix it.</p>
<p>It’s not that hard to take responsibility for building good HTML and consequently an accessible site, you can start with small first steps and make your way to the top from there.</p>


