# entry

guid: https://htmhell.dev/16-alt-no-aria-label-no-alt/
title: #16 alt, no wait…, aria-label, no wait…, alt
author: ;Manuel Matuzovic
link: https://htmhell.dev/16-alt-no-aria-label-no-alt/
hash: � KO�� �S�( 
attributes: {"enclosures":[]}
content:
<div data-sanitized-class="section bad">
<p>Context: A list of images that link to detail pages.</p>
<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>a</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>div</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>Browser Wars: The Last Engine<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>Browser Wars: The Last Engine<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 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">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>Browser Wars: The Last Engine<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>thumbnail.jpg<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 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>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>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.<br>
(<a href="https://htmhell.dev/16-alt-no-aria-label-no-alt/#foot-note1">HTML spec</a>)</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. <code>tabindex</code> makes them focusable, but the attribute is another indicator that a proper link would be a better choice here.</li>
<li><code>alt</code> is not allowed on <code>div</code> elements and it has no effect on their semantic meaning.</li>
<li>Avoid <code>aria</code> attributes when possible. The <code>aria-label</code> attribute on the <code>div</code> is redundant, because the <code>img</code> already has an accessible name (the value of the  <code>alt</code> attribute).</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>detail.html<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 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">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>Browser Wars: The Last Engine<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>thumbnail.jpg<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 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://html.spec.whatwg.org/#the-a-element" rel="noopener" data-sanitized-id="foot-note1">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>
</ul>
</div>


guid: https://htmhell.dev/17-inaccessible-cards/
title: #17 inaccessible cards
author: ;Manuel Matuzovic
link: https://htmhell.dev/17-inaccessible-cards/
hash: �32:*���A�zuf~N�
attributes: {"enclosures":[]}
content:
<div data-sanitized-class="section bad">
<p>Context: A list of linked cards, each with heading, image, and teaser text.</p>
<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>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>Overview<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>figure</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>card<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">data-url</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>image1.html<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token special-attr"><span data-sanitized-class="token attr-name">style</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 value css language-css"><span data-sanitized-class="token property">background</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>image1.jpg<span data-sanitized-class="token punctuation">)</span></span></span><span data-sanitized-class="token punctuation">"</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>figcaption</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">        <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h4</span><span data-sanitized-class="token punctuation">&gt;</span></span>My heading<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h4</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-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>Teasertext...<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>figcaption</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>figure</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>figure</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>card<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">data-url</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>image2.html<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token special-attr"><span data-sanitized-class="token attr-name">style</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 value css language-css"><span data-sanitized-class="token property">background</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>image2.jpg<span data-sanitized-class="token punctuation">)</span></span></span><span data-sanitized-class="token punctuation">"</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>figure</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-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>
<ol>
<li>You might not need (so many) <code>&lt;section&gt;</code>s. Read <a href="https://www.smashingmagazine.com/2020/01/html5-article-section/">Why You Should Choose HTML5 &lt;article&gt; Over &lt;section&gt;</a> by <a href="https://www.brucelawson.co.uk/">Bruce Lawson</a> for more details.</li>
<li>Heading levels shouldn’t be skipped. Screen reader users rely on a sound document outline and hierarchy. It helps with navigation and understanding how the page is structured.</li>
<li>The figure element represents content, optionally with a caption, that is self-contained, but in this example there’s no content, only a caption.</li>
<li>The image in a card usually isn’t decorative, it conveys information. It should be part of the HTML document and not added via CSS. Background images are not accessible to everyone.</li>
<li>The card is only linked via JavaScript. If there’s no proper HTML anchor (<code>&lt;a href="path/to/page"&gt;</code>), the “link” is inaccessible to screen reader and keyboard users.</li>
<li>The <code>&lt;h1&gt;</code> - <code>&lt;h6&gt;</code> elements represent introductory headings for their sections. The <code>&lt;h4&gt;</code> is flow content and thus technically allowed as a descendent of <code>figcaption</code>, but it’s better to use it to introduce the card as a whole.</li>
<li>The <code>article</code> element represents a self-contained composition in a page or site. This could be a newspaper article, an essay or report, a blog or other social media post. For a simple paragraph use <code>&lt;p&gt;</code>.</li>
<li>Making accessible cards where the whole card is clickable isn’t easy. Read the articles in the <a href="https://htmhell.dev/17-inaccessible-cards/#resources">resources</a> section for more information.</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>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>h2</span><span data-sanitized-class="token punctuation">&gt;</span></span>Overview<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>article</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>card<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>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>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>image1.html<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span> My heading <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>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>image1.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>Description of image1<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>p</span><span data-sanitized-class="token punctuation">&gt;</span></span>Teasertext...<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>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>article</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>card<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>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>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></code></pre>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="resources">Resources</h2>
<ul>
<li><a href="https://webaim.org/techniques/semanticstructure/">Semantic Structure</a></li>
<li><a href="https://adrianroselli.com/2020/02/block-links-cards-clickable-regions-etc.html">Block Links, Cards, Clickable Regions, Etc.</a></li>
<li><a href="https://inclusive-components.design/cards/">Inclusive Components: Cards</a></li>
<li><a href="https://justmarkup.com/articles/2020-02-21-teaser-with-multiple-links/">Teaser with multiple links</a></li>
<li><a href="https://css-tricks.com/block-links-are-a-pain-and-maybe-just-a-bad-idea/">Block Links Are a Pain (and Maybe Just a Bad Idea)</a></li>
</ul>
</div>


guid: https://htmhell.dev/18-main-divigation/
title: #18 main divigation
author: ;Manuel Matuzovic
link: https://htmhell.dev/18-main-divigation/
hash: ��x� %$� �D �I�
attributes: {"enclosures":[]}
content:
<div data-sanitized-class="section bad">
<p>Context: The main navigation of a personal website.</p>
<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>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>nav<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 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>about<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>thoughts<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>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>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>Use <code>&lt;nav&gt;</code> for the main navigation, it represents a <a href="https://www.scottohara.me/blog/2018/03/03/landmarks.html">landmark</a> with links to external or internal pages. Screen reader users may use shortcuts to access the navigation directly or skip it.</li>
<li>Use <code>&lt;ul&gt;</code> or <code>&lt;ol&gt;</code> to structure related links semantically and visually. Screen readers usually announce the number of items in a list.</li>
<li>If the order of items in the navigation matters, use <code>&lt;ol&gt;</code>, otherwise <code>&lt;ul&gt;</code>.</li>
<li>A click event on a <code>div</code> triggers only on click. Use <code>&lt;a href=""&gt;</code> to link to other pages. It’s (more) accessible to keyboard, screen reader, and mouse users than a fake JavaScript-only link.</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>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 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<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>/about<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>about<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>/thoughts<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>thoughts<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></code></pre>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="resources">Resources</h2>
<ul>
<li><a href="https://www.w3.org/TR/html52/sections.html#the-nav-element">4.3.4. The nav element</a></li>
<li><a href="https://www.w3.org/WAI/tutorials/menus/structure/">Menu Structure </a></li>
<li><a href="https://inclusive-components.design/menus-menu-buttons/">Menus &amp; Menu Buttons </a></li>
</ul>
</div>
```


guid: https://christitus.com/windows-update-security-only/
title: How to Install Only Security Updates on Windows 10
link: https://christitus.com/windows-update-security-only/
hash: ���p =VZ4'���[,
attributes: {"enclosures":[]}
content:
<p>This article shows how to install only security updates on Windows 10. This is vital to avoid long updates on startup or shutdown!</p>
<h2 data-sanitized-id="windows-10-pro-users---policy-editor-method">Windows 10 Pro Users - Policy Editor Method</h2>
<p>Open your Local Policy editor (Start - Run) and type <code>gpedit.msc</code><br>
From this screen go to <code>Computer - Administrative Templates - Windows Components - Windows Update - Windows Update for Business</code><br>
<img loading="lazy" src="https://christitus.com/images/2020/winupdate/gpedit.webp" alt="gpedit" data-sanitized-class="img-fluid"> </p>
<p>Now set the <em>Feature Updates</em> to the following<br>
<img loading="lazy" src="https://christitus.com/images/2020/winupdate/gpedit2.webp" alt="gpedit2" data-sanitized-class="img-fluid"> </p>
<p>For <em>Quality Updates</em>, I recommend deferring those 4 days.</p>
<h2 data-sanitized-id="windows-10-home-users---regedit-method">Windows 10 Home Users - Regedit Method</h2>
<p>Open up your registry editor (Start - Run) and type <code>regedit</code><br>
Go to the follow key <code>Computer\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\WindowsUpdate\UX\Settings</code><br>
Add the following DWORD Values (32-bit value):</p>
<ul>
<li>BranchReadinessLevel 20</li>
<li>DeferFeatureUpdatesPeriodInDays 365</li>
<li>DeferQualityUpdatesPeriodInDays 4</li>
</ul>
<p><img loading="lazy" src="https://christitus.com/images/2020/winupdate/regedit.webp" alt="regedit" data-sanitized-class="img-fluid"> </p>
<h2 data-sanitized-id="set-active-hours">Set Active Hours</h2>
<p>Under Settings and Updates &amp; Security, make sure to set your active hours! I always set these manually as the automatic method is horrible. Always set an 18 hour window where you want to make sure your computer doesn’t update.<br>
<em>My personal active hours are 8 AM to 2 AM.</em></p>
<h2 data-sanitized-id="video-walkthrough">Video Walkthrough</h2>
<h2 data-sanitized-id="conclusion">Conclusion</h2>
<p>These are settings that I recommend anyone using windows adopt. Otherwise, you will run into many update issues caused by the terrible quality control that goes into the first couple rounds of updates in Microsoft Windows 10.</p>


guid: https://jackkruse.com/?p=15184
title: HYPOXIA # 9: THE COLLATERAL FALL OUT OF C-19
author: ;Jack Kruse
link: https://jackkruse.com/hypoxia-9-the-collateral-fall-out-of-c-19/
hash: ��y�e�1cE���aH�
tags: #Series: Hypoxia
attributes: {"enclosures":[]}
content:
<a href="https://jackkruse.com/hypoxia-9-the-collateral-fall-out-of-c-19/#content" data-sanitized-class="skip-link screen-reader-text">Skip to content</a>
<div data-sanitized-id="boxed-wrapper">
<div data-sanitized-id="wrapper" data-sanitized-class="fusion-wrapper">

<header data-sanitized-class="fusion-header-wrapper"><div data-sanitized-class="fusion-header-v4 fusion-logo-alignment fusion-logo-left fusion-sticky-menu- fusion-sticky-logo- fusion-mobile-logo- fusion-sticky-menu-only fusion-header-menu-align-center fusion-mobile-menu-design-modern">


<div data-sanitized-class="fusion-sticky-header-wrapper">
<div data-sanitized-class="fusion-header">
<div data-sanitized-class="fusion-row">
<div data-margin-top="31px" data-margin-bottom="0px" data-margin-left="0px" data-margin-right="0px" data-sanitized-class="fusion-logo"><a href="https://jackkruse.com/" data-sanitized-class="fusion-logo-link"> <img src="https://jackkruse.com/wp-content/uploads/2017/07/logofull.png" width="428" height="104" alt="Dr. Jack Kruse Logo" data-retina_logo_url data-sanitized-class="fusion-standard-logo"></a>

</div>

</div>
</div>

</div>
</div>

</header>
<section aria-label="Page Title Bar" data-sanitized-class="avada-page-titlebar-wrapper">
</section><main data-sanitized-id="main" data-sanitized-class="clearfix"><div data-sanitized-class="fusion-row">
<section data-sanitized-id="content">
<article readability="21.286530612245" data-sanitized-id="post-15184" data-sanitized-class="post post-15184 type-post status-publish format-standard hentry category-series-hypoxia"><h2 data-sanitized-class="fusion-post-title">HYPOXIA # 9: THE COLLATERAL FALL OUT OF C-19</h2>
<div readability="28.972111553785" data-sanitized-class="post-content">
<div data-sanitized-class="pdfprnt-buttons pdfprnt-buttons-post pdfprnt-top-right"><a href="https://jackkruse.com/hypoxia-9-the-collateral-fall-out-of-c-19/?print=print" target="_blank" data-sanitized-class="pdfprnt-button pdfprnt-button-print"><img decoding="async" src="https://jackkruse.com/wp-content/plugins/pdf-print/images/print.png" alt="image_print" title="Print Content"><span data-sanitized-class="pdfprnt-button-title pdfprnt-button-print-title">Print PDF</span></a></div>
<p><img fetchpriority="high" decoding="async" src="https://optimalklubs.com/wp-content/uploads/2020/04/93648338_10222842972051668_7383560746220650496_n.jpg" alt width="620" height="614" data-sanitized-class="aligncenter size-full wp-image-6556"></p>
<p>Why is the WHO and the Chinese communist party facing the wrath of those who can think?</p>
<p>Both of them failed to utilize the precautionary principle with COVID-19.</p>
<p>Become an <a href="https://jackkruse.com/become-a-member/">Optimal Klub Member</a> or a <a href="https://www.patreon.com/posts/relationship-6-30531751">Patron on Patreon.com</a> to read the full blog.</p>
</div>

<div data-sanitized-class="fusion-sharing-box fusion-theme-sharing-box fusion-single-sharing-box">
<h4>Share This Story, Choose Your Platform!</h4>

</div>
<section data-sanitized-class="about-author">
<div data-sanitized-class="about-author-container">
<div data-sanitized-class="avatar"><img alt src="https://secure.gravatar.com/avatar/4ae9f0e14f78182b1acac51c851239ebcfa999448e25c2f93cf5f6a8bfc6d6aa" height="72" width="72" decoding="async" data-sanitized-class="avatar avatar-72 photo"></div>

</div>
</section><section data-sanitized-class="related-posts single-related-posts"><div data-sanitized-class="fusion-title fusion-title-size-three sep-double sep-solid">
<h3 data-sanitized-class="title-heading-left">Related Posts</h3>

</div>

</section></article></section></div>
</main>
</div>
</div>
<a tabindex="-1" href="https://jackkruse.com/hypoxia-9-the-collateral-fall-out-of-c-19/#" aria-hidden="true" data-sanitized-class="fusion-one-page-text-link fusion-page-load-link">Page load link</a>
<p>
</p>
<section aria-labelledby="awb-to-top-label" data-sanitized-class="to-top-container to-top-right"><a href="https://jackkruse.com/hypoxia-9-the-collateral-fall-out-of-c-19/#" data-sanitized-id="toTop" data-sanitized-class="fusion-top-top-link"><span data-sanitized-id="awb-to-top-label" data-sanitized-class="screen-reader-text">Go to Top</span></a></section>


guid: https://jackkruse.com/?p=15186
title: HYPOXIA #10: HOW DOES C-19 LINK TO NAD+ DESTRUCTION?
author: ;Jack Kruse
link: https://jackkruse.com/hypoxia-10-how-does-c-19-link-to-nad-destruction/
hash: %x�?�c��`Jʟ
tags: #Series: Hypoxia
attributes: {"enclosures":[]}
content:
<a href="https://jackkruse.com/hypoxia-10-how-does-c-19-link-to-nad-destruction/#content" data-sanitized-class="skip-link screen-reader-text">Skip to content</a>
<div data-sanitized-id="boxed-wrapper">
<div data-sanitized-id="wrapper" data-sanitized-class="fusion-wrapper">

<header data-sanitized-class="fusion-header-wrapper"><div data-sanitized-class="fusion-header-v4 fusion-logo-alignment fusion-logo-left fusion-sticky-menu- fusion-sticky-logo- fusion-mobile-logo- fusion-sticky-menu-only fusion-header-menu-align-center fusion-mobile-menu-design-modern">


<div data-sanitized-class="fusion-sticky-header-wrapper">
<div data-sanitized-class="fusion-header">
<div data-sanitized-class="fusion-row">
<div data-margin-top="31px" data-margin-bottom="0px" data-margin-left="0px" data-margin-right="0px" data-sanitized-class="fusion-logo"><a href="https://jackkruse.com/" data-sanitized-class="fusion-logo-link"> <img src="https://jackkruse.com/wp-content/uploads/2017/07/logofull.png" width="428" height="104" alt="Dr. Jack Kruse Logo" data-retina_logo_url data-sanitized-class="fusion-standard-logo"></a>

</div>

</div>
</div>

</div>
</div>

</header>
<section aria-label="Page Title Bar" data-sanitized-class="avada-page-titlebar-wrapper">
</section><main data-sanitized-id="main" data-sanitized-class="clearfix"><div data-sanitized-class="fusion-row">
<section data-sanitized-id="content">
<article readability="27.814295257181" data-sanitized-id="post-15186" data-sanitized-class="post post-15186 type-post status-publish format-standard hentry category-series-hypoxia"><h2 data-sanitized-class="fusion-post-title">HYPOXIA #10: HOW DOES C-19 LINK TO NAD+ DESTRUCTION?</h2>
<div readability="35.252941176471" data-sanitized-class="post-content">
<div data-sanitized-class="pdfprnt-buttons pdfprnt-buttons-post pdfprnt-top-right"><a href="https://jackkruse.com/hypoxia-10-how-does-c-19-link-to-nad-destruction/?print=print" target="_blank" data-sanitized-class="pdfprnt-button pdfprnt-button-print"><img decoding="async" src="https://jackkruse.com/wp-content/plugins/pdf-print/images/print.png" alt="image_print" title="Print Content"><span data-sanitized-class="pdfprnt-button-title pdfprnt-button-print-title">Print PDF</span></a></div>
<p><strong>Most people are not interested in learning what truth is.</strong> <strong>They would sooner sit in front of a box that continuously spits out lies and misinformation and entertains them.</strong> <strong>If that box emits blue light or nnEMF it might exacerbate an illness you have.</strong></p>
<p><strong>Did you know that NAD+/NADH in cytochrome 1 is a fluorophore protein complex that transfers electrons in the electron transport chain of the inner mitochondrial membrane?</strong></p>
<p>Become an <a href="https://jackkruse.com/become-a-member/">Optimal Klub Member</a> or a <a href="https://www.patreon.com/posts/relationship-6-30531751">Patron on Patreon.com</a> to read the full blog.</p>
</div>

<div data-sanitized-class="fusion-sharing-box fusion-theme-sharing-box fusion-single-sharing-box">
<h4>Share This Story, Choose Your Platform!</h4>

</div>
<section data-sanitized-class="about-author">
<div data-sanitized-class="about-author-container">
<div data-sanitized-class="avatar"><img alt src="https://secure.gravatar.com/avatar/4ae9f0e14f78182b1acac51c851239ebcfa999448e25c2f93cf5f6a8bfc6d6aa" height="72" width="72" decoding="async" data-sanitized-class="avatar avatar-72 photo"></div>

</div>
</section><section data-sanitized-class="related-posts single-related-posts"><div data-sanitized-class="fusion-title fusion-title-size-three sep-double sep-solid">
<h3 data-sanitized-class="title-heading-left">Related Posts</h3>

</div>

</section></article></section></div>
</main>
</div>
</div>
<a tabindex="-1" href="https://jackkruse.com/hypoxia-10-how-does-c-19-link-to-nad-destruction/#" aria-hidden="true" data-sanitized-class="fusion-one-page-text-link fusion-page-load-link">Page load link</a>
<p>
</p>
<section aria-labelledby="awb-to-top-label" data-sanitized-class="to-top-container to-top-right"><a href="https://jackkruse.com/hypoxia-10-how-does-c-19-link-to-nad-destruction/#" data-sanitized-id="toTop" data-sanitized-class="fusion-top-top-link"><span data-sanitized-id="awb-to-top-label" data-sanitized-class="screen-reader-text">Go to Top</span></a></section>


