HTML5 сниппеты для поднятия вашего веб сайта на новый уровень

HTML5 является на сегодняшний день новейшей версией языка разметки. В статье собраны небольшие фрагменты кода, позволяющие поднять ваш сайт на новый уровень.

В HTML5 были добавлены новые типы данных для форм. Теперь для адресов сайтов и email можно использовать соответствующие типы полей: url и email. С их помощью можно создавать не только более правильный семантический код, но и упростить процесс проверки введенных пользователем данных.

<input type="url" value="">

Паттерны проверки введенных данных в формах
До HTML5 при обработке данных из формы можно было часто встретить ситуацию, когда данные проверялись до отправки на сервер с помощью JavaScript. Теперь у нас есть более простой способ, в новой спецификации появился атрибут pattern в котором можно задать шаблон для проверки данных.

<input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}">

<input type="email" pattern="[^ @]*@[^ @]*" value="">

HTML5 аудио и видео и никакого Flash
Одной из главных возможностей нового стандарта стал отказ от использования Flash для воспроизведения аудио и видео файлов. Несмотря на повсеместное распространение нового стандарта, старые версии не поддерживают такую возможность и для них всё равно нужно предусмотреть старый вариант работы.

<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&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
    <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
         title="No video playback capabilities, please download the video below" />
  </object>
</video>

Подсказки для полей на основе datalist
Используя новый элемент 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>

Прячем элементы
пора забыть об использовании устаревшего варианта с display:none, в HTML5 был добавлен атрибут hidden, скрывающий элемент.

<p hidden>You can't see this text</p>

Автофокус на элементе
Атрибут autofocus устанавливает фокус на любой элемент. Удобно использовать для форм поиска.

<input autofocus="autofocus">

Предварительная загрузка данных
Теперь пользователю не нужно долго ждать, когда загрузиться новая страница, с использованием нового метода предварительной загрузки, они открываются гораздо быстрее.

<link rel="prefetch" href="/uploads/images/doc/designing-for-the-empty-states.jpg">