Эта подборка полезных сниппетов, использующих HTML5, может помочь вам улучшить ваш сайт.
Используя HTML5-элемент
![](https://habrastorage.org/r/w1560/storage2/8d2/844/fd8/8d2844fd82c3f1951b77cf8a2244ccec.png)
В HTML5 появилось множество новых типов для полей ввода, и среди них
![](https://habrastorage.org/r/w1560/storage2/709/64a/c6c/70964ac6ca41c0d52b8558025ef8028e.png)
Раньше вам приходилось использовать JavaScript для валидации контента на фронтэнде. Теперь, с HTML5-атрибутом
![](https://habrastorage.org/r/w1560/storage2/5d6/d6d/2da/5d6d6d2dae273d2c20e610a345f8739d.png)
HTML5 позволяет добавлять элементы в контекстное меню (это то самое меню, которое появляется, если кликнуть правой кнопкой мыши где-нибудь на вашей странице).
На момент написания статьи, элемент
![](https://habrastorage.org/r/w1560/storage2/d01/205/ca3/d01205ca36fe9fc61920ec9ce797d11c.png)
Одна из самых больших новых возможностей HTML5, безусловно, его способность воспроизводить видео без использования Flash. Но для старых браузеров, не совместимых с HTML5, вы должны реализовать флэш-проигрыватель, как запасной вариант. В следующем примере показано, как вставить
![](https://habrastorage.org/r/w1560/storage2/065/c75/4b3/065c754b3e82707703f562bd2235b9db.png)
В HTML5 появился атрибут
![](https://habrastorage.org/r/w1560/storage2/571/76e/8b7/57176e8b7e7a824bdae76acd61e66828.png)
Аттрибут
![](https://habrastorage.org/r/w1560/storage2/59a/f8f/87a/59af8f87a3176a6dcee2060572da1603.png)
Jean-Baptiste Jung написал подробную статью о предварительной загрузке в HTML5. Если в кратце — то это простой способ уведомить браузер о том, какие ресурсы скоро могут понадобиться, чтобы он загрузил их заранее (например картинки, подгружаемые аяксом). В приведенном ниже коде реализуется предварительная загрузка изображения.
![](https://habrastorage.org/r/w1560/storage2/7f7/06f/5a7/7f706f5a7fbd6f96c7011af2883bcd11.png)
HTML5 может воспроизводить видео и, конечно, он также может воспроизводить аудиофайлы, например, в формате
![](https://habrastorage.org/r/w1560/storage2/8e5/9f7/4d4/8e59f74d4e4446b82f921ea482d93f98.png)
Автозаполнение в текстовых полях
Используя HTML5-элемент
datalist
вы можете создать текстовое поле с автозаполнением. Очень удобно!<input name="frameworks" list="frameworks" />
<datalist id="frameworks">
<option value="MooTools">
<option value="Moobile">
<option value="Dojo Toolkit">
<option value="jQuery">
<option value="YUI">
</datalist>
![](https://habrastorage.org/storage2/8d2/844/fd8/8d2844fd82c3f1951b77cf8a2244ccec.png)
Поля ввода email, url и tel
В HTML5 появилось множество новых типов для полей ввода, и среди них
email
, url
и tel
. Они позволяют писать более красивый код, делают за вас всю работу по валидации контента, а так же заставляют мобильные браузеры отображать сенсорную клавиатуру со специальными кнопками (вроде @ и .com) при заполнении этих полей.<input type="url">
<input type="email">
<input type="tel">
![](https://habrastorage.org/storage2/709/64a/c6c/70964ac6ca41c0d52b8558025ef8028e.png)
Шаблоны на соответствие полей формы регулярному выражению
Раньше вам приходилось использовать JavaScript для валидации контента на фронтэнде. Теперь, с HTML5-атрибутом
pattern
, вы можете просто указать регулярное выражение, которому должны соответствовать вводимые данные!<input type="email" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}">
<input type="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Не менее восьми символов, содержащих хотя бы одну цифру и символы из верхнего и нижнего регистра">
<input type="tel" pattern="(\+?\d[- .]*){7,13}" title="Международный, государственный или местный телефонный номер">
![](https://habrastorage.org/storage2/5d6/d6d/2da/5d6d6d2dae273d2c20e610a345f8739d.png)
Кастомное контекстное меню
HTML5 позволяет добавлять элементы в контекстное меню (это то самое меню, которое появляется, если кликнуть правой кнопкой мыши где-нибудь на вашей странице).
На момент написания статьи, элемент
ContextMenu
совместим только с Firefox, но можно надеяться, что другие браузеры добавят его поддержку в самое ближайшее время.<section contextmenu="mymenu">
<p>Да, можно кликнуть правой кнопкой прямо здесь.</p>
</section>
<menu type="context" id="mymenu">
<menuitem label="Пожалуйста, не воруйте наши изображения" icon="img/forbidden.png"></menuitem>
<menu label="Социальные сети">
<menuitem label="Поделиться на FaceBook" onclick="window.location.href = 'http://facebook.com/sharer/sharer.php?u=' + window.location.href;"> </menuitem>
</menu>
</menu>
![](https://habrastorage.org/storage2/d01/205/ca3/d01205ca36fe9fc61920ec9ce797d11c.png)
Видео на HTML5, с резервным Flash-проигрывателем.
Одна из самых больших новых возможностей HTML5, безусловно, его способность воспроизводить видео без использования Flash. Но для старых браузеров, не совместимых с HTML5, вы должны реализовать флэш-проигрыватель, как запасной вариант. В следующем примере показано, как вставить
mp4
и ogv
видео в HTML5, с резервным проигрывателем для старых браузеров.<video width="640" height="360" controls>
<source src="__VIDEO__.MP4" type="video/mp4">
<source src="__VIDEO__.OGV" type="video/ogg">
<object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
<param name="movie" value="__FLASH__.SWF">
<param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4">
<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
title="Нет возможности воспроизведения видео в вашем браузере">
</object>
</video>
![](https://habrastorage.org/storage2/065/c75/4b3/065c754b3e82707703f562bd2235b9db.png)
Скрытые элементы в HTML5
В HTML5 появился атрибут
hidden
, который можно применить к любому элементу. Его действие аналогично CSS-свойству display:none
.<p hidden>Вы не увидите этот текст</p>
![](https://habrastorage.org/storage2/571/76e/8b7/57176e8b7e7a824bdae76acd61e66828.png)
Автофокус для текстовых полей
Аттрибут
autofocus
позволяет вам установить фокус на определенный элемент при загрузке страницы. Полезно, например, для страниц поиска, авторизации или регистрации.<input autofocus="autofocus">
![](https://habrastorage.org/storage2/59a/f8f/87a/59af8f87a3176a6dcee2060572da1603.png)
Предварительная загрузка в HTML5
Jean-Baptiste Jung написал подробную статью о предварительной загрузке в HTML5. Если в кратце — то это простой способ уведомить браузер о том, какие ресурсы скоро могут понадобиться, чтобы он загрузил их заранее (например картинки, подгружаемые аяксом). В приведенном ниже коде реализуется предварительная загрузка изображения.
<link rel="prefetch" href="http://www.catswhocode.com/wp-content/uploads/my_image.png">
![](https://habrastorage.org/storage2/7f7/06f/5a7/7f706f5a7fbd6f96c7011af2883bcd11.png)
Воспроизведение аудиофайлов на HTML5
HTML5 может воспроизводить видео и, конечно, он также может воспроизводить аудиофайлы, например, в формате
mp3
. В коде ниже реализуется минималистичный но функциональный аудиоплеер.<audio id="player" src="sound.mp3"></audio>
<div>
<button onclick="document.getElementById('player').play()">Play</button>
<button onclick="document.getElementById('player').pause()">Pause</button>
<button onclick="document.getElementById('player').volume+=0.1">Volume Up</button>
<button onclick="document.getElementById('player').volume-=0.1">Volume Down</button>
</div>
![](https://habrastorage.org/storage2/8e5/9f7/4d4/8e59f74d4e4446b82f921ea482d93f98.png)