# entry

guid: https://htmhell.dev/adventcalendar/2022/17/
title: Modern HTML as a foundation for progressive enhancement
author: ;Manuel Matuzovic
link: https://htmhell.dev/adventcalendar/2022/17/
hash: Y�leзN�^A�
attributes: {"enclosures":[]}
content:
<p>Reading HTMHell, you might be aware that progressive enhancement is a thing. To sum things up, it's a way to make sure anyone gets a viable version of your page whatever is their context — slow bandwitdh, oldish  browser, etc. — but also making the said page more resilient (e.g. to JavaScript errors).</p>
<p>Progressive enhancement starts from the ground up:</p>
<ol>
<li>content,</li>
<li>marked up with HTML,</li>
<li>styled with CSS,</li>
<li>enhanced with JavaScript</li>
<li>and improve accessibility with a bit of ARIA.</li>
</ol>
<p>Each of those steps should work as-is and enhance the lower steps without breaking them. In other words, you would need to write your markup independently from the CSS or JS you will apply later on.</p>
<p>Great.</p>
<p>That being said, it's kinda obvious that the better you know each step in the stack the more robust your page should be. JavaScript is everywhere so we may assume you know about it. ARIA is getting some shedlight for a few years now, so even without knowing ARIA we may suppose you use components libraries or something doing this just fine. CSS is constantly improving, I suppose you're following and discovering new CSS stuff every day or so.</p>
<p>But what about HTML? Is it part of your technical watch? How frequent are new HTML stuff popping out in your information sources? Not so often, I guess.</p>
<p>But hey. HTML is a living standard so specifications do change, browsers always improve support for HTML —as part of <a href="https://wpt.fyi/interop-2022">Interop 2022</a> for example— so there are new kids in town, either specified or implemented in browsers, and some of them are meant to be native controls replacing long-standing <code>&lt;div&gt;</code>-based JavaScript components.</p>
<p>What if we could improve the HTML stack for such components, making the markup step more resilient?</p>
<p><strong>Disclaimer</strong>: you need to think of HTML as a foundation, not a replacement for your existing JavaScript component. If your pattern needs ARIA, do not try to implement a low-elevel component. In other word, always try to provide the best possible user experience and don't care too much about developer experience. You may be interested in <a href="https://adrianroselli.com/2022/10/under-engineered-patterns-for-a11ytoconf.html#References">Adrian Roselli's under-engineered components blog posts serie</a>.</p>
<p>Let's go for a ride!</p>
<h2 data-sanitized-id="lessdetailsgreater-and-lesssummarygreater-as-a-aria-disclosure-pattern-foundation"><code>&lt;details&gt;</code> and <code>&lt;summary&gt;</code> as a ARIA disclosure pattern foundation</h2>
<p>Think of those "Show more" button thinggies where activating it make the content below appear. Making such component accessible currently require you to implement <a href="https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/">the ARIA disclosure design pattern</a>, basically using a button with <code>aria-expanded</code> attribute to communicate state.</p>
<p><code>&lt;details&gt;</code> and <code>&lt;summary&gt;</code> are a really good fit for this. As their names are pretty obvious, this markup pattern will display a summary and hide details—but make details available when activating the summary— and the <a href="https://thepaciellogroup.github.io/AT-browser-tests/test-files/details-summary.html">browsers implementation</a> and <a href="https://caniuse.com/details">support</a> are really good.</p>
<p>This feels quite right, isn't it? So why bother with the disclosure pattern at all and not use details and summary all the way? Well, interactions are not exactly what's expected by your users and support in browser and assistive technologies is not straightforward yet— <a href="https://www.scottohara.me/blog/2022/09/12/details-summary.html">as Scott O'Hara pointed out</a>.</p>
<p>But… may we use it as our foundation for an ARIA disclosure pattern? <a href="https://codepen.io/ffoodd/pen/XWYmmGj">Let's figure it out in a dedicated CodePen</a>!</p>
<p data-height="300" data-default-tab="html,result" data-slug-hash="XWYmmGj" data-user="ffoodd" data-sanitized-class="codepen">
  <span>See the Pen <a href="https://codepen.io/ffoodd/pen/XWYmmGj">
  Enhanced &lt;details&gt; with ARIA disclosure</a> by ffoodd (<a href="https://codepen.io/ffoodd">@ffoodd</a>)
  on <a href="https://codepen.io/">CodePen</a>.</span>
</p>
<p>Not much magic here: to improve and harmonize AT support, we make it a disclosure by adding to <code>&lt;summary&gt;</code> a button role and <code>aria-expanded</code> to convey state and make sure the disclosed content is hidden with the eponymous attribute. The <code>open</code> attribute on <code>&lt;details&gt;</code> handles this natively but <a href="https://www.scottohara.me/blog/2022/09/12/details-summary.html#impact-of-removing-the-default-disclosure-triangle">we can't rely on it as long as we override the default triangle marker</a> —which we will undoubtedly do: we must fully implement the disclosure pattern to prevent inconsistent rendering in browsers and ATs.</p>
<p>Moreover, did you know Chromium-based browsers allow collapsed details content discoverability using browser search? That's something coming to HTML with <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden#the_hidden_until_found_state">the <code>until-found</code> value for the <code>hidden</code> attribute</a>, but that's not supposed to be the case of disclosed content when using the ARIA pattern.</p>
<p>As you may have understood, using <code>&lt;details&gt;</code> and <code>&lt;summary&gt;</code> enhanced with the ARIA disclosure pattern makes little to no difference for most users… but whenever your JS or CSS fails, your semantic markup would take over and stay interactive—with all its current limitations in ATs.</p>
<p>Also please be careful using those elements as a foundation: they aren't a good fit <a href="https://daverupert.com/2019/12/why-details-is-not-an-accordion/">for accordions</a>, <a href="https://melsumner.github.io/details-as-a-menu">a flyout menu</a>, <a href="https://cloudfour.com/thinks/a-details-element-as-a-burger-menu-is-not-accessible/">a burger menu</a>, <a href="https://adrianroselli.com/2019/04/details-summary-are-not-insert-control-here.html">a tab set or a dialog</a>… Stay semantic!</p>
<p>What if I told you there's more progressively enhanceable HTML elements like those? Wanna have a look?</p>
<h2 data-sanitized-id="lessoutputgreater-as-a-live-region"><code>&lt;output&gt;</code> as a live region</h2>
<p>Ever needed to populate a live region to communicate content changes to screen reader users—often being <a href="https://kittygiraudel.com/2016/10/13/css-hide-and-seek/">visually hidden with CSS</a>? That's quite common now, and you find live region handling in some frameworks: <a href="https://material.angular.io/cdk/a11y/overview#liveannouncer">Angular has a <code>LiveAnnouncer</code> in its Accessibility CDK</a>, <a href="https://make.wordpress.org/accessibility/handbook/markup/wp-a11y-speak/">WordPress has it <code>wp.a11y.speak()</code> internal script</a>… <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions">ARIA live regions rely on three specific roles: <code>status</code>, <code>log</code> and <code>alert</code></a>, each having a slightly different behaviour.</p>
<p>But did you know there's an HTML element that's a native live region, with an implicit <code>status</code> role? <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output">Meet &lt;output&gt;</a>! Its <a href="https://thepaciellogroup.github.io/AT-browser-tests/test-files/output.html">browser implementation is complete</a> and <a href="https://caniuse.com/mdn-html_elements_output">support is excellent</a>. However some specific browsers and ATs pairing are flawed, as <a href="https://www.scottohara.me/blog/2019/07/10/the-output-element.html">Scott O'Hara (again) pointed out</a>.</p>
<p><a href="https://codepen.io/ffoodd/pen/rNvqGBB">Let's make <code>&lt;output&gt;</code> more robust by making it an ARIA live region, on CodePen</a>!</p>
<p data-height="300" data-default-tab="html,result" data-slug-hash="rNvqGBB" data-user="ffoodd" data-sanitized-class="codepen">
  <span>See the Pen <a href="https://codepen.io/ffoodd/pen/rNvqGBB">
  Enhanced &lt;output&gt; with status role</a> by ffoodd (<a href="https://codepen.io/ffoodd">@ffoodd</a>)
  on <a href="https://codepen.io/">CodePen</a>.</span>
</p>
<p>As you may remember, expliciting HTML elements roles was quite needed a few years ago for landmarks mostly to improve support in browsers and ATs —and still recommended in some accessibility guidelines like <a href="https://www.numerique.gouv.fr/publications/rgaa-accessibilite/methode-rgaa/criteres/#crit-12-6">the French RGAA</a>. We got used to write <code>&lt;main role="main"&gt;</code>, <code>&lt;header role="banner"&gt;</code> and so on. What's also good with <code>&lt;output role="status"&gt;</code> is that it allows you to style your live regions by selecting the output element: lower specificity, and some kind of soft reset too —CSS containment, maybe?</p>
<h3 data-sanitized-id="a-more-specific-live-region-toast!">A more specific live region: toast!</h3>
<p>There's also a case for visually displayed live regions: toasts! I won't go way further on the topic, because it's been explored in a wide variety of posts: <a href="https://www.scottohara.me/blog/2019/07/10/the-output-element.html">Scott O'Hara already mentionned <cite>The output element</cite></a>, a technical follow-up of his <a href="https://www.scottohara.me/blog/2019/07/08/a-toast-to-a11y-toasts.html"><cite>A toast to an accessible toast…</cite> addressing UX concerns)</a>, and <a href="https://adrianroselli.com/2020/01/defining-toast-messages.html">Adrian Roselli in <cite>Defining toast messages</cite></a>.</p>
<p><strong>Warning</strong>: if your toast or live region contains interactive elements, it should probably use a <code>dialog</code> or <code>alertdialog</code> role, and preferably not an <code>&lt;output&gt;</code> element at all. But… there might be another HTML element for that!</p>
<h2 data-sanitized-id="a-modal-lessdialoggreater">A modal <code>&lt;dialog&gt;</code></h2>
<p>I won't go that deep with <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog">the <code>&lt;dialog&gt;</code> element</a>, but let's explore what it does natively compared to <a href="https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/">the ARIA dialog design pattern</a>:</p>
<ul>
<li>it has an implicit <code>dialog</code> role,</li>
<li>when opened with the <code>.showModal()</code> method:
<ul>
<li>it has an implicit <code>aria-modal="true"</code> property,</li>
<li>it's closable with the <kbd>Escape</kbd> key,</li>
</ul>
</li>
<li>it traps focus in the dialog —but allows to get out of the browser frame…</li>
<li>it restores focus to the opening element when closing the dialog,</li>
<li>it makes the document <a href="https://developer.mozilla.org/docs/Web/API/HTMLElement/inert"><code>inert</code></a> automatically.</li>
</ul>
<p>And there's more:</p>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop">the <code>::backdrop</code> pseudo-element</a> allows you to style your dialog overlay really easily,</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:modal">the <code>:modal</code> pseudo-class</a> applies when opening dialog with the <code>.showModal()</code> method,</li>
<li>if your dialog contains a form, using <code>method="dialog"</code> form attribute makes your submit button to close the dialog.</li>
</ul>
<p>Dialog element on its own isn't consistent enough in browsers and ATs (yet), <a href="https://www.scottohara.me/blog/2019/03/05/open-dialog.html">as Scott O'Harra (again) pointed out</a>, but you got the idea: what about enhancing it by applying the ARIA dialog pattern to it, and relying on its standard behaviour to save a few lines of JavaScript? That's more or less what <a href="https://web.dev/building-a-dialog-component/">Adam Argyle explored in his dialog component pattern on web.dev</a> with some nice little tricks to learn —however keep in mind <a href="https://twitter.com/aardrian/status/1586792250113232896">web.dev patterns aren't battle-tested with ATs nor against WCAG</a>. <a href="https://css-tricks.com/dialog-components-roll-your-own/">Building a dialog component is not straightforward</a>, and <a href="https://www.smashingmagazine.com/2021/07/accessible-dialog-from-scratch/">Kitty Giraudel goes in details about what's needed to make an <cite>accessible dialog from scratch</cite></a>. Since those posts, the dialog support has improved quite a lot and is even <a href="https://wpt.fyi/interop-2022">part of Interop 2022</a>, so expect it to improve again this year's last month.</p>
<p>This is probably the least obvious case, since speaking of progressive enhancement the <code>&lt;dialog&gt;</code> element might be a bad choice: it simply cannot work without JavaScript. But if your JavaScript fails for any reason, your event handlers might still work.</p>
<h2 data-sanitized-id="conclusion">Conclusion</h2>
<p>HTML is awesome. It's obviously not enough to provide a fully accessible experience to users, as <a href="https://daverupert.com/2020/02/html-the-inaccessible-parts/">Dave Rupert highlighted two years ago in <cite>HTML: the inaccessible parts<cite></cite></cite></a> — even if some of those examples are not accurate anymore, fixed in either browser or ATs.</p>
<p>But not being perfect is probably still better than being neutral, isn't it?</p>
<p>I think that's the kind of thing HTML unveils: at some point, details and summary shall be consistently implemented and exposed to ATs, making ARIA enhancements pointless. Scott's work, from advanced testing to blog posts and filing bugs, are the way forward. Fully implemented patterns in libraries like <a href="https://a11y-dialog.netlify.app/">Kitty Giraudel's a11y-dialog</a> are what alllows maturity and clarify expectations. And as usage increases, browsers and ATs will eventually consider prioritization, in Interop or <a href="https://aria-at.w3.org/">ARIA-AT</a>.</p>
<p>Let's use, test and help browsers and ATs support those newer HTML elements!</p>


guid: https://odysee.com/senator-richard-black-on-ukraine-war-on:026e005a35b1a0019bc4b494a9e42df60acc44ca
title: Senator Richard Black on Ukraine War on the Donbass, Russia's Reaction, NATO's Drive to Nuclear War
author: ;Eva K Bartlett
link: https://odysee.com/senator-richard-black-on-ukraine-war-on:026e005a35b1a0019bc4b494a9e42df60acc44ca
hash: �\}���v��V&��T
content:
<p><img src="https://thumbnails.lbry.com/ys_lI6mXA_c" width="480" alt="thumbnail" title="Senator Richard Black on Ukraine War on the Donbass, Russia's Reaction, NATO's Drive to Nuclear War"></p>“There is this element of madmen—some of the politicians, some of them military people, many of them in the US State Department, the CIA—who would be willing to do the most reckless and insane of actions to risk nuclear war or even to initiate it.” <br><br>On December 16, I spoke with Senator Richard Black about Ukraine's long war against the civilians of the Donbass, Russia's Special Military Operation in Ukraine, and the Western warmongers behind it all and their drive for endless war.<br><br>Senator Black has had an extensive military, legal and political career, serving in the US marines, and after obtaining his law degree, serving in the U.S. Army Judge Advocate General’s Corps and head of the Army’s Criminal Law Division in the Pentagon. He served eight years in the Virginia State Senate.<br><br>He is one of the few sane American voices loudly advocating for the end to Ukraine's genocide of the Donbass people, and for an end to the West's proxy war against Russia.<br><br>Follow him at:<br><br>http://www.senatorblack.com/<br>https://twitter.com/SenRichardBlack<br><br>Related Links:<br><br>*Chronology of events: the war didn't start in February 2022<br>https://www.thepostil.com/the-military-situation-in-the-ukraine/<br><br>*My Donetsk &amp; Lugansk People's Republics playlist<br>https://www.youtube.com/playlist?list=PLqtiZC-4QZC3VvabZMbM0FbOcwBoLdGBT<br><br>*My Syria writings<br>https://ingaza.wordpress.com/syria/syria-my-published-articles-from-and-on-syria-2014-2022/ <br><br>*The Referendum on Joining Russia<br>https://ingaza.wordpress.com/2022/09/29/dpr-civilians-on-why-they-wanted-a-referendum-to-join-russia/<br>https://ingaza.wordpress.com/2022/10/01/interviews-with-donetsk-residents-after-joining-russia/<br>https://ingaza.wordpress.com/2022/09/28/my-interview-from-donetsk-on-the-peoples-eagerness-to-vote-to-join-russia/<br><br>*Ukrainian war crimes I've experienced or documented<br><br>https://ingaza.wordpress.com/2022/10/24/ukrainian-army-war-crimes-include-shelling-of-ambulences-firetrucks-and-rescue-workers-in-the-donbass-republics-similar-to-israelis-and-u-s-backed-terrorists-in-syria/<br><br>14 Year Old Is One of 87 Donbass Civilians Maimed By Petal Mines Fired By Ukraine<br>https://www.youtube.com/watch?v=K-QSv-zwoSU <br><br>Carnage: Ukraine's terrorism on Donetsk September 19 killed 16 civilians, 9 in one spot<br>https://www.youtube.com/watch?v=zJpXcwMAVeI<br><br>Ukraine shelled a completely civilian area of central Donetsk, killing at least 5 civilians<br>https://www.youtube.com/watch?v=CWqeFG7DhIs<br><br>Ukrainian Terrorism of Central Donetsk September 17 Kills 4, Using Western Weapons<br>https://www.youtube.com/watch?v=kzew0mXOo2Y <br><br>More Ukrainian War Crimes: Killing &amp; Maiming Heroic Donbass Medics &amp; Emergency Workers<br>https://www.youtube.com/watch?v=BJZvxWQfSHc <br><br>Donbass Frontline Villager: "Ukraine Doesn't Consider Us Human", Wants To "Annihilate Us”<br>https://www.youtube.com/watch?v=tYLC5hsd2aA<br><br>Using American HIMARS, Ukraine Bombed Central Donetsk Building Nov 7<br>https://www.youtube.com/watch?v=0EArikOHkXc <br><br>Ukraine's Bombing of Central Donetsk August 4: 2 Ballerinas Among the 6 Murdered by Ukraine<br>https://www.youtube.com/watch?v=IQNQ_vT_j-k <br><br>Ukraine bombed just outside the hotel I was in. Was Ukraine targeting journalists?<br>https://www.youtube.com/watch?v=JqZgG7s-Sjw <br><br>Ukrainian Terrorism: Firing Munitions Containing Petal Mines On Donbass Orphanage, Another War Crime<br>https://www.youtube.com/watch?v=dCpRy1iDXcA<br><br>Ukraine turns Donetsk into a minefield using banned ‘Petal’ mines<br>https://www.youtube.com/watch?v=B6wJbPJv0kk <br><br>Civilians Fled Ukraine's Shelling of Popasnaya For Safety in Stakhanov, But Ukraine Bombs There Too<br>https://www.youtube.com/watch?v=C3H2zrrW3Dk <br><br>Ukraine Bombarded Donetsk, Including Bombing a Maternity Hospital, Then Claimed Russian Did It<br>https://www.youtube.com/watch?v=rsLWcR21iK8 <br><br>Ukrainian bombing of civilian areas of Donetsk June 13 killed 5 &amp; caused massive fires<br>https://www.youtube.com/watch?v=0tlJ8MgMCLs <br><br>Kirovsk, a City Under Ukrainian Fire<br>https://www.youtube.com/watch?v=IYpI05Rhcg4<br><br>https://ingaza.wordpress.com/2022/08/25/in-just-under-three-weeks-ukrainian-fired-prohibited-petal-mines-maim-at-least-44-civilians-kill-2-in-donetsk-region/ <br>https://ingaza.wordpress.com/2022/09/26/western-media-continues-to-ignore-how-ukraine-is-using-nato-weapons-to-kill-innocent-civilians-in-the-donbass/<br>https://ingaza.wordpress.com/2022/08/10/what-ive-seen-of-ukraines-war-crimes-against-civilians-in-the-donbass-over-the-past-few-months/ <br>https://ingaza.wordpress.com/2022/08/06/ukraine-bombed-a-donetsk-hotel-full-of-journalists-heres-what-it-felt-like-to-be-inside-at-the-time/ <br>https://ingaza.wordpress.com/2022/06/17/western-media-and-politicians-prefer-to-ignore-the-truth-about-donetsk-civilians-killed-in-ukrainian-shelling/ <br>https://ingaza.wordpress.com/2022/04/29/ukrainian-strike-on-donetsk-market-was-a-terrorist-act/ <br>https://ingaza.wordpress.com/2022/04/08/they-saw-and-heard-the-truth-then-lied-about-it-media-on-donbass-delegation-omitted-mention-of-ukraines-8-year-war-on-the-autonomous-republics/<br>...<br>https://www.youtube.com/watch?v=ys_lI6mXA_c

attributes:
{"enclosures":[{"url":"https://player.odycdn.com/api/v3/streams/free/senator-richard-black-on-ukraine-war-on/026e005a35b1a0019bc4b494a9e42df60acc44ca/7a7cf2.mp4","type":"video/mp4","length":662559195}]}


