5 things you didn't know you could do with HTML

[Rss Bot 1]

Let’s face it, web development can easily become a mess. HTML, CSS and JavaScript have all evolved from humble origins over many years, and are largely equivocal in terms of how you should use them. As a result, it’s all too easy to build an unmaintainable mess. Adhering to standards and taking advantage of the latest improvements in the specifications doesn’t guarantee good code, but it can certainly help.

In any type of software development, modularity is king when it comes to building maintainable code. As a result, you’ll want to keep a close eye on Web Components. Browser support isn’t great, but if you grab yourself some polyfills, you can get ahead of the curve and start taking advantage of custom elements to structure your code right away. This style of development is the future, so it’s worth getting familiar with it now.

Keep code streamlined for clearer understanding

HTML5 itself introduced a number of new elements (and deprecated several) to help encourage good coding practices. You may have heard of semantic markup, which refers to the use of HTML5’s descriptive elements such as <article> and <figure> to indicate the type of content they contain. 

This can really help with the cleanliness of your code, as the HTML elements will immediately identify, for example, which parts represent the menu bar, your sections of content, the footer and so on.

It will also help if you take advantage of the latest JavaScript standards. JavaScript can also become messy, but it’s become much easier to work with in recent years. ES6 syntax is widely supported in browsers, and features like arrow functions and classes can make your life much easier – yet many developers are either unfamiliar with or wary of using them. 

Continuing the theme of modular development, JavaScript also now supports module loading, which can help you manage your dependencies cleanly.

01. Recognise and synthesise speech

The sound of things to come

These would once have been complex functions requiring specialised software, but they’re now being built directly into browsers. The Web Speech API has components which support text-to-speech and speech-to-text. The latter of these will either use an online service (Chrome uses the Google Cloud Speech API) or the device’s native speech recognition service. Expect to see this being used widely on mobile devices in the future.

02. Display a colour picker

Choosing the right colour

Trivial as it may sound, this is a great example of how HTML5 is simplifying common tasks which would previously have required custom coding of a fairly complex UI component. <input type="color"> will display a visual colour picker when clicked, using a colour picker native to the device. This could be particularly useful with HTML canvas. It’s widely supported with the exception of Safari on mobile.

03. Recolour the browser UI

Colour themes for browsers

This can offer a nice aesthetic touch on mobile platforms. <meta name="theme-color" content="#FFFFFF" /> is designed to instruct the browser to recolour the toolbar when viewing your site. Unfortunately, it’s a little non-standardised, so while "theme-color" works with Chrome, Firefox and Opera, on iOS you’ll need "apple-mobile-web-app-status-bar-style" (only works in fullscreen mode).

04. Different images for different screens

Specifying the image and the resolution

Hopefully you’re already implementing responsive design, in which case your images will be resizing to suit the viewport. This isn’t perfect, since you’ll be forcing the user to download the largest version of the image then downsampling it. Enter the HTML5 <picture> element, which enables you to specify different images to be displayed depending on the screen resolution the site is being viewed on.

05. Vibrate your phone

Shakin' all over

The unambiguously named Vibration API exposes a single function, vibrate(), which will do exactly what it says on devices which support it. The function takes a list describing a vibration pattern as its argument. It’ll work on Chrome, Firefox and Opera, although you’re out of luck on Edge or Safari. It’s reported that some ads are using this to attract the user’s attention, so the jury’s out on whether it’s actually a good idea.

This article originally appeared in Web Designer issue 266. Buy it here.

Related articles:

• The 10 best HTML5 template designs
• 20 HTML templates to give your web design projects a headstart
• Nail your HTML with this cheat sheet

View the full article