10 HTML5 Hacks Every Web Developer Should Know

HTML5 is an attractive language to pick up as a beginner or even a non-coder. Because let’s face it, whenever you interact with a website, you are dealing with HTML.

Knowing how to navigate your way around the code can save you a lot of time (and even money) when it comes to doing small tweaks or optimizing basic web elements.

So, if you have some time to spare, here’s a list of 10 useful HTML hacks that you can master in a few hours.

1. Use the FileSystem API to Cache Media Resources Locally

Originally, HTML5 FileSystem API was conceived as an alternative to AppCache to enable dynamic caching of assets. But did you know that you can also use it to support interactions with files stored on the user’s local device?

For instance, you can add develop the following functionality:

• Persistent uploader: copy files into a local sandbox and upload them in parts. Uploads can be restarted after connection interruptions, browser crashes, etc.
• Enable local cache for media-heavy apps such as video games, music players, photo editors, etc.
• Create offline mode for viewing content e.g. offline video, email attachments, texts, etc.

Note: FileSystem API is supported by Chrome only.

Here are additional resources and code tutorials if you want to experiment with offline storage functionality:

• Using the HTML5 FileSystem API by Eric Bidelman.
• Managing HTML5 Offline Storage.

2. Automate Form Validation With the "Pattern" Attribute

Form validation is essential for website security and smooth user experience. So, let’s make it easier for users to type the correct values into any form on your website.

In HTML5, we have several new input types that already come packaged with predefined validation:

• ‘email’
• ‘url’
• ‘tel’

But, most problems happen when you need users to provide some data that’s not specified by standard inputs (e.g. a username containing special characters). That’s when the "pattern" attribute comes in handy.

Pattern lets you define custom rules for validating the form input using Regular Expressions (RegEx). RegEx specifies which expressions the <input> element’s value will be checked against.

Here’s an example of how you can add a new rule. For instance, you want to specify that acceptable passwords should be no more than 15 characters and only contain lowercase letters:

<form action="/action_page.php">

Password: <input type="password" name="pw" pattern="[a-z].{1,15,}">

<input type="submit">

</form>

For extra clarity, you can also add a custom message to the user explaining why their password didn’t match. In that case, just add another quick line to customize the pop-up message:

<form action="/action_page.php">

Password: <input type="password" name="pw" pattern="[a-z].{1,15,}" title="One to fifteen characters, lowercase only".>>

<input type="submit">

</form>

3. Use Emmet to Write Your HTML5 Codes

Emmet is a handy text editor plug-in that can streamline your HTML/CSS coding workflows. The tool uses CSS-like selector syntax that lets you create all sorts of abbreviations for standard HTML code elements.

Here’s an example. If you type:

div#header>h1.logo>a{website}

You’ll receive:

<div id="header">

<h1 class="logo"><a href="">website</a></h1>

</div>

You can use existing combos from the cheat sheet or create custom ones for any HTML tags and press Tab or Ctrl+E to add them to your text editor.

4. Use the HTML5 <Video> Tag for More Optimized Video Delivery

The video tag enables you to seamlessly embed a media player that supports video playback into your web page.

You can choose to:

• Enable a live stream from a webcam using getUserMedia() or WebRTC.
• Play a locally hosted video using the src attribute: <video src="file.avi" />.

Additionally, you’ll have to specify ‘controls’ for your video (such as play, pause, volume), otherwise the user will have none. The sample code for this is:

<video width="768" height="432" autoplay>

<source src="video.mp4" type="video/mp4">

</video>

To improve the viewing experience even further, you can experiment with using the following attributes as well:

• disablePictureInPicture: prohibits the browser from displaying a Picture-in-Picture context menu or requesting Picture-in-Picture automatically.
• loop: prompts the browser to automatically replay the video once it reaches the end.
• muted: automatically silences the audio in the video.
• poster: lets you display a custom image as the video thumbnail. Otherwise, the browser will show the first frame of the video.
• preload: indicates to the browser which parameters will lead to the best user experience. You can set this one to none (no preload requirements); metadata: only video metadata will be fetched; auto: prompts to download the entire video even if the user doesn’t expect to view it. Note: The autoplay attribute has precedence over this one.

You can find more handy tags for multimedia files in this HTML cheatsheet.

5. Use <Picture> Element to Improve Image Styling

The <picture> tag helps optimize the way your images are displayed.

Most commonly it’s used for:

• Styling: indicate how media should be displayed under conditions (e.g. load an alternative image version for smaller displays). This is key to creating responsive designs.
• Speed: specify which image size should be loaded based on the user’s display.
• Browser support: provide different image formats for normal display in all types of browsers.