guid: https://htmhell.dev/adventcalendar/2022/18/
title: Mini-guide to add an image
author: ;Manuel Matuzovic
link: https://htmhell.dev/adventcalendar/2022/18/
hash: �5kC���Ic�-�"
attributes: {"enclosures":[]}
content:
<p>Adding an image with HTML is pretty easy, it’s just a simple tag, after all, right?</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>img</span> <span data-sanitized-class="token attr-name">src</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>path/to/image.jpg<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span></code></pre>
<p>But when you start taking into consideration topics such as performance, screen sizes, accessibility, pixel density, or user preferences, you might ask yourself at some point if plain HTML is enough for the task… And the answer is yes! HTML has many options and is powerful enough to handle this task. This article will cover what you should consider at the moment of adding an image to a site with HTML.</p>
<h2 data-sanitized-id="basic-considerations">Basic considerations</h2>
<h3 data-sanitized-id="alt-attribute"><code>alt</code> attribute</h3>
<p>Let’s start with a very important one: your image needs an alternative text. It’ll have screen reader users to identify the image content, but it’ll also help when the image doesn’t load (maybe because the image is not available, or maybe because the user has a slow network). Otherwise, they won’t know what the image is. This can be done with the <code>alt</code> attribute.</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>img</span> <span data-sanitized-class="token attr-name">src</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>path/to/image.jpg<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">alt</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>A white cat laying on a sofa<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span></code></pre>
<p>Keep in mind, sometimes an image is there for purely decorative purposes, so making it visible for screen readers might not be ideal, in those cases, you can use an empty <code>alt</code> to make screen readers ignore this image.</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>img</span> <span data-sanitized-class="token attr-name">src</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>path/to/image.jpg<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">alt</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span><span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span></code></pre>
<p>What should the alternative text contain? Usually, it should contain a brief but concise description of what’s in the image. If it’s an image with important information (like a place for an event or a full infographic), this information should also be in alternative text. W3C has created <a href="https://www.w3.org/WAI/tutorials/images/decision-tree/">an alt decision tree</a> to help you decide what information you should add.</p>
<h3 data-sanitized-id="width-and-height-attribute"><code>width</code> and <code>height</code> attribute</h3>
<p>One of the most important metrics for performance is <strong>Cumulative Layout Shift (CLS)</strong>, which measures how much a website's content shifts when it’s on screen. In other words, a low CLS means the content is pretty stable and will create no problem with user interactivity. You can check more about this concept, you can check <a href="https://web.dev/cls/">this article on web.dev about CLS</a>.</p>
<p>Image loading can create layout shift issues and one way to avoid them is by using the attributes <code>width</code> and <code>height</code> for images. It’ll tell the browser the intrinsic size of the image, and it’ll create the image’s aspect ratio when the website is loading, which will reduce the layout shift it can create. This is how it’d look in an image.</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>img</span> <span data-sanitized-class="token attr-name">src</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>path/to/image.jpg<span data-sanitized-class="token punctuation">"</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token attr-name">alt</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>A white cat laying on a sofa<span data-sanitized-class="token punctuation">"</span></span></span><br><span data-sanitized-class="highlight-line">  <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>1200<span data-sanitized-class="token punctuation">"</span></span></span><br>  <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>800<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></code></pre>
<p>But that’s not all we can do to improve performance on our website with an <code>img</code> tag!</p>
<h3 data-sanitized-id="lazy-loading">Lazy loading</h3>
<p>You can have a lot of images on your website, and that can affect its loading time. This is where the concept of <strong>lazy loading</strong> comes in. That means the image will start to load only when it’s on the visible part of the viewport. There was a time when this was made with JavaScript but now HTML offers us a way to do it easily by using the attribute <code>loading="lazy"</code></p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>img</span> <span data-sanitized-class="token attr-name">src</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>path/to/image.jpg<span data-sanitized-class="token punctuation">"</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token attr-name">alt</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>A white cat laying on a sofa<span data-sanitized-class="token punctuation">"</span></span></span><br><span data-sanitized-class="highlight-line">  <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>1200<span data-sanitized-class="token punctuation">"</span></span></span><br><span data-sanitized-class="highlight-line">  <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>800<span data-sanitized-class="token punctuation">"</span></span></span><br>  <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></code></pre>
<p>When you use <code>loading="lazy"</code> in tandem with <code>height</code> and <code>width</code> attributes, you’ll make sure the website has enough space for the image at the moment of loading, and at the same time, you’ll not load the image unless the user needs it, which is great for performance!</p>
<p>Keep in mind though, if a user has JavaScript disabled, <code>loading="lazy"</code> won’t work, so you need to keep in mind other performance considerations, but let’s put a pin on that topic for now.</p>
<p>Also, keep in mind using <code>loading="lazy"</code> in your Largest Content Painting element (we’ll talk about this metric later) will actually <strong>increase</strong> your loading time, so be careful and always test it to know if this attribute gives the intended results.</p>
<h3 data-sanitized-id="figure-and-figcaption"><code>figure</code> and <code>figcaption</code></h3>
<p>Sometimes, you need to add additional information that wouldn’t fit in the <code>alt</code>, like image credits, or an important note about it that you’d prefer everybody can access to it. You can use the tag <code>figure</code> to wrap the <code>img</code> and then add a caption with the tag <code>figcaption</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>figure</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br>  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>img</span> <span data-sanitized-class="token attr-name">src</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>path/to/image.jpg<span data-sanitized-class="token punctuation">"</span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token attr-name">alt</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>A white cat laying on a sofa<span data-sanitized-class="token punctuation">"</span></span></span><br><span data-sanitized-class="highlight-line">    <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>1200<span data-sanitized-class="token punctuation">"</span></span></span><br><span data-sanitized-class="highlight-line">    <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>800<span data-sanitized-class="token punctuation">"</span></span></span><br>    <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><br><span data-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>Persian cats can be recognized by their big hair, round face, and short muzzle<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></code></pre>
<p>Keep in mind, <code>figcaption</code> needs to be a direct child of the <code>figure</code> element. Otherwise, it might not be recognized by assistive technologies. This is something Manuel highlights in his article <a href="https://www.matuzo.at/blog/2022/divs-are-bad/">divs are bad!</a>.</p>
<p>Keeping these considerations in mind helps a lot when you create an image, but that’s just the tip of the iceberg. When you start taking into consideration multiple variables like screen sizes, image formats, and user preferences. <code>img</code> tag starts to fall short in power. This is where another tag comes in to add more functionality!</p>
<h2 data-sanitized-id="picture-tag"><code>picture</code> tag</h2>
<p>This tag is a container for multiple image sources and depending on the conditions you add to them, the browser will start choosing the right file depending on multiple factors like the viewport’s size, image format, pixel density, or user preferences. It acts as a wrapper for the multiple <code>source</code> elements you’ll use to determine the best image.</p>
<p>Let’s start checking out what we can do with this element.</p>
<h3 data-sanitized-id="supporting-different-image-formats">Supporting different image formats</h3>
<p>Unlike <code>.png</code> or <code>.jpg</code> image formats, there are image formats like <code>.avif</code>, <code>.webp</code>, or <code>.apng</code> that you might want to use because they don’t have a loss in quality but have much less weight that a more supported format. However, the previously mentioned image formats have broader support. We can use the <code>source</code> tag to let us use more optimized image formats depending on the browser’s support. For this, we can use the attribute <code>type</code> in the <code>source</code> element to indicate the format you need to evaluate.</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>path/to/image.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>path/to/image.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="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>img</span> <span data-sanitized-class="token attr-name">src</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>path/to/image.jpg<span data-sanitized-class="token punctuation">"</span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token attr-name">alt</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>A white cat laying on a sofa<span data-sanitized-class="token punctuation">"</span></span></span><br><span data-sanitized-class="highlight-line">    <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>1200<span data-sanitized-class="token punctuation">"</span></span></span><br><span data-sanitized-class="highlight-line">    <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>800<span data-sanitized-class="token punctuation">"</span></span></span><br>    <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><br><span data-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>In this case, it’ll start checking if the browser can accept the <code>.avif</code> format, if it’s not the case (like Safari before version 16), it’ll check if the <code>.webp</code> format is supported. If it’s not, it’ll show the one in the <code>img</code> element. There are multiple image formats available. If you want to learn more about it, you can check <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types">MDN’s documentation about this topic</a>.</p>
<p>Do you remember I mentioned <code>loading="lazy"</code> might not be enough for performance purposes? This will help us to consider the browser’s support to load the most optimal image possible, creating a very robust system to give the user the best image quality possible <strong>and</strong> use as less bandwidth as necessary. It’s the best of both worlds, and that’s possible with just HTML!</p>
<h3 data-sanitized-id="responsive-images">Responsive images</h3>
<p>You may want to show a different image or a different part of an image depending on the viewport’s size. <code>picture</code> element can help us with that with the <code>media</code> attribute, where we can use a media query to detect the viewport’s size and add a different image when needed.</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>path/to/image-mobile.jpg<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>(max-width: 600px)<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span><br>  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>img</span> <span data-sanitized-class="token attr-name">src</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>path/to/image.jpg<span data-sanitized-class="token punctuation">"</span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token attr-name">alt</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>A white cat laying on a sofa<span data-sanitized-class="token punctuation">"</span></span></span><br><span data-sanitized-class="highlight-line">    <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>1200<span data-sanitized-class="token punctuation">"</span></span></span><br><span data-sanitized-class="highlight-line">    <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>800<span data-sanitized-class="token punctuation">"</span></span></span><br>    <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><br><span data-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>You can use any valid media query there, so for example <code>orientation: portrait</code> and <code>orientation: landscape</code> are valid options when you want to show a different image depending on if the viewport’s width is bigger (or smaller) than its width. There are many possibilities you can consider to give the best image to the user.</p>
<h3 data-sanitized-id="user-preferences">User preferences</h3>
<p>Now, this is very convenient for performance and user experience, but this also has an important use for accessibility: we can check user preferences to help people with certain disabilities.<br>
For example, some people might have problems like migraines that would prefer to use dark mode, and a very bright image could trigger a migraine attack, so having a version of your image that is better suited for dark mode would be ideal.</p>
<p>Or maybe you have a gif, and someone has disabled animations on their device. You might want to show a static image instead so their experience is not affected. How can we do that?</p>
<p>As I mentioned, you can use any valid media query, that includes media queries that check user preferences like <code>prefers-color-scheme</code> or <code>prefers-reduced-motion</code>. We can even mix them with logical operators to show the appropriate image. Let’s check out how it works with an example.</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 comment">&lt;!-- Both dark mode preference and animations are disabled --&gt;</span></span><br>  <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>path/to/image-dm.jpg<span data-sanitized-class="token punctuation">"</span></span><br>    <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: reduce) and (prefers-color-scheme: dark)<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token comment">&lt;!-- Static image when animations are disabled --&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>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>path/to/image.jpg<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: reduce)<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;!-- Dark mode preference is checked --&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>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>path/to/image-dm.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-color-scheme: dark)<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 comment">&lt;!-- None of those preferences is active --&gt;</span>        </span><br>  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>img</span> <span data-sanitized-class="token attr-name">src</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>path/to/image.gif<span data-sanitized-class="token punctuation">"</span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token attr-name">alt</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>A cat dancing<span data-sanitized-class="token punctuation">"</span></span></span><br><span data-sanitized-class="highlight-line">    <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>1200<span data-sanitized-class="token punctuation">"</span></span></span><br><span data-sanitized-class="highlight-line">    <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>800<span data-sanitized-class="token punctuation">"</span></span></span><br>    <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><br><span data-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>It’s very important to note that order matters, it’s better to add the tags with more specific media query requirements first to be sure they will not be overwritten by the ones that will appear later. Also, keep in mind you can combine all you have seen, so there are a lot of possibilities with <code>picture</code> and <code>source</code> elements.</p>
<p>That covers mostly everything you should consider but there are a couple of points you can take into account.</p>
<h2 data-sanitized-id="additional-considerations">Additional considerations</h2>
<h3 data-sanitized-id="pixel-density-and-srcset">Pixel density and <code>srcset</code></h3>
<p>The attribute <code>srcset</code> you use in the picture element has a slightly different syntax if you want to give a better image depending on the device’s pixel density. For this, we can add a list of images separated by commas and after the image’s URL, we’ll put the type of pixel density we want to support with this image. Let’s take a look at it with an example:</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="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>source</span><br>    <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>path/to/image-mobile.jpg 1x,<br><span data-sanitized-class="highlight-line">            path/to/image-mobile-2x.jpg 2x,</span><br>            path/to-image-mobile-3x.jpg 3x<span data-sanitized-class="token punctuation">"</span></span><br>    <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>(max-width: 600px)<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span><br>  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>img</span> <span data-sanitized-class="token attr-name">src</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>path/to/image.jpg<span data-sanitized-class="token punctuation">"</span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token attr-name">alt</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>A white cat laying on a sofa<span data-sanitized-class="token punctuation">"</span></span></span><br><span data-sanitized-class="highlight-line">    <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>1200<span data-sanitized-class="token punctuation">"</span></span></span><br><span data-sanitized-class="highlight-line">    <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>800<span data-sanitized-class="token punctuation">"</span></span></span><br>    <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>path/to/image-2x.jpg 2x,<br>            path/to/image-3x.jpg 3x<span data-sanitized-class="token punctuation">"</span></span><br>    <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><br><span data-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>There is something I didn’t mention and that is the fact you can use the <code>srcset</code> attribute in the <code>img</code> element, and it works great when you want to support images depending on the device’s pixel density. Next time to want to bring better quality images for images depending on the device, you now know how to do that!</p>
<h3 data-sanitized-id="preload-image-to-improve-lcp">Preload image to improve LCP</h3>
<p>Do you remember when I mentioned CLS? There is another metric called <a href="https://web.dev/lcp/">Largest Content Paint (LCP)</a> which is a metric that measures how much it takes to load the biggest image (or text block) to render in the viewport. Commonly, this LCP is a big image. We can use other image formats to decrease the LCP’s size, but what if that’s not enough? We have the alternative of preloading the image in the <code>head</code>, so it'll make the image renders faster, and by extension, improve this metric. This is how it’d look in our <code>head</code> tag.</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>head</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>link</span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>preload<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>path/to/image.jpg<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">as</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<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>head</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p>You don’t want to abuse this technique though, because otherwise, it’ll <strong>increase</strong> the page load time. Just use it for your most important image(s) and test performance accordingly to check if it’s improving those metrics.</p>
<h3 data-sanitized-id='decoding="async"'><code>decoding="async"</code></h3>
<p>I mentioned <code>loading="lazy"</code> before but there is another HTML attribute we can use to optimize a website’s loading time. While <code>loading="lazy"</code>  decides <strong>when</strong> the image will be loaded (at the moment that it is close to the viewport), we have another attribute that defines <strong>how</strong> it’ll be loaded</p>
<p>Normally, all our site will be loaded synchronously because the browser reads HTML line by line, so if it finds a big image, the rest of the site won’t download until the image is loaded. This is where  <code>decoding="async"</code> enters to give a hint to the browser to try to download the image and at the same time downloading another part of the site.</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>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>A white cat laying on a sofa<span data-sanitized-class="token punctuation">"</span></span><br><span data-sanitized-class="highlight-line">    <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>1200<span data-sanitized-class="token punctuation">"</span></span></span><br><span data-sanitized-class="highlight-line">    <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>800<span data-sanitized-class="token punctuation">"</span></span></span><br><span data-sanitized-class="highlight-line">    <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><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token attr-name">decoding</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>async<span data-sanitized-class="token punctuation">"</span></span></span><br><span data-sanitized-class="token punctuation">/&gt;</span></span></code></pre>
<p>Using both, <code>decoding="async"</code> and <code>loading="lazy"</code> in an image, it’ll help to reduce greatly a website’s loading time, and <code>decoding</code> is a highly supported attribute.</p>
<h2 data-sanitized-id="wrapping-up">Wrapping up</h2>
<p>Adding an image to a website is easy… But things start to complicate when you start to keep in mind performance and accessibility considerations. Luckily for us, HTML can give us the proper tools to tackle those considerations with no problem at all.</p>
<p>I chose this topic for this Advent Calendar for a reason and it’s because it made me notice how powerful, robust, and surprisingly complex HTML is. Seeing what HTML has to offer just to bring the right image to your screen with relatively low effort was fascinating and it started me to make dig deeper into what HTML can do.</p>


guid: https://christitus.com/virtual-machine-formats/
title: Virtual Machine Formats
link: https://christitus.com/virtual-machine-formats/
hash: ��{⅀�|�CW\<
attributes: {"enclosures":[]}
content:
<p>This Guide goes over transferring and what each type of virtual machine is used for.</p>
<h2 data-sanitized-id="the-types">The Types</h2>
<h3 data-sanitized-id="vdi---virtualbox">VDI - Virtualbox</h3>
<p>The only time I’ve seen this format is in Virtualbox instances. They are always converted when moved to other hypervisors. The VDI packaging is open source and considered efficient.</p>
<h3 data-sanitized-id="vmdk---vmware">VMDK - VMWare</h3>
<p>This is the market leader and what you will see the most in virtualization environments. Virtualbox and QEMU can run them without conversion.</p>
<h3 data-sanitized-id="vhd---microsoft">VHD - Microsoft</h3>
<p>Leave it to Microsoft to make the worst container. VHD only holds a 2 TB capacity and why they created VHDX which improves this to 64 TB. Its not as performant as other containers, but gets the job done. The main benefit to these is they are read natively inside Windows without the need for extra software. You can mount and look at partition layouts with native windows tools like Disk Management.</p>
<h3 data-sanitized-id="qcow2---qemu">QCOW2 - QEMU</h3>
<p>QEMU is by far my favorite hypervisor because of the versatility it gives me. QCOW2 is the file format you will use and it fantastic. There is a conversion tool that comes with QEMU that will easily convert any image. I’d recommend first converting the image to OVA as it is the most portable and versatile. Here is a sample script to convert to qcow2.</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">tar -xvf original.ova
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">qemu-img convert -O qcow2 original.vmdk original.qcow2
</span></span></code></pre></div><h3 data-sanitized-id="ovf-and-ova---the-best-way-to-share-vms">OVF and OVA - The Best Way to Share VMs</h3>
<p>This standard is widely adopted from VMWare, but you will be able to ingest these files into any hypervisor. VMWare, Virtualbox, and XenServer (XCP-ng) do this natively, where QEMU needs a little more conversion, but simple to use. Here is the <a href="https://docs.vmware.com/en/VMware-vSphere/7.0/com.vmware.vsphere.vm_admin.doc/GUID-AE61948B-C2EE-436E-BAFB-3C7209088552.html">official website</a> right up on these files.</p>
<p>The TLDR is use OVA as it grabs all the information from the VMs (VMDK, OVF, and other information) and packages it all into one file for you. This is by far the best way to share a Virtual Machine.</p>
<h2 data-sanitized-id="walkthrough-video">Walkthrough Video</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/EdP1Fc-exwY?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://htmhell.dev/adventcalendar/2022/19/
title: Do you know color-scheme?
author: ;Manuel Matuzovic
link: https://htmhell.dev/adventcalendar/2022/19/
hash: %yO !j�+�# ��
attributes: {"enclosures":[]}
content:
<p>Do you know of <code>color-scheme</code> yet? If not, I bet you still think you do. It will certainly look familiar, as <code>prefers-color-scheme</code> has been around for longer and is clearly related.</p>
<p>You're in good company if it's new to you - the <a href="https://2022.stateofcss.com/en-US/features/accessibility/#color_scheme">State of CSS 2022</a> results just came in, and 73% of respondents had never heard of it.</p>
<p>You probably use <code>prefers-color-scheme</code> a lot within your CSS media queries, to make a dark or light theme for your sites and apps based on user preference. Maybe you also add a toggle so people can choose their color scheme, irrespective of their OS settings. Beautiful. But now there's more to play with!</p>
<h3 data-sanitized-id="what-is-color-scheme-then?">What is color-scheme, then?</h3>
<p>It's a CSS property all of its own, and can save you a bunch of styling work for dark mode.</p>
<pre data-sanitized-class="language-css"><code data-sanitized-class="language-css"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token comment">/* the selector here could be :root, html or body */</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token selector">:root</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">color-scheme</span><span data-sanitized-class="token punctuation">:</span> light dark<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>Stick the above inside your stylesheet or <code>&lt;style&gt;&lt;/style&gt;</code> tags and voila, your website, without any other styling, will now respond to the user's <code>prefer-color-scheme</code> preference, as can now often be specified in their OS settings. There are default colors set in the browser for bare HTML not only in light mode, but also in dark mode. Cool, right?</p>
<figure>
<img src="https://htmhell.dev/images/advent2022/19/bare-html.png" alt="Screenshot of two bare-HTML mini-sites, one light, one dark" loading="lazy">
<figcaption>Comparison of two mock plain HTML sites, one with color-scheme set to light, one set to dark.</figcaption>
</figure>
<p>If you're like me, and tend to create little simpler sites - or if you make bigger ones with minimal styling, and you want to provide dark mode with as little extra faff as possible, you will want to explore using <code>color-scheme</code>. There's another bit of magic here - you don't even need to use it with a <code>&lt;style&gt;</code> tag, or <code>.css</code> file at all, if you don't want. You can get dark mode with HTML only.</p>
<p>Yep, just HTML. Without even touching your CSS. You can also place it inside the <code>&lt;head&gt;&lt;/head&gt;</code> as a meta tag:</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>head</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>meta</span> <span data-sanitized-class="token attr-name">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>color-scheme<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>light dark<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>head</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p>The order of modes <code>light dark</code> or <code>dark light</code> can make a difference - a user with no preference set will see the first mode. However, given that already most current OS (mobile and computer) versions ask you if you want light or dark mode, or even a mode that changes from one to the other automatically over the day, this may soon become less effective.</p>
<h3 data-sanitized-id="why-do-i-want-to-use-it?">Why do I want to use it?</h3>
<p>Many websites leave a bunch of defaults as they are - usually light mode defaults. If they just want a white background then why declare that again? You can now do the same for dark mode.</p>
<p><a href="https://dev.to/bcalou/why-you-should-always-set-a-background-color-2gb1">Some will suggest</a> that these colors <em>should</em> always be declared - but it really depends how minimal you want to be! Leave both the text and background as default, and they will both be controlled by the users themselves, via <code>color-scheme</code>.</p>
<p>You can see when other non-dark-mode sites have stuck with browser default colors, by opening up dev tools on them, and pasting that meta tag with just <code>dark</code> into their HTML. The bits that flip in color from light to dark (and where text goes from dark to light) were using the defaults.</p>
<p>Here's an example of this happening on the BBC News website, after I added a meta tag to make the <code>color-scheme</code> dark:</p>
<img src="https://htmhell.dev/images/advent2022/19/bbc-news.png" alt="BBC News Website with color-scheme: dark injected as a meta tag" loading="lazy">
<p>Here you see they kept the main background default, but must have declared the text color - as the background darkens and renders the text almost invisible. In the "Most watched" and "Most read" sections, they've left both background and text default, and so they both flip.</p>
<h3 data-sanitized-id="how-else-can-i-use-it?">How else can I use it?</h3>
<p>Of course you can use JavaScript to manipulate the content of the meta tag.</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>head</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>meta</span> <span data-sanitized-class="token attr-name">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>color-scheme<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>light dark<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>head</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<pre data-sanitized-class="language-js"><code data-sanitized-class="language-js"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token keyword">function</span> <span data-sanitized-class="token function">lightMode</span><span data-sanitized-class="token punctuation">(</span><span data-sanitized-class="token punctuation">)</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  document</span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token punctuation">.</span><span data-sanitized-class="token function">querySelector</span><span data-sanitized-class="token punctuation">(</span><span data-sanitized-class="token string">'meta[name="color-scheme"]'</span><span data-sanitized-class="token punctuation">)</span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token punctuation">.</span><span data-sanitized-class="token function">setAttribute</span><span data-sanitized-class="token punctuation">(</span><span data-sanitized-class="token string">"content"</span><span data-sanitized-class="token punctuation">,</span> <span data-sanitized-class="token string">"light"</span><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 punctuation">}</span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token keyword">function</span> <span data-sanitized-class="token function">darkMode</span><span data-sanitized-class="token punctuation">(</span><span data-sanitized-class="token punctuation">)</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  document</span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token punctuation">.</span><span data-sanitized-class="token function">querySelector</span><span data-sanitized-class="token punctuation">(</span><span data-sanitized-class="token string">'meta[name="color-scheme"]'</span><span data-sanitized-class="token punctuation">)</span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token punctuation">.</span><span data-sanitized-class="token function">setAttribute</span><span data-sanitized-class="token punctuation">(</span><span data-sanitized-class="token string">"content"</span><span data-sanitized-class="token punctuation">,</span> <span data-sanitized-class="token string">"dark"</span><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 punctuation">}</span></span></code></pre>
<p>Or just keep the property within a <code>*.css</code> file as with other CSS properties. The world's your oyster.</p>
<pre data-sanitized-class="language-css"><code data-sanitized-class="language-css"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token selector">:root</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">color-scheme</span><span data-sanitized-class="token punctuation">:</span> light dark<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>It's really worth experimenting. You can add the CSS to <code>:root</code>, <code>html</code>, <code>body</code>, or indeed any other element, as maybe you only want parts of your site to do the flip (you might choose to keep the header and footer the same in both modes, as an example).</p>
<h3 data-sanitized-id="system-colors">System colors</h3>
<p>When targeting elements you will also need to declare at least the <code>background-color</code>, as most elements are by default transparent. You can do this with the system colors <code>Canvas</code> for the background and <code>CanvasText</code> for the default text color, as these both follow <code>color-scheme</code>.</p>
<p>There are more system colors! See them at the W3C: <a href="https://www.w3.org/TR/css-color-4/#css-system-colors">System Colors</a>.</p>
<p>A few of them are a bit variable across browsers - notably <code>LinkText</code> in some browsers doesn't always have enough contrast with the dark background in dark mode. <code>Canvas</code> and <code>CanvasText</code> are however more reliable and very useful!</p>
<pre data-sanitized-class="language-css"><code data-sanitized-class="language-css"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token selector">section</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">background-color</span><span data-sanitized-class="token punctuation">:</span> Canvas<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">color</span><span data-sanitized-class="token punctuation">:</span> CanvasText<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token selector">section.light</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">color-scheme</span><span data-sanitized-class="token punctuation">:</span> light<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token selector">section.dark</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">color-scheme</span><span data-sanitized-class="token punctuation">:</span> dark<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="ive-already-styled-everything-for-both-modes">I've already styled everything for both modes.</h3>
<p>Really, everything?</p>
<p>Know what else is great? <code>color-scheme</code> takes the default UI elements with it. The scroll bar, the select dropdowns, radio buttons and checkboxes - they all flip with <code>color-scheme</code> too, saving you all those little niggly UI styling jobs. Maybe you have already done this for your current project, but what about your next one?</p>
<img src="https://htmhell.dev/images/advent2022/19/codepen.png" alt="A minimally-styled form in both dark and light modes" loading="lazy">
<p>Please feel free to fork and play with the <a href="https://codepen.io/sarajw/pen/xxzyOMZ">Codepen</a>.</p>
<h3 data-sanitized-id="any-other-benefits?">Any other benefits?</h3>
<p>If you're happy to forgo a mode toggle, and want to also save some CSS loading time? Put your dark mode and light mode styles into separate <code>*.css</code> files, and then use the prefers-color-scheme media queries in the <code>&lt;link&gt;</code> tags in your head to only load the relevant styles.</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>link</span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>stylesheet<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>layout.css<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>link</span> <span data-sanitized-class="token attr-name">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-color-scheme:light)<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>stylesheet<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>light.css<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>link</span> <span data-sanitized-class="token attr-name">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-color-scheme:dark)<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>stylesheet<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>dark.css<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span></code></pre>
<p>Once you start allowing scheme toggling outside of the user OS-set preference, trying to do this does of course get more complicated - I would only urge you to experiment!</p>
<p>Have fun with it! You can thank me later ;)</p>
<h3 data-sanitized-id="further-reading">Further reading:</h3>
<p>For some experimentation I did, feel free to check out <a href="https://color-scheme-light-dark.netlify.app/">https://color-scheme-light-dark.netlify.app/</a></p>
<p>Do check the dates on these! <code>color-scheme</code> is still relatively new, but it's much better supported than when a couple of these articles were written - but they remain good articles on the subject:</p>
<ul>
<li>Find out more about <code>color-scheme</code> at <a href="https://web.dev/color-scheme/">https://web.dev/color-scheme/</a> by <a href="https://toot.cafe/@tomayac">Thomas Steiner</a></li>
<li><a href="https://www.jim-nielsen.com/">Jim Nielsen</a> wrote about both <code>color-scheme</code> and system colors: <a href="https://blog.jim-nielsen.com/2021/css-system-colors/">https://blog.jim-nielsen.com/2021/css-system-colors/</a></li>
<li>More on system colors from <a href="https://front-end.social/@stefan">Stefan Judis</a>: <a href="https://www.stefanjudis.com/today-i-learned/css-defines-color-values-that-follow-system-preferences/">https://www.stefanjudis.com/today-i-learned/css-defines-color-values-that-follow-system-preferences/</a></li>
</ul>
<p>Please <a href="https://front-end.social/@sarajw">ping me a message on Mastodon</a> with any solutions you come up with that use <code>color-scheme</code> - I would love to see them!</p>


