Здравствуйте, уважаемые читатели XoZbloga! HTML5 в настоящее время уже достаточно активно используется при разработке веб интерфейсов и приложений. Мы все знаем, что HTML5 привнес много новых тегов, атрибутов и элементов. Некоторые из них действительно полезны для наших сайтов. Таким образом, в этой статье, я кратко расскажу о нескольких полезных и важных HTML5 тегах и атрибутах, которые вы должны знать и использовать на практике!
Структурная разметка HTML5
В HTML5 появилось несколько новых тегов, которые призваны заменить уже прижившиеся блоки div (не все конечно 🙂 ). Внешне, так сказать, ничего не изменилось, но в сущности новые теги несут в себе смысловую (семантическую) нагрузку, и строго определяют для каждого блока его место и роль:
- <header> </header> — Определяет область «шапки» сайта с логотипом, первичной навигацией и тд.;
- <footer> </footer> — Определяет «подвал», колонтитул веб страницы сайта или раздела, в котом обычно размещается дополнительная информация;
- <section> </section> — Определяет блок, который служит для группировки однотипных объектов, или для разделения текста на разделы;
- <article> </article> — Определяет автономную часть страницы, это может быть сообщение форума, журнала или газетную статью, запись в блоге и тд.;
- <nav> </nav> — Определяет область навигации, как правило список ссылок;
Форма
Новые типы input полей
HTML5 введены новые типы input полей. Они позволяют писать более семантически правильный код, адаптированный для мобильных устройствах. Например при использовании типа email происходит автоматическая валидация введенного текста, на предмет идентичности адресу электронной почты и тд.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <input type="url"> <!-- поле для ввода URL адреса --> <input type="email"> <!-- поле для ввода адреса электронной почты --> <input type="color"> <!-- поле для выбора цвета --> <input type="date"> <!-- поле для выбора даты --> <input type="datetime"> <!-- поле для выбора даты и времени (с часовым поясом) --> <input type="datetime-local"> <!-- поле для выбора даты и времени (без часового пояса) --> <input type="month"> <!-- поле для выбора месяца и года --> <input type="number"> <!-- поле для ввода числового значения --> <input type="range"> <!-- бегунок для выбора числа из диапазона --> <input type="search"> <!-- тип поискового поля --> <input type="tel"> <!-- поле для ввода номера телефона --> <input type="time"> <!-- поле для ввода времени --> <input type="week"> <!-- поле для выбора недели и года --> |
Регулярные выражения для валидации
До появления HTML5, при использовании формы на вашем сайте, вы должны были пропускать введенный текст через JavaScript для проверки. Теперь с HTML5 и атрибутом pattern, вы можете определить шаблон регулярного выражения для проверки данных.
1 2 3 4 5 6 | <!-- для проверки адресов электронной почты --> <input type="text" title="электронный адрес" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" /> <!-- для паролей --> <input type="text" title="по крайней мере восемь символов, содержащих хотя бы одну цифру, один символ нижнего и верхнего регистра" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" /> <!-- для проверки телефонного номера --> <input type="text" required pattern="(\+?\d[- .]*){7,13}" title="интернациональный, национальный или местный номер телефона"/> |
Автозаполнение с HTML5 datalist
Использование dataList элемента HTML5, позволяет создавать список данных для автозаполнения полей ввода. Супер полезно!
1 2 3 4 5 6 7 8 9 | <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> |
Автофокус полей формы
Атрибут autofocus позволит вам установить фокус на любой элемент формы (в том числе кнопку).
1 | <input type="text" autofocus="autofocus" /> |
Замещающий текст поля
Это тот самый (серенький) текст который находится к примеру в поле поиска и призывает ввести искомое слово и нажать Enter. В HTML5 замещающий текст реализуется вот-так:
1 | <input type="search" placeholder="Поиск на сайте" /> |
Скрытые элементы с помощью HTML5
В HTML5 введен атрибут hidden, который позволяет скрыть определенный элемент, на подобии того как это применяется в CSS с использованием dispaly: none
1 | <p hidden>Здесь находится текст, который скрыт с помощью HTML5!</p> |
HTML5 prefetching — предварительная загрузка
С помощью этого механизма можно заранее кэшировать указанный ресурс (картинку, страницу или файл), например сразу подгрузить стили которые будут использованы на сайте:
1 | <link rel="prefetch" href="style_dark.css"> |
HTML5 <details> и <summary> теги
C помощью этих тегов пользователь может манипулировать отображением (раскрывать и скрывать снова), какой либо дополнительной информации.
1 2 3 4 5 6 7 8 | <details> <summary>Заголовок 1</summary> <p>Pellentesque habitant morbi tristique senectus et netus ....</p> </details> <details> <summary>Заголовок 2</summary> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada ...</p> </details> |
Создаем аккордеон для сайта — https://xozblog.ru/2012/06/accordions/
Атрибут download
В HTML5 появился новый атрибут для ссылок. Теперь чтобы указать браузеру, что ссылку надо загружать, а не открывать достаточно использовать данный атрибут.
1 2 | <!-- имя в диалоге будет muzika.mp3--> <a href="sound.mp3" download="muzika">Скачать песню</a> |
Чтобы оставаться в курсе свежих статей и уроков следите за XoZblog в Facebook или добавляйте в круги на Google+. Не забывайте оставлять комментарии к статьям и урокам. Спасибо!