Новые элементы HTML5, способные поднять ваш вебсайт на новый уровень

Фрагменты кода HTML5

От автора: HTML5 – самая новая версия языка HTML, и общепризнанно самая интересная. В этой статье я выбрал новые элементы HTML5, способные поднять ваш вебсайт на новый уровень.

Поля ввода Url’а и электронной почты

HTML5 представил новые типы ввода данных, среди которых url и электронная почта email. Они дают нам возможность писать более семантически правильный код и облегчить заполнение формы на мобильных устройствах путем отображения специальных кнопок (вроде кнопок @ или .com) в зависимости от типа ввода данных.

Вот атрибут url в действии:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

А также атрибут email. Также, пожалуйста, обратите внимание на атрибут pattern, о котором я буду писать ниже.

Источник: http://davidwalsh.name/html5-email

Шаблоны regexp для валидации форм

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

Для валидации адресов электронной почты используется следующий фрагмент кода:

Этот – для надежных паролей:

А этот – для валидации телефонных номеров:

Источник: http://blog.staffannoteberg.com/2012/03/01/html5-form-validation-with-regex/

Контекстные меню в HTML5

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

На время написания этой статьи элемент contextmenu совместим только с Firefox, поэтому будем надеяться, что остальные браузеры вскоре тоже станут его применять.

Источник/Демоверсия: http://speckyboy.com/2013/02/13/quick-tip-the-html5

Видео HTML5 с альтернативой Flash’у

Одна из грандиозных новых возможностей HTML5, определенно, его способность проигрывать видео-файлы без нужды в применении Flash’а. Хотя, так как более старые браузеры несовместимы с видео HTML5, вам нужно обеспечить альтернативу Flash”у. На следующем примере видно, как вставить в HTML5 видео mp4 и ogv, применив альтернативу Flash’у для более старых браузеров.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Источник: http://camendesign.com/code/video_for_everybody

Автозаполнение в HTML5 с помощью списка данных

При помощи элемента datalist HTML5 дает возможность создавать список данных для автозаполнения поля ввода. Очень удобно!

Источник/Демоверсия: http://davidwalsh.name/datalist

Скрытые элементы и использование HTML5

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

Источник: http://html5demos.com/hidden

Элемент с автофокусом

Атрибут autofocus позволяет создать фокус на отдельном элементе. Полезно для поисковиков, таких как домашняя страница google.com.

Источник: http://davidwalsh.name/autofocus

Предварительная выборка в HTML5

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

Нижеприведенный пример показывает предварительную выборку изображения:

Источник: http://www.catswhocode.com/blog/mastering-html5-prefetching

Проигрывание аудиофайлов с помощью HTML5

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

Источник: http://www.catswhocode.com/blog/mastering-the-html5-audio-property

На этом, урок знакомящий вас с новыми элементами html5, окончен, надеюсь вам понравилось, до скорых встреч.

Автор: Jean-Baptiste Jung

Источник: http://www.catswhocode.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (3)

  1. валерий

    Видео HTML5 с альтернативой Flash’у.
    убил весь день на это «порося» и окромя самой оболочки плейера на странице моего блога
    http://spainyribalka.blogspot.com.es/p/blog-page_8282.html
    не добился ни…
    а плейер поставить всё одно нужно. так что помогайте кто может и знает. куда там и что прописывать? это я о ссылках на видео и с этими форматами видео OGV; MP4; SWF;. вродебы прописывал все поправки так как советует здесь, этот чувак http://camendesign.com/code/video_for_everybody
    - не, не и-д-ё-т!

  2. адениум

    Самые красивые Цветы автору!!! все очень классно и красиво спасибо за полезную статью

  3. Albinka

    Горячо приветствую. Пишите побольше таких статей как Новые элементы HTML5, способные поднять ваш вебсайт на новый уровень очень понравилась данная статья.

Добавить комментарий