HTML Tips & Tricks

We publish an HTML tip or trick every week on this page, on our RSS feed or directly delivered to your inbox via our newsletter.

  1. Issue #2 - gifs and reduced motion

    You can replace animated gifs with jpgs if users prefer reduced motion, using the picture element in combination with the prefers-reduced-motion media feature.

    <picture>
    <source srcset="pooh666.gif" media="(prefers-reduced-motion: no-preference)">
    <img src="pooh666.jpg" alt="Pooh Bear doing knee bends in front of a mirror. Instead of the mirror glass, there’s an illustration of Satan. It looks like Pooh is worshipping the devil."/>
    </picture>
    Continue reading Issue #2
  2. Issue #1 - iframe accessibility

    iframes should be named, if they contain meaningful content. You can define an accessible name for an iframe using the title attribute. If it’s missing, screen readers might fall back to the value of the name or src attribute, which makes it hard or impossible for users to understand the purpose of the iframe.

    <iframe title="Bob Dylan - Visions Of Johanna (Live 1966) YouTube" width="560" height="315" src="https://www.youtube.com/embed/uW9_2r3raHE"></iframe>
    Continue reading Issue #1
  3. Issue #0 - Download links

    You can turn a hyperlink into a download link by adding the download attribute. Instead of navigating to the document, browsers prompt users to save the file to their disc.

    <a href="myfile_hash5474n.pdf" download>
    Annual Report (666 KB)
    </a>
    Continue reading Issue #0

Do you like what you’re reading?

Sign up for the HTMHell newsletter and receive an HTML tip or trick every week via e-mail.