guid: https://htmhell.dev/adventcalendar/2022/20/
title: Common nesting issues in HTML
author: ;Manuel Matuzovic
link: https://htmhell.dev/adventcalendar/2022/20/
hash: �'<Xܙٿ�E|�'b
attributes: {"enclosures":[]}
content:
<p>HTML is such a lovely language. Browsers will almost always display something for you, no matter what you put in the HTML document. Heck, you could omit all tags, and it will still work.</p>
<p>That’s all nice, but as web professionals, we should aim to write valid code. But even professional web developers make mistakes. Here are some examples of common nesting issues in HTML.</p>
<h2 data-sanitized-id="anchors-and-buttons">Anchors and buttons</h2>
<p>Let’s start with anchors and buttons. It is common to see buttons inside anchors out in the web wilderness.</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>#<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>button</span><span data-sanitized-class="token punctuation">&gt;</span></span>Button<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><br><span data-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>According to the specification, the anchor element must not contain any other interactive element, so <code>&lt;button&gt;</code> elements cannot live inside the <code>&lt;a&gt;</code> element.</p>
<blockquote><strong>Permitted content</strong><br>
Transparent, except that no descendant may be interactive content or an a element, and no descendant may have a specified tabindex attribute.</blockquote>
<p>- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#properties">the a element on MDN</a></p>
<p>If we validate the code against the <a href="https://validator.w3.org/nu/">HTML validator</a>, we can see that it's invalid.</p>
<img src="https://htmhell.dev/images/advent2022/17/validator.png" alt="Error message in the HTML validator: The element button must not appear as a descedant of the a element.">
<p>In the example below, when you click on a button, you will get two alerts, which is far from ideal.</p>
<p data-height="300" data-default-tab="html,result" data-slug-hash="NWzXeEO" data-user="CiTA" data-sanitized-class="codepen">
  <span>See the Pen <a href="https://codepen.io/CiTA/pen/NWzXeEO">
  Nesting issue: &lt;a&gt; and &lt;button&gt;</a> by Silvestar Bistrović (<a href="https://codepen.io/CiTA">@CiTA</a>)
  on <a href="https://codepen.io/">CodePen</a>.</span>
</p>

<p>You should avoid nesting interactive elements inside each other. It might affect user expectations and the functionality of your website negatively. If you need a link that looks like a button, <a href="https://www.htmhell.dev/4-link-also-button/">use the <code>a</code> element and style it like a button</a>. This also applies to links nested in buttons.</p>
<h2 data-sanitized-id="lists">Lists</h2>
<p>Let's have a look at other common HTML elements, <code>&lt;ul&gt;</code> and <code>&lt;ol&gt;</code>. Their direct children shouldn’t be any other element than <code>&lt;li&gt;</code>, <code>&lt;script&gt;</code>, or <code>&lt;template&gt;</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>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>List item 1<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>div</span><span data-sanitized-class="token punctuation">&gt;</span></span>Div item<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>li</span><span data-sanitized-class="token punctuation">&gt;</span></span>List item 2<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>span</span><span data-sanitized-class="token punctuation">&gt;</span></span>Div item<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>Div item<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>ul</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p>Using <code>div</code> or similar elements as direct children of lists is wrong. The final output is messed up, and users might have issues distinguishing list items from non-list items, as seen in the example below. <code>&lt;span&gt;</code> items are tough to identify, as they are rendered inline with list items.</p>
<p data-height="300" data-default-tab="html,result" data-slug-hash="XWYVovm" data-user="CiTA" data-sanitized-class="codepen">
  <span>See the Pen <a href="https://codepen.io/CiTA/pen/XWYVovm">
  Nesting issue: &lt;list&gt;</a> by Silvestar Bistrović (<a href="https://codepen.io/CiTA">@CiTA</a>)
  on <a href="https://codepen.io/">CodePen</a>.</span>
</p>
<p>Instead, only use allowed elements inside list elements.</p>
<blockquote><strong>Permitted content</strong><br>
Zero or more <code>&lt;li&gt;</code>, <code>&lt;script&gt;</code> and <code>&lt;template&gt;</code> elements.
</blockquote>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul">the ul element on MDN</a></p>
<p>Note that <code>&lt;dl&gt;</code>, the description list element, accepts <code>&lt;div&gt;</code> elements.</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>dl</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-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>dt</span><span data-sanitized-class="token punctuation">&gt;</span></span>HTML<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>dt</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>dd</span><span data-sanitized-class="token punctuation">&gt;</span></span>HTML is a…<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>dd</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-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>dt</span><span data-sanitized-class="token punctuation">&gt;</span></span>CSS<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>dt</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>dd</span><span data-sanitized-class="token punctuation">&gt;</span></span>CSS is a…<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>dd</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-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>dl</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<h2 data-sanitized-id="same-element-type-nesting">Same element type nesting</h2>
<p>Some HTML elements mustn’t be nested in their element type. For example, the <code>&lt;main&gt;</code> element shouldn’t be nested inside another <code>&lt;main&gt;</code> element.</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>main</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>main</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>main</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>main</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p>According to the spec, there should only be one visible <code>&lt;main&gt;</code> element. That makes sense because there are no multiple main contents in a page. We want a single main element that holds the main content.<br>
If you don’t respect this rule, nothing will be broken visually, but this could affect SEO and the accessibility of a page.</p>
<blockquote>A document mustn't have more than one <code>&lt;main&gt;</code> element that doesn't have the <code>hidden</code> attribute specified.</blockquote>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main">the main element on MDN</a></p>
<p>The <code>&lt;header&gt;</code> and <code>&lt;footer&gt;</code> elements also shouldn't be nested inside themselves.</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>header</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  ...</span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>header</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    ...</span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>header</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>header</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p>The difference between these two and the <code>&lt;main&gt;</code> element is that you can have multiple <code>&lt;header&gt;</code> and <code>&lt;footer&gt;</code> elements in a document, if you’re using them inside <code>&lt;main&gt;</code>, <code>&lt;section&gt;</code>, <code>&lt;article&gt;</code>,  <code>&lt;aside&gt;</code>, or <code>&lt;nav&gt;</code> elements.</p>
<p>When used outside of the these elements, they are considered as <a href="https://htmhell.dev/tips/landmarks/">landmarks</a>. In short, landmarks are organized areas of your page which help keyboard and screen reader users understand and navigate the page more easily.</p>
<p>Many other elements, like anchors and form elements, don’t allow nesting inside themselves either. However, unlike <code>header</code>, <code>footer</code>, and <code>main</code>, nesting these elements could break their functionality and styling.</p>
<h2 data-sanitized-id="fieldset/legend">Fieldset/Legend</h2>
<p>The <code>&lt;legend&gt;</code> element is used to label its parent <code>&lt;fieldset&gt;</code>. It should be the first child of the <code>&lt;fieldset&gt;</code> element and it must not be nested inside another element.</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>fieldset</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-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>legend</span><span data-sanitized-class="token punctuation">&gt;</span></span>Legend<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>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>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>radio<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>l<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>shirt1<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>label</span> <span data-sanitized-class="token attr-name">for</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>l<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Large<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><br><span data-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>radio<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>m<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>shirt1<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>label</span> <span data-sanitized-class="token attr-name">for</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>m<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Medium<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>fieldset</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p>The above code is wrong because since the <code>legend</code> is wrapped in a <code>div</code>, the <code>fieldset</code> has no accessible name. This may cause a group of radio buttons not being announced as a group and the <code>legend</code> might not have a sematic relation with the radio buttons. The visual appearance breaks as well. The legend isn’t positioned on the border of the fieldset, but below it.</p>
<p data-height="300" data-default-tab="html,result" data-slug-hash="PoagvKJ" data-user="CiTA" data-sanitized-class="codepen">
  <span>See the Pen <a href="https://codepen.io/CiTA/pen/PoagvKJ">
  Nesting issue: &lt;legend&gt;</a> by Silvestar Bistrović (<a href="https://codepen.io/CiTA">@CiTA</a>)
  on <a href="https://codepen.io/">CodePen</a>.</span>
</p>

<blockquote><strong>Permitted parents</strong><br>
 A <code>&lt;fieldset&gt;</code> whose first child is this <code>&lt;legend&gt;</code> element.</blockquote>
<p>- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend">the legend element on MDN</a></p>
<p>Even if the <code>legend</code> is not the first child of the <code>fieldset</code>, visually it will be rendered as the first element within its parent. This can be confusing for screen reader users because the visual order doesn't match DOM order.</p>
<p data-height="300" data-default-tab="html,result" data-slug-hash="GRGdqqY" data-user="CiTA" data-sanitized-class="codepen">
  <span>See the Pen <a href="https://codepen.io/CiTA/pen/GRGdqqY">
  Nesting issue: &lt;legend&gt;</a> by Silvestar Bistrović (<a href="https://codepen.io/CiTA">@CiTA</a>)
  on <a href="https://codepen.io/">CodePen</a>.</span>
</p>
<h2 data-sanitized-id="conclusion">Conclusion</h2>
<p>Let’s face it: an invalid HTML structure will not break your site in most cases, at least visually. Some might say that’s the beauty of HTML, but others say it is a curse.<br>
Nevertheless, a weak HTML structure might make your site less usable and affect your SEO score. Not only that, assistive technologies might not announce your content correctly. And finally, your code might be rendered incorrectly if browsers decide to penalise invalid HTML in the future (less likely, though). So try to avoid HTML errors at all costs.</p>
<p>There are all sorts of tools that you could use to help you avoid common issues, from online validator tools like <a href="https://validator.w3.org/nu/">Nu HTML Validator</a> to text editor extensions like <a href="https://marketplace.visualstudio.com/items?itemName=mkaufman.HTMLHint">HTMLHint</a>. If you're unsure about nesting one tag inside another, you could always go to <a href="https://caninclude.glitch.me/">Caninclude</a> for confirmation.</p>


