Useful HTML5 Snippets

Original author: Jean-Baptiste Jung
  • Transfer
This collection of useful snippets using HTML5 can help you improve your site.

Autocomplete in text fields

Using an HTML5 element, datalistyou can create a text field with autocomplete. Very comfortably!

Email, url and tel input fields

HTML5 introduced many new types for input fields, and among them email, urland tel. They allow you to write more beautiful code, do all the work for you to validate content for you, and also make mobile browsers display a touch keyboard with special buttons (like @ and .com) when filling out these fields.

Templates for matching form fields to regular expression

You used to use JavaScript to validate content on the frontend. Now, with the HTML5 attribute pattern, you can simply specify the regular expression that the input should match!

Custom context menu

HTML5 allows you to add elements to the context menu (this is the very menu that appears when you right-click somewhere on your page).
At the time of writing, the element is ContextMenuonly compatible with Firefox, but it is hoped that other browsers will add support for it in the near future.

Да, можно кликнуть правой кнопкой прямо здесь.

HTML5 video with backup Flash player.

One of the biggest new features of HTML5, of course, is its ability to play videos without using Flash. But for older browsers that are not compatible with HTML5, you must implement a flash player as a fallback. The following example shows how to insert mp4and ogvvideo in the HTML5, with a reserve player for older browsers.

Hidden Elements in HTML5

HTML5 introduced an attribute hiddenthat can be applied to any element. Its action is similar to the CSS property display:none.

Autofocus for text fields

The attribute autofocusallows you to set focus on a specific element when loading a page. Useful, for example, for search, authorization, or registration pages.

HTML5 preload

Jean-Baptiste Jung wrote a detailed article on HTML5 preloading. In short, this is an easy way to notify the browser about what resources may be needed soon, so that it downloads them in advance (for example, pictures uploaded by Ajax). The code below implements image preloading.

HTML5 audio playback

HTML5 can play video and, of course, it can also play audio files, for example, in a format mp3. The code below implements a minimalistic but functional audio player.

Also popular now: