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 #19 - Debugging HTML: Linting

    Edge highlights potential issues in your document directly in the elements panel of DevTools and it lists details and further issues in the issues panel.

    Continue reading Issue #19

  2. Issue #18 - Debugging HTML: Accessibility

    You can debug accessibility features of HTML elements using DevTools in Firefox, Chrome, and Edge.

    Continue reading Issue #18

  3. Issue #17 - the track element

    The track element allows you to specify timed text tracks (e.g. captions or subtitles) for media elements.

    <video src="workshop_promo.mp4" controls>
      <track default kind="captions" srclang="en" src="workshop_promo.vtt" label="English">
      <track kind="subtitles" srclang="de" src="workshop_promo_de.vtt" label="Deutsch">
      Sorry, your browser doesn't support embedded videos.
    </video>
    Continue reading Issue #17

  4. Issue #16 - Landmarks

    HTML allows us to define so-called landmarks, important areas in a page. They can be really helpful, especially for screen reader users.

    <body>
      <!-- banner landmark -->
      <header>
        <!-- navigation landmark -->
        <nav>
        </nav>
      </header>
      <!-- main landmark -->
      <main>
        <!-- search landmark -->
        <form role="search">
        </form>
      </main>
      <!-- contentinfo landmark -->
      <footer>
      </footer>
    </body>
    Continue reading Issue #16

  5. Issue #15 - Spell check

    You can disable spell check in input, textarea and contenteditable fields.

    <label for="msg">Message</label>
    <textarea spellcheck="false" id="msg">HTML is amazzing!</textarea>
    Continue reading Issue #15

  6. Issue #14 - Autocapitalization

    Control how virtual keyboards capitalize words and characters by default.

    <label for="words">Words</label>
    <input type="text" id="words" autocapitalize="words">
    Continue reading Issue #14

  7. Issue #13 - ol vs. ul vs. div

    The difference between using ol, ul, and div for a list of items.

    <!-- An ordered list -->
    <ol>
      <li>Clerks (1994)</li>
      <li>Mallrats (1995)</li>
      <li>Jay and Silent Bob Strike Back (2001)</li>
    </ol>

    <!-- Just text -->
    <div>
      <div>Clerks (1994)</div>
      <div>Mallrats (1995)</div>
      <div>Jay and Silent Bob Strike Back (2001)</div>
    </div>
    Continue reading Issue #13

  8. Issue #12 - crossed out content

    HTML provides us with 2 different ways of identifying crossed out text*, the s and the del element.

    <h3>Vietnamese Rose Wood Nose Flute</h3>
    <p>
      The nose flute is the <del>mots</del> <ins>most</ins> beautiful instrument in the world.
    </p>
    <p>
      <s>Original price: € 19.99</s>
    </p>
    <p>
      <strong>Special offer: € 9.99!</strong>
    </p>

    * “Crossed out” in terms of its semantic meaning, usually but not necessarily displayed as crossed out text.

    Continue reading Issue #12

  9. Issue #11 - print style sheets

    Improve user experience by providing a print style sheet for your website.

    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="print.css" media="print">
    Continue reading Issue #11

  10. Issue #10 - reversing ordered lists

    You can reverse ordered lists by using the reversed attribute.

    <ol reversed>
      <li>Curly Sue (1991)</li>
      <li>Uncle Buck (1989)</li>
      <li>She's Having a Baby (1988)</li>
      <li>Planes, Trains & Automobiles (1987)</li>
      <li>Ferris Bueller's Day Off (1986)</li>
      <li>Weird Science (1985)</li>
      <li>The Breakfast Club (1985)</li>
      <li>Sixteen Candles (1984)</li>
    </ol>
    The reversed attribute numbers items from high to low.

    Continue reading Issue #10

  11. Issue #9 - the mailto: URI scheme

    You can pre-fill header fields and the message body, when you link to e-mail addresses.

    <a href="mailto:manuel@matuzo.at?subject=HTMHell%20issue%209%20was%20fantastic&body=Thanks,%0D%0AManuel!">
      manuel@matuzo.at
    </a>
    When you click this link, your default e-mail browser should open a new e-mail window with the subject “HTMHell issue 9 was fantastic” and the message “Thanks, Manuel”.

    manuel@matuzo.at

    Continue reading Issue #9

  12. Issue #8 - the section element

    Use the <section> element to mark up a grouping of related content, typically introduced with a heading.

    <h1>Welcome to GOV.UK</h1>
    <section>
      <h2>Services and information</h2>
      …
    </section>
    <section>
      <h2>Departments and policy</h2>
      …
    </section>
    …
    An extract of the gov.uk home page.

    Continue reading Issue #8

  13. Issue #7 - the avif image format

    avif is a fairly new image format and for me it's one of the most exciting recent additions to web development. Why? On a website I recently built, I could reduce the total image size from 1.72MB to 172KB just by converting images to avif.

    Continue reading Issue #7

  14. Issue #6 - the document outline

    In May to June 2021, WebAIM surveyed preferences of screen reader users and the results show that most respondents find proper heading structures useful.

    Pie chart showing that 52.8% find headings very useful and 32.9% somewhat useful.

    Continue reading Issue #6

  15. Issue #5 - autocompleting password fields

    You can help password managers and browsers (pre)fill password fields by using the autocomplete attribute,...and by doing other stuff.

    <label for="new-password">New Password</label>
    <input type="password" autocomplete="new-password" id="new-password" name="new-password" />
    Continue reading Issue #5

  16. Issue #4 - the current page

    Use the aria-current attribute to highlight the current page in a navigation, both visually and semantically.

    <nav>
      <ul>
        <li><a href="/home">Home</a></li>
        <li><a href="/about-us" aria-current="page">About us</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
    Continue reading Issue #4

  17. Issue #3 - page descriptions

    You can describe web pages using meta tags. This is important for 3rd party tools, websites, and apps. Search engines may use the description in their search results and social media sites in previews when users post a link.

    <meta name="description" content="HTML, accessibility, performance, and SEO tips, tricks, and best practices.">
    <meta property="og:description" content="HTML, accessibility, performance, and SEO tips, tricks, and best practices.">
    Continue reading Issue #3

  18. Issue #2 - gifs and reduced motion

    You can show animated gifs only if users don’t prefer reduced motion and fall back to jpg, 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

  19. 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

  20. 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.