guid: https://htmhell.dev/19-heading-in-the-wrong-direction/
title: #19 heading in the wrong direction
author: ;Manuel Matuzovic
link: https://htmhell.dev/19-heading-in-the-wrong-direction/
hash: �h�ho�ռ_^}6�ͺ
attributes: {"enclosures":[]}
content:
<div data-sanitized-class="section bad">
<p>Context: A simple page that displays the availability of a product.</p>
<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 punctuation">&gt;</span></span>Product Status<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>h2</span><span data-sanitized-class="token punctuation">&gt;</span></span>Is the product available?<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>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>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></span><br><span data-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><br><span data-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 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>message is-success<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">            It‘s <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>available<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>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>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><br><span data-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>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></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>h1 – h6</code> elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection.<sup><a href="https://htmhell.dev/19-heading-in-the-wrong-direction/#resources">1</a></sup></li>
<li>All <code>div</code> elements in this specific example are superfluous. It’s likely that they only exist because a front-end framework adds them by default. Use <a href="https://reactjs.org/docs/fragments.html">Fragments in React</a> or similar techniques in other frameworks to avoid unnecessary markup.</li>
<li>Try to avoid excessive <abbr title="Document Object Model">DOM</abbr> sizes. Too many <abbr title="Document Object Model">DOM</abbr> nodes and nested <abbr title="Document Object Model">DOM</abbr> elements may harm your page performance.</li>
<li>A large <abbr title="Document Object Model">DOM</abbr> tree results in a large accessibility tree, which may have a bad impact on the performance of assistive technology.</li>
<li>Only <a href="https://www.w3.org/TR/html52/dom.html#phrasing-content">phrasing content</a> is allowed as children and descendants of <code>h1 – h6</code> elements. (<code>h3</code> and <code>div</code> don’t fall in the phrasing content category).</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/19-heading-in-the-wrong-direction/#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>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/19-heading-in-the-wrong-direction/#resources">3</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>
</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>h1</span><span data-sanitized-class="token punctuation">&gt;</span></span>Product Status<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>p</span><span data-sanitized-class="token punctuation">&gt;</span></span>Is the product available?<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 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>message is-success<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">   It‘s <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>/product.html<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>available<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>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="resources">Resources</h2>
<ol>
<li><a href="https://www.w3.org/TR/html52/common-idioms-without-dedicated-elements.html#common-idioms-without-dedicated-elements">4.13.1. Subheadings, subtitles, alternative titles and taglines</a></li>
<li><a href="https://www.w3.org/TR/html52/textlevel-semantics.html#the-i-element">4.5.22. The i element</a></li>
<li><a href="https://html.spec.whatwg.org/#the-a-element">4.5.1 The a element</a></li>
</ol>
</div>
```


guid: https://jackkruse.com/?p=15188
title: HYPOXIA #11: HOW DOES HYPOXIA LINK TO INFERTILITY?
author: ;Jack Kruse
link: https://jackkruse.com/hypoxia-11-how-does-hypoxia-link-to-infertility/
hash: WJ ���L*Tk� �{W
tags: #Series: Hypoxia
attributes: {"enclosures":[]}
content:
<a href="https://jackkruse.com/hypoxia-11-how-does-hypoxia-link-to-infertility/#content" data-sanitized-class="skip-link screen-reader-text">Skip to content</a>
<div data-sanitized-id="boxed-wrapper">
<div data-sanitized-id="wrapper" data-sanitized-class="fusion-wrapper">

<header data-sanitized-class="fusion-header-wrapper"><div data-sanitized-class="fusion-header-v4 fusion-logo-alignment fusion-logo-left fusion-sticky-menu- fusion-sticky-logo- fusion-mobile-logo- fusion-sticky-menu-only fusion-header-menu-align-center fusion-mobile-menu-design-modern">


<div data-sanitized-class="fusion-sticky-header-wrapper">
<div data-sanitized-class="fusion-header">
<div data-sanitized-class="fusion-row">
<div data-margin-top="31px" data-margin-bottom="0px" data-margin-left="0px" data-margin-right="0px" data-sanitized-class="fusion-logo"><a href="https://jackkruse.com/" data-sanitized-class="fusion-logo-link"> <img src="https://jackkruse.com/wp-content/uploads/2017/07/logofull.png" width="428" height="104" alt="Dr. Jack Kruse Logo" data-retina_logo_url data-sanitized-class="fusion-standard-logo"></a>

</div>

</div>
</div>

</div>
</div>

</header>
<section aria-label="Page Title Bar" data-sanitized-class="avada-page-titlebar-wrapper">
</section><main data-sanitized-id="main" data-sanitized-class="clearfix"><div data-sanitized-class="fusion-row">
<section data-sanitized-id="content">
<article readability="31.507364544976" data-sanitized-id="post-15188" data-sanitized-class="post post-15188 type-post status-publish format-standard hentry category-series-hypoxia"><h2 data-sanitized-class="fusion-post-title">HYPOXIA #11: HOW DOES HYPOXIA LINK TO INFERTILITY?</h2>
<div readability="34.135667396061" data-sanitized-class="post-content">
<div data-sanitized-class="pdfprnt-buttons pdfprnt-buttons-post pdfprnt-top-right"><a href="https://jackkruse.com/hypoxia-11-how-does-hypoxia-link-to-infertility/?print=print" target="_blank" data-sanitized-class="pdfprnt-button pdfprnt-button-print"><img decoding="async" src="https://jackkruse.com/wp-content/plugins/pdf-print/images/print.png" alt="image_print" title="Print Content"><span data-sanitized-class="pdfprnt-button-title pdfprnt-button-print-title">Print PDF</span></a></div>

<p><a href="https://www.wsj.com/articles/u-s-birthrates-fall-to-record-low-11589947260" target="_blank" rel="noopener noreferrer">U.S. Birthrates Fall to a Record Low (click here to read article)</a></p>
<p><u><strong>Alchemist &amp; Metaphysician</strong></u> = ancestral dogmatic beliefs are that biochemistry is definitive science.  Biochemistry is really a solid state story of how light alters valence electrons within hydrated semiconductive proteins. This light is capable of changing their physiologic ability as the electromagnetic signals on the surfaces of them changes geometry in their lattice.  This is why electromagnetic charge changes always involve shape shifting of proteins made by DNA surrounded by water made by mitochondria. Life runs on being able to harness the energy of an excited electron to the ground state. Life cannot do this well when pseudohypoxia exists at cytochrome one with lowered NAD+. Technology’s nnEMF and blue light cause this quickest today.</p>
<p><img fetchpriority="high" decoding="async" src="https://optimalklubs.com/wp-content/uploads/2020/05/46625852_10215419042048016_2582168771108012032_o.jpg" alt width="1070" height="796" data-sanitized-class="aligncenter size-full wp-image-6601"></p>
<p>Become an <a href="https://jackkruse.com/become-a-member/">Optimal Klub Member</a> or a <a href="https://www.patreon.com/posts/relationship-6-30531751">Patron on Patreon.com</a> to read the full blog.</p>
</div>

<div data-sanitized-class="fusion-sharing-box fusion-theme-sharing-box fusion-single-sharing-box">
<h4>Share This Story, Choose Your Platform!</h4>

</div>
<section data-sanitized-class="about-author">
<div data-sanitized-class="about-author-container">
<div data-sanitized-class="avatar"><img alt src="https://secure.gravatar.com/avatar/4ae9f0e14f78182b1acac51c851239ebcfa999448e25c2f93cf5f6a8bfc6d6aa" height="72" width="72" decoding="async" data-sanitized-class="avatar avatar-72 photo"></div>

</div>
</section><section data-sanitized-class="related-posts single-related-posts"><div data-sanitized-class="fusion-title fusion-title-size-three sep-double sep-solid">
<h3 data-sanitized-class="title-heading-left">Related Posts</h3>

</div>

</section></article></section></div>
</main>
</div>
</div>
<a tabindex="-1" href="https://jackkruse.com/hypoxia-11-how-does-hypoxia-link-to-infertility/#" aria-hidden="true" data-sanitized-class="fusion-one-page-text-link fusion-page-load-link">Page load link</a>
<p>
</p>
<section aria-labelledby="awb-to-top-label" data-sanitized-class="to-top-container to-top-right"><a href="https://jackkruse.com/hypoxia-11-how-does-hypoxia-link-to-infertility/#" data-sanitized-id="toTop" data-sanitized-class="fusion-top-top-link"><span data-sanitized-id="awb-to-top-label" data-sanitized-class="screen-reader-text">Go to Top</span></a></section>


guid: https://htmhell.dev/20-close-buttons/
title: #20 HTMHell special: close buttons
author: ;Manuel Matuzovic
link: https://htmhell.dev/20-close-buttons/
hash: v�F�)��T�8��?
attributes: {"enclosures":[]}
content:
<div data-sanitized-class="section">
<p>This first HTMHell special inspects one of the most complicated and most controversial patterns in front-end development:</p>
<p>🔥 the close button. 🔥</p>
<p>In modals, ads, and other overlays you often find a button with a close symbol that allows users, or at least some of them, to close the overlay. This functionality is often limited to mouse users, because most implementations of close buttons suck.</p>
<p>After less than 2 hours of research, HTMHell presents a collection of 11 different bad practices.</p>
<h2 data-sanitized-id="pattern-1-div-and-background-image">Pattern 1: div and background image</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>close<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>
<pre data-sanitized-class="language-css"><code data-sanitized-class="language-css"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token selector">.close::after</span> <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> <span data-sanitized-class="token url"><span data-sanitized-class="token function">url</span><span data-sanitized-class="token punctuation">(</span><span data-sanitized-class="token string url">"close.png"</span><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">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">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.</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 alternative for the background image.</li>
<li>Screen readers announce: Nothing.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="pattern-2-div-and-icon">Pattern 2: div and icon</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>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><br><span data-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-2">Issues and how to fix them</h3>
<ol>
<li>✕ doesn’t represent <em>close</em> or <em>crossed out</em>, it’s the multiplication sign, like in 2 ✕ (times) 2. Don’t use it for close buttons.</li>
<li>See Pattern 1 for details about the <code>&lt;div&gt;</code>.</li>
<li>Screen readers may announce: something like “multiplication x” or “times”.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="pattern-3-font-awesome-icons">Pattern 3: Font Awesome icons</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>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>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>fas fa-times<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>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">.fa-times::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">'\f00d'</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-3">Issues and how to fix them</h3>
<ol>
<li>Screen readers may announce CSS generated content.<sup><a href="https://htmhell.dev/20-close-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>Font Awesome adds Unicode content via the <code>::before</code> pseudo element. Assistive technology may announce the Unicode equivalent, which in this specific example would be “times” since <a href="https://fontawesome.com/icons/times">fa-times is not a cross but a multiplication sign</a>. (Please note: Talkback and VoiceOver didn’t announce anything in this example.)</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/20-close-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>See Pattern 1 for details about the <code>&lt;div&gt;</code>.</li>
<li>Screen readers may announce: “times”.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="pattern-4-a-close-link">Pattern 4: A close 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">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>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>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">a::after</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">font-size</span><span data-sanitized-class="token punctuation">:</span> 28px<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">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-4">Issues and how to fix them</h3>
<ol>
<li>If the <code>a</code> element has an <code>href</code> attribute, it represents a link to another resource like a page or a <abbr title="Portable Document Format">PDF</abbr> document.</li>
<li>The purpose of the element in this example is to trigger an action on the same page with JavaScript. The <code>button</code> element with the type button is more suitable because it has no default behaviour and it’s designed to trigger actions on user input.</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>Screen readers may announce CSS generated content.<sup><a href="https://htmhell.dev/20-close-buttons/#resources"><span data-sanitized-class="u-hidden">Footnote</span>1</a></sup> ✕ doesn’t represent <em>close</em> or <em>crossed out</em>, it’s the multiplication sign, like in 2 ✕ (times) 2. Don’t use it for close buttons.</li>
<li>Screen readers may announce: “link, times”.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="pattern-5-a-close-link-with-text">Pattern 5: A close link with text</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>#<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>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">  Close</span><br><span data-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">.close::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">"\e028"</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-5">Issues and how to fix them</h3>
<ol>
<li>Nice try, but it’s still a link and not a button.</li>
<li>See Pattern 4 for details about <code>&lt;a&gt;</code> and CSS generated content.</li>
<li>Screen readers may announce: “link, times close”.</li>
</ol>
</div>  
<div data-sanitized-class="section">
<h2 data-sanitized-id="pattern-6-a-close-link-without-the-href-attribute">Pattern 6: A close link without the <code>href</code> attribute</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>close<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token special-attr"><span data-sanitized-class="token attr-name">onclick</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 value javascript language-javascript"><span data-sanitized-class="token function">close</span><span data-sanitized-class="token punctuation">(</span><span data-sanitized-class="token punctuation">)</span></span><span data-sanitized-class="token punctuation">"</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>a</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>Another nice try, but 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/20-close-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>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>Screen readers may announce: “times, clickable.”</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="pattern-7-placeholder-link-and-img">Pattern 7: Placeholder link and img</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 special-attr"><span data-sanitized-class="token attr-name">onclick</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 value javascript language-javascript"><span data-sanitized-class="token function">close</span><span data-sanitized-class="token punctuation">(</span><span data-sanitized-class="token punctuation">)</span><span data-sanitized-class="token punctuation">;</span></span><span data-sanitized-class="token punctuation">"</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>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>close.png<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></code></pre>
<h3 data-sanitized-id="issues-and-how-to-fix-them-7">Issues and how to fix them</h3>
<ol>
<li>There’s no text alternative for the image. Screen readers may announce the filename instead.</li>
<li>See Pattern 6 for details about placeholder links.</li>
<li>Screen readers may announce: “close.png, image.”</li>
</ol>
</div>
<div data-sanitized-class="section bad">
<h2 data-sanitized-id="pattern-8-radio-button">Pattern 8: Radio 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>label</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>close<span data-sanitized-class="token punctuation">"</span></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>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>svg</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>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">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>close<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>radio<span data-sanitized-class="token punctuation">"</span></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">[type="radio"]</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> none<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-8">Issues and how to fix them</h3>
<ol>
<li>When accessibility advocates say “<a href="https://www.youtube.com/watch?v=CZGqnp06DnI">Just use button</a>” they mean the <code>button</code> element, not radio buttons.</li>
<li>Radio buttons are used in radio button groups describing <strong>a set of related options</strong>.</li>
<li>The SVG has no text alternative. Read <a href="https://www.deque.com/blog/creating-accessible-svgs/">Creating Accessible SVGs</a> by <a href="https://cariefisher.com/">Carie Fisher</a> to learn how to make SVGs accessible.</li>
<li><code>display: none</code> on the <code>input</code> make the <code>label</code> inaccessible, too.</li>
<li>Screen readers may announce: Nothing.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="pattern-9-button-with-icon">Pattern 9: Button with icon</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>close<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><br><span data-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-9">Issues and how to fix them</h3>
<ol>
<li>✕ doesn’t represent <em>close</em> or <em>crossed out</em>, it’s the multiplication sign, like in 2 ✕ (times) 2. Don’t use it for close buttons.</li>
<li>Screen readers may announce: “times, button”.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="pattern-10-button-with-svg">Pattern 10: Button with svg</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>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>svg</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>
<h3 data-sanitized-id="issues-and-how-to-fix-them-10">Issues and how to fix them</h3>
<ol>
<li>The SVG has no text alternative. Read <a href="https://www.deque.com/blog/creating-accessible-svgs/">Creating Accessible SVGs</a> by <a href="https://cariefisher.com/">Carie Fisher</a> to learn how to make SVGs accessible.</li>
<li>Screen readers may announce: “button”.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="pattern-11-the-good-ol-x">Pattern 11: The good ol' X</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>button<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>X<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-11">Issues and how to fix them</h3>
<ol>
<li>Setting button semantics explicitly using the <code>role</code> attribute isn’t necessary, there’s an element for that (<code>button</code>).</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>See Pattern 1 for details about the <code>&lt;div&gt;</code>.</li>
<li>The letter X is not a close icon.</li>
<li>Screen readers may announce: “X, button”.</li>
</ol>
<blockquote>
  Using "x" for your close buttons is like using salt in your coffee cause it looks the same as sugar.
</blockquote>
<cite><a href="https://twitter.com/mxbck/status/1187446513284325376">Max Böck</a></cite>
</div>
<div data-sanitized-class="section">
<p>You can find all <a href="https://codepen.io/matuzo/pen/qBOvagg?editors=1100">bad practices on CodePen</a>.</p>
</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 punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  Close</span><br><span data-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 type="button">Close</button></p>
<ol>
<li>Text only: easy to implement and comprehensible.</li>
<li>Screen readers may announce: “Close, 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 punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  Close</span><br><span data-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>button</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<button type="button">
  Close
  <span aria-hidden="true">×</span>
</button>
<ol>
<li>If you really have to use the times 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: “Close, 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 punctuation">&gt;</span></span></span><br><span data-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>Close<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>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</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>
<button type="button">
  <span data-sanitized-class="u-hidden">Close</span>
  <span aria-hidden="true">×</span>
</button>
<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: “Close, button”.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h3 data-sanitized-id="solution-4-a-button-with-hidden-text-and-only-visually-accessible-icon">Solution 4: 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-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>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>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>button</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<button type="button" aria-label="Close">
  <span aria-hidden="true">×</span>
</button>
<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: “Close, button”.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h3 data-sanitized-id="solution-5-font-awesome">Solution 5: Font Awesome</h3>
<p>For the sake of completeness, a close button with a Font Awesome icon.</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>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">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>close<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>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>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>fa fa-times<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 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>
</div>
<div data-sanitized-class="section">
<h3 data-sanitized-id="general-remarks">General remarks</h3>
<p>Sometimes it makes sense to use more descriptive labels like “Close dialog”, “Close gallery”, or “Close ad”.</p>
<p>If you use third party solutions for modals, dialogs, etc., please check how they’ve been implemented before you add them to your site. Don’t rely on others for code quality and accessibility.</p>
<p>You can find all <a href="https://codepen.io/matuzo/pen/zYvbmvm?editors=1100">close button best practices on CodePen</a>.</p>
</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>


guid: https://jackkruse.com/?p=15190
title: HYPOXIA # 12: SUNLIGHT DESTROYS HYPOXIA
author: ;Jack Kruse
link: https://jackkruse.com/hypoxia-12-sunlight-destroys-hypoxia/
hash: ������qƸ���]ͧ
tags: #Series: Hypoxia
attributes: {"enclosures":[]}
content:
<a href="https://jackkruse.com/hypoxia-12-sunlight-destroys-hypoxia/#content" data-sanitized-class="skip-link screen-reader-text">Skip to content</a>
<div data-sanitized-id="boxed-wrapper">
<div data-sanitized-id="wrapper" data-sanitized-class="fusion-wrapper">

<header data-sanitized-class="fusion-header-wrapper"><div data-sanitized-class="fusion-header-v4 fusion-logo-alignment fusion-logo-left fusion-sticky-menu- fusion-sticky-logo- fusion-mobile-logo- fusion-sticky-menu-only fusion-header-menu-align-center fusion-mobile-menu-design-modern">


<div data-sanitized-class="fusion-sticky-header-wrapper">
<div data-sanitized-class="fusion-header">
<div data-sanitized-class="fusion-row">
<div data-margin-top="31px" data-margin-bottom="0px" data-margin-left="0px" data-margin-right="0px" data-sanitized-class="fusion-logo"><a href="https://jackkruse.com/" data-sanitized-class="fusion-logo-link"> <img src="https://jackkruse.com/wp-content/uploads/2017/07/logofull.png" width="428" height="104" alt="Dr. Jack Kruse Logo" data-retina_logo_url data-sanitized-class="fusion-standard-logo"></a>

</div>

</div>
</div>

</div>
</div>

</header>
<section aria-label="Page Title Bar" data-sanitized-class="avada-page-titlebar-wrapper">
</section><main data-sanitized-id="main" data-sanitized-class="clearfix"><div data-sanitized-class="fusion-row">
<section data-sanitized-id="content">
<article readability="22.208430913349" data-sanitized-id="post-15190" data-sanitized-class="post post-15190 type-post status-publish format-standard hentry category-series-hypoxia"><h2 data-sanitized-class="fusion-post-title">HYPOXIA # 12: SUNLIGHT DESTROYS HYPOXIA</h2>
<div readability="32.5" data-sanitized-class="post-content">
<div data-sanitized-class="pdfprnt-buttons pdfprnt-buttons-post pdfprnt-top-right"><a href="https://jackkruse.com/hypoxia-12-sunlight-destroys-hypoxia/?print=print" target="_blank" data-sanitized-class="pdfprnt-button pdfprnt-button-print"><img decoding="async" src="https://jackkruse.com/wp-content/plugins/pdf-print/images/print.png" alt="image_print" title="Print Content"><span data-sanitized-class="pdfprnt-button-title pdfprnt-button-print-title">Print PDF</span></a></div>
<p><strong>What is the Real Cause of Influenza Epidemics?</strong></p>
<p>Influenza does not follow the predicted patterns for infectious diseases. In fact, there are several conundrums associated with influenza epidemics, such as:</p>
<p>Become an <a href="https://jackkruse.com/become-a-member/">Optimal Klub Member</a> or a <a href="https://www.patreon.com/posts/relationship-6-30531751">Patron on Patreon.com</a> to read the full blog.</p>
</div>

<div data-sanitized-class="fusion-sharing-box fusion-theme-sharing-box fusion-single-sharing-box">
<h4>Share This Story, Choose Your Platform!</h4>

</div>
<section data-sanitized-class="about-author">
<div data-sanitized-class="about-author-container">
<div data-sanitized-class="avatar"><img alt src="https://secure.gravatar.com/avatar/4ae9f0e14f78182b1acac51c851239ebcfa999448e25c2f93cf5f6a8bfc6d6aa" height="72" width="72" decoding="async" data-sanitized-class="avatar avatar-72 photo"></div>

</div>
</section><section data-sanitized-class="related-posts single-related-posts"><div data-sanitized-class="fusion-title fusion-title-size-three sep-double sep-solid">
<h3 data-sanitized-class="title-heading-left">Related Posts</h3>

</div>

</section></article></section></div>
</main>
</div>
</div>
<a tabindex="-1" href="https://jackkruse.com/hypoxia-12-sunlight-destroys-hypoxia/#" aria-hidden="true" data-sanitized-class="fusion-one-page-text-link fusion-page-load-link">Page load link</a>
<p>
</p>
<section aria-labelledby="awb-to-top-label" data-sanitized-class="to-top-container to-top-right"><a href="https://jackkruse.com/hypoxia-12-sunlight-destroys-hypoxia/#" data-sanitized-id="toTop" data-sanitized-class="fusion-top-top-link"><span data-sanitized-id="awb-to-top-label" data-sanitized-class="screen-reader-text">Go to Top</span></a></section>


guid: https://christitus.com/wsl2/
title: Wsl2
link: https://christitus.com/wsl2/
hash: zx����9��s �=f
attributes: {"enclosures":[]}
content:
<p>This article goes over WSL 1 and 2 for Feature Update 2004. This will help you know which WSL you are currently using for any Linux installs on your PC.</p>
<p><em>Source Article: <a href="https://docs.microsoft.com/en-us/windows/wsl/install-win10">https://docs.microsoft.com/en-us/windows/wsl/install-win10</a> I copy these because Microsoft is notorious for changing URLs and to make additions</em></p>
<h2 data-sanitized-id="install-the-windows-subsystem-for-linux">Install the Windows Subsystem for Linux</h2>
<p>Before installing any Linux distributions on Windows, you must enable the “Windows Subsystem for Linux” optional feature.<br>
<strong>Open PowerShell as Administrator and run:</strong></p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
</span></span></code></pre></div><p>To only install WSL 1, you should now restart your machine and move on to Install your Linux distribution of choice, otherwise wait to restart and move on to update to WSL 2. Read more about Comparing WSL 2 and WSL 1.</p>
<h2 data-sanitized-id="update-to-wsl-2">Update to WSL 2</h2>
<p>To update to WSL 2, you must meet the follow criteria:</p>
<ul>
<li>Running Windows 10, updated to version 2004, Build 19041 or higher.</li>
<li>Check your Windows version by selecting the Windows logo key + R, type <code>winver</code>, select OK. (Or enter the ver command in Windows Command Prompt). Please update to the latest Windows version if your build is lower than 19041. Get Windows Update Assistant.</li>
<li>Enable the ‘Virtual Machine Platform’ optional component</li>
</ul>
<p>Before installing WSL 2, you must enable the “Virtual Machine Platform” optional feature.<br>
<strong>Open PowerShell as Administrator and run:</strong></p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart
</span></span></code></pre></div><p>Restart your machine to complete the WSL install and update to WSL 2.</p>
<h3 data-sanitized-id="set-wsl-2-as-your-default-version">Set WSL 2 as your default version</h3>
<p>Run the following command in Powershell to set WSL 2 as the default version when installing a new Linux distribution:</p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">wsl --set-default-version 2
</span></span></code></pre></div><p><em>Note: The update from WSL 1 to WSL 2 may take several minutes to complete depending on the size of your targeted distribution.</em></p>
<h4 data-sanitized-id="troubleshooting-wsl-2-set-default-error">Troubleshooting WSL 2 set-default error</h4>
<p><img loading="lazy" src="https://christitus.com/images/2020/wsl/wsl-kernel.webp" alt="wsl-kernel" data-sanitized-class="img-fluid"> <br>
If you can’t set the default version after enabling the virtual machine platform and linux subsystem for windows. Then you need to do a kernel upgrade. This done by running the following msi file: <a href="https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi">https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi</a></p>
<h2 data-sanitized-id="install-your-linux-distribution-of-choice">Install your Linux distribution of choice</h2>
<p>Open the Microsoft Store and select your favorite Linux distribution.<br>
<img loading="lazy" src="https://christitus.com/images/2020/wsl/wsl-store.webp" alt="wsl-store" data-sanitized-class="img-fluid"> <br>
The following links will open the Microsoft store page for each distribution:</p>
<ul>
<li><a href="https://www.microsoft.com/store/apps/9pjn388hp8c9">Ubuntu 16.04 LTS</a></li>
<li><a href="https://www.microsoft.com/store/apps/9N9TNGVNDL3Q">Ubuntu 18.04 LTS</a></li>
<li><a href="https://www.microsoft.com/store/apps/9n6svws3rx71">Ubuntu 20.04 LTS</a></li>
<li><a href="https://www.microsoft.com/store/apps/9NJFZK00FGKV">openSUSE Leap 15.1</a></li>
<li><a href="https://www.microsoft.com/store/apps/9MZ3D1TRP8T1">SUSE Linux Enterprise Server 12 SP5</a></li>
<li><a href="https://www.microsoft.com/store/apps/9PN498VPMF3Z">SUSE Linux Enterprise Server 15 SP1</a></li>
<li><a href="https://www.microsoft.com/store/apps/9PKR34TNCV07">Kali Linux</a></li>
<li><a href="https://www.microsoft.com/store/apps/9MSVKQC78PK6">Debian GNU/Linux</a></li>
<li><a href="https://www.microsoft.com/store/apps/9n6gdm4k2hnc">Fedora Remix for WSL</a></li>
<li><a href="https://www.microsoft.com/store/apps/9NV1GV1PXZ6P">Pengwin</a></li>
<li><a href="https://www.microsoft.com/store/apps/9N8LP0X93VCP">Pengwin Enterprise</a></li>
<li><a href="https://www.microsoft.com/store/apps/9p804crf0395">Alpine WSL</a></li>
</ul>
<p>From the distribution’s page, select “Get”.<br>
<img loading="lazy" src="https://christitus.com/images/2020/wsl/wsl-store2.webp" alt="wsl-store2" data-sanitized-class="img-fluid"> </p>
<h2 data-sanitized-id="set-up-a-new-distribution">Set up a new distribution</h2>
<p>The first time you launch a newly installed Linux distribution, a console window will open and you’ll be asked to wait for a minute or two for files to de-compress and be stored on your PC. All future launches should take less than a second.
You will then need to create a user account and password for your new Linux distribution.<br>
<img loading="lazy" src="https://christitus.com/images/2020/wsl/wsl-prompt.webp" alt="wsl-prompt" data-sanitized-class="img-fluid"> <br>
Set your distribution version to WSL 1 or WSL 2<br>
You can check the WSL version assigned to each of the Linux distributions you have installed by opening the PowerShell command line and entering the command (only available in Windows Build 19041 or higher): <code>wsl -l -v</code></p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">wsl --list --verbose
</span></span></code></pre></div><p>To set a distribution to be backed by either version of WSL please run:</p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">wsl --set-version &lt;distribution name&gt; &lt;versionNumber&gt;
</span></span></code></pre></div><p>Make sure to replace <distribution name> with the actual name of your distribution and <versionnumber> with the number ‘1’ or ‘2’. You can change back to WSL 1 at anytime by running the same command as above but replacing the ‘2’ with a ‘1’.<br>
Additionally, if you want to make WSL 2 your default architecture you can do so with this command:</versionnumber></distribution></p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">wsl --set-default-version 2
</span></span></code></pre></div><p><em>Note: This will set the version of any new distribution installed to WSL 2.</em></p>
<h2 data-sanitized-id="troubleshooting-installation">Troubleshooting installation</h2>
<p>Below are related errors and suggested fixes. Refer to the WSL troubleshooting page for other common errors and their solutions.</p>
<h4 data-sanitized-id="installation-failed-with-error-0x80070003">Installation failed with error 0x80070003</h4>
<p>The Windows Subsystem for Linux only runs on your system drive (usually this is your C: drive). Make sure that distributions are stored on your system drive:<br>
<strong>Open Settings -&gt; Storage -&gt; More Storage Settings:</strong> Change where new content is saved<br>
<img loading="lazy" src="https://christitus.com/images/2020/wsl/wsl-troubleshoot.webp" alt="wsl-troubleshoot" data-sanitized-class="img-fluid"> </p>
<h4 data-sanitized-id="wslregisterdistribution-failed-with-error-0x8007019e">WslRegisterDistribution failed with error 0x8007019e</h4>
<p>The Windows Subsystem for Linux optional component is not enabled:<br>
<strong>Open Control Panel -&gt; Programs and Features -&gt; Turn Windows Feature on or off -&gt; Check Windows Subsystem for Linux or using the PowerShell cmdlet mentioned at the beginning of this article.</strong></p>
<h4 data-sanitized-id="installation-failed-with-error-0x80070003-or-error-0x80370102">Installation failed with error 0x80070003 or error 0x80370102</h4>
<p>Please make sure that virtualization is enabled inside of your computer’s BIOS. The instructions on how to do this will vary from computer to computer, and will most likely be under CPU related options.</p>
<h4 data-sanitized-id="error-when-trying-to-upgrade-invalid-command-line-option-wsl---set-version-ubuntu-2">Error when trying to upgrade: Invalid command line option: wsl –set-version Ubuntu 2</h4>
<p>Please make sure that you have the Windows Subsystem for Linux enabled, and that you’re using Windows Build version 19041 or higher. To enable WSL run this command in a Powershell prompt with admin privileges: Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux. You can find the full WSL install instructions <a href="https://docs.microsoft.com/en-us/windows/wsl/install-win10">here</a>.</p>
<h4 data-sanitized-id="the-requested-operation-could-not-be-completed-due-to-a-virtual-disk-system-limitation-virtual-hard-disk-files-must-be-uncompressed-and-unencrypted-and-must-not-be-sparse">The requested operation could not be completed due to a virtual disk system limitation. Virtual hard disk files must be uncompressed and unencrypted and must not be sparse.</h4>
<p>Please check WSL Github <a href="https://github.com/microsoft/WSL/issues/4103">thread #4103</a> where this issue is being tracked for updated information.</p>
<h4 data-sanitized-id="the-term-wsl-is-not-recognized-as-the-name-of-a-cmdlet-function-script-file-or-operable-program">The term ‘wsl’ is not recognized as the name of a cmdlet, function, script file, or operable program.</h4>
<p>Ensure that the Windows Subsystem for Linux Optional Component is installed. Additionally, if you are using an Arm64 device and running this command from PowerShell, you will receive this error. Instead run wsl.exe from PowerShell Core, or Command Prompt.</p>
<h2 data-sanitized-id="conclusion">Conclusion</h2>
<p>WSL 2 is still very new and as such is still rough around the edges. However, the performance increase is undeniable and is a substantial improvement over</p>


guid: https://christitus.com/debloat-windows-10-2020/
title: Debloat Windows in 2022
link: https://christitus.com/debloat-windows-10-2020/
hash: ?�h��W�LO��"��
attributes: {"enclosures":[]}
content:
<p>This goes over debloating and slimming down Windows 10 and 11 so you get maximum performance from your PC.</p>
<p>I made a guide going over the debloat process two years ago <a href="https://christitus.com/debloat-windows-10/">https://christitus.com/debloat-windows-10/</a> - The guide has evolved and the github project I was using has also improved. I’ve also made a newer post going over the all the changes @ <a href="https://christitus.com/windows-tool">https://christitus.com/windows-tool</a></p>
<h2 data-sanitized-id="april-2022-update">April 2022 Update</h2>
<ul>
<li>Added new options to get Windows 10/7 Options in Windows 11</li>
<li>Service optimizations to reduce process count</li>
<li>Added more tweak settings and misc. fixes</li>
<li>GUI Redesign</li>
<li>new Github <a href="https://github.com/ChrisTitusTech/winutil">https://github.com/ChrisTitusTech/winutil</a></li>
</ul>
<p>New command!</p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">iwr -useb https://christitus.com/win | iex
</span></span></code></pre></div><h2 data-sanitized-id="july-2021-update">July 2021 Update</h2>
<p>If you are coming here from the YouTube video I have taken all the scripts below and a system admin script I used a lot in the past to make a streamlined debloat script. This script will optimize Windows and can be run multiple times if you have an update ruin all the optimizations. I have also made it very easy to launch. Here is the source files: <a href="https://github.com/ChrisTitusTech/win10script">https://github.com/ChrisTitusTech/win10script</a></p>
<p>If you want to just run this on any system, you can easily copy and paste this into a Admin Powershell prompt and watch it do everything for you. It does have two prompts based on user feedback. Let me know what you think below!</p>
<p><em>OLD PROJECT - DEPRECATED</em></p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="gdscript3" data-sanitized-class="language-gdscript3"><span data-sanitized-class="line"><span data-sanitized-class="cl"><span data-sanitized-class="n">iex</span> <span data-sanitized-class="p">((</span><span data-sanitized-class="n">New</span><span data-sanitized-class="o">-</span><span data-sanitized-class="ne">Object</span> <span data-sanitized-class="n">System</span><span data-sanitized-class="o">.</span><span data-sanitized-class="n">Net</span><span data-sanitized-class="o">.</span><span data-sanitized-class="n">WebClient</span><span data-sanitized-class="p">)</span><span data-sanitized-class="o">.</span><span data-sanitized-class="n">DownloadString</span><span data-sanitized-class="p">(</span><span data-sanitized-class="s1">'https://git.io/JJ8R4'</span><span data-sanitized-class="p">))</span>
</span></span></code></pre></div><h3 data-sanitized-id="what-this-script-can-do">What this script can do</h3>
<ul>
<li>Installs any program listed that you click on using WinGet</li>
<li>Removed Telemetry</li>
<li>Disables Cortana</li>
<li>Deletes various schedules tasks that rebloat the system</li>
<li>Fixes problems that other scripts causes (lock screen and personalization options restricted)</li>
</ul>
<p>Based on User feedback Microsoft Store and Windows Defender is no longer touched.</p>
<h3 data-sanitized-id="toolbox-walkthrough-video">Toolbox Walkthrough Video</h3>
<div>
<iframe allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/V27McA7ch6w?autoplay=0&amp;controls=1&amp;end=0&amp;loop=0&amp;mute=0&amp;start=0" title="YouTube video" sandbox="allow-scripts allow-same-origin"></iframe>
</div>
<h2 data-sanitized-id="user-requested-restore-scripts">User Requested Restore Scripts</h2>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="gdscript3" data-sanitized-class="language-gdscript3"><span data-sanitized-class="line"><span data-sanitized-class="cl"><span data-sanitized-class="n">iex</span> <span data-sanitized-class="p">((</span><span data-sanitized-class="n">New</span><span data-sanitized-class="o">-</span><span data-sanitized-class="ne">Object</span> <span data-sanitized-class="n">System</span><span data-sanitized-class="o">.</span><span data-sanitized-class="n">Net</span><span data-sanitized-class="o">.</span><span data-sanitized-class="n">WebClient</span><span data-sanitized-class="p">)</span><span data-sanitized-class="o">.</span><span data-sanitized-class="n">DownloadString</span><span data-sanitized-class="p">(</span><span data-sanitized-class="s1">'https://git.io/JTbKD'</span><span data-sanitized-class="p">))</span>
</span></span></code></pre></div><p>This restore script pops up a GUI that lets you restore what you want to FACTORY DEFAULTS!</p>
<p>Current Lineup:</p>
<ul>
<li>Cortana</li>
<li>Tray Icons</li>
<li>Action Center</li>
</ul>
<h2 data-sanitized-id="old-methods-from-prior-videos-that-i-no-longer-use">Old Methods from Prior Videos that I no longer use</h2>
<p>The project I use has been developed for many years now and is extremely good. Here is the source github project I use:<br>
<a href="https://github.com/Sycnex/Windows10Debloater">https://github.com/Sycnex/Windows10Debloater</a></p>
<p>This is a new project that was brought to my attention, but has quickly made a name for itself. It works very well and is typically more up to date than the above project.<br>
<a href="https://github.com/farag2/Windows-10-Setup-Script">https://github.com/farag2/Windows-10-Setup-Script</a></p>
<h2 data-sanitized-id="optimal-way-to-use-this-tool">Optimal Way to Use this Tool</h2>
<p>I recommend running this tool under the following conditions:</p>
<ul>
<li>Before User Profile is Created</li>
<li>Empty Desktop and Downloads (Past versions has deleted files from Desktop and Downloads)</li>
<li>After installing New Feature Updates</li>
</ul>
<p>Recommended Options:</p>
<ul>
<li>Disable Cortana</li>
<li>Uninstall OneDrive</li>
<li>Run Essential Tweaks</li>
</ul>
<p>I generally always enable Dark Mode and Install 3.5 .NET but that is entirely my personal preference.</p>


guid: https://jackkruse.com/?p=15193
title: ARE HAPPINESS AND HYPOXIA BEDFELLOWS?
author: ;Jack Kruse
link: https://jackkruse.com/are-happiness-and-hypoxia-bedfellows/
hash: IUӰ ٲ��ɨ��%
tags: #Uncategorized
attributes: {"enclosures":[]}
content:
<a href="https://jackkruse.com/are-happiness-and-hypoxia-bedfellows/#content" data-sanitized-class="skip-link screen-reader-text">Skip to content</a>
<div data-sanitized-id="boxed-wrapper">
<div data-sanitized-id="wrapper" data-sanitized-class="fusion-wrapper">

<header data-sanitized-class="fusion-header-wrapper"><div data-sanitized-class="fusion-header-v4 fusion-logo-alignment fusion-logo-left fusion-sticky-menu- fusion-sticky-logo- fusion-mobile-logo- fusion-sticky-menu-only fusion-header-menu-align-center fusion-mobile-menu-design-modern">


<div data-sanitized-class="fusion-sticky-header-wrapper">
<div data-sanitized-class="fusion-header">
<div data-sanitized-class="fusion-row">
<div data-margin-top="31px" data-margin-bottom="0px" data-margin-left="0px" data-margin-right="0px" data-sanitized-class="fusion-logo"><a href="https://jackkruse.com/" data-sanitized-class="fusion-logo-link"> <img src="https://jackkruse.com/wp-content/uploads/2017/07/logofull.png" width="428" height="104" alt="Dr. Jack Kruse Logo" data-retina_logo_url data-sanitized-class="fusion-standard-logo"></a>

</div>

</div>
</div>

</div>
</div>

</header>
<section aria-label="Page Title Bar" data-sanitized-class="avada-page-titlebar-wrapper">
</section><main data-sanitized-id="main" data-sanitized-class="clearfix"><div data-sanitized-class="fusion-row">
<section data-sanitized-id="content">
<article readability="30.623156342183" data-sanitized-id="post-15193" data-sanitized-class="post post-15193 type-post status-publish format-standard hentry category-uncategorized"><h2 data-sanitized-class="fusion-post-title">ARE HAPPINESS AND HYPOXIA BEDFELLOWS?</h2>
<div readability="36.916996047431" data-sanitized-class="post-content">
<div data-sanitized-class="pdfprnt-buttons pdfprnt-buttons-post pdfprnt-top-right"><a href="https://jackkruse.com/are-happiness-and-hypoxia-bedfellows/?print=print" target="_blank" data-sanitized-class="pdfprnt-button pdfprnt-button-print"><img decoding="async" src="https://jackkruse.com/wp-content/plugins/pdf-print/images/print.png" alt="image_print" title="Print Content"><span data-sanitized-class="pdfprnt-button-title pdfprnt-button-print-title">Print PDF</span></a></div>
<p>Jeremy and I sat on the beach at Destin and began a discussion about happiness and wisdom as it pertains to a mitochondriac.   The audio file of the beginning of our discussion as it occurred is above.  It is pretty raw.  You can hear the surf and wind in the back round along with the music of the moment.</p>
<p>This is a contemplative blog……..about why so many struggle choosing nature over society’s comforts.</p>
<p><img fetchpriority="high" decoding="async" src="https://optimalklubs.com/wp-content/uploads/2020/06/fullsizeoutput_4a0d-300x192.jpeg" alt width="300" height="192" data-sanitized-class="alignnone size-medium wp-image-6629"></p>
<p>Become an <a href="https://jackkruse.com/become-a-member/">Optimal Klub Member</a> or a Patron on <a href="https://www.patreon.com/posts/relationship-6-30531751" target="_blank" rel="nofollow noopener noreferrer">Patreon.com</a> to read the full blog.</p>
</div>

<div data-sanitized-class="fusion-sharing-box fusion-theme-sharing-box fusion-single-sharing-box">
<h4>Share This Story, Choose Your Platform!</h4>

</div>
<section data-sanitized-class="about-author">
<div data-sanitized-class="about-author-container">
<div data-sanitized-class="avatar"><img alt src="https://secure.gravatar.com/avatar/4ae9f0e14f78182b1acac51c851239ebcfa999448e25c2f93cf5f6a8bfc6d6aa" height="72" width="72" decoding="async" data-sanitized-class="avatar avatar-72 photo"></div>

</div>
</section><section data-sanitized-class="related-posts single-related-posts"><div data-sanitized-class="fusion-title fusion-title-size-three sep-double sep-solid">
<h3 data-sanitized-class="title-heading-left">Related Posts</h3>

</div>

</section></article></section></div>
</main>
</div>
</div>
<a tabindex="-1" href="https://jackkruse.com/are-happiness-and-hypoxia-bedfellows/#" aria-hidden="true" data-sanitized-class="fusion-one-page-text-link fusion-page-load-link">Page load link</a>
<p>
</p>
<section aria-labelledby="awb-to-top-label" data-sanitized-class="to-top-container to-top-right"><a href="https://jackkruse.com/are-happiness-and-hypoxia-bedfellows/#" data-sanitized-id="toTop" data-sanitized-class="fusion-top-top-link"><span data-sanitized-id="awb-to-top-label" data-sanitized-class="screen-reader-text">Go to Top</span></a></section>


guid: https://christitus.com/create-windows-service/
title: How to Create a Windows Service
link: https://christitus.com/create-windows-service/
hash: ��� �� s����Q]�
attributes: {"enclosures":[]}
content:
<p>This article goes over how to create a windows service.</p>
<p>I will be going over 3 different ways to create a windows service. Check the legend to skip to the method you’d like to use. They will be: PowerShell, 3rd Party Tool, and Windows Resource Kits.</p>
<h2 data-sanitized-id="create-windows-service-with-powershell">Create Windows Service with PowerShell</h2>
<p>Microsoft Source Article with ALL Syntax - <a href="https://docs.microsoft.com/en-us/powershell/module/microsoft.powershell.management/new-service?view=powershell-7">Microsoft Link</a></p>
<p>TestService Example:<br>
<code>New-Service -Name "TestService" -BinaryPathName "C:\WINDOWS\System32\svchost.exe -k netsvcs"</code></p>
<h2 data-sanitized-id="create-windows-service-for-java-applications-with-winsw">Create Windows Service for Java Applications with WinSW</h2>
<p><a href="https://github.com/winsw/winsw">https://github.com/winsw/winsw</a> is the project that is a fantastic wrapper for windows services.<br>
You will download this exe and rename it to your needs. It is configured by the included XML file under the same name.</p>
<h2 data-sanitized-id="create-windows-service-with-nssm">Create Windows Service with NSSM</h2>
<p><a href="http://nssm.cc/">http://nssm.cc</a> is the official site for this 3rd party tool method.</p>
<p>To show service installation GUI:<br>
<code>nssm install [&lt;servicename&gt;]</code></p>
<p>To install a service without confirmation:<br>
<code>nssm install &lt;servicename&gt; &lt;app&gt; [&lt;args&gt; ...]</code></p>
<p>To show service editing GUI:<br>
<code>nssm edit &lt;servicename&gt;</code></p>
<p>To retrieve or edit service parameters directly:<br>
<code>nssm get &lt;servicename&gt; &lt;parameter&gt; [&lt;subparameter&gt;]</code><br>
<code>nssm set &lt;servicename&gt; &lt;parameter&gt; [&lt;subparameter&gt;] &lt;value&gt;</code><br>
<code>nssm reset &lt;servicename&gt; &lt;parameter&gt; [&lt;subparameter&gt;]</code></p>
<p>To show service removal GUI:<br>
<code>nssm remove [&lt;servicename&gt;]</code></p>
<p>To remove a service without confirmation:<br>
<code>nssm remove &lt;servicename&gt; confirm</code></p>
<h2 data-sanitized-id="create-windows-service-with-windows-server-resource-kit-2003">Create Windows Service with Windows Server Resource Kit 2003</h2>
<ul>
<li>Download Windows Server Resource Kit <a href="http://www.microsoft.com/downloads/details.aspx?FamilyID=9d467a69-57ff-4ae7-96ee-b18c4790cffd&amp;DisplayLang=en">here</a></li>
<li>Run the executable to install the Resource Kit</li>
<li>Open up a command prompt and run the following to install a service stub (default install location used in this example):</li>
<li>You may substitute “EQBC Service” with whatever name you would like to give to the service for display purposes</li>
</ul>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">"C:\Program Files\Windows Resource Kits\Tools\instsrv.exe" "New Service" "C:\Program Files\Windows Resource Kits\Tools\srvany.exe"
</span></span></code></pre></div><ul>
<li>Run regedit to edit the Windows registry, and navigate to the following registry key: <code>HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\New Service</code></li>
<li>From the Edit menu, select New, select Key, and name the new key Parameters</li>
<li>Highlight the Parameters key</li>
<li>From the Edit menu, select New, select String Value, and name the new value Application</li>
<li>From the Edit menu, select Modify, and type in the full path name and application name, including the drive letter and file extension.
<em>Example:</em> <code>C:\MQ2\eqbcs.exe</code></li>
<li>Now go to Start and Run and type in <code>services.msc</code></li>
<li>From here scroll down to New Service (or whatever name you gave the service above), right-click and select Properties</li>
<li>On the General tab, change the Startup type to <code>Automatic</code></li>
<li>Click the Start button to start your service</li>
<li>Select the Recovery tab, and you have the option of changing the drop-down boxes for First-Failure and so on to Restart the service</li>
<li>Select OK and you are finished</li>
</ul>
<h2 data-sanitized-id="conclusion">Conclusion</h2>
<p>Each one of these ways have their uses and I have used each method for different programs. It is great to learn to use all of the above examples or at least make yourself familiar with them.</p>


guid: https://jackkruse.com/?p=15195
title: HYPOXIA #13: WILL YOUR ABILITY TO BREATH BE HARMED FROM SPACE SOON?
author: ;Jack Kruse
link: https://jackkruse.com/hypoxia-13-will-your-ability-to-breath-be-harmed-from-space-soon/
hash: ��ᇕ!�΋qY�<
tags: #Series: Hypoxia
attributes: {"enclosures":[]}
content:
<a href="https://jackkruse.com/hypoxia-13-will-your-ability-to-breath-be-harmed-from-space-soon/#content" data-sanitized-class="skip-link screen-reader-text">Skip to content</a>
<div data-sanitized-id="boxed-wrapper">
<div data-sanitized-id="wrapper" data-sanitized-class="fusion-wrapper">

<header data-sanitized-class="fusion-header-wrapper"><div data-sanitized-class="fusion-header-v4 fusion-logo-alignment fusion-logo-left fusion-sticky-menu- fusion-sticky-logo- fusion-mobile-logo- fusion-sticky-menu-only fusion-header-menu-align-center fusion-mobile-menu-design-modern">


<div data-sanitized-class="fusion-sticky-header-wrapper">
<div data-sanitized-class="fusion-header">
<div data-sanitized-class="fusion-row">
<div data-margin-top="31px" data-margin-bottom="0px" data-margin-left="0px" data-margin-right="0px" data-sanitized-class="fusion-logo"><a href="https://jackkruse.com/" data-sanitized-class="fusion-logo-link"> <img src="https://jackkruse.com/wp-content/uploads/2017/07/logofull.png" width="428" height="104" alt="Dr. Jack Kruse Logo" data-retina_logo_url data-sanitized-class="fusion-standard-logo"></a>

</div>

</div>
</div>

</div>
</div>

</header>
<section aria-label="Page Title Bar" data-sanitized-class="avada-page-titlebar-wrapper">
</section><main data-sanitized-id="main" data-sanitized-class="clearfix"><div data-sanitized-class="fusion-row">
<section data-sanitized-id="content">
<article readability="32.791499138426" data-sanitized-id="post-15195" data-sanitized-class="post post-15195 type-post status-publish format-standard hentry category-series-hypoxia"><h2 data-sanitized-class="fusion-post-title">HYPOXIA #13: WILL YOUR ABILITY TO BREATH BE HARMED FROM SPACE SOON?</h2>
<div readability="37.400530503979" data-sanitized-class="post-content">
<div data-sanitized-class="pdfprnt-buttons pdfprnt-buttons-post pdfprnt-top-right"><a href="https://jackkruse.com/hypoxia-13-will-your-ability-to-breath-be-harmed-from-space-soon/?print=print" target="_blank" data-sanitized-class="pdfprnt-button pdfprnt-button-print"><img decoding="async" src="https://jackkruse.com/wp-content/plugins/pdf-print/images/print.png" alt="image_print" title="Print Content"><span data-sanitized-class="pdfprnt-button-title pdfprnt-button-print-title">Print PDF</span></a></div>
<p>What if I told you that your breath may get stolen under the guise of progress?  Would you believe me?</p>
<p>Today it is time to show how the Patriot Act, IoT, and the DOD/NSA/CIA and SpaceX are really linked.  Most people have no idea/hypothesis I have is a direct violation of the 4th amendment right in the Constitution.  Our privacy rights are now under seige now by the DOD and FCC and it is being done in plain sight using an old game plan……….bait and Switch.  It worked before in the Warren Commission Report and now I believe it will be used again by selling the promise of progress and keeping ahead in the intel race with the Chinese Communist Party.</p>
<p><img decoding="async" src="https://c10.patreonusercontent.com/3/eyJwIjoxfQ%3D%3D/patreon-media/p/post/38326359/9b524d0639bb47c8840e2a6b71c36993/1.JPG?token-time=1593636768&amp;token-hash=XZzSmKh5FW7ivz_ypcDtGlVA_438IS4gZ2jf50uaDSM%3D" data-media-id="67660852"></p>

</div>

<div data-sanitized-class="fusion-sharing-box fusion-theme-sharing-box fusion-single-sharing-box">
<h4>Share This Story, Choose Your Platform!</h4>

</div>
<section data-sanitized-class="about-author">
<div data-sanitized-class="about-author-container">
<div data-sanitized-class="avatar"><img alt src="https://secure.gravatar.com/avatar/4ae9f0e14f78182b1acac51c851239ebcfa999448e25c2f93cf5f6a8bfc6d6aa" height="72" width="72" decoding="async" data-sanitized-class="avatar avatar-72 photo"></div>

</div>
</section><section data-sanitized-class="related-posts single-related-posts"><div data-sanitized-class="fusion-title fusion-title-size-three sep-double sep-solid">
<h3 data-sanitized-class="title-heading-left">Related Posts</h3>

</div>

</section></article></section></div>
</main>
</div>
</div>
<a tabindex="-1" href="https://jackkruse.com/hypoxia-13-will-your-ability-to-breath-be-harmed-from-space-soon/#" aria-hidden="true" data-sanitized-class="fusion-one-page-text-link fusion-page-load-link">Page load link</a>
<p>
</p>
<section aria-labelledby="awb-to-top-label" data-sanitized-class="to-top-container to-top-right"><a href="https://jackkruse.com/hypoxia-13-will-your-ability-to-breath-be-harmed-from-space-soon/#" data-sanitized-id="toTop" data-sanitized-class="fusion-top-top-link"><span data-sanitized-id="awb-to-top-label" data-sanitized-class="screen-reader-text">Go to Top</span></a></section>


guid: https://jackkruse.com/?p=15197
title: DO MASKS DO WHAT WE THINK THEY DO IN C-19?
author: ;Jack Kruse
link: https://jackkruse.com/do-masks-do-what-we-think-they-do-in-c-19/
hash: r �I.Po�l�W�Mc
tags: #Uncategorized
attributes: {"enclosures":[]}
content:
<a href="https://jackkruse.com/do-masks-do-what-we-think-they-do-in-c-19/#content" data-sanitized-class="skip-link screen-reader-text">Skip to content</a>
<div data-sanitized-id="boxed-wrapper">
<div data-sanitized-id="wrapper" data-sanitized-class="fusion-wrapper">

<header data-sanitized-class="fusion-header-wrapper"><div data-sanitized-class="fusion-header-v4 fusion-logo-alignment fusion-logo-left fusion-sticky-menu- fusion-sticky-logo- fusion-mobile-logo- fusion-sticky-menu-only fusion-header-menu-align-center fusion-mobile-menu-design-modern">


<div data-sanitized-class="fusion-sticky-header-wrapper">
<div data-sanitized-class="fusion-header">
<div data-sanitized-class="fusion-row">
<div data-margin-top="31px" data-margin-bottom="0px" data-margin-left="0px" data-margin-right="0px" data-sanitized-class="fusion-logo"><a href="https://jackkruse.com/" data-sanitized-class="fusion-logo-link"> <img src="https://jackkruse.com/wp-content/uploads/2017/07/logofull.png" width="428" height="104" alt="Dr. Jack Kruse Logo" data-retina_logo_url data-sanitized-class="fusion-standard-logo"></a>

</div>

</div>
</div>

</div>
</div>

</header>
<section aria-label="Page Title Bar" data-sanitized-class="avada-page-titlebar-wrapper">
</section><main data-sanitized-id="main" data-sanitized-class="clearfix"><div data-sanitized-class="fusion-row">
<section data-sanitized-id="content">
<article readability="34.494816862474" data-sanitized-id="post-15197" data-sanitized-class="post post-15197 type-post status-publish format-standard hentry category-uncategorized"><h2 data-sanitized-class="fusion-post-title">DO MASKS DO WHAT WE THINK THEY DO IN C-19?</h2>
<div readability="44.060301507538" data-sanitized-class="post-content">
<div data-sanitized-class="pdfprnt-buttons pdfprnt-buttons-post pdfprnt-top-right"><a href="https://jackkruse.com/do-masks-do-what-we-think-they-do-in-c-19/?print=print" target="_blank" data-sanitized-class="pdfprnt-button pdfprnt-button-print"><img decoding="async" src="https://jackkruse.com/wp-content/plugins/pdf-print/images/print.png" alt="image_print" title="Print Content"><span data-sanitized-class="pdfprnt-button-title pdfprnt-button-print-title">Print PDF</span></a></div>
<p>When you watch the video above what thoughts are you left with?</p>
<p>Do you believe the narrative that is pushed with words, or did you pay close attention to the results you saw about particle spread in the computer test?</p>
<p>Do you believe they were equivalent?</p>
<p>Are Public Health experts now using the wearing of masks as a con man would use on the public playing three card monte?</p>
<p>Just being a master of public health expert, with a degree, (MPH) does not imply you are wise.  Intellect does not equal wisdom.</p>
<p><img decoding="async" src="https://c10.patreonusercontent.com/3/eyJwIjoxfQ%3D%3D/patreon-media/p/post/38408032/10f0b6a65c4b403b997a909276437034/1.jpeg?token-time=1593997258&amp;token-hash=H3zx1Fet6gBASZLEN04XFB5brR7oDu1MXfVxb_ytBzs%3D"></p>

<p>Become an <a href="https://jackkruse.com/become-a-member/">Optimal Klub Member</a> or a <a href="https://www.patreon.com/posts/relationship-6-30531751">Patron on Patreon.com</a> to read the full blog.</p>
</div>

<div data-sanitized-class="fusion-sharing-box fusion-theme-sharing-box fusion-single-sharing-box">
<h4>Share This Story, Choose Your Platform!</h4>

</div>
<section data-sanitized-class="about-author">
<div data-sanitized-class="about-author-container">
<div data-sanitized-class="avatar"><img alt src="https://secure.gravatar.com/avatar/4ae9f0e14f78182b1acac51c851239ebcfa999448e25c2f93cf5f6a8bfc6d6aa" height="72" width="72" decoding="async" data-sanitized-class="avatar avatar-72 photo"></div>

</div>
</section><section data-sanitized-class="related-posts single-related-posts"><div data-sanitized-class="fusion-title fusion-title-size-three sep-double sep-solid">
<h3 data-sanitized-class="title-heading-left">Related Posts</h3>

</div>

</section></article></section></div>
</main>
</div>
</div>
<a tabindex="-1" href="https://jackkruse.com/do-masks-do-what-we-think-they-do-in-c-19/#" aria-hidden="true" data-sanitized-class="fusion-one-page-text-link fusion-page-load-link">Page load link</a>
<p>
</p>
<section aria-labelledby="awb-to-top-label" data-sanitized-class="to-top-container to-top-right"><a href="https://jackkruse.com/do-masks-do-what-we-think-they-do-in-c-19/#" data-sanitized-id="toTop" data-sanitized-class="fusion-top-top-link"><span data-sanitized-id="awb-to-top-label" data-sanitized-class="screen-reader-text">Go to Top</span></a></section>


guid: https://www.brixsweden.org/?p=2336#comment-93
title: Comment on China Unleashes Health Silk Road by brixsweden
author: ;brixsweden
link: https://brixsweden.org/china-unleashes-the-health-silk-road-against-corona-pandemic/#comment-93
hash: 2��S@�D� ׾� XL�
attributes: {"enclosures":[]}
content:
<p>In reply to <a href="https://brixsweden.org/china-unleashes-the-health-silk-road-against-corona-pandemic/#comment-88">Seth</a>.</p>
<p>Thank you for the feedback!<br>
To learn more contact: <a href="mailto:hussein.askary@brixsweden.org">hussein.askary@brixsweden.org</a></p>


guid: https://jackkruse.com/?p=15199
title: HYPOXIA #14: “WE THE PEOPLE” SOON WILL NOT BE ABLE TO BREATH LIKE GEORGE FLOYD
author: ;Jack Kruse
link: https://jackkruse.com/hypoxia-14-we-the-people-soon-will-not-be-able-to-breath-like-george-floyd/
hash: M��E�Lk�T_A��
tags: #Series: Hypoxia
attributes: {"enclosures":[]}
content:
<a href="https://jackkruse.com/hypoxia-14-we-the-people-soon-will-not-be-able-to-breath-like-george-floyd/#content" data-sanitized-class="skip-link screen-reader-text">Skip to content</a>
<div data-sanitized-id="boxed-wrapper">
<div data-sanitized-id="wrapper" data-sanitized-class="fusion-wrapper">

<header data-sanitized-class="fusion-header-wrapper"><div data-sanitized-class="fusion-header-v4 fusion-logo-alignment fusion-logo-left fusion-sticky-menu- fusion-sticky-logo- fusion-mobile-logo- fusion-sticky-menu-only fusion-header-menu-align-center fusion-mobile-menu-design-modern">


<div data-sanitized-class="fusion-sticky-header-wrapper">
<div data-sanitized-class="fusion-header">
<div data-sanitized-class="fusion-row">
<div data-margin-top="31px" data-margin-bottom="0px" data-margin-left="0px" data-margin-right="0px" data-sanitized-class="fusion-logo"><a href="https://jackkruse.com/" data-sanitized-class="fusion-logo-link"> <img src="https://jackkruse.com/wp-content/uploads/2017/07/logofull.png" width="428" height="104" alt="Dr. Jack Kruse Logo" data-retina_logo_url data-sanitized-class="fusion-standard-logo"></a>

</div>

</div>
</div>

</div>
</div>

</header>
<section aria-label="Page Title Bar" data-sanitized-class="avada-page-titlebar-wrapper">
</section><main data-sanitized-id="main" data-sanitized-class="clearfix"><div data-sanitized-class="fusion-row">
<section data-sanitized-id="content">
<article readability="28.651867512333" data-sanitized-id="post-15199" data-sanitized-class="post post-15199 type-post status-publish format-standard hentry category-series-hypoxia"><h2 data-sanitized-class="fusion-post-title">HYPOXIA #14: “WE THE PEOPLE” SOON WILL NOT BE ABLE TO BREATH LIKE GEORGE FLOYD</h2>
<div readability="34.576388888889" data-sanitized-class="post-content">
<div data-sanitized-class="pdfprnt-buttons pdfprnt-buttons-post pdfprnt-top-right"><a href="https://jackkruse.com/hypoxia-14-we-the-people-soon-will-not-be-able-to-breath-like-george-floyd/?print=print" target="_blank" data-sanitized-class="pdfprnt-button pdfprnt-button-print"><img decoding="async" src="https://jackkruse.com/wp-content/plugins/pdf-print/images/print.png" alt="image_print" title="Print Content"><span data-sanitized-class="pdfprnt-button-title pdfprnt-button-print-title">Print PDF</span></a></div>
<p><img decoding="async" src="https://c10.patreonusercontent.com/3/eyJwIjoxfQ%3D%3D/patreon-media/p/post/38611070/385f491979ee45608a68259b91591379/1.jpg?token-time=1594332519&amp;token-hash=FBYtrLyIuxWQUgXbPV4n8hQrYc3OKj-7XjD06DgoFJI%3D" data-media-id="68546655"></p>
<p>Edward Snowden figured out how the overall global plan for unifying operation Mockingbird and MKUltra would be deployed using new software programs that updates to these 1950s programs.  He leaked them during the Obama administration and became Obama’s enemy number one of the industrial military complex.</p>
<p>Have you ever asked yourself why?</p>
<p>Become an <a href="https://jackkruse.com/become-a-member/">Optimal Klub Member</a> or a <a href="https://www.patreon.com/posts/relationship-6-30531751">Patron on Patreon.com</a> to read the full blog.</p>
</div>

<div data-sanitized-class="fusion-sharing-box fusion-theme-sharing-box fusion-single-sharing-box">
<h4>Share This Story, Choose Your Platform!</h4>

</div>
<section data-sanitized-class="about-author">
<div data-sanitized-class="about-author-container">
<div data-sanitized-class="avatar"><img alt src="https://secure.gravatar.com/avatar/4ae9f0e14f78182b1acac51c851239ebcfa999448e25c2f93cf5f6a8bfc6d6aa" height="72" width="72" decoding="async" data-sanitized-class="avatar avatar-72 photo"></div>

</div>
</section><section data-sanitized-class="related-posts single-related-posts"><div data-sanitized-class="fusion-title fusion-title-size-three sep-double sep-solid">
<h3 data-sanitized-class="title-heading-left">Related Posts</h3>

</div>

</section></article></section></div>
</main>
</div>
</div>
<a tabindex="-1" href="https://jackkruse.com/hypoxia-14-we-the-people-soon-will-not-be-able-to-breath-like-george-floyd/#" aria-hidden="true" data-sanitized-class="fusion-one-page-text-link fusion-page-load-link">Page load link</a>
<p>
</p>
<section aria-labelledby="awb-to-top-label" data-sanitized-class="to-top-container to-top-right"><a href="https://jackkruse.com/hypoxia-14-we-the-people-soon-will-not-be-able-to-breath-like-george-floyd/#" data-sanitized-id="toTop" data-sanitized-class="fusion-top-top-link"><span data-sanitized-id="awb-to-top-label" data-sanitized-class="screen-reader-text">Go to Top</span></a></section>


guid: https://jackkruse.com/?p=15202
title: HYPOXIA #15: BLUE LIGHT CAUSES IRREVERSIBLE HYPOXIA IN ALL CELLS
author: ;Jack Kruse
link: https://jackkruse.com/hypoxia-15-blue-light-causes-irreversible-hypoxia-in-all-cells/
hash: a��M��gS� � &A�r
tags: #Series: Hypoxia #Uncategorized
attributes: {"enclosures":[]}
content:
<a href="https://jackkruse.com/hypoxia-15-blue-light-causes-irreversible-hypoxia-in-all-cells/#content" data-sanitized-class="skip-link screen-reader-text">Skip to content</a>
<div data-sanitized-id="boxed-wrapper">
<div data-sanitized-id="wrapper" data-sanitized-class="fusion-wrapper">

<header data-sanitized-class="fusion-header-wrapper"><div data-sanitized-class="fusion-header-v4 fusion-logo-alignment fusion-logo-left fusion-sticky-menu- fusion-sticky-logo- fusion-mobile-logo- fusion-sticky-menu-only fusion-header-menu-align-center fusion-mobile-menu-design-modern">


<div data-sanitized-class="fusion-sticky-header-wrapper">
<div data-sanitized-class="fusion-header">
<div data-sanitized-class="fusion-row">
<div data-margin-top="31px" data-margin-bottom="0px" data-margin-left="0px" data-margin-right="0px" data-sanitized-class="fusion-logo"><a href="https://jackkruse.com/" data-sanitized-class="fusion-logo-link"> <img src="https://jackkruse.com/wp-content/uploads/2017/07/logofull.png" width="428" height="104" alt="Dr. Jack Kruse Logo" data-retina_logo_url data-sanitized-class="fusion-standard-logo"></a>

</div>

</div>
</div>

</div>
</div>

</header>
<section aria-label="Page Title Bar" data-sanitized-class="avada-page-titlebar-wrapper">
</section><main data-sanitized-id="main" data-sanitized-class="clearfix"><div data-sanitized-class="fusion-row">
<section data-sanitized-id="content">
<article data-sanitized-id="post-15202" data-sanitized-class="post post-15202 type-post status-publish format-standard hentry category-series-hypoxia category-uncategorized"><h2 data-sanitized-class="fusion-post-title">HYPOXIA #15: BLUE LIGHT CAUSES IRREVERSIBLE HYPOXIA IN ALL CELLS</h2>
<div readability="34.278260869565" data-sanitized-class="post-content">
<div data-sanitized-class="pdfprnt-buttons pdfprnt-buttons-post pdfprnt-top-right"><a href="https://jackkruse.com/hypoxia-15-blue-light-causes-irreversible-hypoxia-in-all-cells/?print=print" target="_blank" data-sanitized-class="pdfprnt-button pdfprnt-button-print"><img decoding="async" src="https://jackkruse.com/wp-content/plugins/pdf-print/images/print.png" alt="image_print" title="Print Content"><span data-sanitized-class="pdfprnt-button-title pdfprnt-button-print-title">Print PDF</span></a></div>
<div data-block="true" data-editor="kr4f" data-offset-key="eda07-0-0" readability="38" data-sanitized-class="_2TO-components-SimpleRichTextEditor--paragraphElement">
<p><span data-offset-key="eda07-0-0">Several of my members went to a bio-hacking conference in California sponsored by Dave Apsrey and were told blue light exposure during the day was NOT harmful at all in 2016, and quite helpful for the human eye.  In fact, blue light had benefits of alerting people and improving cognition.  When they returned and told me about the event, I responded that this advice was probably the most damaging advice ever given at any event I’ve reviewed. </span></p>
</div>

<div data-block="true" data-editor="kr4f" data-offset-key="fhmmv-0-0" data-sanitized-class="_2TO-components-SimpleRichTextEditor--paragraphElement">
<div data-offset-key="fhmmv-0-0" data-sanitized-class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr">
<div data-sanitized-class="_3Y-components-SimpleRichTextEditor-components-ImageSpan--image"><img decoding="async" src="https://c10.patreonusercontent.com/3/eyJwIjoxfQ%3D%3D/patreon-media/p/post/38742236/1e183e2e2a8f408aba7c0e9e5f20ac24/1.JPG?token-time=1594660531&amp;token-hash=GAZi3nTsrbIA0jfP8tObhHLpAxMoyyZwsFw6TSfZz6c%3D"></div>
</div>
</div>

<div data-block="true" data-editor="kr4f" data-offset-key="563va-0-0" readability="35" data-sanitized-class="_2TO-components-SimpleRichTextEditor--paragraphElement">
<p><span data-offset-key="563va-0-0">Then two years later, in 2018 the study from the University of Toledo proved my response to Asprey’s claims were fraudulent.  See the  we have many PEER reviewed article pointing out just how bad man-made blue light from screens are for the human retina.</span></p>
</div>



</div>

<div data-sanitized-class="fusion-sharing-box fusion-theme-sharing-box fusion-single-sharing-box">
<h4>Share This Story, Choose Your Platform!</h4>

</div>
<section data-sanitized-class="about-author">
<div data-sanitized-class="about-author-container">
<div data-sanitized-class="avatar"><img alt src="https://secure.gravatar.com/avatar/4ae9f0e14f78182b1acac51c851239ebcfa999448e25c2f93cf5f6a8bfc6d6aa" height="72" width="72" decoding="async" data-sanitized-class="avatar avatar-72 photo"></div>

</div>
</section><section data-sanitized-class="related-posts single-related-posts"><div data-sanitized-class="fusion-title fusion-title-size-three sep-double sep-solid">
<h3 data-sanitized-class="title-heading-left">Related Posts</h3>

</div>

</section></article></section></div>
</main>
</div>
</div>
<a tabindex="-1" href="https://jackkruse.com/hypoxia-15-blue-light-causes-irreversible-hypoxia-in-all-cells/#" aria-hidden="true" data-sanitized-class="fusion-one-page-text-link fusion-page-load-link">Page load link</a>
<p>
</p>
<section aria-labelledby="awb-to-top-label" data-sanitized-class="to-top-container to-top-right"><a href="https://jackkruse.com/hypoxia-15-blue-light-causes-irreversible-hypoxia-in-all-cells/#" data-sanitized-id="toTop" data-sanitized-class="fusion-top-top-link"><span data-sanitized-id="awb-to-top-label" data-sanitized-class="screen-reader-text">Go to Top</span></a></section>


guid: https://christitus.com/change-wallpaper/
title: Change your Desktop Wallpaper
link: https://christitus.com/change-wallpaper/
hash: a�az�M*�,ތE����
attributes: {"enclosures":[]}
content:
<p>This article shows you how to automatically change your wallpaper on Windows, macOS, and Linux.</p>
<p>To get the greatest variety and the highest quality it is best to use reddit as the voting system and variety ensure both these goals are met.</p>
<h2 data-sanitized-id="change-wallpaper-in-windows">Change Wallpaper in Windows</h2>
<p>GitHub Project: <a href="https://github.com/Rawns/Reddit-Wallpaper-Changer">https://github.com/Rawns/Reddit-Wallpaper-Changer</a></p>
<p>From the Releases Tab on GitHub download the latest version and install it.</p>
<p>Here are the settings I recommend using:<br>
<img loading="lazy" src="https://christitus.com/images/2020/wallpaper/wall-settings-w10.webp" alt="win10-wallsettings" data-sanitized-class="img-fluid"> </p>
<p>There is also an option to save all wallpapers locally. I like to save all downloaded wallpapers for future reference or build and offline repository.</p>
<h2 data-sanitized-id="change-wallpaper-in-mac-os">Change Wallpaper in Mac OS</h2>
<p>GitHub Project: <a href="https://github.com/ChrisTitusTech/wallpaper-reddit">https://github.com/ChrisTitusTech/wallpaper-reddit</a></p>
<h3 data-sanitized-id="install-macos-dependancies">Install MacOS Dependancies</h3>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">xcode-select --install
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">sudo easy_install pip
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">sudo pip install --upgrade pip
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">pip install pillow
</span></span></code></pre></div><h4 data-sanitized-id="needed-desktop-wallpaper-script-package">Needed Desktop Wallpaper Script Package</h4>
<ul>
<li>Install Swift Tools on MacOS 13 (Required for High Sierra or Earlier) - <a href="https://support.apple.com/kb/DL1998">https://support.apple.com/kb/DL1998</a></li>
<li>Script for Changing MacOS Wallpaper - <a href="https://github.com/scriptingosx/desktoppr/releases">https://github.com/scriptingosx/desktoppr/releases</a></li>
</ul>
<h3 data-sanitized-id="install-macos-program">Install MacOS Program</h3>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">cd ~
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">git clone https://github.com/ChrisTitusTech/wallpaper-reddit.git
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">cd wallpaper-reddit
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">sudo python3 setup.py install
</span></span></code></pre></div><h3 data-sanitized-id="macos-usage">MacOS Usage</h3>
<p>You can run this anytime by typing in terminal <code>wallpaper-reddit [subreddits]</code><br>
Binaries are located at <code>/usr/local/bin/wallpaper-reddit</code>
Config files are located at <code>~/.config/wallpaper-reddit</code>
Syntax Help <code>wallpaper-reddit --help</code></p>
<h3 data-sanitized-id="running-on-macos-startup">Running on macOS Startup</h3>
<ul>
<li>Start Automator</li>
<li>Create New Task: File -&gt; New</li>
<li>Select “Application”
<ul>
<li>Click “Show library” in the toolbar (if hidden)</li>
</ul>
</li>
<li>Add “Run shell script” (from the Actions/Utilities)
<ul>
<li>Copy-and-paste your script into the window and Run- <em>Note: I used desktoppr to force wallpaper if script fails</em>
<img loading="lazy" src="https://christitus.com/images/2020/wallpaper/macos-automator.webp" alt="automator" data-sanitized-class="img-fluid"> </li>
</ul>
</li>
</ul>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">/usr/local/bin/wallpaper-reddit --startup
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">/usr/local/bin/desktoppr ~/Pictures/Wallpapers/wallpaper.webp
</span></span></code></pre></div><ul>
<li>Save it somewhere: a file called your_name.app will be created)</li>
<li>Go to System Preferences → Users and Groups → Login items</li>
<li>Add this newly-created app</li>
</ul>
<h2 data-sanitized-id="change-wallpaper-in-linux">Change Wallpaper in Linux</h2>
<p>GitHub Project: <a href="https://github.com/ChrisTitusTech/wallpaper-reddit">https://github.com/ChrisTitusTech/wallpaper-reddit</a></p>
<h3 data-sanitized-id="install-linux-dependancies">Install Linux Dependancies</h3>
<ul>
<li>Ubuntu/Linux Mint/ElementaryOS: <code>sudo apt-get install python3-dev python3-setuptools libjpeg8-dev zlib1g-dev libfreetype6-dev</code></li>
<li>Fedora: <code>sudo dnf install python3-imaging</code></li>
<li>Arch: <code>sudo pacman -S python-pillow</code></li>
</ul>
<h3 data-sanitized-id="install-linux-program">Install Linux Program</h3>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">cd ~
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">git clone https://github.com/ChrisTitusTech/wallpaper-reddit.git
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">cd wallpaper-reddit
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">sudo python3 setup.py install
</span></span></code></pre></div><h3 data-sanitized-id="linux-usage">Linux Usage</h3>
<p>You can run this anytime by typing in terminal <code>wallpaper-reddit [subreddits]</code><br>
Binaries are located at <code>/usr/local/bin/wallpaper-reddit</code>
Config files are located at <code>~/.config/wallpaper-reddit</code>
Syntax Help <code>wallpaper-reddit --help</code></p>
<h3 data-sanitized-id="running-on-linux-startup">Running on Linux Startup</h3>
<p>There is plenty of ways to have this automatically change the wallpaper on startup, however, I like to use the method by adding it at the <code>/etc/profile</code> EOF (End of File). Here is an example.</p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">/usr/local/bin/wallpaper-reddit --save
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">/usr/local/bin/wallpaper-reddit --startup
</span></span></code></pre></div><p><code>--save</code> <em>option flag will save the current wallpaper to the default directory in the config file (<code>~/Pictures/Wallpapers/</code>). Remove this line if you don’t want to save past wallpapers.</em>
<code>--startup</code> <em>option flag will wait til internet access is established and then download the wallpaper from reddit</em></p>
<h2 data-sanitized-id="wallpaper-reddit-config-file-settings">Wallpaper-reddit Config File Settings</h2>
<p>The config file is in <code>~/.config/wallpaper-reddit</code>, and will be created automatically. Currently, the GNOME, XFCE, MATE, Unity, and Cinnamon Desktop Environments should be automatically detected and the program should set the wallpaper without any extra work. However, due to the varying nature of window managers, it is possible, even likely, that you may have to specify a custom command to set your wallpaper. The program will prompt you for this if this is the case; the exact command can be researched per desktop environment. If your desktop environment is not supported, leave the set command blank and it will auto download to the <code>~/Pictures/Wallpapers/</code> directory as wallpaper.webp for the daily wallpaper.</p>
<h3 data-sanitized-id="config-options">Config Options</h3>
<p><code>minwidth</code> and <code>minheight</code> set the minimum dimensions the program will consider a valid candidate for a wallpaper. If <code>--resize</code> is enabled, the script will resize the image to those dimensions before setting the wallpaper.
<code>minratio</code> is the minimal aspect ratio of the image. It is a float value of width/height of the image, for example 1.6 for 16:9 image.
<code>maxlinks</code> is the maximum number of links the script will go through before giving up.
<code>resize</code> does the same thing as the <code>--resize</code> flag. It is enabled by default.
<code>random</code> does the same thing as the <code>--random</code> flag.</p>
<h2 data-sanitized-id="recommended-wallpaper-subreddits">Recommended Wallpaper Subreddits</h2>
<ul>
<li>EarthPorn</li>
<li>CityPorn</li>
<li>SkyPorn</li>
<li>WeatherPorn</li>
<li>BotanicalPorn</li>
<li>LakePorn</li>
<li>VillagePorn</li>
<li>BeachPorn</li>
<li>WaterPorn</li>
<li>SpacePorn</li>
<li>multiwall</li>
<li>wallpapers</li>
<li>wallpaper</li>
</ul>


guid: https://htmhell.dev/21-legendary-legend/
title: #21 Legendary legend!
author: ;Manuel Matuzovic
link: https://htmhell.dev/21-legendary-legend/
hash: �d���R 1Af8L �
attributes: {"enclosures":[]}
content:
<div data-sanitized-class="section bad">
<p>Context: A button that expands and collapses a section of text.</p>
<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">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>panel-heading<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 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>#collapse0<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>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>legend</span><span data-sanitized-class="token punctuation">&gt;</span></span> Industries Served <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>legend</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-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><code>legend</code> is not allowed as a child of any other element than <code>fieldset</code>.<br>
(<a href="https://htmhell.dev/21-legendary-legend/#foot-note1">HTML spec for legend</a>)</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><code>href</code> attribute is not allowed on the <code>button</code> element.<br>
(<a href="https://htmhell.dev/21-legendary-legend/#foot-note2">HTML spec for button</a>)</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">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>panel-heading<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>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">  Industries Served</span><br><span data-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="resources">Resources</h2>
<ul>
<li><a href="https://html.spec.whatwg.org/#the-legend-element" rel="noopener" data-sanitized-id="foot-note1">The legend element</a></li>
<li><a href="https://html.spec.whatwg.org/#the-button-element" rel="noopener" data-sanitized-id="foot-note2">The button element</a></li>
</ul>
</div>


guid: https://christitus.com/ultimate-windows-setup-guide/
title: Ultimate Windows Setup Guide
link: https://christitus.com/ultimate-windows-setup-guide/
hash: w�,D���]d�j���
attributes: {"enclosures":[]}
content:
<p>This guide will walk you through a fresh Windows installation and debloat the services, tasks, and apps that are running in the background.</p>
<h2 data-sanitized-id="one-command-to-do-everything">One Command to Do Everything</h2>
<p><img loading="lazy" src="https://christitus.com/images/onecommand.webp" alt="OneCommand" data-sanitized-class="img-fluid"> </p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="gdscript3" data-sanitized-class="language-gdscript3"><span data-sanitized-class="line"><span data-sanitized-class="cl"><span data-sanitized-class="n">powershell</span> <span data-sanitized-class="o">-</span><span data-sanitized-class="n">nop</span> <span data-sanitized-class="o">-</span><span data-sanitized-class="n">c</span> <span data-sanitized-class="s2">"iex(New-Object Net.WebClient).DownloadString('https://git.io/JJ8R4')"</span>
</span></span></code></pre></div><h2 data-sanitized-id="github-project-for-debloating-optimization-and-installing-programs">GitHub Project for Debloating, Optimization, and Installing Programs</h2>
<p><img loading="lazy" src="https://christitus.com/images/github.webp" alt="github" data-sanitized-class="img-fluid"> </p>
<p><a href="https://github.com/ChrisTitusTech/win10script/tree/master">https://github.com/ChrisTitusTech/win10script/tree/master</a></p>
<p>This project was using many of the aspects of other debloat scripts, but I combined system admin scripts with it that I use to configure workstations at businesses. I also added Chocolatey package manager to the script for easy program installations.</p>
<p>The script will remove scheduled tasks, windows applications, install common applications (adobe reader, notepad++, java, and more), while also disabling services, and removing windows components like Cortana that are performance hogs.</p>
<h2 data-sanitized-id="what-this-script-does">What this script does</h2>
<h3 data-sanitized-id="main-programs-and-tweaks">Main Programs and Tweaks</h3>
<ul>
<li>Installs Chocolatey (Package Manager for Windows)</li>
<li>Installs O&amp;O Shutup 10 and Runs Recommended Settings</li>
<li>Misc 3rd Party program installs (Adobe, 7-Zip, Notepad++, and Media Player Classic-HC)</li>
<li>Removals all Bloatware in MS Store (Leaves Office, Snip Tool, Xbox and other Apps used for Gaming)</li>
</ul>
<h3 data-sanitized-id="privacy-tweaks">Privacy Tweaks</h3>
<p>Disabled Services and Tasks</p>
<ul>
<li>Telemetry</li>
<li>Wifi Sense</li>
<li>Smart Screen and Web Search</li>
<li>App Suggestions and Activity History</li>
<li>Location Tracking and Maps</li>
<li>Feedback and Tailored Experiences</li>
<li>Error Reporting</li>
<li>Cortana</li>
<li>Advertising ID.</li>
</ul>
<h3 data-sanitized-id="security-tweaks">Security Tweaks</h3>
<ul>
<li>UAC Set to Low</li>
<li>Disable SMB version 1</li>
<li>Set Network to Private</li>
<li>Disable Controlled Folder Access</li>
<li>Disable Microsoft Defender (Check customization if not using another AV)</li>
<li>Disable Meltdown Flag (Big performance boost for Intel Users)</li>
<li>Enables F8 Boot Menu</li>
</ul>
<h3 data-sanitized-id="service-tweaks">Service Tweaks</h3>
<p>Services Disabled:</p>
<ul>
<li>Malware Removal Tool</li>
<li>Driver Updates</li>
<li>Home Groups</li>
<li>Shared Experiences</li>
<li>Remote Assistance</li>
<li>Autoplay</li>
<li>Storage Sense</li>
<li>DeFragmentation</li>
<li>Superfetch</li>
<li>Indexing</li>
<li>Hibernation</li>
<li>Sleep Timeout</li>
</ul>
<h3 data-sanitized-id="ui-tweaks">UI Tweaks</h3>
<p>Windows 10’s user interface is a mess and has too many notifications. This removes the Action Center, LockScreen, Sticky Keys, Task View, Expands File Transfer details by default, Show all tray icons, and various other tweaks.</p>
<h3 data-sanitized-id="application-tweaks">Application Tweaks</h3>
<p>This script will keep the core of Microsoft Office, but most other Microsoft products that are sideloaded are removed. OneDrive is a big one that some use, so if you want that functionality check the customization section. Most other features removed aren’t used, like Internet Explorer and Work Folders.</p>
<h2 data-sanitized-id="customization">Customization</h2>
<p>I encourage people to fork this project and comment out things they don’t like! Here are a list of normal things people change:</p>
<ul>
<li>Uninstalling OneDrive (This is on in my script)</li>
<li>Installing Adobe, Chocolatey, Notepad++, MPC-HC, and 7-Zip</li>
</ul>
<p>Comment any thing you don’t want out… Example:</p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">########## NOTE THE # SIGNS! These disable lines This example shows UACLow being set and Disabling SMB1
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">### Security Tweaks ###
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">"SetUACLow", # "SetUACHigh",
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">"DisableSMB1", # "EnableSMB1",
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">########## NOW LETS SWAP THESE VALUES AND ENABLE SMB1 and Set UAC to HIGH
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">### Security Tweaks ###
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">"SetUACHigh",
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">"EnableSMB1",
</span></span></code></pre></div><h2 data-sanitized-id="video-walkthrough">Video Walkthrough</h2>
<div>
<iframe allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/Tfd7BXCo9Xk?autoplay=0&amp;controls=1&amp;end=0&amp;loop=0&amp;mute=0&amp;start=0" title="YouTube video" sandbox="allow-scripts allow-same-origin"></iframe>
</div>
<h2 data-sanitized-id="conclusion">Conclusion</h2>
<p>This script will be great for most users out there without losing much if any functionality. I typically run this on every system I setup, but I encourage you to fork this project and make the customizations that you need. Anything is possible, and everything can be automated. Save yourself hours of time and learn how to use not only this script, but using PowerShell.</p>


guid: https://christitus.com/windows-10-scripts/
title: Windows 10 Scripts
link: https://christitus.com/windows-10-scripts/
hash: $�~��60��J��R�
attributes: {"enclosures":[]}
content:
<p>Three Windows 10 Scripts</p>
<p><img loading="lazy" src="https://christitus.com/images/onecommand.webp" alt="OneCommand" data-sanitized-class="img-fluid"> </p>
<hr>
<h2 data-sanitized-id="regular-no-onedrive-indexing-and-defender">Regular (No OneDrive, Indexing, and Defender)</h2>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="gdscript3" data-sanitized-class="language-gdscript3"><span data-sanitized-class="line"><span data-sanitized-class="cl"><span data-sanitized-class="n">powershell</span> <span data-sanitized-class="o">-</span><span data-sanitized-class="n">nop</span> <span data-sanitized-class="o">-</span><span data-sanitized-class="n">c</span> <span data-sanitized-class="s2">"iex(New-Object Net.WebClient).DownloadString('https://git.io/JJ8R4')"</span>
</span></span></code></pre></div><hr>
<h2 data-sanitized-id="minimal-only-targets-bloatwaretelemetry">Minimal (Only Targets Bloatware/Telemetry)</h2>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="gdscript3" data-sanitized-class="language-gdscript3"><span data-sanitized-class="line"><span data-sanitized-class="cl"><span data-sanitized-class="n">powershell</span> <span data-sanitized-class="o">-</span><span data-sanitized-class="n">nop</span> <span data-sanitized-class="o">-</span><span data-sanitized-class="n">c</span> <span data-sanitized-class="s2">"iex(New-Object Net.WebClient).DownloadString('https://git.io/JJ5qc')"</span>
</span></span></code></pre></div><hr>
<h2 data-sanitized-id="ltsc-style-debloat">LTSC Style Debloat</h2>
<p>(<em>WARNING: WILL UNINSTALL LOTS OF STUFF</em>)<br>
<a href="https://raw.githubusercontent.com/ChrisTitusTech/win10script/master/ultra-ltsc.ps1">https://raw.githubusercontent.com/ChrisTitusTech/win10script/master/ultra-ltsc.ps1</a></p>
<h2 data-sanitized-id="video-walkthrough">Video Walkthrough</h2>
<div>
<iframe allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/2R28u7o9mls?autoplay=0&amp;controls=1&amp;end=0&amp;loop=0&amp;mute=0&amp;start=0" title="YouTube video" sandbox="allow-scripts allow-same-origin"></iframe>
</div>


guid: https://christitus.com/common-computer-issues/
title: Common Computer Issues
link: https://christitus.com/common-computer-issues/
hash: +b� z�E�[w��m/��
attributes: {"enclosures":[]}
content:
<p>These are all the issues we discussed on a live stream. I took all the community questions and made this webpage for them.</p>
<h2 data-sanitized-id="windows-10---automated-tasks">Windows 10 - Automated Tasks</h2>
<p>Q: How can I make a YouTube video sit there paused on someone’s screen in Windows 10 and instantly start playing aloud upon unlocking the screen/waking from sleep?</p>
<p>A: Task Scheduler can do all sorts of tasks and you can set the triggers to be on login or at certain times of the day.</p>
<h2 data-sanitized-id="linux---display-issues">Linux - Display Issues</h2>
<p>Solution for Display constantly resetting or getting incorrectly configured</p>
<p>3 Solutions (All will work)</p>
<ul>
<li>Xorg Custom Settings
<ul>
<li>When display render is launched it will automatically configure each display to these specification from <code>/etc/X11/xorg.conf.d/10-monitor.conf</code></li>
</ul>
</li>
</ul>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl"># /etc/X11/xorg.conf.d/10-monitor.conf
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">Section "Monitor"
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">### Monitor Identity - Typically HDMI-0 or DisplayPort-0
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> Identifier "HDMI1"
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> Option "PreferredMode" "1920x1080"
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> Option "TargetRefresh" "60"
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">### Positioning the Monitor
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">## Basic
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> Option "LeftOf or RightOf or Above or Below" "DisplayPort-0"
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">## Advanced
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> Option "Position" "1680 0" #Note you can always set both to 0 0 to mirror
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">## Disable a Monitor
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> Option "Disable" "true"
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">EndSection
</span></span></code></pre></div><ul>
<li>Autorandr - Automatic monitor settings
<ul>
<li><a href="https://github.com/phillipberndt/autorandr">https://github.com/phillipberndt/autorandr</a> - This automatically selects a display configuration based on connected devices</li>
</ul>
</li>
<li>Xrandr Script
<ul>
<li>Make a custom bash script and set with login manager, cron job, or set in <code>~/.xinitrc</code></li>
</ul>
</li>
</ul>
<p>Sample xrandr script:</p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="bash" data-sanitized-class="language-bash"><span data-sanitized-class="line"><span data-sanitized-class="cl"><span data-sanitized-class="cp">#!/bin/bash
</span></span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"><span data-sanitized-class="cp"></span>xrandr --output HDMI-1 --off --output HDMI-2 --auto
</span></span></code></pre></div><p><em>Note: You can use the tool <em>arandr</em> to grab the proper display script</em></p>
<h2 data-sanitized-id="windowslinuxmacos---flashing-images-to-sd-card-or-usb">Windows/Linux/MacOS - Flashing Images to SD-Card or USB</h2>
<p>There are so many solutions for this one:</p>
<ul>
<li>Windows - Rufus (<a href="https://rufus.ie/">https://rufus.ie</a>)</li>
<li>Windows/Linux/Mac - Etcher (<a href="https://www.balena.io/etcher/">https://www.balena.io/etcher/</a>)</li>
<li>Linux/Mac - <code>dd</code> terminal command
<ul>
<li><code>dd if=~/Downloads/image.iso of=/dev/sdx bs=1M</code></li>
<li>if = input file/device | of= output file/device | bs= block size</li>
</ul>
</li>
<li>Windows - Win32 Disk Imager <a href="https://sourceforge.net/projects/win32diskimager/">https://sourceforge.net/projects/win32diskimager/</a>
<ul>
<li>for images that aren’t working or using special media like sd cards</li>
</ul>
</li>
</ul>
<h2 data-sanitized-id="linux---boot-time-high-for-kde">Linux - Boot Time High for KDE</h2>
<p>Analyze systemd and figure out why… (<code>systemd-analyze</code>)</p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">systemd-analyze blame
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> 10.667s apt-daily.service
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> 1.127s apt-daily-upgrade.service
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> 1.053s dev-mapper-neon\x2d\x2dvg\x2droot.device
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> 793ms lvm2-pvscan@8:3.service
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> 622ms boot.mount
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> 613ms snapd.service
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> 267ms minidlna.service
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> 217ms NetworkManager.service
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> 200ms nvidia-persistenced.service
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> 196ms upower.service
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl"> 189ms systemd-logind.service
</span></span></code></pre></div><p><em>Note: Also try <code>systemd-analyze critical-chain</code> or <code>systemd-analyze plot &gt; boot.svg</code> as this shows the chain of the startup</em></p>
<h2 data-sanitized-id="linux---usb-port-stops-working">Linux - USB Port stops working</h2>
<ul>
<li>Check to see if device shows on <code>lsusb</code></li>
<li>Check dmesg for errors <code>dmesg | grep -i USB</code></li>
<li>Run <code>usb-devices</code></li>
<li>Disable Auto Suspend
<ul>
<li><code>cat /sys/module/usbcore/parameters/autosuspend</code> result should be <code>2</code> which means enabled</li>
<li>Modify Grub or bootloader to disable auto suspend (for grub modify <code>/etc/default/grub</code>)
<ul>
<li><code>GRUB_CMDLINE_LINUX_DEFAULT="quiet splash usbcore.autosuspend=-1"</code></li>
<li><code>sudo update-grub</code></li>
</ul>
</li>
<li>Verify by running cat command again</li>
</ul>
</li>
</ul>
<h2 data-sanitized-id="linux---fixing-no-display-drivers-or-black-screen-or-missing-desktop-environment">Linux - Fixing No Display Drivers or Black Screen or Missing Desktop Environment</h2>
<p>Ctrl + Alt + F1 or F2</p>
<p>This drops you to TTY and no display drivers are needed. From this console you can fix things by installing display drivers or missing packages you need.</p>
<h2 data-sanitized-id="all-computers---cant-get-into-bios">All Computers - Can’t Get into BIOS</h2>
<p>Open it up and remove the CMOS Battery. Press the power button without it plugged in to fully discharge. Then wait 60 seconds and put CMOS battery back in.</p>
<h2 data-sanitized-id="general-pc-maintenance---updates--shuting-them-down">General PC Maintenance - Updates &amp; Shuting them down</h2>
<p>Updates should be done weekly with security only one applied. Feature Updates should be delayed at least 1 year. This is universal across all operating systems. I also recommend shutting down your PC every day and not using suspend/hibernate. If you want to schedule the updates you can leave your PC once a week overnight.</p>
<h2 data-sanitized-id="windowslinux---time-maintenance">Windows/Linux - Time Maintenance</h2>
<p>You should use UTC time everywhere. Windows uses local time and it is terrible. Change this with a registry setting</p>
<ul>
<li>Disable Internet Time on Windows 10
<ul>
<li>Head to Settings &gt; Time &amp; language and disable “Set time automatically”.</li>
</ul>
</li>
<li>Modify Windows Registry to use UTC
<ul>
<li>Start - Run - <code>regedit</code></li>
<li>Navigate to <code>HKEY_LOCAL_MACHINE\System\CurrentControlSet\Control\TimeZoneInformation</code></li>
<li>Create new DWORD (32-bit) Value <code>RealTimeIsUniversal</code></li>
<li>Set Value to <code>1</code></li>
</ul>
</li>
<li>You can also use REG files from this project <a href="https://github.com/ChrisTitusTech/Windows-10-UTC">https://github.com/ChrisTitusTech/Windows-10-UTC</a> if you don’t want to manually edit registry</li>
</ul>
<h2 data-sanitized-id="macos---opencore-and-safety">MacOS - OpenCore and Safety</h2>
<p>Opencore is a completely open project and is safe. Here is the github of OpenCore where they expose all their code for review <a href="https://github.com/acidanthera/OpenCorePkg">https://github.com/acidanthera/OpenCorePkg</a> and the complete install guide is here <a href="https://dortania.github.io/OpenCore-Install-Guide/">https://dortania.github.io/OpenCore-Install-Guide/</a></p>
<h2 data-sanitized-id="linux-battery-life-and-laptop-heat">Linux Battery Life and Laptop Heat</h2>
<p>There are a variety of packages you can use, but highly suggest two:</p>
<ul>
<li>tlp</li>
<li>xfce4-power-manager</li>
</ul>
<p>TLP will throttle your CPU and use less power and XFCE power manager will take care of brightness, suspend, and other power saving features as a standalone package even if you aren’t using XFCE as a desktop environment.</p>
<h2 data-sanitized-id="macos---opencore-audio-issues">MacOS - OpenCore Audio Issues</h2>
<p>This typically comes from using two codecs or the wrong one. <em>Use ONLY ONE!</em></p>
<ul>
<li>AppleALC - <a href="https://github.com/acidanthera/AppleALC">https://github.com/acidanthera/AppleALC</a></li>
<li>VoodooHDA - <a href="https://sourceforge.net/projects/voodoohda/">https://sourceforge.net/projects/voodoohda/</a></li>
</ul>
<h2 data-sanitized-id="linux---app-wont-launch-it-just-disappears">Linux - App won’t launch it just disappears…</h2>
<p>Run Application in Terminal and look at the errors. Chances are it is missing a dependency.</p>
<h2 data-sanitized-id="windows---these-settings-are-managed-by-your-organization">Windows - “these settings are managed by your organization”</h2>
<p>Chances are you ran a powershell script (maybe mine…) and you are now locked out of changing the lock screen on your Windows Box. Run this command in powershell to gain control of your lock screen again:</p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">Remove-ItemProperty -Path "HKLM:\SOFTWARE\Policies\Microsoft\Windows\Personalization" -Name "NoLockScreen" -ErrorAction SilentlyContinue
</span></span></code></pre></div><p>OR</p>
<p>You can also open up Start - Run - <code>gpedit.msc</code> and then go to All Settings and look for enabled features and set them to <em>Not Configured</em></p>
<h2 data-sanitized-id="windows---reinstall-onedrive">Windows - Reinstall OneDrive</h2>
<p>Open Up PowerShell Admin (Right Click Start Button)</p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">%systemroot%\SysWOW64\OneDriveSetup.exe
</span></span></code></pre></div>


guid: https://htmhell.dev/22-the-good-ol-div-link/
title: #22 the good ol’ div link
author: ;Manuel Matuzovic
link: https://htmhell.dev/22-the-good-ol-div-link/
hash: �>�Z����[�XH��
attributes: {"enclosures":[]}
content:
<div data-sanitized-class="section bad">
Context: A link to another page.
<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>div</span><span data-sanitized-class="token punctuation">&gt;</span></span>About us<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-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 special-attr"><span data-sanitized-class="token attr-name">onClick</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 value javascript language-javascript">location<span data-sanitized-class="token punctuation">.</span>href<span data-sanitized-class="token operator">=</span><span data-sanitized-class="token string">'about.html'</span></span><span data-sanitized-class="token punctuation">"</span></span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  About us</span><br><span data-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-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">data-page</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 attr-name">data-url</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>index.php<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">  About us</span><br><span data-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>…or any other variation of this pattern where an element other than <code>&lt;a&gt;</code> is used to link to a page.</p>
</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>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>A click event on a <code>div</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>A <code>div</code> isn’t keyboard focusable.</li>
<li>The context menu on right click doesn’t provide options like “Open in new tab/window” or “Bookmark this link”.</li>
<li>By default, screen readers just announce the text in a <code>div</code> (e.g. “about us”), in a proper link (<code>&lt;a&gt;</code>) a screen reader announces the text and the role (e.g. “about us, link”).</li>
<li>Attributes like <code>aria-label</code> might not work (properly) on <code>div</code> elements.</li>
<li>Screen reader users may use a shortcut to list all links in a page. <em>“div-links”</em> wouldn’t be listed, unless they have a role of “link”.</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>aboutus.html<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">  About us</span><br><span data-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>


guid: yt:video:TCUOYZzp4Ok
title: How You Can Help Donald Trump Defeat the Coup and Prevent a Hunger Holocaust - LaRouchePAC Fireside
author: ;Promethean In-Depth
link: https://www.youtube.com/watch?v=TCUOYZzp4Ok
hash: ��dN��~��y �pSm
attributes:
{"enclosures":[{"url":"https://www.youtube.com/v/TCUOYZzp4Ok?version=3","title":"How You Can Help Donald Trump Defeat the Coup and Prevent a Hunger Holocaust - LaRouchePAC Fireside","description":"Host: Dennis Speed, LaRouchePAC NYC\nPaul Gallagher, Economics Editor, EIR Magazine\n\nCOVID and its accompanying shutdowns has disproportionately attacked the world’s poorest populations, especially in parts of Africa already ravaged by imperial resource wars, deliberate underdevelopment, and unrestrained locust plagues. The shutdowns have hindered the delivery of food and medical care, creating the probability that more people will die of the economic consequences of COVID than the disease itself. David Beasley, Director of the UN World Food Program and a long-time supporter of Donald Trump, told an audience in Rome Tuesday that 7 million people have died of hunger this year. This figure could increase by “3, 4, 5 times or more” -- a holocaust.\n\nIn the United States, the coup against the President continues, now with outright censorship and violent threats against anyone trying to expose it, support the President, or expose what a Kamala Harris administration would mean. The censorship of the New York Post on Tuesday is a red line. Are we a Republic, devoted to free speech and thought, or a fascist totalitarian state with a smiley face? Speaker Pelosi is holding any type of urgent aid to America’s poorest hostage, with the idea that suburban moms are stupid and will blame Donald Trump.\n\nBeasley noted that there are 2,000 or more billionaires in the world, who hold a combined net worth of $8 trillion, which could be donated to the WFP. Instead, we note, many of these billionaires, such as Eric Schmidt, Mike Bloomberg, and Bill Gates, are singularly devoted to a criminal multi-billion dollar vote buying scheme to defeat Donald Trump and are personally satanic Malthusians, throwing crumbs at Africa while virtue signaling to all around.\n\nNone of this is necessary or fixed. It is a question of human will and it can change instantly. Join us for tonight’s discussion.","type":"application/x-shockwave-flash","height":390,"width":640,"thumbnails":["https://i1.ytimg.com/vi/TCUOYZzp4Ok/hqdefault.jpg"]}]}


guid: yt:video:X4U7dJkfNw8
title: Emergency Food Aid to Africa Now! President Trump Can Make All the Difference
author: ;Promethean In-Depth
link: https://www.youtube.com/watch?v=X4U7dJkfNw8
hash: zy � ��|���s���
attributes:
{"enclosures":[{"url":"https://www.youtube.com/v/X4U7dJkfNw8?version=3","title":"Emergency Food Aid to Africa Now! President Trump Can Make All the Difference","description":"An appeal  for emergency food aid to Africa was made this week to President Trump from a spokesman for Africa, Phillip Tsokolibane, from the LaRouche movement in South Africa, who said, “I appeal to the American President to take up this challenge. Give America’s farmers the mission to produce the food to feed the starving, while deploying the vast resources of the U.S. military on this mission of mercy to bring food to those who need it on my continent.” So far this year, seven million people have died from starvation, mostly in Africa, it was reported this week by David Beasley, Executive Director of the World Food Program, which won the Nobel Peace Prize Oct. 9, and who has laid out what now must be done.  The Nobel award to the WFP reflects directly on the U.S., which has been backing the World Food Program consistently, and on President Trump, who in 2017, appointed Beasley.  Now further emergency action is urgent. This comes at a time, barely two weeks before the presidential election, when new, lawless social media shut-offs were committed against President Trump, the White House, and Congress.  This is a redline. Stop the coup.\n----------\nSubscribe to LaRouchePAC Live:  http://lpac.co/youtube \nSubscribe to LaRouchePAC Videos:  http://lpac.co/youtube-vid \nSubscribe to LaRouchePAC Science:  http://lpac.co/youtube-sci \n\nGet active, become an organizer:  http://lpac.co/action \n\nReceive daily email updates from LaRouchePAC: http://lpac.co/daily \n\nDonate to LaRouchePAC: http://lpac.co/donate-yt \n\nKeep connected at:\nhttps://larouchepac.com/ \nhttps://www.facebook.com/LaRouchePAC \nhttps://soundcloud.com/larouche-pac \nhttps://twitter.com/larouchepac\n==========","type":"application/x-shockwave-flash","height":390,"width":640,"thumbnails":["https://i1.ytimg.com/vi/X4U7dJkfNw8/hqdefault.jpg"]}]}


guid: https://htmhell.dev/23-card-pattern/
title: #23 A card pattern
author: ;Manuel Matuzovic
link: https://htmhell.dev/23-card-pattern/
hash: t��; r�U-UU��I
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>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>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 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>Image<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>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>/feature-teaser.png<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>Feature teaser<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 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>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>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>Exciting feature!<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><br><span data-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> This text describes what the feature does! <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>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>/blog/feature<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>Read more<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">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 9 12<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 punctuation">&gt;</span></span></span><br><span data-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>M.84 10.59L5.42 6 .84 1.41 2.25 0l6 6-6 6z<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>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>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>The example code uses an <code>&lt;article&gt;</code>. This element is meant for standalone content that can be re-used by itself. If there is anything reusable here, it is the entire “card”. More appropriate is a <code>&lt;section&gt;</code>.</li>
<li>There is a piece of text before the image, with the text image. This seems to be some sort of definition of the role of the element following. When using proper semantic HTML, the HTML-elements already communicate their semantics. Adding text is superfluous and confusing.</li>
<li>The alt-attribute states that image is a teaser for the feature mentioned below. Adding the text teaser does not make it a teasing image. The visual function of the image does not work in code. The image adds nothing of value to the textual content of the card. An empty alt-attribute would have hidden the image (and made clear that it is decorative).</li>
<li>There is a <code>&lt;span&gt;</code> with text that is meant to be a heading. Assistive technology can make use of headings in the code. When this card is nested below an <code>&lt;h3&gt;</code>, this heading could be an <code>&lt;h4&gt;</code> instead.</li>
<li>The main paragraph inside the card is wrapped in a <code>&lt;div&gt;</code>. Using a <code>&lt;p&gt;</code> would communicate its intentions more clearly.</li>
<li>“Read more” is not a very descriptive link text. It is especially bad when it’s in a list with more links with the same text. The users does not know where this link leads.</li>
<li>The <code>&lt;svg&gt;</code> within the link doesn’t provide additional information and should be hidden from screen readers.</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>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>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>/feature-teaser.png<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><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 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>h4</span><span data-sanitized-class="token punctuation">&gt;</span></span>Exciting feature!<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h4</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-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>This text describes what the feature does!<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>/blog/feature<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>Read more about our exciting feature <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 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 9 12<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 punctuation">&gt;</span></span></span><br><span data-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>M.84 10.59L5.42 6 .84 1.41 2.25 0l6 6-6 6z<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>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>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></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/HTML/Element/section">The Generic Section element</a></li>
</ul>
</div>


guid: https://christitus.com/2020-buyers-guide/
title: 2020 Buyers Guide
link: https://christitus.com/2020-buyers-guide/
hash: �� o��c�_!�Q���
attributes: {"enclosures":[]}
content:
<p>Looking for a Tech Gift this holiday season? Here are the things I have my eye on and are worth considering.</p>
<h2 data-sanitized-id="amazon-fire-tablet">Amazon Fire Tablet</h2>
<ul>
<li>7" <a href="https://amzn.to/2UzZZ8T">https://amzn.to/2UzZZ8T</a></li>
<li>10" <a href="https://amzn.to/35H7Yax">https://amzn.to/35H7Yax</a></li>
</ul>
<p><img loading="lazy" src="https://christitus.com/images/2020/buyers-guide/debloat-fire.webp" alt="Debloat-Fire" data-sanitized-class="img-fluid"> </p>
<p>Video Overview on how to debloat: <a href="https://youtu.be/yLoymK65dJE">https://youtu.be/yLoymK65dJE</a></p>
<h2 data-sanitized-id="cell-phones">Cell Phones</h2>
<p><img loading="lazy" src="https://christitus.com/images/2020/buyers-guide/cellphones.webp" alt="Cellphones" data-sanitized-class="img-fluid"> </p>
<ul>
<li>Google 4a - $350 - <a href="https://amzn.to/2IKfTLr">https://amzn.to/2IKfTLr</a></li>
<li>PinePhone - $200 - <a href="https://www.pine64.org/pinephone/">https://www.pine64.org/pinephone/</a></li>
<li>XDA Pro1-X - $639 - <a href="https://www.indiegogo.com/projects/pro1-x-smartphone-functionality-choice-control">https://www.indiegogo.com/projects/pro1-x-smartphone-functionality-choice-control</a></li>
</ul>
<p>Both PinePhone and XDA Pro1-X are Linux phones and may not be practical for everyday use unless you load Lineage or a solid mobile OS on it, but man are they fun to play with.</p>
<p>Google 4a is the practical choice and is a rock solid phone that comes unlocked to where you can wipe out Google and move to Lineage for those security and privacy oriented folks. This is the best value in my opinion.</p>
<h2 data-sanitized-id="monitors">Monitors</h2>
<p><img loading="lazy" src="https://christitus.com/images/2020/buyers-guide/monitors.webp" alt="Monitors" data-sanitized-class="img-fluid"> </p>
<ul>
<li>Cheap Spectre Monitors - <a href="https://amzn.to/3pxmv0l">https://amzn.to/3pxmv0l</a> - <em>Prices range from $80 to $250</em></li>
<li>BenQ High-End Monitors - <a href="https://amzn.to/2K9wxV0">https://amzn.to/2K9wxV0</a> - <em>Prices range from $300 to $450</em></li>
<li>Current Gaming Monitor Pick - BenQ ZOWIE 24" 144Hz - $199 - <a href="https://amzn.to/32VJ05h">https://amzn.to/32VJ05h</a></li>
</ul>
<h2 data-sanitized-id="peripherals">Peripherals</h2>
<p><img loading="lazy" src="https://christitus.com/images/2020/buyers-guide/razer.webp" alt="Razer" data-sanitized-class="img-fluid"> </p>
<ul>
<li>Razer Cynosa Lite - $40 - <a href="https://amzn.to/3f6ZfS1">https://amzn.to/3f6ZfS1</a></li>
<li>Razer DeathAdder Essential Mouse - $30 - <a href="https://amzn.to/3lGFAe9">https://amzn.to/3lGFAe9</a></li>
</ul>
<p>Why Razer? Did they pay me or something? <em>Nope!</em><br>
Razer has a bunch of cool features, but also has a great open source project called OpenRazer <a href="https://openrazer.github.io/">https://openrazer.github.io/</a> for any operating system. You can do all kinds of fun macros with them and I picked these two above because they are rather quiet and I hate noise. Most people would prefer a full mechanical and if you are interested in this check out the project above and pick a compatible device for your needs!</p>
<h3 data-sanitized-id="logitech-options">Logitech Options</h3>
<ul>
<li>MK545 Keyboard and Mouse Combo from Logitech - $50 - <a href="https://amzn.to/3pEPSxO">https://amzn.to/3pEPSxO</a></li>
</ul>
<h4 data-sanitized-id="3-device-switching-keyboard-and-mouse">3 Device Switching Keyboard and Mouse</h4>
<ul>
<li>M720 Logitech M720 Wireless Triathlon Mouse $30 - <a href="https://amzn.to/3fseOUu">https://amzn.to/3fseOUu</a></li>
<li>Logitech K780 Multi-Device Wireless Keyboard $100 - <a href="https://amzn.to/33bKBUO">https://amzn.to/33bKBUO</a></li>
</ul>
<h2 data-sanitized-id="tituspi">TitusPi</h2>
<div>
<iframe allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/wyvS1FxR4ic?autoplay=0&amp;controls=1&amp;end=0&amp;loop=0&amp;mute=0&amp;start=0" title="YouTube video" sandbox="allow-scripts allow-same-origin"></iframe>
</div>
<ul>
<li>Raspberry Pi 4 8GB Kit - $105 - <a href="https://amzn.to/2K7CuBR">https://amzn.to/2K7CuBR</a></li>
<li>Raspberry Pi 4 Image - $5 - <a href="https://www.cttstore.com/tituspi">https://www.cttstore.com/tituspi</a> OR Build it yourself <a href="https://github.com/ChrisTitusTech/TitusPi">https://github.com/ChrisTitusTech/TitusPi</a></li>
</ul>
<h2 data-sanitized-id="audiovideo-production-stuff">Audio/Video Production Stuff</h2>
<p>Here is Equipment I use for A/V and recommend to others. Below is a video going over my entire studio setup, but I left out the impractical gear that many wouldn’t want.</p>
<div>
<iframe allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/cuBay8QzYH4?autoplay=0&amp;controls=1&amp;end=0&amp;loop=0&amp;mute=0&amp;start=0" title="YouTube video" sandbox="allow-scripts allow-same-origin"></iframe>
</div>
<ul>
<li>Camera - M200 - $550 - <a href="https://amzn.to/32T9qEU">https://amzn.to/32T9qEU</a></li>
<li>Camera Lens - Canon 22M 2.0 - $200 - <a href="https://amzn.to/3pzW0r0">https://amzn.to/3pzW0r0</a></li>
<li>Microphone - Rode VideoMicro - $60 - <a href="https://amzn.to/2IBn093">https://amzn.to/2IBn093</a></li>
<li>Capture Card - Magewell - $900 - <a href="https://amzn.to/3pFZiZJ">https://amzn.to/3pFZiZJ</a></li>
<li>StreamDeck - Button Macros - $150 - <a href="https://amzn.to/38SiJsk">https://amzn.to/38SiJsk</a>
<ul>
<li>Streamdeck_ui Open Source Project <a href="https://timothycrosley.github.io/streamdeck-ui/">https://timothycrosley.github.io/streamdeck-ui/</a></li>
</ul>
</li>
<li>Microphone Standalone - Shure MV7 - $250 - <a href="https://amzn.to/3kGstbi">https://amzn.to/3kGstbi</a></li>
</ul>
<h2 data-sanitized-id="computers-and-graphics-cards">Computers and Graphics Cards</h2>
<p><img loading="lazy" src="https://christitus.com/images/2020/buyers-guide/outofstock.webp" alt="OutofStock" data-sanitized-class="img-fluid"> </p>
<p>Good Luck! All the stock out there is way out of date and any of the new hotness is Out of Stock. Wait til 2021!</p>
<p>But… If you want to see something cool for a laptop in 2020, check out this “little” machine. <a href="https://kfocus.org/">https://kfocus.org/</a> #NotSponsored</p>


guid: https://htmhell.dev/24-a-placeholder-is-not-a-label/
title: #24 A placeholder is not a label
author: ;Manuel Matuzovic
link: https://htmhell.dev/24-a-placeholder-is-not-a-label/
hash: �r�u�h��x�R|�
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>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">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>First name<span data-sanitized-class="token punctuation">"</span></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>Every form input element needs a label. When screen reader users access a form field, the label is announced with the field type (e.g. <em>first name, edit text</em>). If it’s missing, users might not know what they’re supposed to fill in (e.g. <em>edit text</em>).</li>
<li>Some screen readers fall back to <code>placeholder</code> as the label, but it’s not recommended to rely on it.</li>
<li>By default, placeholder text is displayed in a light grey color with low contrast. It might not be readable for people with low vision or under certain conditions, like strong sunlight.</li>
<li>It’s possible to increase contrast by using the <code>::placeholder</code> pseudo element, but if contrast is too high, users may mistake a placeholder for data that was automatically filled in.</li>
<li>Using and displaying a <code>&lt;label&gt;</code> increases the target size of the form field which can be of great help, especially on touch devices.</li>
<li>If <code>placeholder</code> functions as the only label, the label disappears when the user types. This strains their short-term memory, especially on complex or rarely used forms.</li>
<li>Users cannot check what they’ve filled in before submitting a form, because they only see values and no labels.</li>
<li>If browsers auto-fill fields, users have to cut-and-paste auto-filled values to check if browsers filled in fields correctly.</li>
<li>Placeholder text is cut off if it goes beyond the size of the field.</li>
<li>Translation tools like Google Translate might not translate attribute values.</li>
<li>Labels work best when they’re placed above the corresponding text field, not <em>in</em> the field.</li>
</ol>
<p>Check out the <a href="https://htmhell.dev/24-a-placeholder-is-not-a-label/#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>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>firstname<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>First 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">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>firstname<span data-sanitized-class="token punctuation">"</span></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.nngroup.com/articles/form-design-placeholders/">Placeholders in Form Fields Are Harmful</a></li>
<li><a href="https://medium.com/simple-human/10-reasons-why-placeholders-are-problematic-f8079412b960">11 reasons why placeholders are problematic</a> by <a href="https://twitter.com/adambsilver">Adam Silver</a></li>
<li><a href="https://www.smashingmagazine.com/2018/06/placeholder-attribute/">Don’t Use The Placeholder Attribute</a> by <a href="https://ericwbailey.design/">Eric W. Bailey</a></li>
<li><a href="https://www.nngroup.com/articles/form-design-white-space/">Form Design Quick Fix: Group Form Elements Effectively Using White Space</a></li>
<li><a href="https://codepen.io/stevef/post/placeholder-the-piss-take-label">placeholder - the piss-take label</a> by <a href="https://twitter.com/stevefaulkner">Steve Faulkner</a></li>
<li><a href="http://www.webaxe.org/floated-labels-still-suck/">Floated Labels Still Suck</a></li>
</ul>
</div>


guid: https://christitus.com/Windows-10-Optimization-Guide/
title: Windows 10 Optimization Guide
link: https://christitus.com/Windows-10-Optimization-Guide/
hash: ͷ6�Ŕ���C ^��
attributes: {"enclosures":[]}
content:
<p>This guide goes over using a Custom ISO, Removing Windows 10 Components, and Optimizing Windows 10 Settings.</p>
<h2 data-sanitized-id="custom-iso">Custom ISO</h2>
<p>The whole purpose of a custom ISO is to make the initial install as slim as possible. You don’t have to uninstall bloat if it never gets installed to begin with!</p>
<p>Easiest Method <em>NTLite</em> ($30) - <a href="https://www.ntlite.com/">https://www.ntlite.com/</a></p>
<p>Free Method <em>MSMG Toolkit</em> - <a href="https://msmgtoolkit.in/">https://msmgtoolkit.in/</a></p>
<p>How to Make a Custom Windows 10 ISO with <em>MSMG Toolkit</em> Video<br>
</p><div>
<iframe allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/R6XPff38iSc?autoplay=0&amp;controls=1&amp;end=0&amp;loop=0&amp;mute=0&amp;start=0" title="YouTube video" sandbox="allow-scripts allow-same-origin"></iframe>
</div>

<h3 data-sanitized-id="microsoft-method-for-custom-iso-advanced-users-only">Microsoft Method for Custom ISO (Advanced Users Only)</h3>
<p>Downloading in Installing ADK (Microsoft Image Tools) <a href="https://docs.microsoft.com/en-us/windows-hardware/get-started/adk-install">https://docs.microsoft.com/en-us/windows-hardware/get-started/adk-install</a>
Using sysprep from Microsoft <a href="https://docs.microsoft.com/en-us/windows-hardware/manufacture/desktop/sysprep--generalize--a-windows-installation">https://docs.microsoft.com/en-us/windows-hardware/manufacture/desktop/sysprep--generalize--a-windows-installation</a></p>
<p>I highly recommend a video by Craft Computing going over Windows Deployment Services if you are interested in this method - <a href="https://youtu.be/PdKMiFKGQuc">https://youtu.be/PdKMiFKGQuc</a></p>
<h2 data-sanitized-id="installing-windows-10-and-removing-components">Installing Windows 10 and Removing Components</h2>
<p>The Full AME Experience. Most people will NOT want to do this as it will remove functionality from Windows 10, that you CAN NOT put back in. Some of the components can be taken out in the Custom ISO phase, but this takes it to another level.</p>
<p><em>Note: I do NOT recommend this for MOST machines</em></p>
<p>Components Removed</p>
<ul>
<li>Windows Update</li>
<li>Windows Store</li>
<li>Media Player Functions</li>
<li>Telemetry</li>
<li>Windows Activation (YOU MUST Activate Windows Before this Tweak!) <em>If you fail to do this, you will have a watermark you can’t get rid of</em></li>
<li>DirectX 12</li>
</ul>
<p>Source files for Tweaks <a href="https://ameliorated.info/">https://ameliorated.info/</a> or my GitHub mirror <a href="https://github.com/ChrisTitusTech/windows-lite-2004">https://github.com/ChrisTitusTech/windows-lite-2004</a></p>
<p><img loading="lazy" src="https://christitus.com/images/2021/01-win10/ame.webp" alt="ame" data-sanitized-class="img-fluid"> </p>
<h3 data-sanitized-id="installation-overview">Installation Overview</h3>
<ul>
<li>Install Windows 10 (Stock or Custom ISO)</li>
<li>Activate Windows 10 and Disconnect from Internet afterwards</li>
<li>Run <code>amelioration_2004.bat</code> as Admin and Pre-Amelioration</li>
<li>Reboot to Linux (I recommend Linux Mint)</li>
<li>Run <code>sudo ./ameliorate_2004.sh</code> in Terminal on Live Linux USB</li>
<li>Reboot back to Windows</li>
<li>Run <code>amelioration_2004.bat</code> as Admin and Post-Amelioration</li>
</ul>
<h3 data-sanitized-id="driver-installation">Driver Installation</h3>
<p>Recommend using the Offline Snappy Driver Installer <a href="https://sdi-tool.org/">https://sdi-tool.org/</a>. This is about 50 GB, but has every driver you need.</p>
<h3 data-sanitized-id="ame-step-by-step-documentation">AME Step-by-Step Documentation</h3>
<p><a href="https://wiki.ameliorated.info/doku.php?id=documentation_2004">https://wiki.ameliorated.info/doku.php?id=documentation_2004</a></p>
<h3 data-sanitized-id="running-updates">Running Updates</h3>
<ul>
<li>Download Latest Servicing Stack Update (<em>Check Month - Windows verison- Architecture x64</em>) <a href="https://www.catalog.update.microsoft.com/Search.aspx?q=Servicing%20Stack%20Update%20Windows%2010">https://www.catalog.update.microsoft.com/Search.aspx?q=Servicing%20Stack%20Update%20Windows%2010</a></li>
<li>Download Cumulative Update (<em>Check Month/Version/Arch AND Run After rebooting above</em>) <a href="https://www.catalog.update.microsoft.com/Search.aspx?q=Cumulative%20Update%20Windows%2010">https://www.catalog.update.microsoft.com/Search.aspx?q=Cumulative%20Update%20Windows%2010</a></li>
</ul>
<p>Extract Updates<br>
<code>expand -F:* .\Windows10SSU.msu C:\Update1</code><br>
<code>dism /online /add-package /packagepath=C:\1\Windows10.0-SSU.cab</code><br>
Reboot<br>
<code>expand -F:* .\Windows10Cumulative.msu C:\Update2</code><br>
<code>dism /online /add-package /packagepath=C:\2\Windows10.0-Cumulative.cab</code><br>
Reboot and Run<br>
<code>dism /online /Cleanup-Image /StartComponentCleanup</code></p>
<p><em>Note: File Names change and will be different from above!</em></p>
<h2 data-sanitized-id="optimizing-windows-10-settings">Optimizing Windows 10 Settings</h2>
<p>To finish things off we do some custom tweaks with the Official CTT Windows 10 Toolbox. This is something I have been customizing for years and refining every single month to work on any Windows 10 Installation.</p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="gdscript3" data-sanitized-class="language-gdscript3"><span data-sanitized-class="line"><span data-sanitized-class="cl"><span data-sanitized-class="n">iex</span> <span data-sanitized-class="p">((</span><span data-sanitized-class="n">New</span><span data-sanitized-class="o">-</span><span data-sanitized-class="ne">Object</span> <span data-sanitized-class="n">System</span><span data-sanitized-class="o">.</span><span data-sanitized-class="n">Net</span><span data-sanitized-class="o">.</span><span data-sanitized-class="n">WebClient</span><span data-sanitized-class="p">)</span><span data-sanitized-class="o">.</span><span data-sanitized-class="n">DownloadString</span><span data-sanitized-class="p">(</span><span data-sanitized-class="s1">'https://git.io/JJ8R4'</span><span data-sanitized-class="p">))</span>
</span></span></code></pre></div><h3 data-sanitized-id="what-this-script-can-do">What this script can do</h3>
<ul>
<li>Installs Chocolatey, Notepad++, Irfanview, VLC, Java, and asks if you want Adobe Reader or Brave.</li>
<li>Removes all Windows Store Apps EXCEPT office, xbox, and WSL.</li>
<li>Removed Telemetry</li>
<li>Disables Cortana</li>
<li>Deletes various schedules tasks that rebloat the system</li>
<li>Removes Other Bloatware (Candy Crush, etc.)</li>
<li>Fixes problems that other scripts causes (lock screen and personalization options restricted)</li>
</ul>
<p>Based on User feedback, this no longer uninstalls OneDrive or Office.</p>
<h3 data-sanitized-id="toolbox-walkthrough-video">Toolbox Walkthrough Video</h3>
<div>
<iframe allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/V27McA7ch6w?autoplay=0&amp;controls=1&amp;end=0&amp;loop=0&amp;mute=0&amp;start=0" title="YouTube video" sandbox="allow-scripts allow-same-origin"></iframe>
</div>
<h3 data-sanitized-id="windows-services-to-disable">Windows Services to Disable</h3>
<ol>
<li>Windows Defender &amp; Firewall</li>
<li>Windows Mobile Hotspot Service</li>
<li>Bluetooth Support Service</li>
<li>Print Spooler (Required for Printing)</li>
<li>Fax</li>
<li>Remote Desktop Configuration and Remote Desktop Services</li>
<li>Windows Insider Service</li>
<li>Secondary Logon</li>
<li>Downloaded Maps Manager</li>
<li>Touch Keyboard and Handwriting Panel Service</li>
<li>Offline Files</li>
<li>Windows Connect Now</li>
<li>Remote Registry</li>
<li>Application Layer Gateway Service</li>
<li>Smart Card</li>
<li>Windows Image Acquisition</li>
<li>Security Center</li>
<li>Connected User Experiences and Telemetry</li>
<li>Retail Demo Service</li>
<li>Windows Media Player Network Sharing Service</li>
<li>AllJoyn Router Service</li>
<li>Geolocation Service</li>
<li>Windows Biometric Service (Required for Fingerprint logon)</li>
<li>Program Compatibility Assistant Service</li>
<li>Enterprise App Management Service</li>
</ol>


guid: https://christitus.com/Ultimate-Windows-10-Install-ISO/
title: Ultimate Windows 10 Install ISO
link: https://christitus.com/Ultimate-Windows-10-Install-ISO/
hash: ���,p�=��B�=� �
attributes: {"enclosures":[]}
content:
<p>This goes over creating the best installation media possible for a fresh Windows 10</p>
<h2 data-sanitized-id="downloading-windows-10-iso">Downloading Windows 10 ISO</h2>
<p>I only use official Microsoft sources for Windows installation. At the time of the writing the following link is where I’d download either the ISO directly or the media creation tool that you select ISO on.</p>
<p><a href="https://www.microsoft.com/en-us/software-download/windows10">https://www.microsoft.com/en-us/software-download/windows10</a></p>
<h2 data-sanitized-id="mounting-and-modifying-the-iso">Mounting and Modifying the ISO</h2>
<h3 data-sanitized-id="using-msmg-toolkit">Using MSMG Toolkit</h3>
<p>Download MSMG Toolkit from their website.</p>
<p><a href="https://msmgtoolkit.in/download.html">https://msmgtoolkit.in/download.html</a></p>
<p><img loading="lazy" src="https://christitus.com/images/2021/01-win10iso/msmg.webp" alt="msmg" data-sanitized-class="img-fluid"> </p>
<h3 data-sanitized-id="expand-and-mount-windows">Expand and Mount Windows</h3>
<p>From the Source menu select expand and then mount in MSMG Toolkit. Below is a full video where I use MSMG toolkit to remove many components in Win10.</p>
<p>How to Make a Custom Windows 10 ISO with <em>MSMG Toolkit</em> Video<br>
</p><div>
<iframe allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/R6XPff38iSc?autoplay=0&amp;controls=1&amp;end=0&amp;loop=0&amp;mute=0&amp;start=0" title="YouTube video" sandbox="allow-scripts allow-same-origin"></iframe>
</div>

<h3 data-sanitized-id="install-drivers">Install Drivers</h3>
<p>Download and extract your drivers with the following Powershell command:</p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="gdscript3" data-sanitized-class="language-gdscript3"><span data-sanitized-class="line"><span data-sanitized-class="cl"><span data-sanitized-class="n">DISM</span><span data-sanitized-class="o">.</span><span data-sanitized-class="n">exe</span> <span data-sanitized-class="o">/</span><span data-sanitized-class="n">Online</span> <span data-sanitized-class="o">/</span><span data-sanitized-class="n">Export</span><span data-sanitized-class="o">-</span><span data-sanitized-class="n">Driver</span> <span data-sanitized-class="o">/</span><span data-sanitized-class="n">Destination</span><span data-sanitized-class="p">:</span><span data-sanitized-class="o">%</span><span data-sanitized-class="n">HOMEDRIVE</span><span data-sanitized-class="o">%%</span><span data-sanitized-class="n">HOMEPATH</span><span data-sanitized-class="o">%</span>\<span data-sanitized-class="n">Downloads</span>\<span data-sanitized-class="n">Drivers</span>
</span></span></code></pre></div><p>You can install ANY inf files to the below directories. <em>EXE and Setup files DO NOT WORK!</em></p>
<p>If you want to install EVERY DRIVER IN EXISTENCE… download the offline files using <a href="https://sdi-tool.org/">https://sdi-tool.org/</a> and go into the drivers directory and extract all of the 7z files. This will be time intensive and require about 60 GB or more for the install media</p>
<p>Put the inf and driver x64 files here: <code>ToolKit_Directory\Drivers\Install\w10\x64</code><br>
Put the inf and driver x86 files here: <code>ToolKit_Directory\Drivers\Install\w10\x86</code> <em>Note: Most people don’t do 32-bit installs and can skip this</em></p>
<p>Other notable tools: 3DP Chip Network Drivers <a href="https://www.3dpchip.com/3dpchip/3dp/net_down_en.php">https://www.3dpchip.com/3dpchip/3dp/net_down_en.php</a> - This installs pretty much any network driver on the fly.</p>
<h3 data-sanitized-id="install-updates">Install Updates</h3>
<p>Download the Windows updates from the Official Microsoft Catalog. We need two specific updates that cover most of the big updates missing from our ISO download.</p>
<ul>
<li>Servicing Stack Update <a href="https://www.catalog.update.microsoft.com/Search.aspx?q=Servicing%20Stack%20Update%20Windows%2010">https://www.catalog.update.microsoft.com/Search.aspx?q=Servicing%20Stack%20Update%20Windows%2010</a></li>
<li>Cumulative Update <a href="https://www.catalog.update.microsoft.com/Search.aspx?q=Cumulative%20Update%20Windows%2010">https://www.catalog.update.microsoft.com/Search.aspx?q=Cumulative%20Update%20Windows%2010</a></li>
</ul>
<p><em>Note: Be sure and download your version 20H2, 2009, 1909, etc. and x64 architecture for most computers</em></p>
<p>Put these in <code>ToolKit_Directory\Updates\w10\x64</code></p>
<h2 data-sanitized-id="create-the-iso">Create the ISO</h2>
<h3 data-sanitized-id="make-autounattendxml">Make Autounattend.xml</h3>
<p>Now let’s make it so we will automatically install Windows 10 without answering a bunch of questions. I use a cheatsheet where it just makes it for me from: <a href="https://www.windowsafg.com/win10x86_x64.html">https://www.windowsafg.com/win10x86_x64.html</a></p>
<p>Fill out the form and then click download at the bottom of the page.</p>
<p><img loading="lazy" src="https://christitus.com/images/2021/01-win10iso/autounattend.webp" alt="autounattend" data-sanitized-class="img-fluid"> </p>
<h3 data-sanitized-id="apply-changes-and-exit-msmg-toolkit">Apply Changes and Exit MSMG Toolkit</h3>
<p>Select the Apply Changes option and exit MSMG Toolkit. We aren’t done as we need to implement the autounattend.xml file into the ISO and add any extra tools we want. This can be the Network Driver EXE or any other executable you want. Another good example would be the nVidia Geforce Experience.</p>
<h3 data-sanitized-id="mount-iso-and-copy-files">Mount ISO and Copy Files</h3>
<p>Mount the completed ISO file. (<em>Right-Click the Windows10.ISO file and select mount</em>)</p>
<p><img loading="lazy" src="https://christitus.com/images/2021/01-win10iso/mount.webp" alt="mount" data-sanitized-class="img-fluid"> </p>


guid: yt:video:DqwUda8PU6I
author: ;Anton Chaitkin
link: https://www.youtube.com/watch?v=DqwUda8PU6I
hash: C�d��~ �7q\�
title:
&quot;Who We Are&quot; - the inside story of who created America's rise to power in the Industrial Revolution

attributes:
{"enclosures":[{"url":"https://www.youtube.com/v/DqwUda8PU6I?version=3","title":"&quot;Who We Are&quot; - the inside story of who created America's rise to power in the Industrial Revolution","description":"This video gives you a taste of Anton Chaitkin's new book, &quot;Who We Are, America's Fight for Universal Progress&quot;, Vol 1, 1750s-1850s.  It is a history of the Industrial Revolution, from the standpoint of the people who made it happen.  \n\nVisit the book's accompanying website:\nhttps://WhoWeAreBook.com\n\nPurchase it on Amazon:  \nhttps://www.amazon.com/Who-We-Are-Americas-Universal/dp/B08NS611G9/ref=sr_1_1?dchild=1&amp;keywords=B08NS611G9&amp;qid=1613923398&amp;sr=8-1\n\nAmerica rose to great power because of the Industrial Revolution.  This did not happen because of capitalism, nor socialism or communism.  Rather, the startling advances in science and industry, and the building of massive infrastructure projects throughout America, came about through what was known as the &quot;American System of Economics&quot;.  Sadly, most Americans today have no idea what that is.  \n\nThis book unfolds American economic history, with extensive documentation from original sources.  It shows the intensive collaboration among political, military and scientific leaders to bring about the building of the canals, the creation of the coal industry, and the building of the first railroads. \n\nKirkus Review\nKirkus says this book is a &quot;...harsh indictment of today's 'Anglo-American Establishment' that rejected the U.S.'s historic embrace of protectionist and nationalist economic policies for free trade and globalism.&quot;\n\n&quot;...To Chaitkin, [Ben] Franklin's embrace of nationalism and scientific development led not only to innovations like the steam engine that transformed America's economic system, but also spurred England's Industrial Revolution. Central to the work's intriguing thesis is that Adam Smith's brand of unregulated capitalism and Marx's communist theory represent a false dichotomy.\n\n&quot;... Southern oligarchs are lambasted for both supporting slavery and seeking to maintain an antiquated socio-economic order more akin to &quot;medieval feudalism&quot; than Franklin's vibrant, innovative republic.&quot;","type":"application/x-shockwave-flash","height":390,"width":640,"thumbnails":["https://i1.ytimg.com/vi/DqwUda8PU6I/hqdefault.jpg"]}]}


guid: yt:video:DiaB4vimSPw
title: Lunar Society: Was Benjamin Franklin “the Father of the Industrial Revolution”?
author: ;Anton Chaitkin
link: https://www.youtube.com/watch?v=DiaB4vimSPw
hash: ;�5�|� �t9��
attributes:
{"enclosures":[{"url":"https://www.youtube.com/v/DiaB4vimSPw?version=3","title":"Lunar Society:  Was Benjamin Franklin “the Father of the Industrial Revolution”?","description":"For more information:  https://WhoWeAreBook.com​\n\nIn this exclusive talk on Feb 18, 2021 to The Lunar Society of England, historian and author Anton Chaitkin presented evidence that Benjamin Franklin, the American scientist and statesman, mentored and inspired the startling advancements that transformed British industry. He then organised America’s preparations for its own world-leading industrialisation.\n\nChaitkin says: “Franklin was a happy man, because he so successfully encouraged genius and compassion. We see it with his brilliant English friends, the inventors and developers in the Eighteenth Century Lunar Society. We see it with his American circle, who won U.S. independence; and with his protégés and heirs, who modernised their own and other countries, over the opposition of slaveowners and imperialists.”\n\nAnton Chaitkin is the author of Who We Are: America’s fight for Universal Progress, from Franklin to Kennedy (Volume 1, 1750s to 1850s) available from Amazon, as Kindle e-book and from all good booksellers.\n\nTo mark the publication of &quot;Who We Are: Americas Fight for Universal Progress, from Franklin to Kennedy&quot; (Volume 1) and the 250th Anniversary of Benjamin Franklin’s tour of England, The Lunar Society organised a transatlantic virtual event with Anton Chaitkin speaking exclusively to members and guests.","type":"application/x-shockwave-flash","height":390,"width":640,"thumbnails":["https://i1.ytimg.com/vi/DiaB4vimSPw/hqdefault.jpg"]}]}


guid: https://htmhell.dev/25-a-link-is-a-button-is-a-link/
title: #25 A link is a button is a link
author: ;Manuel Matuzovic
link: https://htmhell.dev/25-a-link-is-a-button-is-a-link/
hash: z}7��,�8������
attributes: {"enclosures":[]}
content:
<div data-sanitized-class="section">
Note: We've removed most classes to improve readability.
</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>a</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 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">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>/signup<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>link<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>focus<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>-1<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 punctuation">&gt;</span></span></span><br><span data-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><br><span data-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>Sign up<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>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>icon icon-external-link<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">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 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>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><br><span data-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>You don’t need the <code>tabindex</code> attribute if you use an <code>a</code> tag. HTML hyperlinks are focusable by default.</li>
<li>The <code>type</code> attribute on <code>a</code> tag is used to hint at the linked URL’s format with a MIME type, eg: <code>type="image/svg+xml"</code></li>
<li>Using <code>role=link</code> on an <code>a</code> tag is not needed since you already get that behaviour for free by using a standard hyperlink (<code>&lt;a href=""&gt;</code>).</li>
<li>A negative <code>tabindex</code> value means that the element is not accessible via keyboard, but it could be focused with Javascript</li>
<li>An additional <code>span</code> to handle focus isn’t necessary, <code>a</code> can do that by itself. 💪🏻</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/25-a-link-is-a-button-is-a-link/#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>If you’re using <code>aria-hidden</code> on an element, you don’t need to declare a <code>role</code>, because the element is inaccessible to screen reader users, anyway.</li>
<li>Try to avoid excessive <abbr title="Document Object Model">DOM</abbr> sizes. Too many <abbr title="Document Object Model">DOM</abbr> nodes and nested <abbr title="Document Object Model">DOM</abbr> elements may harm your page performance. A large <abbr title="Document Object Model">DOM</abbr> tree results in a large accessibility tree, which may have a bad impact on the performance of assistive technology. Only use extra <code>div</code>s and <code>span</code>s, if the design demands it.</li>
<li>Icon option 1: While <code>aria-hidden</code> can be useful to hide content that is not needed for screen readers (in this case an icon image), it's useful to add an <code>aria-label</code> when that content is meaningul for everyone, like declaring that an hyperlink will open in an external tab.</li>
<li>Icon option 2: The icon can be removed, because in the original snippet the link points to a page on the same site that opens in the same tab. The external link icon is intended to inform users that by clicking the link they’re leaving the site.</li>
</ol>
<p>Check out the <a href="https://htmhell.dev/25-a-link-is-a-button-is-a-link/#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>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>/signup<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">   Sign up</span><br><span data-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>fa fa-external-link<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>img<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>External link<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><br><span data-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>or</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>/signup<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span> Sign up <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://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role">Using the link role</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA24.html">Semantically identifying a font icon with role="img"</a></li>
</ul>
</div>


guid: yt:video:u6OahRkMonk
title: Ellen Brown interviews Anton Chaitkin May 2021
author: ;Anton Chaitkin
link: https://www.youtube.com/watch?v=u6OahRkMonk
hash: � v��vvMǾ����!�
attributes:
{"enclosures":[{"url":"https://www.youtube.com/v/u6OahRkMonk?version=3","title":"Ellen Brown interviews Anton Chaitkin May 2021","description":"Ellen Brown, founder and chair of the Public Banking Institute, interviewed Anton Chaitkin in May of 2021.  They discuss Anton's new book, &quot;Who We Are, American's Fight for Universal Progress&quot; (Vol. 1, 1750s to 1850s), which Ellen, in her opening remarks, describes as 'inspiring'.","type":"application/x-shockwave-flash","height":390,"width":640,"thumbnails":["https://i2.ytimg.com/vi/u6OahRkMonk/hqdefault.jpg"]}]}


guid: https://htmhell.dev/tips/download-links/
title: Download links
author: ;Manuel Matuzovic
link: https://htmhell.dev/tips/download-links/
hash: (�*�����~,S�y
attributes: {"enclosures":[]}
content:
<p>You can turn a hyperlink into a download link by adding the <code>download</code> attribute. Instead of navigating to the document, browsers prompt users to save the file to their disc.</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>myfile_hash5474n.pdf<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">download</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  Annual Report (666 KB) </span><br><span data-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>Additionally, you can specify a value for the attribute which will be used as the filename for the downloaded file.</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>myfile_hash5474n.pdf<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">download</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>report.pdf<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">  Annual Report (666 KB)</span><br><span data-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>


guid: https://htmhell.dev/tips/iframe-accessibility/
title: iframe accessibility
author: ;Manuel Matuzovic
link: https://htmhell.dev/tips/iframe-accessibility/
hash: jA� d�<6xɻ9M�X>
attributes: {"enclosures":[]}
content:
<p>
  iframes should be named, if they contain meaningful content. You can define an accessible name for an <code>iframe</code> using the <code>title</code> attribute. If it’s missing, screen readers might fall back to the value of the <code>name</code> or <code>src</code> attribute, which makes it hard or impossible for users to understand the purpose of the <code>iframe</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>iframe</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>Bob Dylan - Visions Of Johanna (Live 1966) YouTube<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>560<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>315<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>https://www.youtube.com/embed/uW9_2r3raHE<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>iframe</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>



<p>If you include an <code>iframe</code> that’s not visible to the user because it’s not meant to be interacted with, hide it from screen reader and keyboard users, too.</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>iframe</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>Intentionally hidden<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">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>-1<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>https://www.mythirdpartyscriptxy.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>iframe</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>

<p>You can find exemplary use cases for hidden iframes that run in the background in this <a href="https://twitter.com/mmatuzo/status/1399996455021072389">thread on Twitter</a>.</p>


guid: https://htmhell.dev/tips/gifs-and-reduced-motion/
title: gifs and reduced motion
author: ;Manuel Matuzovic
link: https://htmhell.dev/tips/gifs-and-reduced-motion/
hash: /�f0�.�� Q5a�
attributes: {"enclosures":[]}
content:
<p>
  You can show animated <code>gif</code>s only if users don’t prefer reduced motion and fall back to <code>jpg</code>, using the <code>picture</code> element in combination with the <code>prefers-reduced-motion</code> media feature.
</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>pooh666.gif<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>(prefers-reduced-motion: no-preference)<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>pooh666.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>Pooh Bear doing knee bends in front of a mirror. Instead of the mirror glass, there’s an illustration of Satan. It looks like Pooh is worshipping the devil.<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>
  Animations on the web are sometimes annoying, but they may also cause nausea, dizziness, and headaches in some users. For people with vestibular disorders it may even cause pain and make them feel so bad that they have to stop using the computer, needing time to recover. The negative side effects of animations can be terrible, that's why we should serve animation only if users prefer animation or have no preference.
</p>

<p>
  In most operating systems <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#user_preferences">users can decide to reduce motion</a> in browsers and apps and we can react to that by querying the <code>prefers-reduced-motion</code> media feature. 
</p>

<p>
  We start with a <code>jpg</code> in case the user’s operating system does not provide such an option. 
</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>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>pooh666.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>Pooh Bear doing knee bends in front of a mirror. Instead of the mirror glass, there’s an illustration of Satan. It looks like Pooh is worshipping the devil.<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>
  Then we replace the <code>jpg</code> with a <code>gif</code> only if the user has no preference for reduced motion.
</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>pooh666.gif<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>(prefers-reduced-motion: no-preference)<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>pooh666.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>Pooh Bear doing knee bends in front of a mirror. Instead of the mirror glass, there’s an illustration of Satan. It looks like Pooh is worshipping the devil.<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>
  Depending on your preference you should either see a <code>jpg</code> or a <code>gif</code> of Pooh Bear worshipping the lord of HTMHell.
</p>

<p>
  <picture>
    <source media="(prefers-reduced-motion: no-preference)">
    <img src="https://htmhell.dev/images/pooh666.jpg" alt="Pooh Bear doing knee bends in front of a mirror. Instead of the mirror glass, there’s an illustration of Satan. It looks like Pooh is worshipping the devil.">
  </picture>
</p>

<h3>Animation settings in different operating systems</h3>

<ul>
  <li>macOS: System Preferences - Accessibility - Display - Reduce Motion</li>
  <li>iOS: Settings - General - Accessibility - Reduce Motion</li>
  <li>Android: Settings - Accessibility features - Accessibility - Advanced Visual Effects </li>
  <li>Windows 10: Settings - Ease of Access - Display - Show animations in Windows.</li>
</ul>


guid: https://htmhell.dev/tips/page-descriptions/
title: page descriptions
author: ;Manuel Matuzovic
link: https://htmhell.dev/tips/page-descriptions/
hash: �ʲ�i���K��:�&�
attributes: {"enclosures":[]}
content:
<p>
  You can describe web pages using <code>meta</code> tags. This is important for 3rd party tools, websites, and apps. Search engines may use the description in their search results and social media sites in previews when users post a link.
</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>meta</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>description<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">content</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, accessibility, performance, and SEO tips, tricks, and best practices.<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>meta</span> <span data-sanitized-class="token attr-name">property</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>og:description<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">content</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, accessibility, performance, and SEO tips, tricks, and best practices.<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>



<h2>
  General
</h2>

<p>
  Page descriptions are really useful because they can help users understand what a page is about before they click a link. Here are a few things to consider when you describe a page:
</p>

<ul>
  <li>
    Make sure your descriptions are concise and descriptive.
  </li>
  <li>
    Write a unique description for each page and try to include relevant keywords.
  </li>
  <li>
    The length of a description should be somewhere between 50 and ~155 characters (this is where Google truncates the text in search result pages).
  </li>
  <li>
    Search engines usually use the description from the <code>meta</code> tag, but they might not if they think other content on the page is more suitable.
  </li>
  <li>
    Descriptions don't factor into ranking algorithms for web search, but can impact a page's click-through-rate (CTR) which can positively impact a page's ability to rank. 
  </li>
</ul>

<h2>
  Social Media
</h2>

<p>
  It’s advised to use the <code>description</code> and <code>og:description</code> meta tag. Facebook, Pinterest and LinkedIn use the <code>description</code> meta tag for their URL previews, if you don't provide a <code>og:description</code>. Twitter ignores the <code>description</code> meta tag and only displays the <code>og:description</code>, but it offers a dedicated <code>twitter:description</code> variation.
</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;!-- Search engines + Fallback for Facebook, Pinterest and LinkedIn --&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>meta</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>description<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">content</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, accessibility, performance, and SEO tips, tricks, and best practices.<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 comment">&lt;!-- Social media sites Like Twitter, Pinterest, Facebook or LinkedIn --&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>meta</span> <span data-sanitized-class="token attr-name">property</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>og:description<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">content</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, accessibility, performance, and SEO tips, tricks, and best practices.<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 comment">&lt;!-- Specific Twitter description --&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>meta</span> <span data-sanitized-class="token attr-name">property</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>twitter:description<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">content</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, accessibility, performance, and SEO tips, tricks, and best practices.<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>

<p>
  You can test how your page descriptions look like using these scrapers:
</p><p>

</p><ul>
  <li>
    <a href="https://cards-dev.twitter.com/validator">
      Twitter Card validator
    </a>
  </li>
  <li>
    <a href="https://developers.facebook.com/tools/debug">
      Facebook Sharing Debugger
    </a>
  </li>
  <li>
    <a href="https://www.linkedin.com/post-inspector/">
      LinkedIn Post Inspector
    </a>
  </li>
  <li>
    <a href="https://developers.pinterest.com/tools/url-debugger/">
      Pinterest Rich Pins Validator
    </a>
  </li>
  <li>
    <a href="https://socialsharepreview.com/">
      Social Media Preview
    </a>
  </li>
  <li>
    <a href="https://metatags.io/">
      Meta Tags
    </a>
  </li>
</ul>

<p>
  These scrapers work for me most of the time, but in a discussion on Twitter Kilian Valkhof pointed out that <a href="https://twitter.com/kilianvalkhof/status/1405835103058763784">the official scrapers are outdated</a>, so make sure you test the result properly.
</p>


guid: https://htmhell.dev/tips/the-current-page/
title: the current page
author: ;Manuel Matuzovic
link: https://htmhell.dev/tips/the-current-page/
hash: ����3h碌� �
attributes: {"enclosures":[]}
content:
<p>
  Use the <code>aria-current</code> attribute to highlight the current page in a navigation, both visually and semantically.
</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 punctuation">&gt;</span></span></span><br><span data-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>/home<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Home<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>/about-us<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-current</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>page<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>About us<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>/contact<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Contact<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>
  If you use a class like <code>.active</code> to highlight the current page within a set of links, only sighted users will be hinted at which page is the current page.
</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 punctuation">&gt;</span></span></span><br><span data-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>/home<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Home<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>/about-us<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>active<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>About us<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>/contact<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Contact<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>

<pre data-sanitized-class="language-css"><code data-sanitized-class="language-css"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token selector">.active</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">font-weight</span><span data-sanitized-class="token punctuation">:</span> bold<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>
  Instead of a simple class, you can use the <code>aria-current</code> attribute with the <code>page</code> value. The attribute communicates the active page to assistive technology and you can use it to select the link in 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>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 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>/home<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Home<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>/about-us<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-current</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>page<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>About us<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>/contact<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Contact<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>

<pre data-sanitized-class="language-css"><code data-sanitized-class="language-css"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token selector">[aria-current="page"]</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">font-weight</span><span data-sanitized-class="token punctuation">:</span> bold<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 data-sanitized-id="demo">
  Here's a quick demo of this pattern used with TalkBack on Android. (Heads up! The recorded audio is pretty loud, sorry.)
</p>

<video src="https://htmhell.dev/images/ariacurrent.mp4" controls="controls" width="200" preload="none">
  <p>Something went wrong, please visit <a href="https://htmhell.dev/tips/the-current-page/">htmhell.dev/tips/the-current-page</a> to view this video.
</p></video>

<p>
  There are more usages for the <code>aria-current</code> attribute. Check out the links below to learn more.
</p>


guid: https://christitus.com/update-any-pc-to-windows11/
title: Update Any PC to Windows 11
link: https://christitus.com/update-any-pc-to-windows11/
hash: 5_FT;��������8�
attributes: {"enclosures":[]}
content:
<p>This is a guide going over updating any PC to Windows 11 that “doesn’t meet requirements” or doesn’t use Secure Boot or has a TPM 2.0 chip.</p>
<h2 data-sanitized-id="methods">Methods</h2>
<ol>
<li>Download appraiserres.dll from Windows 10 install and replace this file in the Windows 11 Sources directory (Windows 11 ISO required)</li>
<li>Use Registry edits below to upgrade your PC in the insider channel. This will be patched out before official release. Video showing regedit: <a href="https://youtu.be/fk5B-a7vZ_w">https://youtu.be/fk5B-a7vZ_w</a></li>
<li>Bypass the requirement prompt by using Command Prompt. Here is a video showing fresh install: <a href="https://youtu.be/wK40EFgzmqM">https://youtu.be/wK40EFgzmqM</a></li>
</ol>
<h2 data-sanitized-id="upgrade-path">Upgrade Path</h2>
<p>The path for upgrading to 11 requires you to have an activated Windows 10 PC and be subscribed to the insider builds.</p>
<p>Insider builds can be registerd for use @ <a href="https://insider.windows.com/">https://insider.windows.com/</a></p>
<h2 data-sanitized-id="system-modifications">System Modifications</h2>
<p>Windows 11 does checks for TPM and Secure boot before it allows the upgrade process to start. However, these can be bypassed.</p>
<p><em>Note: It is important to understand Microsoft can at ANY TIME enforce these rules or ignore these modifications which means you would NO LONGER recieve updates</em></p>
<p>Here is the registry edits that need to be made: (win11bypass.reg)</p>
<div data-sanitized-class="highlight"><pre tabindex="0" data-sanitized-class="chroma"><code data-lang="fallback" data-sanitized-class="language-fallback"><span data-sanitized-class="line"><span data-sanitized-class="cl">Windows Registry Editor Version 5.00
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">[HKEY_LOCAL_MACHINE\SYSTEM\Setup\LabConfig]
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">"BypassTPMCheck"=dword:00000001
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">"BypassSecureBootCheck"=dword:00000001
</span></span></code></pre></div><p>Download Reg File here: <a href="https://christitus.com/files/win11bypass.zip">https://christitus.com/files/win11bypass.zip</a></p>
<p><em>REBOOT AFTER MODIFICATIONS MADE</em></p>
<p><img loading="lazy" src="https://christitus.com/images/2021/06-win11upgrade/regedit.webp" alt="regedit" data-sanitized-class="img-fluid"> </p>
<h2 data-sanitized-id="upgrade">Upgrade</h2>
<p>Now you can simply finish your insider build sign up and then click update</p>
<p>Once it finishes updating you should see a screen to update to the latest Windows 11 build (22000.52) or Greater</p>
<p><img loading="lazy" src="https://christitus.com/images/2021/06-win11upgrade/winver.webp" alt="winver" data-sanitized-class="img-fluid"> </p>


guid: https://htmhell.dev/tips/autocompleting-password-fields/
title: autocompleting password fields
author: ;Manuel Matuzovic
link: https://htmhell.dev/tips/autocompleting-password-fields/
hash: ��H�vet����h�Z�
attributes: {"enclosures":[]}
content:
<p>
  You can help password managers and browsers (pre)fill password fields by using the <code>autocomplete</code> attribute,...and by doing <em>other stuff</em>.
</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>new-password<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>New Password<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>password<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">autocomplete</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>new-password<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>new-password<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>new-password<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span></code></pre>



<p>
  Let's start with the <em>other stuff</em>. When I created a demo for this post, I wanted to show you that you can use <code>autocomplete="new-password"</code> to instruct browsers to offer users auto-generated passwords, for example in a sign-up form. 
</p>

<figure>
  <picture>
    <source type="image/avif">
    <img src="https://htmhell.dev/images/5_auto-complete-password1.jpg" width="411" height="302" alt="Username and New Password input fields. Firefox suggests an auto-generated password.">
  </picture>
  <figcaption>
    Firefox recognizes this password input field as a field for a new password and offers to fill it with a random string.
  </figcaption>
</figure>

<p>In order to prove that I created a <a href="https://codepen.io/matuzo/pen/qBmdvaz">simple form without the attribute</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>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>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>username<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Username<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>username<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>username<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>np<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>New Password<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>password<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>np<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>np<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 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>
  The thing is, Firefox suggested the auto-generated password, anyway. I was confused. After some testing and research, I learned that browsers take all kinds of things into consideration when figuring out what the purpose of an input field is. In this specific example, it was the fact that the <code>label</code> included the words “new password”. Mind blown!
</p>

<p>
  I translated the labels to German and Firefox didn't suggest the password anymore. Ha! Gotcha, Firefox, and that only took me 2 hours to figure out.
</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>username<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Benutzername<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>username<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>username<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>np<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Neues Passwort<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>password<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>np<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>np<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></code></pre>

<picture>
  <source type="image/avif">
  <img src="https://htmhell.dev/images/5_auto-complete-password2.jpg" width="330" height="197" alt="Username and New Password input fields. Firefox doesn't suggests an auto-generated password.">
</picture>

<p>
  You might have noticed that the <code>id</code> and <code>name</code> attributes are short and hard to read. That's because browsers take these attributes into consideration, as well. Just naming the <code>id</code> or <code>name</code> “new-password” or even just “new-pwd” brings the auto-generated password autocomplete back. 
</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>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>new-pwd<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Neues Passwort<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>password<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>new-pwd<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>np<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>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>

<picture>
  <source type="image/avif">
  <img src="https://htmhell.dev/images/5_auto-complete-password3.jpg" width="418" height="320" alt="Username and New Password input fields. Firefox suggests an auto-generated password.">
</picture>

<p>
  You can see that in action here <a href="https://codepen.io/matuzo/pen/MWmwxzZ">auto-complete password: no attribute but id</a> and here <a href="https://codepen.io/matuzo/pen/dyWorEp">auto-complete password: no attribute but name</a>.
</p>

<p>
  Of course, that is a very reduced test case, things are usually much more complicated. I only tested this in one browser and only with the built-in password manager. We shouldn't rely on browsers algorithms, but help them figure out what the purpose of our input fields is.
  <br>
  <br>
  We should: 
</p>

<ul>
  <li>Use standard HTML form elements, attributes and practices (<code>form</code>, <code>label</code>, <code>input</code>, etc.)</li>
  <li>Use the correct <code>type</code> attribute for each input field</li>
  <li>Make sure that we don't generate <code>id</code>s and <code>name</code>s randomly</li>
  <li>Use common values or values that are similiar to the value of the <code>autocomplete</code> attribute for the <code>name</code> and <code>id</code> attributes</li>
  <li>Add the <code>autocomplete</code> attribute and use the values <code>current-password</code> for the current password and <code>new-password</code> for new passwords</li>
  <li>Use different <code>name</code> and <code>id</code> values in sign-up and sign-in forms, for the form element itself, as well as any input, select and textarea elements</li>
  <li>Test thoroughly in different browsers with different password managers.</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>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>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>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>username<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Username<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>username<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>username<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">autocomplete</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>username<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>p</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>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>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>new-password<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>New Password<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>password<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>new-password<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>new-password<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">autocomplete</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>new-password<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>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>form</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>

<p>
  That only scratches the surface. There’s so much more to learn about the <code>autocomplete</code> attribute. I can highly recommend these resources:
</p>


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>


