March 18, 2013 at 15:36Useful HTML5 Snippets
- Transfer
This collection of useful snippets using HTML5 can help you improve your site.
Using an HTML5 element,
HTML5 introduced many new types for input fields, and among them
You used to use JavaScript to validate content on the frontend. Now, with the HTML5 attribute
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
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
HTML5 introduced an attribute
The attribute
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 can play video and, of course, it can also play audio files, for example, in a format
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.