HTML5 Tutorials

  • By
    How to Override width and height HTML attributes with CSS

    One of the HTML elements that frequently comes into collision with CSS is the img element. As we learned in Request Metrics' Fixing Cumulative Layout Shift Problems on DavidWalshBlog article, providing image dimensions within the image tag will help to improve your website's score. But...

  • By
    AutoGrow Textareas with CSS

    As the demands of the web change and developers experiment with different user experiences, the need for more native language improvements expands. Our presentation layer, CSS, has done incredibly well in improving capabilities, even if sometimes too slow. The need for native support for automatically expanding...

  • By
    Customizing HTML Form Validation

    Form validation has always been my least favorite part of web development. You need to duplicate validation on both client and server sides, handle loads of events, and worry about form element styling. To aid form validation, the HTML spec added some new form attributes...

  • By
    Legacy String Methods for Generating HTML

    I'm always really excited to see new methods on JavaScript primitives. These additions are acknowledgement that the language needs to evolve and that we're doing exciting new things. That being said, I somehow just discovered some legacy String methods that you probably shouldn't use...

  • By
    Lazy Load IFRAMEs

    We've known for a decade that lazy loading resources like JavaScript, CSS, and especially images is a massive performance win for web pages. At first we used tricks and JavaScript to do the lazy loading, but more recently native image lazy loading has debuted...

  • By
    JavaScript Picture-in-Picture API

    As a huge fan of media on the web, I'm always excited about enhancements to how we can control our media. Maybe I get excited about simple things like the <video> tag and its associated elements and attributes because media on the web started with custom...

  • By
    Image Lazy Loading

    Lazy loading images is a practice that's been popular for a decade and for good reason: images are usually the heaviest downloads on a given webpage and avoiding unloading images that are never seen saves the user bandwidth. There are plugins for lazy loading images in...

  • By
    Create Custom Video Player Controls with CanJS

    In this guide, you will learn how to create a custom video player using the <video> element and CanJS. The custom video player will: Have custom play and pause buttons. Show the current time and duration of the video. Have a <input type="range"> slider that can adjust the position...

  • By
    Awesome File Compression and Delivery with KeyCDN and Brotli

    I've seen the KeyCDN name around for years, mostly as a free content delivery network (CDN) for many open source JavaScript frameworks, and based on that alone I've always thought very well of them.  KeyCDN recently asked me to check out one of...

  • By
    Detect Supported Audio Formats with JavaScript

    As streaming becomes our main entertainment source and vendors fight to create the best video format, it's going to be more and more important that we detect device and browser video support before posting videos on our websites.  We think less about audio but the same...