Софкейз

Начинаем говорить об HTML5. В данной статье, я расскажу вам вкратце о нем, частично о его возможностях, а также небольших и не сильно важных вкусностей. Эта запись является началом повествований о HTML5, дальше будет вкуснее.

Добрый doctype

Вы можете, не задумываясь, сходу написать doctype для XHTML1.0 либо HTML4? Если можете, тогда у вас отличная память, если нет, тогда видимо вы строку доктайпа всегда копировали! HTML5 заботиться о нас и наших нервах, поэтому было решено сделать доктайп очень коротким и запоминающемся:

<!DOCTYPE html>

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

Экономим байты

Про короткий doctype мы уже поговорили, но в HTML5 решили укоротить не только его, теперь для тегов link и script атрибут type указывать необязательно. Система сама определит тип подключаемого содержимого.

<link href="style.css" rel="stylesheet" />
<script src="jquery.js"></script>

Но на тегах link и script не останавливаемся, так же для объявление кодировки страницы тег meta тоже стал в разы короче. Раньше необходимо было указывать целых два атрибута content и http-equiv :)

<meta charset="utf-8" />

Новые элементы управления и их атрибуты

Теперь поговорим про элементы управления. Среди них появились новые элементы, но помимо этого и новые атрибуты. Вспомните, как приходилось писать на JS плагины либо использовать сторонние, для создания нестандартных элементов управления, например слайдер, он же Range в HTML5. Но давайте сначала поговорим о атрибутах:

• placeholder — добавляет в текстовое поле, текст заглушку, например как часто делают в поле для ввода текста поиска.

  <input type="text" name="search_words" placeholder="Search..." />

• autofocus — устанавливает фокус на элемент после загрузки страницы, пользователь сразу может вводить данные не используя лишние движения мышью.

  <input type="text" name="search_words" autofocus />

• required — делает элемент обязательным полем, используется для браузерского валидатора, также же можно проверять этот атрибут в свои плагинах-валидаторах.

  <input type="text" name="search_words" required />

• pattern — с помощью этого атрибута можно указывать шаблон для ввода данных, удобно для полей ввода мыла, даты и т.д.

  <input type="text" name="search_words" pattern="." />

Ну что же, а теперь можно поговорить и про новые элементы управления. Некоторые из них требуют свои атрибуты привязанные к ним например для range необходимы атрибуты min и max.

• search — обычное текстовое поле, только с небольшой кнопкой отмены (крестик) в правой части элемента, которая сбрасывает текст.

  <input type="search" />

• range — вот он, слайдер, можно использовать для выбора значения в некоторой величине, например от 50 до 290 с шагом 5. Свои атрибуты: min, max, step.

  <input type="range"  min="50" max="290" step="5" />

• number — этот элемент управления аналогичен слайдеру(range), вот только внешний вид у него другой, обычное текстовое поле с стрелками шага. Свои атрибуты: min, max, step.

  <input type="number" min="50" max="290" step="5" />

• date — позволяет пользователю выбрать дату

  <input type="date" />

• month — позволяет пользователю выбрать месяц (формат YYYY-MM)

  <input type="month" />

• week — позволяет пользователю выбрать номер недели года (формат YYYY-W[week])

  <input type="week" />

• time — тут и так все понятно, — выбор времени

  <input type="time" />

На этом про элементы управления мы остановимся, есть еще несколько (email, url, tel и т.д.). Многим из этих элементов управления, браузерам еще стоит улучшать их внешний вид или подход к юзабилити (например для date можно было бы прикрутить календарик и включать его только если у поля есть аттрибут calendar).

Еще пару слов

Помимо выше перечисленного, в HTML5 присутствует еще много новшеств, о которых мы поговорим немного позже, в частности о video, audio, canvas (2d/3d работа с графикой) и т.д. Хочу сказать, что HTML5 весьма удивителен и красив, о нем еще много чего не сказано, чего стоило сказать.