guid: https://htmhell.dev/adventcalendar/2022/21/
title: A Theory of Web Relativity
author: ;Manuel Matuzovic
link: https://htmhell.dev/adventcalendar/2022/21/
hash: V�YW��7ϴ�t��m�
attributes: {"enclosures":[]}
content:
<p><strong>The rel attribute has the potential to take the Internet to the next level… and yet, we usually forget about it.</strong></p>
<p>Imagine a city where people guided themselves by the landmarks and the stores, where there were no directional signs, and where streets and neighborhoods had no names. It may sound like a U2 song, but it is the current state of the web.</p>
<p>The Internet is a vast network of related pages and nodes, but the connections between the elements are void of meaning by default. They lack semantics. A link may connect pages A and B, but <em>what</em> is the relationship between the two? <em>Why</em> are they related? Wouldn’t it be great if there was a way of expressing the relationship between the Internet nodes? Then we wouldn’t have just data; we would have meaningful information. It would take the Internet to a whole new level.</p>
<p>Fortunately, it is possible. Thanks to the <code>rel</code> attribute.</p>
<h2 data-sanitized-id="the-rel-attribute">The rel attribute</h2>
<p>The <code>rel</code> attribute defines a relationship between the linked resources (one being the document it appears on). And it provides that relationship with meaning, creating a semantic network where the different pieces have a role and a purpose. This detail may go unnoticed by most browser users, but not for the browser itself, assistive technologies, and web crawlers, which can take advantage of this attribute to provide a better experience. Also, savvy web developers can use it to make friendlier sites–we’ll see some examples in the following sections.</p>
<p>The <code>rel</code> attribute is valid in elements that link the document with another resource: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link">&lt;link&gt;</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a">&lt;a&gt;</a>/<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area">&lt;area&gt;</a>, and <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form">&lt;form&gt;</a>. For simplicity purposes, when talking about <code>&lt;a&gt;</code>, it will include both <code>&lt;a&gt;</code> and <code>&lt;area&gt;</code>.</p>
<p>The supported values and how the browser treats them depend on the element in which the <code>rel</code> attribute appears. This is logical because the relationship can be a <em>how</em> or a <em>what</em>, and it not always makes sense to provide the “<em>how</em>” in some links.</p>
<p>Also, some <code>rel</code>  values can be combined to generate more options and provide a more extended experience.</p>
<h2 data-sanitized-id="link-types">Link Types</h2>
<div data-sanitized-class="highlight">
<p>Author’s Note: in this article, I will refer to the values/types defined in the <a href="https://www.iana.org/assignments/link-relations/link-relations.xhtml">IANA link relationship registry</a> and the <a href="https://microformats.org/wiki/existing-rel-values">microformats wiki</a>, but the main focus will be on the <a href="https://html.spec.whatwg.org/multipage/links.html#linkTypes">values listed in the HTML Living Standard</a>.</p>
</div>
<p>I tried to group the types in categories depending on their function and the relationship they express. These are made-up categories to organize my work and they are not official in any way.</p>
<ul>
<li><a href="https://htmhell.dev/adventcalendar/2022/21/#meta-types">Meta types</a></li>
<li><a href="https://htmhell.dev/adventcalendar/2022/21/#personal-types">Personal types</a></li>
<li><a href="https://htmhell.dev/adventcalendar/2022/21/#processing-types">Processing types</a></li>
<li><a href="https://htmhell.dev/adventcalendar/2022/21/#network-types">Network types</a></li>
<li><a href="https://htmhell.dev/adventcalendar/2022/21/#sequential-types">Sequential types</a></li>
</ul>
<h2 data-sanitized-id="meta-types">Meta types</h2>
<p>“Meta links” provide information relevant to the document they appear in: meta information. Things like who’s the author? Where can we find an alternative version of the document? What is the license? Because of their nature, they can appear on <code>&lt;a&gt;</code> or <code>&lt;link&gt;</code> (although sometimes not on both) and never on a <code>&lt;form&gt;</code> tag.</p>
<h3 data-sanitized-id="alternate">alternate</h3>
<p>The “alternate” relationship usually specifies an alternative version of the document itself, but some exceptions exist. It will be the most complex of all the <code>rel</code> meta values because the meaning it provides is heavily conditioned to the context in which it is presented.</p>
<p><strong>If it appears along with the</strong> <code>**stylesheet**</code> <strong>keyword</strong>, the linked file is an alternative stylesheet. It won’t be applied to the document, but it will be ready for when we need it. For example:</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>link</span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>stylesheet<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>main-styles.css<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>link</span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>stylesheet alternate<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>dark.css<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">title</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>dark mode<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span></code></pre>
<blockquote>When using `stylesheet` with `alternate`, the `` must have a `title` attribute with a short (and non-empty) description.</blockquote>
<p>In this case, the “dark-styles.css” file is loaded asynchronously and not applied to the document. This way, the styles will be available whenever we want to apply them, without having to wait for network or traffic.  Some browsers, like Firefox, allow switching between styles, facilitating the process for users:</p>
<p>
<img src="https://htmhell.dev/images/advent2022/22/ff_styles.png" alt="Firefox lets you pick alternative styles from the View menu" loading="lazy">
</p>
<p><strong>If it appears with a <code>type</code> attribute that has the value <code>application/rss+xml</code> or <code>application/atom+xml</code></strong>, then the <code>alternate</code> keyword creates a hyperlink referencing a syndication feed (in RSS or Atom respectively), which is useful for crawlers to find more content. In this case, it is not an exact alternative for the document, but it provides additional information about it, making it great for autodiscovery.</p>
<p>It can work both in <code>&lt;link&gt;</code> and <code>&lt;a&gt;</code>, and the meaning is the same in both:</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token doctype"><span data-sanitized-class="token punctuation">&lt;!</span><span data-sanitized-class="token doctype-tag">doctype</span> <span data-sanitized-class="token name">html</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>html</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>head</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    ...</span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>link</span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>alternate<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>application/rss+xml<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>feed.rss<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>link</span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>alternate<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>application/atom+xml<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>atom.xml<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>head</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>body</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    ...</span><br><span data-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>feed.rss<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>alternate<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>application/rss+xml<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">      Subscribe to my feed and never miss a blog!</span><br><span data-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><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>body</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>html</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p>This combination doesn’t impact our site’s visitors, but it provides us with control over how or what we want web crawlers to process our site. If there are multiple linked resources of this type, the first one is considered the main/default one, so the order would be important in that scenario.</p>
<p><strong>In any other case</strong>, the <code>alternate</code> keyword indicates that the linked element is an alternative version of the current document. But it doesn’t end there: the attributes that accompany the <code>rel</code> will provide additional information about the linked resource.</p>
<ul>
<li><code>media</code>: can be used to specify the target devices (mobile, print, etc.) for the alternative version.</li>
<li><code>type</code>: used to identify what format (PDF, XML, etc.) the linked alternative version is available on.</li>
<li><code>hreflang</code>: defines which language (English, Spanish, etc.) the linked resource is in.</li>
</ul>
<p>This opens a world of combinations and possibilities. Again, maybe not so much for the browser users, but definitely for bots and crawlers that need to process the information as accurately as possible.</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token doctype"><span data-sanitized-class="token punctuation">&lt;!</span><span data-sanitized-class="token doctype-tag">doctype</span> <span data-sanitized-class="token name">html</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>html</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>head</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    ...</span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token comment">&lt;!-- alternative document versions in German, Spanish, and French --&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>link</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>/de<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>alternate<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">hreflang</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>de<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>link</span> <span data-sanitized-class="token attr-name">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>/es<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>alternate<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">hreflang</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>es<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>link</span> <span data-sanitized-class="token attr-name">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>/fr<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>alternate<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">hreflang</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>fr<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;!-- alternative document version in Spanish in PDF, specific for printing --&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>link</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>/es/print/<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>alternate<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">hreflang</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>es<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>application/pdf<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">media</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>print<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span><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>head</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>body</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    ...</span><br><span data-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">      Thanks for checking out my online resume, feel free to download a</span><br><span data-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>resume.pdf<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>alternate<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>application/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">        PDF version.</span><br><span data-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><br><span data-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>https://m.link-to-our-site.com<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>alternate<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>handheld<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">        Check out a mobile version of this site too!</span><br><span data-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><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>body</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>html</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p>Remember: the order of the attributes is not important, but for some cases, the order of appearance of the tag may define which is more <em>important</em> or the default one.</p>
<h3 data-sanitized-id="author">author</h3>
<p>This may seem like an easy one: the “author” <code>rel</code> is a hyperlink that will point to the author (it could be <code>mailto:</code> with an email). But there’s a catch, the author of what? the page? the content inside? what?</p>
<p>The answer to these questions will depend on where the author link appears: if it’s inside an <code>&lt;article&gt;</code>, then it will point to the author of the article, if it’s outside of an <code>&lt;article&gt;</code> then it applies to the document/page as a whole.</p>
<p>Let’s review it with an example:</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>article</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token comment">&lt;!-- Article content --&gt;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>footer</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    Written by <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>https://janedoe.com<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>author<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Jane Doe<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>footer</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>article</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token comment">&lt;!-- rest of the page --&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>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  Site created by <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>https://johndoe.com<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>author<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>John Doe<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>The first link appears inside an <code>&lt;article&gt;</code> which let us know that the link is pointing to the author of the article (Jane Doe). While the second link is outside any <code>&lt;article&gt;</code>, which tells us that is the author of the whole page (John Doe). <strong>This could be convenient in sites with syndicated content (like blogs or newspapers), to set a difference between the article’s author and the site’s owner/author</strong>.</p>
<p>Another way of specifying the page’s author is having an actual <code>&lt;link&gt;</code> tag in the page’s <code>&lt;head&gt;</code> with the <code>rel</code> “author”. Then we know for sure that it applies to the whole page and not just to a part of 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 doctype"><span data-sanitized-class="token punctuation">&lt;!</span><span data-sanitized-class="token doctype-tag">doctype</span> <span data-sanitized-class="token name">html</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>html</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>head</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>link</span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>author<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>https://alvaromontoro.com<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>head</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>html</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<h3 data-sanitized-id="bookmark">bookmark</h3>
<p>This <code>rel</code> value can only appear in <code>&lt;a&gt;</code>/<code>&lt;area&gt;</code>. It identifies a permalink for the nearest ancestor <code>&lt;article&gt;</code> or section (which doesn’t necessarily have to be a <code>&lt;section&gt;</code> element). This last part can be confusing, let’s review it with an example:</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><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>body</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h1</span><span data-sanitized-class="token punctuation">&gt;</span></span>James Bond Movies<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>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>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>no-time-to-die<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>No Time To Die<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>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      The twenty-fifth movie in the James Bond series. Daniel Craig was </span><br><span data-sanitized-class="highlight-line">      James Bond in this installment.</span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>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>no-time-to-die.html<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>bookmark<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Permalink<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><br><span data-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>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>goldeneye<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Goldeneye<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>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      A movie and an amazing Nintendo 64 videogame. The iconic Pierce</span><br><span data-sanitized-class="highlight-line">      Brosnan played the role of James Bond on this movie.</span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>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>goldeneye.html<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>bookmark<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Permalink<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><br><span data-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>body</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">...</span></code></pre>
<p>The first link with <code>rel= “bookmark”</code> (permalink for No Time To Die) is inside of an <code>&lt;article&gt;</code>, so it will apply to that article in particular. The second link with <code>rel= “bookmark”</code> (permalink for Goldeneye) is outside of an <code>&lt;article&gt;</code>, applying to the closest section, which will be defined by the earliest ancestor with a heading.</p>
<p>Notice how, if the bookmark link is not inside an <code>&lt;article&gt;</code>, it can be a bit tricky to identify what section it applies to. It is more important than ever to use the right markup.</p>
<h3 data-sanitized-id="canonical">canonical</h3>
<p>A canonical link specifies the preferred version of the document. This is really helpful if we cross-post content online: while a search engine indexes the pages, it will be able to identify the <em>original</em> version and not penalize the author for having duplicated content.</p>
<p>Many blogging systems (e.g., Medium, DEV, Hashnode, etc.) allow for specifying a canonical URL for the articles, and placing a <code>&lt;link&gt;</code> element with <code>rel="canonical"</code> just like this:</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token doctype"><span data-sanitized-class="token punctuation">&lt;!</span><span data-sanitized-class="token doctype-tag">doctype</span> <span data-sanitized-class="token name">html</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>html</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>head</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    ...</span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>link</span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>canonical<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>https://path-to-preferred-url-version<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>head</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">...</span></code></pre>
<p>According to the HTML standard, it is only allowed on a <code>&lt;link&gt;</code> element, but the microformats definition mentions it on the <code>&lt;a&gt;</code> elements too. In my opinion, it would make sense to allow <code>rel="canonical"</code> in an <code>&lt;a&gt;</code> tag, but it could be problematic for publications. Better to stick to the HTML standard and only use canonical inside a <code>&lt;link&gt;</code> in the <code>&lt;head&gt;</code>.</p>
<h3 data-sanitized-id="help">help</h3>
<p>This keyword can be used in all the available elements: <code>&lt;link&gt;</code>, <code>&lt;a&gt;</code>, or <code>&lt;form&gt;</code>. In all of them, it identifies a resource that contains help, the difference will be the scope of that help:</p>
<ul>
<li>In a <code>&lt;link&gt;</code>, it will link to a help resource related to the document as a whole.</li>
<li>In an <code>&lt;a&gt;</code>, it will be help related to the section that contains the anchor.</li>
<li>In a <code>&lt;form&gt;</code>, it specifies that the target contains information about the form and its contents.</li>
</ul>
<p>In the following example, the help link applies to the section that contains the label and input:</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><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>form</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>phone<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Phone number<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>phone<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>phone<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>phone-help.html<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>help<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>(Help)<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><br><span data-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></code></pre>
<p><strong>Browsers and assistive technologies can use this link to provide a more standard computer behavior.</strong> For example: historically, pressing F1 opens the help functionality; So they could open the linked resource if the special key is pressed while on the section to which the help link applies.<br>
Also, in some cases, browsers may style the cursor differently if a link has the <code>rel="help"</code>. (And if they don’t, it may be a nice feature to add by developers.)</p>
<h3 data-sanitized-id="icon">icon</h3>
<p>This <code>rel</code> value can only be used within a <code>&lt;link&gt;</code>, usually in the <code>&lt;head&gt;</code>, and it should link to an image. That image will then be displayed for representing the page in the user interface.</p>
<p>The <code>rel="icon"</code> can be combined with other attributes such as <code>type</code>, <code>media</code>, or <code>sizes</code> which will help the browser pick the most adequate icon for the user.</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>link</span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>icon<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>fav.ico<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>link</span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>icon<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>favicon.png<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/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>link</span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>icon<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>small.ico<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">sizes</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>16x16 32x32 48x48<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>link</span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>icon<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>large.ico<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">sizes</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>128x128 512x512 1024x1024<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>link</span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>icon<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>iphone.png<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">sizes</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>57x57<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/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>link</span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>icon<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>bw.ico<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>screen and (max-color:2)<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span></code></pre>
<p>You might have found a <code>rel</code> value of <code>shortcut icon</code> (in that order) instead of just <code>icon</code>, that was the old way of writing it and browsers still support it for historical reasons, but there’s no reason to do that anymore.</p>
<p>Another thing that we find in the wild is a <code>rel</code> value of <code>apple-touch-icon</code>. This is a specific value for Safari, only supported on Apple devices. Feel free to use it if you want to provide specific icons for them, but remember that it is not a standard value.</p>
<h3 data-sanitized-id="license">license</h3>
<p>The <code>license</code> value can be used in all the supported tags (<code>&lt;link&gt;</code>, <code>&lt;a&gt;</code>, and <code>&lt;form&gt;</code>) to create a hyperlink to the copyright license terms under which the main content is provided. Notice the term “main content” instead of “current document” that is used throughout the article. This is because the license applies to the content itself, and the page/template may have a different copyright or license.</p>
<p>The specification does not specify how to differentiate the main content from the rest of the content. The link with <code>rel="license"</code> must be presented in a way that makes it clear to the user what content it applies to.</p>
<p>The following example simulates a website with images/videos and the license hyperlink for one of the images:</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><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>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>img</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>image.jpg<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">alt</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>Image for this demo<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>figcaption</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    An demo image for the article. License:</span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>https://creativecommons.org/licenses/by/4.0/<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>license<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">      CC BY 4.0</span><br><span data-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>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></code></pre>
<p>The value <code>copyright</code> was accepted in the past as a synonym of <code>license</code>, and browsers still support it, but we should go with the standard <code>license</code>.</p>
<h3 data-sanitized-id="manifest">manifest</h3>
<p>The <code>manifest</code> relationship can only happen in a <code>&lt;link&gt;</code>. It indicates that the linked resource is a manifest file with metadata related to the current document.</p>
<p>The manifest may contain information about the entry file to install the web application, the icons to use, the app’s name, theme colors… In this article, we won’t dig into how to use the manifest as our focus is exclusively on the <code>rel</code> attribute used to link it.</p>
<p>Here’s how you can link your manifest from the <code>&lt;head&gt;</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 doctype"><span data-sanitized-class="token punctuation">&lt;!</span><span data-sanitized-class="token doctype-tag">doctype</span> <span data-sanitized-class="token name">html</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>html</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>head</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    ...</span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>link</span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>manifest<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>/manifest.json<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></code></pre>
<p>s<br>
Two important things to remember about this <code>rel</code> value:</p>
<ol>
<li>Browsers will use the first <code>&lt;link&gt;</code> with <code>rel="manifest"</code> in the tree order, ignoring any other that may appear.</li>
<li>Browsers will execute the manifest when they consider it necessary, never assume that the entry point script will be executed.</li>
</ol>
<h3 data-sanitized-id="pingback">pingback</h3>
<p>A pingback is a method for authors to get notifications when their content is linked. With <code>pingback</code>, we can provide the address of the pingback server that handles the pingbacks to the current document:</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>link</span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>pingback<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>https://alvaromontoro.com/pingback<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span></code></pre>
<p>This can be useful, for example, to process the notification and add a note on the page (like WordPress does). It can also be helpful for SEO.</p>
<p>The <code>pingback</code> value can only be used in the <code>&lt;link&gt;</code> element.</p>
<h3 data-sanitized-id="search">search</h3>
<p>The <code>search</code> keyword indicates that the linked resource provides a way of searching the document and its related resources. It redirects to a search 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>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  Read more about this topic by <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>/search<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>search<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>searching this</span><br><span data-sanitized-class="highlight-line">  site<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> or <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>https://google.com/search?q=rel+attribute<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>search<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  checking on Google<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>Notice how it doesn’t have to be an internal search functionality. In the example above, one of the search links points to Google.</p>
<p>Some browsers allow adding plugins to their interfaces to provide custom searching features. If we have an OpenSearch plugin, we can link it using <code>type="application/opensearchdescription+xml"</code> alongside the <code>search</code> value to add the plugin easily to the browser.</p>
<h3 data-sanitized-id="tag">tag</h3>
<p>The linked resource contains information about a tag or keyword related to the current document. It can be a description, a list of other elements from the same category, etc. This <code>rel</code> value is only valid on <code>a</code> and <code>area</code> elements.</p>
<p>A practical use of the <code>tag</code> value could be seen on blogs or other sites where content can be categorized. <a href="https://stackoverflow.com/">StackOverflow</a> is a great place to see links with <code>rel="tag"</code> working live. Or we could have something like this on our blog:</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><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>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>h1</span><span data-sanitized-class="token punctuation">&gt;</span></span>The Definitive Guide of Colors in CSS<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><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>footer</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h2</span><span data-sanitized-class="token punctuation">&gt;</span></span>Tags<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>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>/tags?t=css<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>tag<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>CSS<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>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>/tags?t=htm<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>tag<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>HTML<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>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>/tags?t=webdev<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>tag<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Web Development<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>footer</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>article</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">...</span></code></pre>
<p>The <code>rel="tag"</code> links apply to the whole page independently of where they appear within it. Even if they are located inside an article, they are not exclusive to the article itself.</p>
<p>
<img src="https://htmhell.dev/images/advent2022/22/tag.png" alt="Screenshot of StackOveflow’s use of rel=tag" loading="lazy" width="740" height="137">
</p>
<h2 data-sanitized-id="personal-types">Personal Types</h2>
<p>They indicate a relationship between the author of the document/article and the linked resource (which should be an online profile). The HTML standard only has one of this type (“author”), but the XHTML Friends Network (XFN) defines many more:</p>
<ul>
<li><code>author</code>: see description in the meta types.</li>
<li><code>crush</code>: the linked page represents a person you have a crush on.</li>
<li><code>date</code>: the hyperlink is to a page about someone you are dating.</li>
<li><code>friend</code>: the link identifies a friend.</li>
<li><code>me</code>: <strong>this value became really popular with the rise of Mastodon</strong>. It is used to link to a page that represents the same person as the current document.</li>
<li><code>muse</code>: a link that identifies a person who inspires the person.</li>
</ul>
<p>As you may imagine, there are <a href="https://gmpg.org/xfn/11">many more values that could be used</a>. Quite often, just using the English word for the personal relationship will work as a valid <code>rel</code>: colleague, child, acquaintance, neighbor, parent… all good.</p>
<p>Here are some of these personal <code>rel</code> values in action:</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>h1</span><span data-sanitized-class="token punctuation">&gt;</span></span>Welcome!<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></span><br><span data-sanitized-class="highlight-line">  My name is <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>profile.html<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>me<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Ross Geller<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>, thanks for </span><br><span data-sanitized-class="highlight-line">  visiting my personal website!</span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  I live in NYC with my buddies <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>j-man.html<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>friend<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Joey<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">  and <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>king-of-bad-thanksgivings.html<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>friend<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Chandler<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">  In the same building block as famous cook (and my younger sister)</span><br><span data-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>monica.html<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>sibling<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Monica Geller<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><br><span data-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">  Monica lives with <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>rachel.html<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>crush date<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Rachel<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> and </span><br><span data-sanitized-class="highlight-line">  renown musician <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>regina-phalange<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>muse friend<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Phoebe<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">  (author of the smash hit "Smelly Cat").</span><br><span data-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>One last point about this personal type: only the “author” value is supported in a <code>&lt;link&gt;</code> tag, all the others are only allowed on <code>&lt;a&gt;</code>.</p>
<h2 data-sanitized-id="processing-types">Processing Types</h2>
<p>These types don’t indicate what the linked resource is or how it is related to the current document, instead, <strong>they tell the browser how the link should be treated or processed</strong>, creating a connection that may not be completely semantic but making it special.</p>
<p>All of these values are <strong>only accepted in the <code>&lt;link&gt;</code> element</strong>, they will normally appear in the <code>&lt;head&gt;</code>, and will mainly impact performance.</p>
<h3 data-sanitized-id="dns-prefetch">dns-prefetch</h3>
<p>The <code>dns-prefetch</code> keyword indicates that the browser should preemptively perform DNS resolution for the specified domain. Basically, we are telling the browser that we will likely need some resources from the linked domain, so it will be beneficial and good for the user experience if it started resolving the address and getting ready to ask for files.</p>
<p>Using this type of <code>rel</code> reduces the latency when requesting an online resource and improves the overall performance, giving the impression that the content loaded faster (because some of the load work was done before it was actually needed.)</p>
<p>For example, if we are using Google Fonts, and we know that our page will at some point need the font, we can prefetch the CDN where Google hosts the fonts:</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>link</span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>dns-prefetch<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>https://fonts.googleapis.com<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p>If you have used Google Fonts before, you might have noticed that it doesn’t use <code>rel="dns-prefetch"</code> but <code>rel="preconnect"</code> (we will analyze it soon). This is because <code>dns-prefetch</code> only performs DNS resolution, while <code>preconnect</code> does DNS resolution and also establishes a connection to the server, making the process <em>faster</em>.</p>
<p>Which raises a fair question: why even use <code>dns-prefetch</code> if <code>preconnect</code> does more? Because network connections are “expensive”. If we need sources from many third-party domains, preconnecting to all of them may impact performance negatively. Instead, it would be better to preconnect only to the more “urgent” ones and do a <code>dns-prefetch</code> for the rest. There’s no risk in using both together (even for the same domains!) and if for some reason the browser doesn’t support them, it won’t impact our site at all (apart from having to load a couple more lines of code.)</p>
<h3 data-sanitized-id="modulepreload">modulepreload</h3>
<p>JavaScript code is getting bigger and bigger, and it is becoming more important to split the code and organize it into simpler modules that can be run when needed. NodeJS and some frameworks have their own methods for module usage, and some browsers provide native module functionality too. This is where the <code>modulepreload</code> value is important.</p>
<p>We can use <code>rel="modulepreload"</code> to preload a module script and place it in the appropriate module map without evaluating it (that will happen when it is required). This optimizes the module load, making the process more efficient.</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token doctype"><span data-sanitized-class="token punctuation">&lt;!</span><span data-sanitized-class="token doctype-tag">doctype</span> <span data-sanitized-class="token name">html</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>html</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>head</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    ...</span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>link</span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>modulepreload<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>app.mjs<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>link</span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>modulepreload<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>record-player.mjs<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>link</span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>modulepreload<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>trade.mjs<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>link</span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>modulepreload<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>payment.mjs<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>script</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>module<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>app.mjs<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token script"></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>script</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    ...</span></code></pre>
<p>In the example above, we are preloading several scripts. The main module is executed (<code>app.mjs</code>), and the others will be available whenever they are needed (<code>record-player.mjs</code>, <code>trade.mjs</code>, <code>payment.mjs</code>).</p>
<p><code>modulepreload</code> is basically a specialized version of the <code>preload</code> keyword (see below), as it applies specifically to one type of resource: script modules.</p>
<h3 data-sanitized-id="preconnect">preconnect</h3>
<p>As mentioned in the <code>dns-prefetch</code> section, with the <code>preconnect</code> keyword, we indicate to the browser that a resource from the linked domain will most likely be needed, and initiate a connection to its origin before the resource has even been found by the browser.</p>
<p>By doing so, we are increasing the network performance, because we are establishing a connection that will be ready when it’s needed, reducing the latency, and improving the user experience.</p>
<p>A practical example of <code>preconnect</code> can be found on Google Fonts: you may have noticed the code to embed fonts includes a couple of extra lines:</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>link</span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>preconnect<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>https://fonts.googleapis.com<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>link</span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>preconnect<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>https://fonts.gstatic.com<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">crossorigin</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>link</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>https://fonts.googleapis.com/css2?family=Roboto&amp;display=swap<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>stylesheet<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p>The first two <code>&lt;link&gt;</code> use <code>preconnect</code> while the third <code>&lt;link&gt;</code> imports a stylesheet which will bring the font. Those first two lines initiate a connection for loading content from the Google CDNs, so the browser is ready to download the files.</p>
<h3 data-sanitized-id="prefetch">prefetch</h3>
<p>With <code>prefetch</code>, we identify a resource that may be used by the subsequent pages, telling the browser that it should fetch that resource to deliver a faster response when the navigation to those pages actually happens. The browser will proceed to load the content into the cache for later use.<br>
Prefetching some files for later use–an image, some script, and a song:</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>link</span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>prefetch<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">as</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<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>super-important-image.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>link</span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>prefetch<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">as</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>script<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>code.js<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>link</span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>prefetch<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">as</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>audio<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>https://somecdn.com/music.mp3<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">crossorigin</span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span></code></pre>
<p>The <code>as</code> attribute is optional, but highly recommended (see <code>preload</code> section for more details.)</p>
<p>Use <code>prefetch</code> carefully. It is a little bit of a “gamble”: we are fetching content that we presume the user will need soon, but if the user doesn’t navigate the way we expect it, we might have used bandwidth unnecessarily.</p>
<h3 data-sanitized-id="preload">preload</h3>
<p>With <code>preload</code>, we ask the browser to fetch some resources and process them as specified with the <code>as</code> attribute, because those files are important and we will need them on the current document.<br>
In this example we will preload an image, a script file, and an audio 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>link</span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>preload<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">as</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<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>super-important-image.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>link</span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>preload<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">as</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>script<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>code.js<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>link</span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>preload<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">as</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>audio<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>https://somecdn.com/music.mp3<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">crossorigin</span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span></code></pre>
<p>Notice the <code>as</code> attribute because it is not trivial. It tells the browser what type of resource is being linked so it can process it adequately. Without it, the browser may end up fetching the content twice (the same thing with the <code>crossorigin</code> attribute.)</p>
<p>So, how are <code>preload</code> and <code>prefetch</code> different? While they seem to do the same, there’s a key difference: <code>prefetch</code> <strong>is used for “lower priority” resources that will be needed at a later time,</strong>  and <code>preload</code> <strong>is for “higher priority” content that will be needed sooner</strong> (as on the same page, but that may have not been discovered by the browser yet.)</p>
<p>I will end this section by giving a piece of advice: <strong>do not preload everything</strong>. Quoting The Incredible’s supervillain Syndrome: “<em>When everyone is super, no one will be</em>.” If we preload every file that we will need, then there won’t be a real gain (and it may even be counterproductive). Be selective with the content to preload, and consider using <code>prefetch</code> or <code>preconnect</code>.</p>
<h3 data-sanitized-id="prerender">prerender</h3>
<p><code>prerender</code> works similarly to <code>prefetch</code> but at a larger scale. The linked resource may be a page, and it is not only prefetched but also processed (including its content) and rendered, caching the result until it’s needed.</p>
<p>Imagine that you created a multi-page form. You may want to prerender the next step because the user should logically navigate to 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>link</span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>prerender<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>form-step-2.html<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span></code></pre>
<p>As with <code>prefetch</code>, <code>prerender</code> could be a bit of a “gamble” (even more this time): if the user doesn’t navigate the site the way we expect or if they leave the site completely, we will have fetched and processed content unnecessarily.</p>
<h3 data-sanitized-id="stylesheet">stylesheet</h3>
<p>Surprised to see this value as part of the processing types? I considered adding it to the meta types, but it fits here better.</p>
<p>The <code>stylesheet</code> indicates that the linked resource contains styles for the page, so it provides a little semantics; but it does much more: browsers know that stylesheets are a key part of the page’s presentation and, unless the <code>alternate</code> keyword shows up too, it also knows that it needs to process the styling file and apply it to the page. The <code>stylesheet</code> keyword is telling the browser how to treat the linked file.</p>
<p>Its basic use is simple: only in <code>&lt;link&gt;</code>, the <code>rel="stylesheet"</code>, and an <code>href</code> pointing to the stylesheet file. We can also use other attributes (<code>media</code>) to change the default behavior and when the styles will be applied:</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;!-- this file will be automatically downloaded and applied --&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>link</span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>stylesheet<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>my-super-cool-styles.css<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token comment">&lt;!-- this one is downloaded but not applied --&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>link</span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>stylesheet alternate<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>prototype.css<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">title</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>prototype<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 comment">&lt;!-- this one is downloaded but only applied when printing --&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>link</span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>stylesheet<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>printer.css<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">media</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>print<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span></code></pre>
<h2 data-sanitized-id="network-types">Network Types</h2>
<p>The “network types” specify the type of connection that the document and the linked resource have as well as the information that will be shared between them.</p>
<p>They don’t create a link, they annotate it, making it easier for crawlers and spiders to index the content appropriately. As they will have more information about the nature of the connection.</p>
<h3 data-sanitized-id="external">external</h3>
<p>A resource is external if it is not part of the current site. We can easily identify them by adding a <code>rel="external"</code> to it, which is allowed on <code>&lt;a&gt;</code>/<code>&lt;area&gt;</code> or the target in a <code>&lt;form&gt;</code>, but never on a <code>&lt;link&gt;</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 comment">&lt;!-- on a personal blog --&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>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>https://en.wikipedia.org/wiki/Cat<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>external<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Read about cats<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>This doesn’t give much information to the browser (it is transparent for it), but it can be convenient for developers to use CSS attribute selectors and style these links differently:</p>
<pre data-sanitized-class="language-css"><code data-sanitized-class="language-css"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token comment">/* add a small icon behind each external link */</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token selector">a[rel="external"]::after</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">content</span><span data-sanitized-class="token punctuation">:</span> <span data-sanitized-class="token url"><span data-sanitized-class="token function">url</span><span data-sanitized-class="token punctuation">(</span>external-icon.svg<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">margin-left</span><span data-sanitized-class="token punctuation">:</span> 0.5rem<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">vertical-align</span><span data-sanitized-class="token punctuation">:</span> middle<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="nofollow">nofollow</h3>
<p>A <code>nofollow</code> rel value on a link tells the crawlers to “ignore” the linked resource because it is not endorsed by the current document’s owner, or that it was included because of a commercial relationship.</p>
<p>It is an important value for Search Engine Optimization (SEO): if your page links to low-quality content, your site’s credibility (and its ranking in the search engines) may suffer. Using <code>nofollow</code> won’t penalize your site:</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>https://totallynotmischivieoussite.com<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>nofollow<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">  This is a link created by an user</span><br><span data-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>Using <code>rel="nofollow"</code> in user-generated content and links is a must. You never know what they are going to share, and you don’t want to end up on the losing side of a spamming scheme.</p>
<h3 data-sanitized-id="noopener">noopener</h3>
<p>A link may have access to the previous page by using <code>window.opener</code> depending on how it was opened (e.g. if it has <code>target="_blank"</code>). This is a potential security problem and it could lead to other issues like phishing attempts.</p>
<p>To avoid these situations, we can use <code>noopener</code> value in <code>rel</code> to open the new document without granting it access to the document that opened it:</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><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 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>comment<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">  Check my <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">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>noopener<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>https://no-good-phishy-site.tk<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>site<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></code></pre>
<p>As with <code>nofollow</code>, the main target for this value will be user-generated content that we don’t want to provide with extra information.</p>
<h3 data-sanitized-id="noreferrer">noreferrer</h3>
<p><code>noreferrer</code> is really close to <code>noopener</code>. In fact, it does the same thing as <code>noopener</code> (it doesn’t grant access to the document) plus it tells the browser to omit the <code>Referer</code> header when opening the link. This way, the linked resource cannot access the referrer’s information (e.g., its address).</p>
<p>This provides an extra layer of anonymity and security. The linked resource will not see a referrer, looking like the request came from direct traffic to their site instead of from the originating link.</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><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 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>comment<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">  Check my <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">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>noreferrer<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>https://no-good-phishy-site.tk<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>site<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></code></pre>
<p><code>noreferrer</code> and <code>nofollow</code> are often used together, to ensure that one is applied in case the other one is not supported by the browser.</p>
<h3 data-sanitized-id="opener">opener</h3>
<p>This is effectively the opposite of <code>noopener</code>. It doesn’t add that extra layer of protection when following the link by allowing it to access the opener.</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>./help-page.html<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>opener<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>You have access<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>
<h2 data-sanitized-id="sequential-types">Sequential Types</h2>
<p>These values indicate that the current document is part of a series or sequence and specifies the relationship of the linked resource with it. They have a big impact on user experience, accessibility, and SEO.</p>
<p>The HTML Living Standard only has two values related to sequences: “next” and “prev”, but there are some interesting ones defined in previous versions of the standard that are listed by IANA and microdata too:</p>
<ul>
<li><code>next</code>: indicates that the linked resource is the next in a series.</li>
<li><code>prev</code>: refers to the linked document as the previous in a series.</li>
<li><code>previous</code>: this value is a synonym of “prev”. It isn’t valid anymore, so we should avoid it, but <a href="https://html.spec.whatwg.org/multipage/links.html#link-type-prev">browsers may still treat it as a “prev” for historical reasons</a>.</li>
<li><code>first</code>: identifies the linked document as the first in a series.</li>
<li><code>last</code>: indicates that the linked resource is the last in a series.</li>
<li><code>contents</code>: the linked document is a table of contents. Some agents may use the synonym <code>toc</code> too.</li>
<li><code>archives</code>: links to a collection of records or materials of historical interest for the document.</li>
<li><code>up</code>: refers to the parent/upper category of the current document. Not necessarily in a sequence, but it shows some hierarchy.</li>
</ul>
<p>Here’s a practical example of how it could be used to create pagination:</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>nav</span> <span data-sanitized-class="token attr-name">aria-label</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>course index<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>ul</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-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>toc.html<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>contents<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Table of Contents<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>lesson-1.html<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>first<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Lesson 1<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>lesson-2.html<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Lesson 2<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>lesson-3.html<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>up<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Lesson 3<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>lesson-3.1.html<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>prev<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Lesson 3.1<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>lesson-3.2.html<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>Lesson 3.2<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>lesson-3.3.html<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>next<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Lesson 3.3<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>lesson-4.html<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Lesson 4<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>lesson-5.html<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Lesson 5<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>lesson-6.html<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>last<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Lesson 6<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>glossary.html<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>glossary<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Glossary<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>
<p>In this example, we have a navigation with eleven links to the table of contents, each of the six lessons (plus three “sub lessons”), and a glossary page. Many of those links have been extended using the <code>rel</code> attribute and provide helpful information to the browser and assistive technologies.</p>
<p><strong>One perk of using “next” and “prev” with a <code>&lt;link&gt;</code> is that the browser may preload the linked documents</strong> to reduce the perceived load time, assuming that the user will most likely move forward/backward within the series.</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>link</span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>next<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>https://link-to-next-in-series<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>link</span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>prev<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>https://link-to-previous-in-series<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span></code></pre>
<p>In the past, Google used the “next” and “prev” links to index the pages accordingly, but <a href="https://twitter.com/JohnMu/status/1108717486424363009">that is no longer the case</a>. This doesn’t mean you should stop using those values: they are still helpful for accessibility, and other search engines may index based on them. Google is dominant but not the only one.</p>
<h1>Conclusion</h1>
<p>As you may have noticed by this really long article, the <code>rel</code> attribute is anything but trivial. It plays an important role in providing meaning to the links, taking the Internet to the next level semantically, and boosting your site’s performance through the roof.</p>
<p>If you made it here (did I already mention that this article is really long?), take a few more minutes to check other resources with more details and better explanations (Addy Osmani’s article is simply amazing.)</p>
<p>Thanks for reading!</p>
<h1>Bibliography</h1>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code>: The Anchor element</a>, on MDN Web Docs.</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code>: The Image Map Area element</a>, on MDN Web Docs.</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form"><code>&lt;form&gt;</code>: The Form element</a>, on MDN Web Docs.</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code>: The External Resource Link element</a>, on MDN Web Docs.</li>
<li><a href="https://microformats.org/wiki/existing-rel-values">Existing rel values</a>, on the microformats wiki.</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel">HTML Attribute: rel</a>, on MDN Web Docs.</li>
<li><a href="https://www.iana.org/assignments/link-relations/link-relations.xhtml">Link Relations</a>, on the Internet Assigned Numbers Authority (IANA).</li>
<li><a href="https://html.spec.whatwg.org/multipage/links.html">Links</a>, on the HTML Living Standard.</li>
<li><a href="https://www.hixie.ch/specs/pingback/pingback">Pingback 1.0</a>, by Ian Hickson.</li>
<li><a href="https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf">Preload, Prefetch And Priorities in Chrome</a>, by Addy Osmani on Medium.</li>
<li><a href="https://nitropack.io/blog/post/resource-hints-performance-optimization">Preload, Preconnect, Prefetch: Improve Your Site’s Performance with Resource Hints</a>, by Niko Kaleev on Nitropack.</li>
<li><a href="https://www.w3.org/TR/resource-hints/">Resource Hints (Working Draft)</a>, by Ilya Grigorik on the W3C.</li>
<li><a href="https://gmpg.org/xfn/11">XFN 1.1 relationships meta data profile</a>, on the GMPG.</li>
</ul>


