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.
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.
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.
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”.
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.
In May to June 2021, WebAIM surveyed preferences of screen reader users and the results show that most respondents find proper heading structures useful.
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.
<metaname="description"content="HTML, accessibility, performance, and SEO tips, tricks, and best practices."> <metaproperty="og:description"content="HTML, accessibility, performance, and SEO tips, tricks, and best practices.">
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> <sourcesrcset="pooh666.gif"media="(prefers-reduced-motion: no-preference)"> <imgsrc="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>
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.
<iframetitle="Bob Dylan - Visions Of Johanna (Live 1966) YouTube"width="560"height="315"src="https://www.youtube.com/embed/uW9_2r3raHE"></iframe>
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.