HTML Tips & Tricks
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
Issue #18 - Debugging HTML: Accessibility
You can debug accessibility features of HTML elements using DevTools in Firefox, Chrome, and Edge.Continue reading Issue #18
Issue #17 - the track element
The track element allows you to specify timed text tracks (e.g. captions or subtitles) for media elements.
Continue reading Issue #17
<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.
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.
Continue reading Issue #16
<!-- banner landmark -->
<!-- navigation landmark -->
<!-- main landmark -->
<!-- search landmark -->
<!-- contentinfo landmark -->
Issue #15 - Spell check
You can disable spell check in input, textarea and contenteditable fields.
Continue reading Issue #15
<textarea spellcheck="false" id="msg">HTML is amazzing!</textarea>
Issue #14 - Autocapitalization
Control how virtual keyboards capitalize words and characters by default.
Continue reading Issue #14
<input type="text" id="words" autocapitalize="words">
Issue #13 - ol vs. ul vs. div
The difference between using
divfor a list of items.
Continue reading Issue #13
<!-- An ordered list -->
<li>Jay and Silent Bob Strike Back (2001)</li>
<!-- Just text -->
<div>Jay and Silent Bob Strike Back (2001)</div>
Issue #12 - crossed out content
HTML provides us with 2 different ways of identifying crossed out text*, the
<h3>Vietnamese Rose Wood Nose Flute</h3>
The nose flute is the <del>mots</del> <ins>most</ins> beautiful instrument in the world.
<s>Original price: € 19.99</s>
<strong>Special offer: € 9.99!</strong>
* “Crossed out” in terms of its semantic meaning, usually but not necessarily displayed as crossed out text.Continue reading Issue #12
Issue #11 - print style sheets
Improve user experience by providing a print style sheet for your website.
Continue reading Issue #11
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="print.css" media="print">
Issue #10 - reversing ordered lists
You can reverse ordered lists by using theContinue reading Issue #10
Issue #9 - the mailto: URI scheme
You can pre-fill header fields and the message body, when you link to e-mail addresses.
email@example.comContinue reading Issue #9
Issue #8 - the section element
Use theContinue reading Issue #8
<section>element to mark up a grouping of related content, typically introduced with a heading.
Issue #7 - the avif image format
Continue reading Issue #7
avifis 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
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.
Continue reading Issue #6
Issue #5 - autocompleting password fields
You can help password managers and browsers (pre)fill password fields by using the
autocompleteattribute,...and by doing other stuff.
Continue reading Issue #5
<label for="new-password">New Password</label>
<input type="password" autocomplete="new-password" id="new-password" name="new-password" />
Issue #4 - the current page
aria-currentattribute to highlight the current page in a navigation, both visually and semantically.
Continue reading Issue #4
<li><a href="/about-us" aria-current="page">About us</a></li>
Issue #3 - page descriptions
You can describe web pages using
metatags. 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.
Continue reading Issue #3
<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.">
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
pictureelement in combination with the
Continue reading Issue #2
<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.">
Issue #1 - iframe accessibility
iframes should be named, if they contain meaningful content. You can define an accessible name for an
titleattribute. If it’s missing, screen readers might fall back to the value of the
srcattribute, which makes it hard or impossible for users to understand the purpose of the
Continue reading Issue #1
<iframe title="Bob Dylan - Visions Of Johanna (Live 1966) YouTube" width="560" height="315" src="https://www.youtube.com/embed/uW9_2r3raHE"></iframe>
Issue #0 - Download links
You can turn a hyperlink into a download link by adding the
downloadattribute. Instead of navigating to the document, browsers prompt users to save the file to their disc.
Continue reading Issue #0
<a href="myfile_hash5474n.pdf" download>
Annual Report (666 KB)
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.