guid: https://htmhell.dev/adventcalendar/2022/22/
title: What is the Difference Between Alternative Text, Long Description, and Caption?
author: ;Manuel Matuzovic
link: https://htmhell.dev/adventcalendar/2022/22/
hash: $,�y_u�Q��Ӂv
attributes: {"enclosures":[]}
content:
<p>When it comes to adding images on the web, you need to consider how to make them accessible and understandable to everyone.</p>
<p>Which means you need to include text alternatives to describe the image information or function.</p>
<p>Three options are:</p>
<ol>
<li>Alternative Text</li>
<li>Long description</li>
<li>Caption</li>
</ol>
<p>But how do you know which one to use? And when? Here's info to help you make that decision.</p>
<h2 data-sanitized-id="alternative-text">Alternative Text</h2>
<p><strong>Alternative text is a concise image text alternative</strong> for screen reader users. It's not shown to sighted users unless the image doesn't load.</p>
<p>Which can happen when someone has turned off images on their email application. Or they're using a slow connection.</p>
<div data-demo="Example code">
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>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>flickr.svg<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">alt</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>Flickr<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
</div>
<h2 data-sanitized-id="long-description">Long Description</h2>
<p><strong>Long descriptions are longer text alternatives</strong> for <a href="https://www.w3.org/WAI/tutorials/images/complex/">complex images</a>, which are shown to both sighted and screen reader users.</p>
<p>An expand/collapse accordion below an image is one example of a long description. Another example is a text description below the image.</p>
<p>Note: don't confuse the <code>longdesc</code> attribute with long description. <a href="https://caniuse.com/?search=longdesc">Longdesc is a deprecated/obsolete</a> and should no longer be used. It doesn't work on VoiceOver or mobile screen readers.</p>
<div data-demo="Example code">
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>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>remote-workforce-infographic.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>The Benefits of a Remote Workforce infographic with text description below<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>Text Version<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>
<h2 data-sanitized-id="caption">Caption</h2>
<p><strong>An image caption is visible to all users</strong> and typically displays below the image.</p>
<p>It's used to convey additional information about the image; it doesn't describe the image directly.</p>
<p>Image captions are optional and <strong>should never be the same as alternative text</strong>.</p>
<div data-demo="Example code">
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>figure</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>figure<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-labelledby</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>figcaption<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>detroit-parade-clown.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>Clown with bright red hair and multicolored costume hands out purple bead necklace to young child<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>figcaption</span><span data-sanitized-class="token punctuation">&gt;</span></span>Detroit Thanksgiving Day Parade 2022<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></code></pre>
</div>
<p>Thanks to <a href="https://twitter.com/pauljadam/status/1285979673722322947">Paul Adams</a> for helping me learn the differences between alternative text, long desciption, and caption.</p>
<h2 data-sanitized-id="additional-resources">Additional Resources</h2>
<ul>
<li>
<p><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML#text_alternatives">HTML Text Alternatives</a></p>
</li>
<li>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption"><code>&lt;figcaption&gt;</code>: The Figure Caption Element</a></p>
</li>
<li>
<p><a href="https://www.w3.org/WAI/tutorials/images/decision-tree/">An alt Decision Tree</a></p>
</li>
</ul>