Example:

<picture>

<source media="(min-width: 846px)" srcset="img_1.jpg">

<source media="(min-width: 300 px)" srcset="img_2.jpg">

<img src="img_3.jpg" alt="logo">
</picture>

The <picture> tag includes two additional sub-elements:

• <source>: specifies media resources for media elements.
• <img>: defines an image.

To enable additional styling options, add the following attributes to the <source> element:

• srcset (required): use it to define the destination URL of the image.
• media (similar to a media query): a condition the user agent evaluates for every <source> element.

• sizes: specifies the width descriptor.
• type: provides the MIME type definition.

The <img> element helps ensure proper image display in browsers that do not support the <picture> element.

6. Prioritize Above-the-Fold Assets and Content to Load First

Page speed is super-important if you want your website to rank well in search results and deliver great UX.

However, getting a top score from Google Page Insights isn’t that easy. While the tool does highlight what exactly you should fix on your website, there are no clear guidelines for those who are coding their website from scratch.

The official Google suggestions for above-the-fold design are somewhat vague:

• Structure your HTML to load the critical, above-the-fold content first.
• Reduce the amount of data used by your resources.

So let’s break those down into more actionable steps:

• Make sure your CSS is inlined.
• Minimize, combine, and eliminate unnecessary external CSS files.
• Automatically minimize render-blocking CSS.
• Use CSS media types and media queries to specify certain CSS resources as non-render blocking.
• Place the <content> section before <sidebar>.
• Defer loading JavaScript.
• Generate embeddable font data to speed up fonts loading and opt for web-safe fonts.

Then, run the check again and see whether anything else needs fixing.

7. Speed Up Your Website by Setting Up Gzip Compression

Dispatching a .zip file to the browser instead of index.html file can save you heaps of bandwidth and download time.

Source: Better Explained.

To setup .gzip compression, you’ll need to locate a htaccess file on your web host/server and modify it with the following code:

<ifModule mod_gzip.c>

mod_gzip_on Yes

mod_gzip_dechunk Yes

mod_gzip_item_include file .(html?|txt|css|js|php|pl)$

mod_gzip_item_include handler ^cgi-script$

mod_gzip_item_include mime ^text/.*

mod_gzip_item_include mime ^application/x-javascript.*

mod_gzip_item_exclude mime ^image/.*

mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

</ifModule>

If this didn’t work, try the following tutorials for your type of web server:

• Apache.
• Litespeed.
• NGINX.

8. Take Advantage of Microdata for SEO

Microdata lets you codify extra context into your web pages. Web crawlers can then render microdata from your page and provide a better browsing experience for users, as well as indexing your website with higher accuracy and ranking it accordingly in search results.

In a nutshell, microdata consists of a group (called items) of name-value pairs (called properties).

• Items have item types, a global identifier, and a list of properties. To create a new item, use the itemscope attribute.
• Property has one or more values. To assign a property to an item, use the itemprop attribute.

You can learn more about encoding microdata from this tutorial.

9. Consider Using HTML5 Local Storage Instead of Cookies

Local storage (also known as DOM storage) enables you to store user data locally, rather than sending it over the network with every HTTP request. It saves you bandwidth and increases your data storage capabilities. Seems good, right?

But there’s one important caveat: local storage is client-side only, whereas cookies can be both server-side and client-side. Thus, if your website uses cookies server-side to customize content based on known user preferences, migrating to local storage may require significant architectural changes.

However, in simpler cases (e.g. if you use cookies to store some basic settings), local storage may be a great replacement, especially in regions with a poor network connection. Also, bear in mind that local storage may not be ideal for highly sensitive data (e.g. financial information), and it’s always recommended to additionally encrypt all the data you store locally.

Jenkov has a detailed walkthrough for setting up and configuring HTML5 local storage.

10. Use the "Reversed" Attribute to Write a Descending List of Numbered Items

Let’s round up this post with one very simple trick: using the <reversed> attribute you can add descending lists, instead of ascending ones.

Here’s a sample code snippet:

<ol reversed>

<li>Ready</li>

<li>Set</li>

<li>Go!</li>

</ol>

This one may not sound groundbreaking, but it can come in handy when you want to add a bit of funkier styling to your page.

Wrap Up

Now you have it – 10 new HTML5 tips and tricks that should help you build a faster, more user-friendly and attractive website. Just don’t forget to back up your website before you begin your experiments!

Further Reading

• Creating HTML Layouts That Meet Web Accessibility Standards.
• Tutorial on Creating Cross-Browser Compatible HTML and CSS.