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.