guid: https://htmhell.dev/adventcalendar/2022/23/
title: Enforcing better HTML markup with Eleventy
author: ;Manuel Matuzovic
link: https://htmhell.dev/adventcalendar/2022/23/
hash: EnS�� '�k ��
attributes: {"enclosures":[]}
content:
<p>While what we mean is usually very clear to us, others may decode our messages differently from what we intended. This is especially true on the web, where there are many ways to consume content. The language, browser type, device model, using a screen reader, navigating with or without a mouse - all of these factors can influence how information is experienced on the web.</p>
<p>And the glue that can better aid all these factors might be developing with semantic HTML which helps in describing content more accurately. In this article, we will explore common issues related to incorrect HTML markup and how you can enforce good practices to fix them.</p>
<h2 data-sanitized-id="introduction">Introduction</h2>
<p>Web experiences should be fast, accessible, and tailored to the capabilities of users and the devices they own. A premise we could all agree on, as we have all have suffered from poorly designed web experiences. And if you are a web developer, you might have once followed practices that led to such experiences.</p>
<p>Still, building for a wide range of users you know nothing about is far from being a straightforward process. Fortunately, most of the research have extensively been done and made available sets of proven practices that when followed can ensure that what we build does not exclude groups of people arbitrarily. So how can we develop interfaces that create such experiences? To first understand that, we have to understand the role of semantics.</p>
<h3 data-sanitized-id="semantics-in-spoken-languages">Semantics in spoken  languages</h3>
<p>Something we usually agree on in society is how important it is to define things. Without mutual understanding, we wouldn't be able to communicate effectively.</p>
<p>If I ask you to define what a cup of coffee is, you might provide an answer resembling: “<em>a drink made from coffee beans”</em>, whereas <a href="https://www.urbandictionary.com/define.php?term=coffee">the internet</a> might go for <em>“the juice of a plant that gives life and suppresses the urge for murder”</em>, or you might have your own definition not too far from these two. This mutual understanding of different concepts helps to communicate with each other. Whenever you buy a cup of coffee, you will expect what you receive to reflect this definition. You can even go a step further and adjust your words based on who you are talking to and how that person might feel at the moment.</p>
<p>For instance, you could find yourself speaking louder to someone hard of hearing, avoid technical words with a young person, or even adding gestures to illustrate what would otherwise be too abstract. Such adjustments are done unconsciously and aim to increase the likelihood that every exchange is done efficiently. The last thing you want is to have to persistently repeat something over and over to a person who simply does not understand what you are saying instead of adjusting once.</p>
<h3 data-sanitized-id="semantics-on-the-web">Semantics on the web</h3>
<p>So what about on the web? Are semantics still as important and is it possible to adjust our message to the circumstances of others?</p>
<p>Communicating did indeed go past the face-to-face interactions and has reached the internet, in the form of blogs, websites, or social media. Even if the medium differs, I would argue that the idea of helping others better understand your content remains the same. Whether you are a company seeking profit through selling a product, a creator promoting his content or someone who occasionally post blog articles, there is surely a benefit in having a more reachable content. In that aspect, the need for semantics on the web is very close to that of spoken languages.</p>
<blockquote>Specifically, for people with disabilities, they point assistive technology at what stuff is, so there is a bit of responsibility, a big responsibility that we have as Web developers, to make sure we point machines and assistive tech into the right direction and show them exactly what stuff is and what we mean by stuff in our user interfaces.</blockquote>
<p>(Hidde de Vries, <a href="https://youtu.be/YG9WQUfH7ZU?t=981">Semantics and How to Get Them Right</a>)</p>
<h4>Taking accountability as a web developer</h4>
<blockquote>Harry Potter and the Sorcerer's Stone (2001).<br>
An orphaned boy enrolls in a school of wizardry, where he learns the truth about himself, his family and the terrible evil that haunts the magical world.</blockquote>
<p>Without context you might have understood from this small excerpt that “<em>Harry Potter and the Sorcerer's Stone”</em> corresponds to the title of a media published in “<em>2001”</em>. That’s the kind of extra meaning you can explicitly attach to content on the web through HTML elements and attributes.</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>h1</span><span data-sanitized-class="token punctuation">&gt;</span></span>Harry Potter and the Sorcerer's Stone<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h1</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">	<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>time</span> <span data-sanitized-class="token attr-name">datetime</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>2001<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>2001<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>time</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">	<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span>An orphaned boy enrolls in a school of wizardry, where he learns the truth about himself, his family and the terrible evil that haunts the magical world.<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>section</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p>This would then be conveyed as if you were saying “Hey device, present ‘<em>Harry Potter and the Sorcerer's Stone’</em> as the title, this number value as the year of a date, and  the remaining text as a paragraph.” By understanding the inherent meaning of such content, devices are able to convey it more accurately to a wide number of people, regardless of how they decide to experience it.</p>
<p>As someone responsible for building interfaces, not only are you trying to make your content understandable, you also have to make sure that content is accurately conveyed to their devices.</p>
<h4>Helping users create their own ideal experience</h4>
<p>In reality how does this help? In the same way that someone hard of hearing would have difficulties understanding what you say, there are situations that can prevent users from effectively consuming content.</p>
<p>And because you can’t adjust in real time, the idea is to provide all the hints you can to help users help themselves. Maybe the person browsing has a limited monthly internet package, and would sometimes prefer a <a href="https://blog.jim-nielsen.com/2022/website-fidelity/">low fidelity version of your website</a> with only text content? Or that person has low vision, and would benefit from reading bigger text sizes? Perhaps said person is currently browsing while engaging in a phone call and could benefit from only using the keyboard to navigate? Such circumstances are intrinsic to the person, but often are reflected to their devices through preferences or apps aimed at supporting them.</p>
<p>As a developer, the HTML markup you write leads to an interface that users can view on their devices. Not only are your users diverse, but so are the devices they use. You may write sentences that are semantically valid, but the information may not be correctly displayed by your interface if you do not <a href="https://web.dev/learn/html/semantic-html/">develop semantically</a>. By utilizing the appropriate HTML elements to wrap your content, you can provide cues to devices browsing your interface about the way your content should be described.</p>
<p>When you start from scratch, it can be a tedious process to write good semantic HTML. As the complexity of your project increases, you may end up writing the same HTML patterns over and over again.</p>
<p>The sooner you can identify these patterns and establish a system for reusing them, the easier the development process will be. Having highlighted the role of semantics, let's look at the most common problems related to HTML markup and how you can avoid them.</p>
<h2 data-sanitized-id="common-html-markup-issues">Common HTML markup issues</h2>
<p>Here are common issues encountered on the web that stems from bad HTML markup.</p>
<ul>
<li>Each form field is not associated with its own label.</li>
<li>The heading structure is not respected.</li>
<li>Missing alternative text on images.</li>
<li>The opening HTML tag does not specify the main language.</li>
<li>The HTML code is not valid.</li>
</ul>
<h3 data-sanitized-id="sources">Sources</h3>
<ul>
<li><a href="https://darekkay.com/blog/evaluatory-personal-sites/#results">I've analyzed the accessibility of over 1600 personal sites</a></li>
<li><a href="https://hidde.blog/common-a11y-issues/">Common accessibility issues that you can fix today</a></li>
<li><a href="https://hidde.blog/more-common-a11y-issues/#heading-3">More common accessibility issues that you can fix today</a></li>
</ul>
<h2 data-sanitized-id="designing-a-system-for-writing-better-html-in-eleventy">Designing a system for writing better HTML in Eleventy</h2>
<blockquote>Solid, accessible HTML should be the base of any web stack. If everything fails (and it will), your users still get the core content.</blockquote> 
<p>(<a href="https://www.trysmudford.com/blog/uniting-the-team-with-jamstack/">Trys Mudford, Unyfying with Jamstack</a>)</p>
<p>We are trying to implement a low configuration system that outputs HTML without adding a huge library or framework around it. We can achieve this by using a <a href="https://en.wikipedia.org/wiki/Static_site_generator">static site generator</a> for addressing the need for reusable patterns. With the right foundations, it can support the implementation of robust and accessible HTML markup. Here we will explore how <a href="https://www.11ty.dev/">Eleventy</a>, a static site generator, can help us in this regard.</p>
<p>Eleventy provides multiples ways to create <a href="https://fuzzylogic.me/posts/reusable-code-snippets-and-components-in-eleventy/">reusable components</a>. We will implement patterns that follow good practices and, by using them consistently we can ensure that the overall project does not deviate from our goal.</p>
<h2 data-sanitized-id="enforcing-better-html-markup-in-eleventy">Enforcing better HTML markup in Eleventy</h2>
<blockquote>When you design a system, or a language, then if the features can be broken into relatively loosely bound groups of relatively closely bound features, then that division is a good thing to be made a part of the design. This is just good engineering.</blockquote>
<p><a href="https://www.w3.org/DesignIssues/Principles.html">Tim Berners Lee, Principles of Design</a></p>
<h3 data-sanitized-id="reusable-components-with-nunjucks-macros">Reusable components with Nunjucks macros</h3>
<p><a href="https://cloudcannon.com/community/learn/eleventy-beginner-tutorial/templating-in-eleventy/">Templating in Eleventy</a> is what allows us to control how pages are rendered. It makes it possible to generate variables, loop over an array or run a custom plugin to generate data. Eleventy can handle a dozen different language models such as Nunjucks which we are going to use.</p>
<p><strong>Nunjucks macros</strong></p>
<p>Nunjucks has this feature called <a href="https://iainbean.com/posts/2020/flexible-components-in-eleventy-with-nunjucks-macros/">macros</a> that hit all the boxes for building reusable components. It is similar to a function in a programming language and accepts arguments. The method for defining components macro is inspired by Trys Mudford <a href="https://www.trysmudford.com/blog/encapsulated-11ty-components/">detailed article</a> on the subject.</p>
<p>For instance,  we could create a button macro that takes in a label and output the markup for a tag component.</p>
<pre data-sanitized-class="language-jinja2"><code data-sanitized-class="language-jinja2"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token delimiter punctuation">{%</span> <span data-sanitized-class="token tag keyword">macro</span> <span data-sanitized-class="token function">button</span><span data-sanitized-class="token punctuation">(</span><span data-sanitized-class="token variable">label</span><span data-sanitized-class="token punctuation">,</span> <span data-sanitized-class="token variable">type</span><span data-sanitized-class="token operator">=</span><span data-sanitized-class="token string">"button"</span><span data-sanitized-class="token punctuation">,</span> <span data-sanitized-class="token variable">status</span><span data-sanitized-class="token operator">=</span><span data-sanitized-class="token string">'success'</span><span data-sanitized-class="token punctuation">)</span> <span data-sanitized-class="token operator">%</span><span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line">	<span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token variable">button</span> <span data-sanitized-class="token variable">type</span><span data-sanitized-class="token operator">=</span><span data-sanitized-class="token string">"{{type}}"</span> <span data-sanitized-class="token variable">class</span><span data-sanitized-class="token operator">=</span><span data-sanitized-class="token string">"tag-{{status}}"</span><span data-sanitized-class="token operator">&gt;</span></span><br><span data-sanitized-class="highlight-line">		<span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token variable">label</span><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 operator">&lt;</span><span data-sanitized-class="token operator">/</span><span data-sanitized-class="token variable">button</span><span data-sanitized-class="token operator">&gt;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token operator">%</span> <span data-sanitized-class="token variable">endmacro</span> <span data-sanitized-class="token delimiter punctuation">%}</span></span></code></pre>
<p>Now <code>button</code> is available to be called like a normal function:</p>
<pre data-sanitized-class="language-jinja2"><code data-sanitized-class="language-jinja2"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token delimiter punctuation">{{</span> <span data-sanitized-class="token function">button</span><span data-sanitized-class="token punctuation">(</span><span data-sanitized-class="token variable">label</span><span data-sanitized-class="token operator">=</span><span data-sanitized-class="token string">'Disconnect'</span><span data-sanitized-class="token punctuation">,</span> <span data-sanitized-class="token variable">status</span><span data-sanitized-class="token operator">=</span><span data-sanitized-class="token string">'alert'</span><span data-sanitized-class="token punctuation">)</span> <span data-sanitized-class="token punctuation">}</span><span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">{</span># <span data-sanitized-class="token variable">Output</span> #<span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token variable">button</span> <span data-sanitized-class="token variable">type</span><span data-sanitized-class="token operator">=</span><span data-sanitized-class="token string">"button"</span> <span data-sanitized-class="token variable">class</span><span data-sanitized-class="token operator">=</span><span data-sanitized-class="token string">"tag-alert"</span><span data-sanitized-class="token operator">&gt;</span><span data-sanitized-class="token variable">Disconnect</span><span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token operator">/</span><span data-sanitized-class="token variable">button</span><span data-sanitized-class="token operator">&gt;</span></span></code></pre>
<p>The only catch is that all macro parameters are optional by default and not providing one will not prevent our component from being rendered. Since we try to enforce specific parameters within our components to make them more accessible, we would rather be informed whenever a critical parameter is not provided. So how can we achieve this?</p>
<p><strong>Building filter to enforce required parameters inside macros</strong></p>
<p>We can take advantage of another Eleventy feature to do this, namely <a href="https://www.11ty.dev/docs/filters/">filters</a>. In Eleventy, filters are JavaScript functions that accept content, modify it, and then return it to be displayed instead of the original.</p>
<p>This sounds a lot like macros, you might say, and that would be true. The only difference is that filters are best used to transform data rather than generate snippets of content.</p>
<p>We can start by creating a filter that throws a generic error when the value it receives is <code>undefined</code>.</p>
<pre data-sanitized-class="language-jsx"><code data-sanitized-class="language-jsx"><span data-sanitized-class="highlight-line">eleventyConfig<span data-sanitized-class="token punctuation">.</span><span data-sanitized-class="token function">addFilter</span><span data-sanitized-class="token punctuation">(</span><span data-sanitized-class="token string">"enforced"</span><span data-sanitized-class="token punctuation">,</span> <span data-sanitized-class="token keyword">function</span><span data-sanitized-class="token punctuation">(</span><span data-sanitized-class="token parameter">value</span><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 keyword">if</span><span data-sanitized-class="token punctuation">(</span>value <span data-sanitized-class="token operator">===</span> <span data-sanitized-class="token keyword">undefined</span><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 keyword">throw</span> <span data-sanitized-class="token keyword">new</span> <span data-sanitized-class="token class-name">Error</span><span data-sanitized-class="token punctuation">(</span><span data-sanitized-class="token string">"A parameter is missing"</span><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 punctuation">}</span></span><br><span data-sanitized-class="highlight-line">	<span data-sanitized-class="token keyword">return</span><span data-sanitized-class="token punctuation">(</span>value<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 punctuation">}</span><span data-sanitized-class="token punctuation">)</span><span data-sanitized-class="token punctuation">;</span></span></code></pre>
<p>By applying this filter to the parameters of the macros we can make them mandatory.</p>
<pre data-sanitized-class="language-jinja2"><code data-sanitized-class="language-jinja2"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token delimiter punctuation">{%</span> <span data-sanitized-class="token tag keyword">macro</span> <span data-sanitized-class="token function">button</span><span data-sanitized-class="token punctuation">(</span><span data-sanitized-class="token variable">label</span><span data-sanitized-class="token punctuation">,</span><span data-sanitized-class="token variable">type</span><span data-sanitized-class="token operator">=</span><span data-sanitized-class="token string">"button"</span><span data-sanitized-class="token punctuation">,</span> <span data-sanitized-class="token variable">status</span><span data-sanitized-class="token operator">=</span><span data-sanitized-class="token string">'success'</span><span data-sanitized-class="token punctuation">)</span> <span data-sanitized-class="token operator">%</span><span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line">	<span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token variable">button</span> <span data-sanitized-class="token variable">type</span><span data-sanitized-class="token operator">=</span><span data-sanitized-class="token string">"{{ type }}"</span> <span data-sanitized-class="token variable">class</span><span data-sanitized-class="token operator">=</span><span data-sanitized-class="token string">"tag-{{ status }}"</span><span data-sanitized-class="token operator">&gt;</span></span><br><span data-sanitized-class="highlight-line">		<span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token punctuation">{</span> <span data-sanitized-class="token variable">label</span> <span data-sanitized-class="token operator">|</span> <span data-sanitized-class="token variable">enforced</span> <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 operator">&lt;</span><span data-sanitized-class="token operator">/</span><span data-sanitized-class="token variable">button</span><span data-sanitized-class="token operator">&gt;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token operator">%</span> <span data-sanitized-class="token variable">endmacro</span> <span data-sanitized-class="token delimiter punctuation">%}</span></span></code></pre>
<p>We can then use it inside our component definition to flag parameters we want as required.</p>
<pre data-sanitized-class="language-jinja2"><code data-sanitized-class="language-jinja2"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token variable">button</span> <span data-sanitized-class="token variable">type</span><span data-sanitized-class="token operator">=</span><span data-sanitized-class="token string">"{{ type }}"</span><span data-sanitized-class="token operator">&gt;</span><span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token punctuation">{</span> <span data-sanitized-class="token variable">label</span> <span data-sanitized-class="token operator">|</span> <span data-sanitized-class="token variable">enforced</span> <span data-sanitized-class="token punctuation">}</span><span data-sanitized-class="token punctuation">}</span><span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token operator">/</span><span data-sanitized-class="token variable">button</span><span data-sanitized-class="token operator">&gt;</span></span></code></pre>
<p>Using this button component without providing a label parameter would throw an error which is what we want.</p>
<pre data-sanitized-class="language-jinja2"><code data-sanitized-class="language-jinja2"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">{</span># <span data-sanitized-class="token variable">Throws</span> <span data-sanitized-class="token variable">an</span> <span data-sanitized-class="token variable">error</span> <span data-sanitized-class="token variable">because</span> <span data-sanitized-class="token variable">the</span> <span data-sanitized-class="token variable">label</span> <span data-sanitized-class="token keyword">is</span> <span data-sanitized-class="token keyword">not</span> <span data-sanitized-class="token test function">provided</span> #<span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token punctuation">{</span> <span data-sanitized-class="token function">button</span><span data-sanitized-class="token punctuation">(</span><span data-sanitized-class="token variable">status</span><span data-sanitized-class="token operator">=</span><span data-sanitized-class="token string">'alert'</span><span data-sanitized-class="token punctuation">)</span> <span data-sanitized-class="token delimiter punctuation">}}</span></span></code></pre>
<p>And now, by combining Nunjucks macros and a filter, we can create reusable components and set up rules to make sure they meet our criteria. <a href="https://frontendchecklist.io/">The Front End Checklist</a> or the <a href="https://checklists.opquast.com/en/web-quality-assurance/">Web Quality Assurance Checklist</a> are both great resources to find ideas of criteria for writing better HTML markup. In the following sections we will address common HTML markup issues by utilizing this method.</p>
<h3 data-sanitized-id="how-to-enforce-labels-inside-form-fields?">How to enforce labels inside form fields?</h3>
<p>To enable users with disabilities to access form fields, it is essential to identify them. That way, screen reader users could scan the form fields by name or use keyboard shortcuts to quickly navigate from one field to another.</p>
<p><strong>Criteria</strong></p>
<ul>
<li>A <code>label</code> must be associated with each input form element.</li>
<li>Asterisks should not be used to mark required fields. <a href="https://www.semanticscholar.org/paper/The-Privacy-Economics-of-Voluntary-Over-disclosure-Preibusch-Krol/3f9426bf2c0b1808db4b5ce940ed36f476bc6d61">Research suggests</a> that they're not necessary and they can make users anxious and less likely to complete the form. Instead, the word <code>optional</code> should be added to non-required fields.</li>
<li>For security reasons, the <a href="https://www.aaron-gustafson.com/notebook/spellcheckers-exfiltrating-pii_-not-so-fast/">spellcheck attribute  should be set to false for password fields</a>.</li>
</ul>
<p>These criteria would lead to the following result for a password field.</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>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">	  Password</span><br><span data-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">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">spellcheck</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>false<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">id</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>name<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>password<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">required</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p>The associated component could be built using the following Nunjucks macro:</p>
<pre data-sanitized-class="language-jinja2"><code data-sanitized-class="language-jinja2"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token variable">label</span> <span data-sanitized-class="token keyword">for</span><span data-sanitized-class="token operator">=</span><span data-sanitized-class="token string">"{{ inputId | enforced }}"</span><span data-sanitized-class="token operator">&gt;</span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token punctuation">{</span> <span data-sanitized-class="token variable">label</span> <span data-sanitized-class="token operator">|</span> <span data-sanitized-class="token variable">enforced</span> <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 punctuation">{</span><span data-sanitized-class="token operator">%</span> <span data-sanitized-class="token keyword">if</span> <span data-sanitized-class="token keyword">not</span> <span data-sanitized-class="token variable">required</span> <span data-sanitized-class="token operator">%</span><span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line">        <span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token variable">span</span> <span data-sanitized-class="token variable">aria</span><span data-sanitized-class="token operator">-</span><span data-sanitized-class="token variable">hidden</span><span data-sanitized-class="token operator">=</span><span data-sanitized-class="token string">"true"</span><span data-sanitized-class="token operator">&gt;</span><span data-sanitized-class="token punctuation">(</span><span data-sanitized-class="token variable">Optional</span><span data-sanitized-class="token punctuation">)</span><span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token operator">/</span><span data-sanitized-class="token variable">span</span><span data-sanitized-class="token operator">&gt;</span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token operator">%</span> <span data-sanitized-class="token variable">endif</span> <span data-sanitized-class="token operator">%</span><span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token operator">/</span><span data-sanitized-class="token variable">label</span><span data-sanitized-class="token operator">&gt;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token variable">input</span> </span><br><span data-sanitized-class="highlight-line">		<span data-sanitized-class="token variable">type</span><span data-sanitized-class="token operator">=</span><span data-sanitized-class="token string">"{{ inputType or 'text' }}"</span> </span><br><span data-sanitized-class="highlight-line">		<span data-sanitized-class="token variable">id</span><span data-sanitized-class="token operator">=</span><span data-sanitized-class="token string">"{{ inputId | enforced }}"</span> </span><br><span data-sanitized-class="highlight-line">		<span data-sanitized-class="token variable">name</span><span data-sanitized-class="token operator">=</span><span data-sanitized-class="token string">"{{ inputName | enforced }}"</span> </span><br><span data-sanitized-class="highlight-line">		<span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token operator">%</span> <span data-sanitized-class="token keyword">if</span> <span data-sanitized-class="token variable">spellcheck</span><span data-sanitized-class="token operator">%</span><span data-sanitized-class="token punctuation">}</span> <span data-sanitized-class="token variable">spellcheck</span><span data-sanitized-class="token operator">=</span><span data-sanitized-class="token string">"{{ spellcheck}}"</span> <span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token operator">%</span> <span data-sanitized-class="token variable">endif</span> <span data-sanitized-class="token operator">%</span><span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line">		<span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token operator">%</span> <span data-sanitized-class="token keyword">if</span> <span data-sanitized-class="token variable">required</span> <span data-sanitized-class="token operator">%</span><span data-sanitized-class="token punctuation">}</span> <span data-sanitized-class="token variable">required</span> <span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token operator">%</span> <span data-sanitized-class="token variable">endif</span> <span data-sanitized-class="token operator">%</span><span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token operator">&gt;</span></span></code></pre>
<p><strong>Sources</strong></p>
<ul>
<li><a href="https://www.ovl.design/text/inclusive-inputs/">How to make inputs more accessible</a></li>
<li><a href="https://www.smashingmagazine.com/printed-books/form-design-patterns/">Form Design Patterns</a></li>
<li><a href="https://www.lukew.com/ff/entry.asp?725">Marking Required vs. Optional form fields</a></li>
<li><a href="https://www.aaron-gustafson.com/notebook/spellcheckers-exfiltrating-pii_-not-so-fast/">Spellcheckers exfiltrating PII… not so fast</a></li>
</ul>
<h3 data-sanitized-id="how-to-allow-flexible-headings-inside-components?">How to allow flexible headings inside components?</h3>
<blockquote>For screen reader users, headings describe the relationships between sections and subsections and — where used correctly — provide both an outline and a means of navigation.</blockquote>
<p><a href="https://medium.com/@Heydon/managing-heading-levels-in-design-systems-18be9a746fa3">Heydon Pickering</a></p>
<p>A common challenge you may face when building with a component-first approach is to settle for a single heading level. Yet, components should not be tied to a single situation, otherwise they will lose their primary benefit of being reusable. As such, it would not be appropriate to specify in advance a heading level which you cannot change according to the context.</p>
<p>Having a flexible way of setting the heading of a component can make it easier to respect correct heading structures while keeping the benefits of components. We can achieve that flexibility by passing the heading element as a parameter inside our macro and it just works.</p>
<p>Here we will build a post card component. The heading level should be provided depending on the context.</p>
<p><strong>Criteria</strong></p>
<ul>
<li>Headings should be flexible</li>
</ul>
<pre data-sanitized-class="language-jinja2"><code data-sanitized-class="language-jinja2"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token variable">article</span> <span data-sanitized-class="token variable">class</span><span data-sanitized-class="token operator">=</span><span data-sanitized-class="token string">"card"</span><span data-sanitized-class="token operator">&gt;</span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token operator">%</span><span data-sanitized-class="token keyword">if</span> <span data-sanitized-class="token variable">imageUrl</span><span data-sanitized-class="token operator">%</span><span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line">        <span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token variable">img</span> <span data-sanitized-class="token variable">src</span><span data-sanitized-class="token operator">=</span><span data-sanitized-class="token string">"{{imageUrl}}"</span> <span data-sanitized-class="token variable">alt</span><span data-sanitized-class="token operator">=</span><span data-sanitized-class="token string">"{{imageAlt | enforced}}"</span><span data-sanitized-class="token operator">/</span><span data-sanitized-class="token operator">&gt;</span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token operator">%</span><span data-sanitized-class="token variable">endif</span><span data-sanitized-class="token operator">%</span><span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token variable">headingElement</span> <span data-sanitized-class="token operator">|</span> <span data-sanitized-class="token variable">enforced</span> <span data-sanitized-class="token punctuation">}</span><span data-sanitized-class="token punctuation">}</span><span data-sanitized-class="token operator">&gt;</span></span><br><span data-sanitized-class="highlight-line">        <span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token variable">a</span> <span data-sanitized-class="token variable">href</span><span data-sanitized-class="token operator">=</span><span data-sanitized-class="token string">"{{ url | enforced }}"</span><span data-sanitized-class="token operator">&gt;</span></span><br><span data-sanitized-class="highlight-line">            <span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token punctuation">{</span> <span data-sanitized-class="token variable">title</span> <span data-sanitized-class="token operator">|</span> <span data-sanitized-class="token variable">enforced</span> <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 operator">&lt;</span><span data-sanitized-class="token operator">/</span><span data-sanitized-class="token variable">a</span><span data-sanitized-class="token operator">&gt;</span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token operator">/</span><span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token variable">headingElement</span><span data-sanitized-class="token punctuation">}</span><span data-sanitized-class="token punctuation">}</span><span data-sanitized-class="token operator">&gt;</span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token operator">%</span><span data-sanitized-class="token keyword">if</span> <span data-sanitized-class="token variable">description</span> <span data-sanitized-class="token operator">%</span><span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line">        <span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token variable">p</span><span data-sanitized-class="token operator">&gt;</span><span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token variable">description</span><span data-sanitized-class="token punctuation">}</span><span data-sanitized-class="token punctuation">}</span><span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token operator">/</span><span data-sanitized-class="token variable">p</span><span data-sanitized-class="token operator">&gt;</span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token operator">%</span><span data-sanitized-class="token variable">endif</span><span data-sanitized-class="token operator">%</span><span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token operator">%</span><span data-sanitized-class="token keyword">if</span> <span data-sanitized-class="token variable">time</span> <span data-sanitized-class="token operator">%</span><span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line">        <span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token variable">time</span> <span data-sanitized-class="token variable">datetime</span><span data-sanitized-class="token operator">=</span><span data-sanitized-class="token string">"{{time}}"</span><span data-sanitized-class="token operator">&gt;</span><span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token punctuation">{</span> <span data-sanitized-class="token variable">time</span> <span data-sanitized-class="token punctuation">}</span><span data-sanitized-class="token punctuation">}</span><span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token operator">/</span><span data-sanitized-class="token variable">time</span><span data-sanitized-class="token operator">&gt;</span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token operator">%</span> <span data-sanitized-class="token variable">endif</span> <span data-sanitized-class="token operator">%</span><span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token operator">/</span><span data-sanitized-class="token variable">article</span><span data-sanitized-class="token operator">&gt;</span></span></code></pre>
<p>Inside a template we can use the card component while passing the correct heading element.</p>
<pre data-sanitized-class="language-jinja2"><code data-sanitized-class="language-jinja2"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token variable">section</span><span data-sanitized-class="token operator">&gt;</span></span><br><span data-sanitized-class="highlight-line">	<span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token variable">h2</span><span data-sanitized-class="token operator">&gt;</span><span data-sanitized-class="token variable">Card</span> <span data-sanitized-class="token variable">components</span><span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token operator">/</span><span data-sanitized-class="token variable">h2</span><span data-sanitized-class="token operator">&gt;</span></span><br><span data-sanitized-class="highlight-line">	  <span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token punctuation">{</span> <span data-sanitized-class="token function">component</span><span data-sanitized-class="token punctuation">(</span></span><br><span data-sanitized-class="highlight-line">			<span data-sanitized-class="token string">"card"</span><span data-sanitized-class="token punctuation">,</span> <span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token variable">title</span><span data-sanitized-class="token punctuation">:</span> <span data-sanitized-class="token string">"About"</span><span data-sanitized-class="token punctuation">,</span> <span data-sanitized-class="token variable">url</span><span data-sanitized-class="token punctuation">:</span> <span data-sanitized-class="token string">"/about"</span><span data-sanitized-class="token punctuation">,</span> <span data-sanitized-class="token variable">headingElement</span><span data-sanitized-class="token punctuation">:</span> <span data-sanitized-class="token string">"h3"</span><span data-sanitized-class="token punctuation">,</span> <span data-sanitized-class="token variable">description</span><span data-sanitized-class="token punctuation">:</span> <span data-sanitized-class="token string">"Links and attributions"</span><span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line">		<span data-sanitized-class="token punctuation">)</span><span data-sanitized-class="token punctuation">}</span><span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token operator">/</span><span data-sanitized-class="token variable">section</span><span data-sanitized-class="token operator">&gt;</span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">{</span># <span data-sanitized-class="token variable">Output</span> #<span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token variable">section</span><span data-sanitized-class="token operator">&gt;</span></span><br><span data-sanitized-class="highlight-line">	<span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token variable">h2</span><span data-sanitized-class="token operator">&gt;</span><span data-sanitized-class="token variable">Card</span> <span data-sanitized-class="token variable">components</span><span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token operator">/</span><span data-sanitized-class="token variable">h2</span><span data-sanitized-class="token operator">&gt;</span></span><br><span data-sanitized-class="highlight-line">	<span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token variable">article</span> <span data-sanitized-class="token variable">class</span><span data-sanitized-class="token operator">=</span><span data-sanitized-class="token string">"card"</span><span data-sanitized-class="token operator">&gt;</span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token variable">h3</span><span data-sanitized-class="token operator">&gt;</span><span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token variable">a</span> <span data-sanitized-class="token variable">href</span><span data-sanitized-class="token operator">=</span><span data-sanitized-class="token string">"/about"</span><span data-sanitized-class="token operator">&gt;</span><span data-sanitized-class="token variable">About</span><span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token operator">/</span><span data-sanitized-class="token variable">a</span><span data-sanitized-class="token operator">&gt;</span><span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token operator">/</span><span data-sanitized-class="token variable">h3</span><span data-sanitized-class="token operator">&gt;</span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token variable">p</span><span data-sanitized-class="token operator">&gt;</span><span data-sanitized-class="token variable">Links</span> <span data-sanitized-class="token keyword">and</span> <span data-sanitized-class="token variable">attributions</span><span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token operator">/</span><span data-sanitized-class="token variable">p</span><span data-sanitized-class="token operator">&gt;</span> </span><br><span data-sanitized-class="highlight-line">	<span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token operator">/</span><span data-sanitized-class="token variable">article</span><span data-sanitized-class="token operator">&gt;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token operator">/</span><span data-sanitized-class="token variable">section</span><span data-sanitized-class="token operator">&gt;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">{</span># <span data-sanitized-class="token variable">Output</span> #<span data-sanitized-class="token punctuation">}</span></span></code></pre>
<p><strong><strong><strong><strong><strong><strong><strong>Sources</strong></strong></strong></strong></strong></strong></strong></p>
<ul>
<li><a href="https://inclusive-components.design/cards/">Inclusive Components - Cards</a></li>
<li><a href="https://iainbean.com/posts/2020/flexible-components-in-eleventy-with-nunjucks-macros/">Flexible components in Eleventy with Nunjucks macros</a></li>
<li><a href="https://medium.com/@Heydon/managing-heading-levels-in-design-systems-18be9a746fa3">Managing Heading Levels In Design Systems</a></li>
</ul>
<h3 data-sanitized-id="how-to-enforce-missing-alternative-text-on-images?">How to enforce missing alternative text on images?</h3>
<p>In the context of visuals, alternative text is a textual description for people who cannot process information visually. In an effort to maintain a comparable experience for everyone, we can add these descriptions to visual contents. If you are interested you can find a thorough guide on <a href="https://uxdesign.cc/how-to-write-an-image-description-2f30d3bf5546">how to write an image description</a>. If the image is purely <a href="https://www.w3.org/WAI/tutorials/images/decorative/">decorative</a>, a <code>null</code> (empty) <code>alt</code> text should be provided (<code>alt=""</code>) so that they can be ignored by assistive technologies, such as screen readers.</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>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>horizontal-wiggly-line.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></code></pre>
<p>In the post card component created previously, an image is included to illustrate posts. By using the <code>enforced</code> filter we can enforce an alternative text on these images.</p>
<pre data-sanitized-class="language-jinja2"><code data-sanitized-class="language-jinja2"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token delimiter punctuation">{%</span><span data-sanitized-class="token tag keyword">if</span> <span data-sanitized-class="token variable">imageUrl</span><span data-sanitized-class="token operator">%</span><span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token variable">img</span> <span data-sanitized-class="token variable">src</span><span data-sanitized-class="token operator">=</span><span data-sanitized-class="token string">"{{imageUrl}}"</span> <span data-sanitized-class="token variable">alt</span><span data-sanitized-class="token operator">=</span><span data-sanitized-class="token string">"{{imageAlt | enforced}}"</span><span data-sanitized-class="token operator">/</span><span data-sanitized-class="token operator">&gt;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token operator">%</span><span data-sanitized-class="token variable">endif</span><span data-sanitized-class="token delimiter punctuation">%}</span></span></code></pre>
<p><strong>Separation of concerns</strong></p>
<p>In Nunjucks you define variables with the <code>set</code> keyword. For a more convenient use, we unpack each arguments from the <code>params</code> object.</p>
<p>As shown in the following code snippet we could retrieve the value and enforce it at the top of the macros.</p>
<pre data-sanitized-class="language-jinja2"><code data-sanitized-class="language-jinja2"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token delimiter punctuation">{%</span> <span data-sanitized-class="token tag keyword">set</span> <span data-sanitized-class="token variable">imageAlt</span> <span data-sanitized-class="token operator">=</span> <span data-sanitized-class="token variable">params</span><span data-sanitized-class="token punctuation">.</span><span data-sanitized-class="token variable">imageAlt</span> <span data-sanitized-class="token operator">|</span> <span data-sanitized-class="token variable">enforced</span> <span data-sanitized-class="token operator">%</span><span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token operator">%</span> <span data-sanitized-class="token variable">set</span> <span data-sanitized-class="token variable">url</span> <span data-sanitized-class="token operator">=</span> <span data-sanitized-class="token variable">params</span><span data-sanitized-class="token punctuation">.</span><span data-sanitized-class="token variable">url</span> <span data-sanitized-class="token operator">|</span> <span data-sanitized-class="token variable">enforced</span> <span data-sanitized-class="token operator">%</span><span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token operator">%</span> <span data-sanitized-class="token variable">set</span> <span data-sanitized-class="token variable">headingElement</span> <span data-sanitized-class="token operator">=</span> <span data-sanitized-class="token variable">params</span><span data-sanitized-class="token punctuation">.</span><span data-sanitized-class="token variable">headingElement</span> <span data-sanitized-class="token operator">|</span> <span data-sanitized-class="token variable">enforced</span> <span data-sanitized-class="token operator">%</span><span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token operator">%</span> <span data-sanitized-class="token variable">set</span> <span data-sanitized-class="token variable">title</span> <span data-sanitized-class="token operator">=</span> <span data-sanitized-class="token variable">params</span><span data-sanitized-class="token punctuation">.</span><span data-sanitized-class="token variable">title</span><span data-sanitized-class="token operator">|</span> <span data-sanitized-class="token variable">enforced</span> <span data-sanitized-class="token operator">%</span><span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token operator">%</span> <span data-sanitized-class="token variable">set</span> <span data-sanitized-class="token variable">imageUrl</span> <span data-sanitized-class="token operator">=</span> <span data-sanitized-class="token variable">params</span><span data-sanitized-class="token punctuation">.</span><span data-sanitized-class="token variable">imageUrl</span> <span data-sanitized-class="token operator">%</span><span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token variable">article</span><span data-sanitized-class="token operator">&gt;</span>  </span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token operator">%</span><span data-sanitized-class="token keyword">if</span> <span data-sanitized-class="token variable">imageUrl</span><span data-sanitized-class="token operator">%</span><span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line">        <span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token variable">img</span> <span data-sanitized-class="token variable">src</span><span data-sanitized-class="token operator">=</span><span data-sanitized-class="token string">"{{imageUrl}}"</span> <span data-sanitized-class="token variable">alt</span><span data-sanitized-class="token operator">=</span><span data-sanitized-class="token string">"{{imageAlt}}"</span><span data-sanitized-class="token operator">/</span><span data-sanitized-class="token operator">&gt;</span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token operator">%</span><span data-sanitized-class="token variable">endif</span><span data-sanitized-class="token operator">%</span><span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line">		<span data-sanitized-class="token operator">&lt;</span>!<span data-sanitized-class="token operator">-</span><span data-sanitized-class="token operator">-</span> <span data-sanitized-class="token operator">-</span><span data-sanitized-class="token operator">-</span><span data-sanitized-class="token operator">&gt;</span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token variable">headingElement</span><span data-sanitized-class="token punctuation">}</span><span data-sanitized-class="token punctuation">}</span><span data-sanitized-class="token operator">&gt;</span></span><br><span data-sanitized-class="highlight-line">        <span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token variable">a</span> <span data-sanitized-class="token variable">href</span><span data-sanitized-class="token operator">=</span><span data-sanitized-class="token string">"{{ url }}"</span><span data-sanitized-class="token operator">&gt;</span></span><br><span data-sanitized-class="highlight-line">            <span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token punctuation">{</span> <span data-sanitized-class="token variable">title</span> <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 operator">&lt;</span><span data-sanitized-class="token operator">/</span><span data-sanitized-class="token variable">a</span><span data-sanitized-class="token operator">&gt;</span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token operator">/</span><span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token variable">headingElement</span><span data-sanitized-class="token punctuation">}</span><span data-sanitized-class="token punctuation">}</span><span data-sanitized-class="token operator">&gt;</span></span><br><span data-sanitized-class="highlight-line">		<span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token operator">%</span><span data-sanitized-class="token keyword">if</span> <span data-sanitized-class="token variable">description</span> <span data-sanitized-class="token operator">%</span><span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line">			<span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token variable">p</span><span data-sanitized-class="token operator">&gt;</span><span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token variable">description</span><span data-sanitized-class="token punctuation">}</span><span data-sanitized-class="token punctuation">}</span><span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token operator">/</span><span data-sanitized-class="token variable">p</span><span data-sanitized-class="token operator">&gt;</span></span><br><span data-sanitized-class="highlight-line">		<span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token operator">%</span><span data-sanitized-class="token variable">endif</span><span data-sanitized-class="token operator">%</span><span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token operator">/</span><span data-sanitized-class="token variable">article</span><span data-sanitized-class="token operator">&gt;</span></span></code></pre>
<p>This separation enables us to separate the logic from the template.</p>
<p><strong><strong><strong><strong><strong><strong><strong><strong><strong>Addressing redundant content</strong></strong></strong></strong></strong></strong></strong></strong></strong></p>
<p>In a card, the alternative text is supposed to describe the content of the image, and that content usually refers to the same content. As a result, the alternative text might be similar to the heading, which would create a duplicate. To prevent this, we may want to include more logic that detects a matching alternative text to the heading and throws out an error. First, we have to improve the filter so it throws an error when the <code>force</code> is set to <code>true</code>.</p>
<pre data-sanitized-class="language-jsx"><code data-sanitized-class="language-jsx"><span data-sanitized-class="highlight-line">eleventyConfig<span data-sanitized-class="token punctuation">.</span><span data-sanitized-class="token function">addNunjucksFilter</span><span data-sanitized-class="token punctuation">(</span><span data-sanitized-class="token string">"enforced"</span><span data-sanitized-class="token punctuation">,</span> <span data-sanitized-class="token keyword">function</span><span data-sanitized-class="token punctuation">(</span><span data-sanitized-class="token parameter">value<span data-sanitized-class="token punctuation">,</span> force</span><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 keyword">if</span><span data-sanitized-class="token punctuation">(</span>value <span data-sanitized-class="token operator">===</span> <span data-sanitized-class="token keyword">undefined</span> <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 keyword">throw</span> <span data-sanitized-class="token keyword">new</span> <span data-sanitized-class="token class-name">Error</span><span data-sanitized-class="token punctuation">(</span><span data-sanitized-class="token string">"A parameter is missing"</span><span data-sanitized-class="token punctuation">)</span> </span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token keyword">if</span><span data-sanitized-class="token punctuation">(</span> force <span data-sanitized-class="token operator">===</span> <span data-sanitized-class="token boolean">true</span> <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 keyword">throw</span> <span data-sanitized-class="token keyword">new</span> <span data-sanitized-class="token class-name">Error</span><span data-sanitized-class="token punctuation">(</span><span data-sanitized-class="token template-string"><span data-sanitized-class="token template-punctuation string">`</span><span data-sanitized-class="token string">An error occured: </span><span data-sanitized-class="token interpolation"><span data-sanitized-class="token interpolation-punctuation punctuation">${</span>value<span data-sanitized-class="token interpolation-punctuation punctuation">}</span></span><span data-sanitized-class="token template-punctuation string">`</span></span><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 punctuation">}</span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token keyword">return</span><span data-sanitized-class="token punctuation">(</span>value<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 punctuation">}</span><span data-sanitized-class="token punctuation">)</span><span data-sanitized-class="token punctuation">;</span></span></code></pre>
<p>The inside the macro component we can throw an error if the heading title is similar to the image description.</p>
<pre data-sanitized-class="language-jinja2"><code data-sanitized-class="language-jinja2"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">{</span># <span data-sanitized-class="token variable">Advanced</span> #<span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">{</span><span data-sanitized-class="token operator">%</span> <span data-sanitized-class="token variable">set</span> <span data-sanitized-class="token variable">check_redundancy</span> <span data-sanitized-class="token operator">=</span> <span data-sanitized-class="token string">"The title is redundant with alt text"</span> <span data-sanitized-class="token operator">|</span> <span data-sanitized-class="token function">enforced</span><span data-sanitized-class="token punctuation">(</span><span data-sanitized-class="token boolean">true</span><span data-sanitized-class="token punctuation">)</span> <span data-sanitized-class="token keyword">if</span> <span data-sanitized-class="token variable">title</span> <span data-sanitized-class="token operator">==</span><span data-sanitized-class="token operator">=</span> <span data-sanitized-class="token variable">imageAlt</span> <span data-sanitized-class="token delimiter punctuation">%}</span></span></code></pre>
<h3 data-sanitized-id="how-to-enforce-the-language-of-the-page?">How to enforce the language of the page?</h3>
<p>Specifying the language will enable text to speech tools to pronounce the content with the appropriate accent for the language used. It can also help translation tools. At the root of the project we can create a <code>_data</code> folder that will hold <a href="https://11ty.recipes/recipes/add-global-data/">Eleventy global data files</a>. Global data files allow you to store data in a single file and reference it in all of your templates.</p>
<p>By creating a global data file we can apply the correct language attribute across the entire project. Here we are adding this attribute inside a <code>site.js</code> global data file.</p>
<pre data-sanitized-class="language-jsx"><code data-sanitized-class="language-jsx"><span data-sanitized-class="highlight-line">module<span data-sanitized-class="token punctuation">.</span>exports <span data-sanitized-class="token operator">=</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">	title<span data-sanitized-class="token operator">:</span> <span data-sanitized-class="token string">"HTML Practices"</span><span data-sanitized-class="token punctuation">,</span></span><br><span data-sanitized-class="highlight-line">  description<span data-sanitized-class="token operator">:</span> <span data-sanitized-class="token string">"Enforcing HTML best practices in Eleventy"</span><span data-sanitized-class="token punctuation">,</span></span><br><span data-sanitized-class="highlight-line">  language<span data-sanitized-class="token operator">:</span> <span data-sanitized-class="token string">"en"</span><span data-sanitized-class="token punctuation">,</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">}</span></span></code></pre>
<p>We can the reference the language attribute in the HTML opening tag of templates.</p>
<pre data-sanitized-class="language-jinja2"><code data-sanitized-class="language-jinja2"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token operator">&lt;</span>!<span data-sanitized-class="token variable">DOCTYPE</span> <span data-sanitized-class="token variable">html</span><span data-sanitized-class="token operator">&gt;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token variable">html</span> <span data-sanitized-class="token variable">lang</span><span data-sanitized-class="token operator">=</span><span data-sanitized-class="token string">"{{site.language }}"</span><span data-sanitized-class="token operator">&gt;</span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token variable">head</span><span data-sanitized-class="token operator">&gt;</span><span data-sanitized-class="token operator">&lt;</span>!<span data-sanitized-class="token operator">-</span><span data-sanitized-class="token operator">-</span> <span data-sanitized-class="token variable">Head</span> <span data-sanitized-class="token variable">content</span> <span data-sanitized-class="token operator">-</span><span data-sanitized-class="token operator">-</span><span data-sanitized-class="token operator">&gt;</span><span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token operator">/</span><span data-sanitized-class="token variable">head</span><span data-sanitized-class="token operator">&gt;</span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token variable">body</span><span data-sanitized-class="token operator">&gt;</span><span data-sanitized-class="token operator">&lt;</span>!<span data-sanitized-class="token operator">-</span><span data-sanitized-class="token operator">-</span> <span data-sanitized-class="token variable">Body</span> <span data-sanitized-class="token variable">content</span> <span data-sanitized-class="token operator">-</span><span data-sanitized-class="token operator">-</span><span data-sanitized-class="token operator">&gt;</span><span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token operator">/</span><span data-sanitized-class="token variable">body</span><span data-sanitized-class="token operator">&gt;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token operator">&lt;</span><span data-sanitized-class="token operator">/</span><span data-sanitized-class="token variable">html</span><span data-sanitized-class="token operator">&gt;</span></span></code></pre>
<h3 data-sanitized-id="validating-the-html-code">Validating the HTML code</h3>
<p>There is a limit to what you can achieve by manually testing your websites. And even by <em>“enforcing”</em> good practices into your workflow, you are bound to miss something once in a while. To limit such occurrences you can use an automated tool for validating HTML markup. Inside Eleventy we can use <a href="https://darekkay.com/evaluatory/">Evaluatory</a> , an open-source tool for website validation. It tests a website for accessibility and markup issues. We can <a href="https://matthiasott.com/notes/generating-accessibility-test-results-with-evaluatory">use Evaluatory to automate checks on save</a> inside our project.</p>
<h2 data-sanitized-id="wrapping-up">Wrapping Up</h2>
<p>Writing good HTML markup is one step towards providing a better web experience. And as long as this foundation is sturdy, you can effectively provide a better experience overall. You can explore this <a href="https://github.com/nelioyann/enforcing-html-11ty">Github repository</a> to find all the implementations mentioned in this article.</p>


guid: https://odysee.com/eva-bartlett-western-silence-as-ukraine:d127f39113fd97db9b99ae1b9fed981057890770
title: "Eva Bartlett Western Silence As Ukraine Targets Civilians in Donbass"
author: ;Eva K Bartlett
link: https://odysee.com/eva-bartlett-western-silence-as-ukraine:d127f39113fd97db9b99ae1b9fed981057890770
hash: G���U� a�<�|�څ
content:
<p><img src="https://thumbnails.lbry.com/ETpa-W0lJMc" width="480" alt="thumbnail" title="" eva bartlett western silence as ukraine targets civilians in donbass></p>First published here:<br>https://youtu.be/Pg_AxQqqj0w<br><br>"Addressing the EIR Symposium, "Peace On Earth, Or Humanity's Doom? The Case For Negotiations," Canadian journalist Eva Bartlett, who was granted the 2017 International Journalism Award by the Journalists’ Club of Mexico and has spent years doing on-the-ground reporting of wars in the Middle East, gave an eyewitness account of the ongoing genocide against the people of Donbass, where she has been reporting for the last year. Since 2014, she reported, 12,500 civilians have been killed by sniping and shelling with NATO weapons in both the Lugansk People’s Republic and Donetsk People’s Republic, with over 4,500 killed since mid-February of this year. Given that civilian areas are targeted, this shelling constitutes terrorism and war crimes. <br><br>According to Bartlett, the Ukrainian military has also been saturating the Donbass with PFM-1 “petal” mines, insidious devices designed not to kill but to maim victims by blowing off their hands or feet. Children are particularly susceptible to these devices. She made the point that were Russia committing these crimes, it would be covered as a constant scandal by Western media. Bartlett ended her remarks by pointing to a flag of the Donetsk People’s Republic she proudly displays on the wall of her home, representing to her the resilience of a people shunned by most of the world and ridiculed as if their lives are meaningless. She expressed hope that the work she is doing will lead to Ukraine being held accountable for its war crimes and help allow people to speak openly about the fact that Ukraine is committing genocide."<br>...<br>https://www.youtube.com/watch?v=ETpa-W0lJMc

attributes:
{"enclosures":[{"url":"https://player.odycdn.com/api/v3/streams/free/eva-bartlett-western-silence-as-ukraine/d127f39113fd97db9b99ae1b9fed981057890770/c9cfe1.mp4","type":"video/mp4","length":31278613}]}


guid: https://htmhell.dev/adventcalendar/2022/24/
title: Preventing form submission with zero Javascript
author: ;Manuel Matuzovic
link: https://htmhell.dev/adventcalendar/2022/24/
hash: >| v��}ѾM���Kt
attributes: {"enclosures":[]}
content:
<p>Want to <a href="https://ashleemboyer.com/blog/should-i-use-a-button-or-a-link">trigger an action</a>? Use <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button">a button element</a>. They’re great.</p>
<p>Want to also prevent form submission when someone clicks that button? Put down the JavaScript, friend. I have a better suggestion:</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 punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">	Button action goes here</span><br><span data-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>And that’s it! No  <code>preventDefault()</code> or no overwrought dependencies that will stop working without notice. Just good ol’ reliable HTML and <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type">a humble attribute</a>.</p>
<p>Okay, cool, thanks!</p>
<p>PS from Manuel: Thank you so much to all authors for this wonderufl series of articles and thank you to all readers for reading, sharing, and commenting! Merry christmas and a happy new year! 🖤</p>


guid: https://odysee.com/visit-to-an-incredible-dog-shelter-in:a8a5cd1e6b84b6a8b64c92711c2171256bbddc4c
title: Visit To An Incredible Dog Shelter in Donetsk
author: ;Eva K Bartlett
link: https://odysee.com/visit-to-an-incredible-dog-shelter-in:a8a5cd1e6b84b6a8b64c92711c2171256bbddc4c
hash: ��0���JJ�?ɯ
content:
<p><img src="https://thumbnails.lbry.com/uYlzc_RqrDo" width="480" alt="thumbnail" title="Visit To An Incredible Dog Shelter in Donetsk"></p>On my last couple of visits to Donetsk, I went to an incredible dog shelter caring for over 800 dogs.  <br><br>I apologize for taking too long to put together &amp; share footage I took, but better late than never.  The shelter could really use support in order to buy food &amp; things related to treating &amp; caring for the dogs. <br>*Note: I have no financial or other affiliation to the shelter, just really appreciate what they are doing ❤️ <br><br>Follow the shelter here:<br>https://t.me/pif_dn<br>...<br>https://www.youtube.com/watch?v=uYlzc_RqrDo

attributes:
{"enclosures":[{"url":"https://player.odycdn.com/api/v3/streams/free/visit-to-an-incredible-dog-shelter-in/a8a5cd1e6b84b6a8b64c92711c2171256bbddc4c/846c78.mp4","type":"video/mp4","length":121621880}]}


guid: https://odysee.com/kherson-refugees-reject-western-media:714554bb4673dec9c04ff4b8f42742a716d60109
title: Kherson Refugees Reject Western Media Claims of Russia "Kidnapping" Them
author: ;Eva K Bartlett
link: https://odysee.com/kherson-refugees-reject-western-media:714554bb4673dec9c04ff4b8f42742a716d60109
hash: O�� ����v'��_
content:
<p><img src="https://thumbnails.lbry.com/MhItnEdw38U" width="480" alt="thumbnail" title="Kherson Refugees Reject Western Media Claims of Russia " kidnapping them></p>Western media claim up to 1.6 million refugees seeking safe haven in Russia were “kidnapped”.   <br><br>According to the Russian Ministry of Foreign Affairs as of September 9, 2022, Russia has nearly 4 million refugees from Ukraine.  <br><br>Anyone following Ukraine's over eight years of war on the Donbass understands why people would seek refuge in Russia.  <br><br>I went to refugee centres in Anapa, a southern Russia city and spoke with a number of refugees from Kherson.  <br><br>Western media won't speak about those refugees, nor those I interviewed, fleeing Ukraine's shelling or due to the risk of being persecuted.   <br><br>By the way, unsurprisingly, Western media pulled this "kidnapped" stunt before. In 2019, Western media was *so concerned* about Syrian refugees from a camp in Syria's east, which Western media alleged were being held at gunpoint in refugee centres in Homs.  <br><br>After interviewing a number of such IDPs, I wrote a detailed article noting the deceptive media reporting on Rukban. [https://www.mintpressnews.com/voices-syria-rukban-refugee-camp-media-reporting/260197/]  I emailed two different high level UN employees, whose replies contrasted the wild claims of Western media reports.  <br><br>They noted the UN had visited the shelters multiple times, “and has found the situation there adequate and in compliance with standards,” and that claims of refugees being shot or threatened were “unfounded”. <br><br> So much that happens in the Donbass &amp; Ukraine has happened in Syria, with Western corporate media again inverting reality and lauding terrorists, in order to manipulate public opinion in favour of NATO's wars.<br>...<br>https://www.youtube.com/watch?v=MhItnEdw38U

attributes:
{"enclosures":[{"url":"https://player.odycdn.com/api/v3/streams/free/kherson-refugees-reject-western-media/714554bb4673dec9c04ff4b8f42742a716d60109/2d55db.mp4","type":"video/mp4","length":338278700}]}


guid: https://odysee.com/festive-lights-in-resilient-donetsk.:e2ba851d6852c2fb3daaeb30de0e7b11f8f1210f
title: Festive lights in resilient Donetsk. ❤️
author: ;Eva K Bartlett
link: https://odysee.com/festive-lights-in-resilient-donetsk.:e2ba851d6852c2fb3daaeb30de0e7b11f8f1210f
hash: �z�+m�'��a-����%
content:
<p><img src="https://thumbnails.lbry.com/4wiOz8gFz9k" width="480" alt="thumbnail" title="Festive lights in resilient Donetsk. ❤️"></p>I walked around the city tonight &amp; had fun putting this short clip together.<br><br>Happy New Year.<br>...<br>https://www.youtube.com/watch?v=4wiOz8gFz9k

attributes:
{"enclosures":[{"url":"https://player.odycdn.com/api/v3/streams/free/festive-lights-in-resilient-donetsk./e2ba851d6852c2fb3daaeb30de0e7b11f8f1210f/250ee5.mp4","type":"video/mp4","length":39302606}]}


title: Ukraine Sent 25+ Grads to Donetsk Early This Morning. Happy New Year
author: ;Eva K Bartlett
hash: 1�cl��  DL��_�
guid:
https://odysee.com/ukraine-sent-25%2B-grads-to-donetsk-early:e9ded5fa04c4f1e60e7b76e0fd884390b6947cd1

content:
<p><img src="https://thumbnails.lbry.com/XIiVTn1-7rw" width="480" alt="thumbnail" title="Ukraine Sent 25+ Grads to Donetsk Early This Morning. Happy New Year"></p>Ukraine sent Donetsk a New Years gift, many actually, bombing the city centre around 4 am this morning. I haven't seen any updates on whether anyone was injured or killed, I hope not. <br><br>I went out walking &amp; filming a couple hours ago.  These are some of the scenes around where Ukraine shelled.<br>...<br>https://www.youtube.com/watch?v=XIiVTn1-7rw

link:
https://odysee.com/ukraine-sent-25%2B-grads-to-donetsk-early:e9ded5fa04c4f1e60e7b76e0fd884390b6947cd1

attributes:
{"enclosures":[{"url":"https://player.odycdn.com/api/v3/streams/free/ukraine-sent-25+-grads-to-donetsk-early/e9ded5fa04c4f1e60e7b76e0fd884390b6947cd1/bed701.mp4","type":"video/mp4","length":298410627}]}


guid: https://christitus.com/block-razer-bloatware/
title: Block Razer Bloatware
link: https://christitus.com/block-razer-bloatware/
hash: dC/� �d���my0A�
attributes: {"enclosures":[]}
content:
<p>This script is made due to the frustration of the bloatware that gets install for all Razer devices.</p>
<h2 data-sanitized-id="the-problem">The Problem</h2>
<p>The hardware works fine without any software and just installing the BASE synapse software it runs almost 500 MB installer that has 3 services and 15 RUNNING PROCESSES! This gets worse the more software you select past Synapse. The worst part about all this? It auto-installs when you plug in ANY Razer USB product. It is classified as malware because the hardware doesn’t need it AND it slow yours your computer down.</p>
<p><img loading="lazy" src="https://christitus.com/images/2022/block-razer-bloatware/bloatware.webp" alt="" data-sanitized-class="img-fluid"> </p>
<h2 data-sanitized-id="the-solution">The Solution</h2>
<p>I’ve developed a simplistic approach, but may need to expand when Razer learns of this project. This script, locates the installer folder and deletes it while protecting from being written to again. This prevents the hardware from running Razer installers.</p>
<p>GitHub Project: <a href="https://github.com/ChrisTitusTech/block-razer">https://github.com/ChrisTitusTech/block-razer</a></p>
<p>One line Script: (Run As Administrator in Powershell)</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">irm https://raw.githubusercontent.com/ChrisTitusTech/block-razer/main/block.ps1 | iex
</span></span></code></pre></div><h2 data-sanitized-id="walkthrough-video">Walkthrough Video</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/OlFR6PeJA4U?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/thumbnails-in-windows/
title: Thumbnails in Windows
link: https://christitus.com/thumbnails-in-windows/
hash: 0k��{ @�/C��n
attributes: {"enclosures":[]}
content:
<p>The thumbnail system in Windows has 4 major configuration areas dating back to 2000. From thumbs.db files, checkboxes, group policy, and registry edits, the Windows thumbnail system is, like everything in Windows, old and layered.</p>
<h2 data-sanitized-id="where-are-thumbnails-stored">Where are thumbnails stored?</h2>
<p><strong>thumbs.db</strong></p>
<p>EVERY folder has this hidden file. It is a database of small images for that given directory. Delete it and it will replicate itself if there are files in that folder and you have NOT disabled thumbnails.</p>
<h2 data-sanitized-id="how-do-i-configure-thumbnails">How do I configure thumbnails?</h2>
<blockquote>
<p>“Oh, how do I count the ways…”</p>
</blockquote>
<p>Any one of the following options will cause thumbnails NOT to work. Genius design…</p>
<h3 data-sanitized-id="file-options-in-file-explorer">File Options in File explorer</h3>
<p>Make sure this option is UNCHECKED “Always show icons, never thumbnails” to DISPLAY thumbnails.</p>
<p><img loading="lazy" src="https://christitus.com/images/2023/thumbnails-in-windows/file-options.webp" alt="" data-sanitized-class="img-fluid"> </p>
<h3 data-sanitized-id="system-performance-options">System Performance Options</h3>
<p>Open up this old hidden panel <code>sysdm.cpl</code> using run and you can configure it here as well!</p>
<p>Make sure this one is CHECKED! “Show Thumbnails instead of icons”.</p>
<p><img loading="lazy" src="https://christitus.com/images/2023/thumbnails-in-windows/system-options.webp" alt="" data-sanitized-class="img-fluid"> </p>
<h3 data-sanitized-id="group-policy">Group Policy</h3>
<p>There are FOUR, yes, FOUR options to disable thumbnails in group policy. Launch it with <code>gpedit.msc</code> from Run.</p>
<p>Make sure these aren’t configured:</p>
<p><img loading="lazy" src="https://christitus.com/images/2023/thumbnails-in-windows/gpedit.webp" alt="" data-sanitized-class="img-fluid"> </p>
<h3 data-sanitized-id="registry">Registry</h3>
<p>With every Windows option there is a corresponding registry entry.</p>
<p>The main one is in <code>HKCU\Software\Microsoft\Windows\CurrentVersion\Explorer\Advanced</code> with DWORD <code>DisableThumbnailCache</code> with value of <code>1</code></p>
<p>Screenshot of <code>regedit</code></p>
<p><img loading="lazy" src="https://christitus.com/images/2023/thumbnails-in-windows/regedit.webp" alt="" data-sanitized-class="img-fluid"> </p>
<h2 data-sanitized-id="walkthrough-video">Walkthrough Video</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/JUEBG-_U1vc?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://odysee.com/kuibeshevsky-jn-6-1:0f62b9d59d677cd0033f73f2ca7b961b8784480f
title: Donetsk resident: The Ukrainians shell us every day
author: ;Eva K Bartlett
link: https://odysee.com/kuibeshevsky-jn-6-1:0f62b9d59d677cd0033f73f2ca7b961b8784480f
hash: ����\<��N!4���
content:
<p><img src="https://thumbnails.lbry.com/anaKaHmhX_U" width="480" alt="thumbnail" title="Donetsk resident: The Ukrainians shell us every day"></p>Footage from Kuibyshevsky district, northwestern Donetsk, yesterday, where two houses were destroyed by Ukrainian shelling (and two elderly women injured, thankfully not gravely), the latest consequences of Ukraine's relentless shelling of that residential district, the latest in Ukraine's over 8 years of war crimes against the people of the Donbass, Ukraine's genocide. <br><br>One older man there who I interviewed asked me if I'll be honest, evidently aware of western media lies on the Donbass.<br><br>'It's not just yesterday, it's shelling here every day. It's thanks to Christmas today that God must be hearing us, so far this morning there has been no shelling.'<br><br>Russian Investigative Committee inspectors determined the shell was a 155 mm shell, which NATO, not Russia, uses.<br><br>Video is without additional commentary, the people &amp; scenes speak for themselves.<br>...<br>https://www.youtube.com/watch?v=anaKaHmhX_U

attributes:
{"enclosures":[{"url":"https://player.odycdn.com/api/v3/streams/free/kuibeshevsky-jn-6-1/0f62b9d59d677cd0033f73f2ca7b961b8784480f/cfee0d.mp4","type":"video/mp4","length":194117876}]}


guid: https://christitus.com/why-open-source/
title: Why Open Source?
link: https://christitus.com/why-open-source/
hash: _�av�%l:N�1�x:
attributes: {"enclosures":[]}
content:
<p>Why is open source done? The developer gives up all his code and potential for profit from the code.</p>
<h2 data-sanitized-id="the-reason">The Reason</h2>
<p>The main reason for open source is for collaboration and standardization. Without open source, you are reliant on a team of developers you hire and you are responsible for maintenance and all development. Hire less talented people? You have less development with a high cost. You also don’t have the ability to learn past what skills the people on the project has. One man band? You can’t learn much because you have no contributions and are reliant on your abilities.</p>
<p>On the flip side, you can learn and collaborate with thousands of people around the world WITH open source. What about the loss of money from sales? I remind myself that I’m not John Carmack, which was one of the first commercial open source successes with Quake and making it’s engine open source. He did close source the content of the Game, but is a gifted individual. The game made millions while also being open source at its core. When I open source all my projects, I do so with the intent of learning something. The knowledge I pickup is MORE valuable to me than if I sold the project as a closed source tool.</p>
<h2 data-sanitized-id="making-profit">Making Profit</h2>
<p>Let’s analyse how I make a million dollars off a project:</p>
<ul>
<li>Closed Source - Project requires a purchase and little longer development time to put in DRM so it can’t be copied or stolen. The software can only be as good as the developer. Even with a gifted developer, the chances of success are slim to even make $1000. However, if the program has a successful launch with massive adoption making a million dollars off a $50 sale price is easy. The main issue is marketing, which can be solved with social media. The downside is the programmer learns just what is needed for project completion if anything at all. The only person that should consider this option is the truly elite or companies that hire teams of people to complete the program.</li>
<li>Open Source - Project can develop at a rapid pace with issues coming in from users, collaboration happening with pull requests from other programmers that have different knowledge sets than you. The amount of knowledge you gain by doing this is vast. I value the knowledge gained greater than the possibilities of closed source development. Also, since there are more eyeballs on the project the program itself will be more complete and feature rich. Instead of making with profit in mind, you are programming with the end user experience at the forefront.</li>
</ul>
<h2 data-sanitized-id="open-source-myths">Open Source Myths</h2>
<ul>
<li>Crowdfunding - Doesn’t work or rarely works in many instances. If you need a paycheck from a program, you need to go punch a clock somewhere. Every project I follow needs VC or private funding to see it to the finish line when time and money are priorities.</li>
<li>Everything should be FREE - Quake is a perfect example of a properly monetized project. Engine was open source, but the content was not. Just because something is open source doesn’t mean the compiled project needs to be.</li>
<li>Less Secure - This is a strange belief that some subscribe to the security by obscurity line of thought. Popular open source projects have its code reviewed almost daily and security holes plugged quicker than closed source that might never even have an independent code review!</li>
<li>Hard to Maintain - Since more people are pushing requests and issues it becomes harder to maintain as a few have said. Any project that I stopped maintaining or it just became unwieldy was my fault. The person in charge of the open source project has to be willing to deny and refuse MANY pull requests. It is up to the project maintainer to be vigilant, clean the code, and have strict rules for contribution. Anytime I’ve failed to maintain a project, it was because of a poor understanding of a PR or GitHub in general.</li>
</ul>
<h2 data-sanitized-id="walkthrough-video">Walkthrough Video</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/dhox4jNrBQM?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://odysee.com/it%27s-2023-and-ukraine-continues-its:b3ea54c9cbd8178b5b8c439c7e0d8d226e24b10e
title: It's 2023 and Ukraine Continues Its Terrorism of Donbass Civilian Areas &amp; Infrastructure
author: ;Eva K Bartlett
link: https://odysee.com/it%27s-2023-and-ukraine-continues-its:b3ea54c9cbd8178b5b8c439c7e0d8d226e24b10e
hash: o�h����ٱ4�)��
content:
<p><img src="https://thumbnails.lbry.com/HSiUvb1ci5I" width="480" alt="thumbnail" title="It's 2023 and Ukraine Continues Its Terrorism of Donbass Civilian Areas &amp; Infrastructure"></p>*Warning: end of clip shows graphic images, civilians slaughtered by Ukraine last year.*<br><br>On January 7th &amp; 8th, Ukrainian forces shelled two Thermal Power Plants &amp; a commercial building in areas around Donetsk, killing two people, all with western weapons.<br><br>Ukraine's terrorism of 2022, and since 2014 in fact, continues into 2023, unsurprisingly. Just as unsurprisingly, Western media ignores or whitewashes it, and the West keeps absurdly pledging more weapons to Ukraine. <br><br>Geopolitical analyst Brian Berletic routinely notes that the weapons/military aid the west supplies Ukraine is no where near what Ukraine needs to recover its losses, much less challenge Russia. <br><br>And the West knows this, knows their weapons are being used instead to slaughter Donbass civilians and target infrastructure, and still they send it....<br><br>Video mentioned at end:<br><br>"The Ukraine Arms Drain: Now and in the Future"<br>https://www.youtube.com/watch?v=9wZfjd-byNk<br><br>*Please consider following me on other platforms. My time here on Youtube is limited &amp; will end.  I'm on:<br>https://odysee.com/@EvaKareneBartlett:9<br>https://rumble.com/c/c-2030196<br>https://t.me/Reality_Theories<br>...<br>https://www.youtube.com/watch?v=HSiUvb1ci5I

attributes:
{"enclosures":[{"url":"https://player.odycdn.com/api/v3/streams/free/it's-2023-and-ukraine-continues-its/b3ea54c9cbd8178b5b8c439c7e0d8d226e24b10e/ffed08.mp4","type":"video/mp4","length":97732903}]}


guid: https://christitus.com/ext4-in-windows/
title: Ext4 in Windows
link: https://christitus.com/ext4-in-windows/
hash: E�������_��DK���
attributes: {"enclosures":[]}
content:
<p>Pulling in EXT4 drives is easy now with Windows WSL2. There are a few tricks that you need to know about though!</p>
<h2 data-sanitized-id="requirements">Requirements</h2>
<ul>
<li>Any version of Windows 11</li>
<li>Any version of Windows 10 (Build 22000+) <em>Note: check with <code>winver</code> from Run</em></li>
<li>Powershell as Admin and WSL 2 installed</li>
<li>ONLY Internal drives are supported. No USB Drives.</li>
</ul>
<p>Syntax pulled from <a href="https://learn.microsoft.com/en-us/windows/wsl/wsl2-mount-disk">https://learn.microsoft.com/en-us/windows/wsl/wsl2-mount-disk</a></p>
<h2 data-sanitized-id="determine-partition-to-mount">Determine Partition to Mount</h2>
<h3 data-sanitized-id="powershell-as-admin">PowerShell as Admin</h3>
<p>List Drives</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">GET-CimInstance -query "SELECT * from Win32_DiskDrive"
</span></span></code></pre></div><p>Mount and list Drive Partitions</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 --mount &lt;DiskPath&gt; --bare
</span></span><span data-sanitized-class="line"><span data-sanitized-class="cl">wsl
</span></span></code></pre></div><h3 data-sanitized-id="linux-wsl2-instance">Linux WSL2 Instance</h3>
<p>List Drive Partitions from WSL Instance</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">lsblk
</span></span></code></pre></div><p>List Drive Types and IDs</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">sudo blkid
</span></span></code></pre></div><h3 data-sanitized-id="powershell-as-admin-1">PowerShell as Admin</h3>
<p><em>Note: By default Windows will always assume it is EXT4, unless the <code>-t vfat</code> option is used.</em></p>
<p>From Windows PowerShell</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 --mount \\.\PhysicalDrive1 --partition 2
</span></span></code></pre></div><p>This will make it available in both Windows Explorer and WSL <code>/mnt/wsl/PhysicalDrive1</code> path.</p>
<h4 data-sanitized-id="unmount">Unmount</h4>
<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 --unmount \\.\PhysicalDrive1
</span></span></code></pre></div><h2 data-sanitized-id="walkthrough-video">Walkthrough Video</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/aX1vH1j7m7U?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/dism-plus/
title: Dism++
link: https://christitus.com/dism-plus/
hash: �G#H�)�o�J#=$
attributes: {"enclosures":[]}
content:
<p>Dism++ enables users to modify Windows images before installing them, as well as providing tools to address and repair common issues like missing or corrupted files.</p>
<h2 data-sanitized-id="before-using">Before Using</h2>
<p>DISM++ is an open source github project located @ <a href="https://github.com/Chuyu-Team/Dism-Multi-language/tree/master/www.chuyu.me">https://github.com/Chuyu-Team/Dism-Multi-language/tree/master/www.chuyu.me</a> but is a bit dated. The last activity on the project was February 2022, but the main site is down.</p>
<p>It is created by Chuyu, which is a Chinese developer and I’d recommend NOT using this tool for secure environments. In short, if you use TikTok or Discord, then is a giant nothing burger for you and use away.</p>
<h2 data-sanitized-id="download">Download</h2>
<h2 data-sanitized-id="usage-and-features">Usage and Features</h2>
<h3 data-sanitized-id="disk-cleanup">Disk Cleanup</h3>
<p>Advanced cleanup of Windows updates and misc. files.</p>
<p><img loading="lazy" src="https://christitus.com/images/2023/dism-plus/cleanup.webp" alt="" data-sanitized-class="img-fluid"> </p>
<h3 data-sanitized-id="startup-check">Startup Check</h3>
<p>See what programs are starting and what programs will get installed when a new user is created.</p>
<p><img loading="lazy" src="https://christitus.com/images/2023/dism-plus/startup.webp" alt="" data-sanitized-class="img-fluid"> </p>
<h3 data-sanitized-id="appx-uninstaller">Appx Uninstaller</h3>
<p>Bulk uninstall Microsoft Store Apps.</p>
<p><img loading="lazy" src="https://christitus.com/images/2023/dism-plus/appx.webp" alt="" data-sanitized-class="img-fluid"> </p>
<h3 data-sanitized-id="updates">Updates</h3>
<p>Uninstalled Built-In Updates? Use the DISM++ Updates tab to scan and install new updates.</p>
<p><img loading="lazy" src="https://christitus.com/images/2023/dism-plus/updates.webp" alt="" data-sanitized-class="img-fluid"> </p>
<h3 data-sanitized-id="the-rest---toolbox-deploy-drivers-etc">The Rest - Toolbox, Deploy, Drivers, etc.</h3>
<p>Since this is seeing less and less updates, I wouldn’t use these tools. Microsoft is constantly updating and modifying Windows, hence using the less targeted tools is NOT Recommended.</p>
<h2 data-sanitized-id="walkthrough-video">Walkthrough Video</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/2hEde5WuCSY?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>


title: Sparta commander: "We are fighting against the genocide of the Russian-speaking population"
author: ;Eva K Bartlett
hash: �߳*c�=����?�7�
guid:
https://odysee.com/sparta-commander-we-are-fighting-against:9e0a1d5bd568ffb071ce2d7b0bdc2b98489531cd

content:
<p><img src="https://thumbnails.lbry.com/NNZMjyfB3KE" width="480" alt="thumbnail" title="Sparta commander: " we are fighting against the genocide of russian-speaking population></p>During my last trip to Donetsk, over the Christmas &amp; New Years holidays, I joined RT in some reporting. We filmed Artem Zhoga, commander of the Sparta Reconnaissance Battalion, on NY's eve:<br><br>"What are we fighting against? We are fighting against injustice, against genocide—the genocide of the Russian-speaking population, the dissident population, those who do not think like the, nationalists, the Nazis—against this Russophobia that has formed in the Western world. <br><br>Against the genocide of the civilian population, because there is no other way  to call the enemy's firing on institutions such as the Kalinin hospital, schools, the city center, and the market district.There is no other way to call it, this is precisely the genocide of the civilian population."<br>...<br>https://www.youtube.com/watch?v=NNZMjyfB3KE

link:
https://odysee.com/sparta-commander-we-are-fighting-against:9e0a1d5bd568ffb071ce2d7b0bdc2b98489531cd

attributes:
{"enclosures":[{"url":"https://player.odycdn.com/api/v3/streams/free/sparta-commander-we-are-fighting-against/9e0a1d5bd568ffb071ce2d7b0bdc2b98489531cd/2ff6ee.mp4","type":"video/mp4","length":85823317}]}


guid: https://christitus.com/everything-toolbar/
title: Replace Windows Search
link: https://christitus.com/everything-toolbar/
hash: X]�;)N�X/^�c��9�
attributes: {"enclosures":[]}
content:
<p>Everything Search is faster, more efficient, and a better Windows Search. This guide shows you how to setup everything and a toolbar for quick access.</p>
<h2 data-sanitized-id="installation">Installation</h2>
<p>Everything Search Official Download Site: <a href="https://www.voidtools.com/downloads/">https://www.voidtools.com/downloads/</a></p>
<p>Powershell Install:</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">choco install Everything
</span></span></code></pre></div><p>OR</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">winget</span> <span data-sanitized-class="n">install</span> <span data-sanitized-class="n">voidtools</span><span data-sanitized-class="o">.</span><span data-sanitized-class="n">Everything</span>
</span></span></code></pre></div><h3 data-sanitized-id="everything-toolbar">Everything Toolbar</h3>
<p>Getting the right version of everything toolbar is important. Version 0.8+ (Currently Beta ONLY) is compatible with Windows 11 and The official everything toolbar version 0.7.4 or earlier will ONLY work with Windows 10.</p>
<p>Download the beta at: <a href="https://github.com/stnkl/EverythingToolbar/releases">https://github.com/stnkl/EverythingToolbar/releases</a></p>
<p>OR</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">winget install stnkl.EverythingToolbar.Beta
</span></span></code></pre></div><p>For earlier versions (Windows 10 ONLY)</p>
<p>Download the stable release at: <a href="https://github.com/stnkl/EverythingToolbar/releases">https://github.com/stnkl/EverythingToolbar/releases</a></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">choco</span> <span data-sanitized-class="n">install</span> <span data-sanitized-class="n">everythingtoolbar</span>
</span></span></code></pre></div><p>OR</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">winget install stnkl.EverythingToolbar
</span></span></code></pre></div><h2 data-sanitized-id="disable-windows-indexer">Disable Windows Indexer</h2>
<p>Easiest way to disable indexing and the performance hog that it is. Disable the service!</p>
<p>Open Run command: Right-click start button and select run</p>
<p><img loading="lazy" src="https://christitus.com/images/2023/everything-toolbar/run.webp" alt="" data-sanitized-class="img-fluid"> </p>
<p>Disable the Service by stopping and disabling it</p>
<p><img loading="lazy" src="https://christitus.com/images/2023/everything-toolbar/service.webp" alt="" data-sanitized-class="img-fluid"> </p>
<h2 data-sanitized-id="walkthrough-video">Walkthrough Video</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/6Xg-BRA3rgQ?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/sync-local-files/
title: How to Sync Local Files
link: https://christitus.com/sync-local-files/
hash: �e���� �fbR���
attributes: {"enclosures":[]}
content:
<p>A guide over how to set up Syncthing for local sync only.</p>
<h2 data-sanitized-id="things-you-need-to-know">Things you NEED to know</h2>
<p>Syncthing by defaults it will sync files through relays across the internet. This is useful when needing to grab a file while you are outside your network, but slow and can cause security issues. While the information is encrypted, it still poses a threat to some. Also, the slowdown is relaying that information outside the network even in a LAN transfer.</p>
<p>The following guide shows you how to make it sync only in a LAN environment. Note: This will make your files NOT sync when outside your own network!</p>
<h2 data-sanitized-id="installing-syncthing">Installing Syncthing</h2>
<p>There is a cli service that you can install via syncthing. I prefer to take a GUI approach to the configuration as it helps when troubleshooting. Here are the following tools I recommend based on the operating system.</p>
<h3 data-sanitized-id="windows-and-linux">Windows and Linux</h3>
<p>Syncthing-GTK is a proven companion I’ve used with syncthing for years. It is open source and you can download the latest releases here: <a href="https://github.com/kozec/syncthing-gtk/releases">https://github.com/kozec/syncthing-gtk/releases</a></p>
<p>During the install process choose the default selections and manage via localhost.</p>
<p>Installing on Steamdeck? Checkout it’s flatpak: <a href="https://flathub.org/apps/details/me.kozec.syncthingtk">https://flathub.org/apps/details/me.kozec.syncthingtk</a></p>
<h3 data-sanitized-id="macos">MacOS</h3>
<p>Syncthing for MacOS is a great open source project @ <a href="https://github.com/syncthing/syncthing-macos">https://github.com/syncthing/syncthing-macos</a></p>
<p>Homebrew install method:</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">brew install --cask syncthing
</span></span></code></pre></div><h2 data-sanitized-id="configuration">Configuration</h2>
<p><img loading="lazy" src="https://christitus.com/images/2023/sync-local-files/config.webp" alt="" data-sanitized-class="img-fluid"> </p>
<p>With multiple syncthing clients you can connect one using “Connect Remote Device” this is what the server interface looks like.</p>
<p><img loading="lazy" src="https://christitus.com/images/2023/sync-local-files/server.webp" alt="" data-sanitized-class="img-fluid"> </p>
<p>On the other system it will prompt to connect the two.</p>
<p><img loading="lazy" src="https://christitus.com/images/2023/sync-local-files/client.webp" alt="" data-sanitized-class="img-fluid"> </p>
<p>I generally always have a main server that manages all the connects and hosts the share. You don’t have to do this, but it’s easier to manage. To start syncing -&gt; Create a folder -&gt; Edit Folder -&gt; Click Sharing Options -&gt; Check the other syncthing computers to share it to!</p>
<p><img loading="lazy" src="https://christitus.com/images/2023/sync-local-files/share.webp" alt="" data-sanitized-class="img-fluid"> </p>
<p>On the client computers click add and watch the sync happen. This is the final result of the sync:</p>
<p><img loading="lazy" src="https://christitus.com/images/2023/sync-local-files/final-sync.webp" alt="" data-sanitized-class="img-fluid"> </p>
<h3 data-sanitized-id="disable-external-access">Disable External Access</h3>
<p><img loading="lazy" src="https://christitus.com/images/2023/sync-local-files/settings.webp" alt="" data-sanitized-class="img-fluid"> </p>
<p>This simple configuration will set everything to LAN only. Making sure anon usage and Global Discovery are disabled will work for most.</p>
<p>However, for a deeper dive for those security minded and configuration junkies, here is another tidbit. (Advanced Users Only)</p>
<ul>
<li>Sync Listen Address - This is where the incoming sync is and can be set to be IPv4 or a specific address if you want. It’s a bit overkill but by default it runs on 22000. Adjusting this value isn’t recommended and can cause headaches in a dynamic environment. Highly recommend using hostnames to resolve instead of IPs unless they are static!</li>
<li>GUI Listen Address - Syncthings web interface runs on port 8080 and typically only listens from localhost (local connections).</li>
</ul>
<h2 data-sanitized-id="syncthing-backups">Syncthing Backups</h2>
<p>Here is Syncthing’s wonderful backup system. I always use this for the times I delete something or need to recover from a bad sync. The options are: simple, trash can, staggered, and external. If you want basic backups, choose simple. Trash can is good for deleted files and often you want to grab an older version of an existing file when using sync. Personally, I do the overkill option of staggered versioning. This hold all the different version in a hour, day, week, month format til the end of the retention period. This will use a TON of space where the folder is synced from, so be CAREFUL!</p>
<p><img loading="lazy" src="https://christitus.com/images/2023/sync-local-files/backup.webp" alt="" data-sanitized-class="img-fluid"> </p>
<h2 data-sanitized-id="walkthrough-video">Walkthrough Video</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/dBVTedUWbfg?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>


