Многие наверняка знакомы или хотя бы слышали о HTML5. О нём говорят как о чём-то новом, современном и очень крутом. Какое-то время он мелькал в интернете везде, а веб-мастеры в свою очередь предлагали свои услуги с использованием HTML5 очень охотно, и, кстати, весьма успешно.
Так что же в нём особенного?
Для начала, хотелось бы отметить что HTML5 — это новая открытая платформа, предназначенная для создания веб-приложений, в которых используется аудиофайлы, видеофайлы, различная графика, анимация и др. элементы.
Многие говорят, что этот стандарт ещё слишком сырой — слишком много браузеров не способны поддерживать его и смысл тогда его использовать? С этим нельзя поспорить, но стоит сделать поправку — всё больше браузеров начинают поддерживать этот стандарт по ряду причин, главная из которых — борьба с конкурентами.
Даже если не ждать с моря погоды, есть ещё один хороший аргумент: HTML5 это не что-то неделимое, а скорей сборная модель.
Что это значит? В этой платформе, как известно, собраны множество тегов, которые взаимодействуют друг с другом в нашем HTML-документе. А HTML5 тем и хвалится — своими способностями связать эти элементы воедино и упорядочить их работу.
HTML5 не только следит за взаимодействием своих тегов, но и взаимодействия всех наших JS скриптах, видеофайлах в теге <video> с помощью объектной модели документа — DOM.
И если сказать что браузер не поддерживает HTML5 — это будет неверное утверждение; скорей он не поддерживает некоторые его элементы, а это, согласитесь, не существенная потеря. Со временем и они будут поддерживаться и активно использоваться на сайтах.
Что нового в HTML5
Первое, что можно заметить — это чистота кода. Пожалуй, это очень приятный бонус как для веб-разработчика, так и для браузера.
Очень важный плюс состоит в том, что вам ничего не стоит перейти на HTML5, даже если вы так полюбили HTML4: всё потому что в новом стандарте ничего не было вырезано — вам не придется переучиваться. Достаточно просто начать и по желанию использовать новые элементы.
Сейчас мы рассмотрим основные нововведения в HTML5. Подробнее рассмотрим каждый пункт в отдельных статьях, так как они требуют много места и отдельного времени для понимания.
Новинка в HTML5:
- Великолепные формы. Дополнительные возможности к функционалу и внешнему виду форм — вот что нового подготовил для нас новый HTML. Были добавлены множество новых значений, которые значительно упрощают работу с формой. Многие из них способны заменить собой некоторые скрипты и сделать код чище, не теряя в валидности. Среди прочих можно увидеть такие сочные новинки как: ползунок для прокрутки, выбор даты — неплохо, правда? Появился подсказывающий текст, позволяющий создать вполне уютный интерфейс формы. Он активируется во время активации формы и исчезает по истечению времени, либо по клику на него.Проблема формы email-почты частенько была проблемой у устаревших браузеров — они просто отказывались работать с ней. Теперь же этот приятный элемент доступен для всех, а если ваш браузер неактуален — будет выведена простая текстовая форма, взамен формы с типом email.
Таким образом, мы ничего не теряем в использовании и получаем взамен очень удобную фичу.
- Танк мультимедии — canvas. Canvas — это новый тег в HTML5. Его возможности многогранны. Пожалуй, это прорыв и главный огромный жирный плюс для этого стандарта. Этот тег позволяет делать такие крутые элементы как:
- рисование
- проигрывание видео
- построение оффлайновых веб-приложения
- создание и работа с геолокацией
- создание локального хранилища
- и даже создание игр!
Несомненно — вы поражены, если не знали об этих возможностях до сих пор!
Все эти возможности до HTML5 можно было реализовать только за счёт громоздкого Flash, Gears или же JavaScript. Теперь это доступно без применения этих плагинов и скриптов! Только чистый html без сложностей и нагрузки на сайте.
Самое интересное, что всё это УЖЕ доступно даже на IE9! Более того, уже идёт разговор о решении проблемы поддержки Canvas устаревшими браузерами.
Я обязательно сделаю ещё один пост про создание игр на HTML5 — это будет очень круто, я уверен! Можете посмотреть пример игры по этой ссылке. Впечатляет, не правда ли?
- Автофокус. Наверняка все мы замечали поисковую форму Google, при заходе на неё. Как только мы зашли на страницу — форма поиска уже активирована и готова к набору поискового запроса.Раньше этот эффект создавался только с помощью JavaScript. В HTML5 это стало гораздо проще и надёжнее: достаточно указать к нужной форме данный атрибут:
1<input type="text" <strong>autofocus</strong>>
После этого фокус будет активен для этой формы. Если по ошибке было введено 2 атрибута — он не будет работать.
- Микроданные. Этот атрибут позволит добавить немного семантики на нашу страницу. В нём можно указать, к примеру, что какая-либо из картинок имеет доступ под специальной лицензией. Это положительно влияет на сайт, если микроданные поддерживаются. В противном случае — этот атрибут будет проигнорирован.
- История с API. По большей части это способ манипулировать историей браузера. HTML5 принес нам новый способ добавления записей в историю браузера, а также реакцию на удаление этих записей из стека, при возвращении назад (кнопка браузера «назад»). Таким образом, URL может выполнять свою работу как уникальный идентификатор для текущего ресурса, даже в нагруженных скриптами приложениях, которые не всегда полностью обновляют страницу.
Новые теги в HTML5
-
1<acticle>...</article>
<article> используется для контента типа новость, статья, запись блога, форум и т.п. -
1<aside>...<aside>
<aside> полезен для размещения рубрик, ссылок на архив, меток и прочего. Обычно находится сбоку от контента и имеет привычное нам имя «сайдбар» -
1<audio>...</audio>
<audio> предназначен для воспроизведения аудио-файлов на странице.
Имеет атрибуты:-
1<audio autoplay="autoplay">...</audio>
Воспроизводит аудио-файл с этим атрибутом сразу после загрузки страницы. -
1<audio controls="controls">...</audio>
Добавляет панель управления к аудио-файлу. Вид и функции панели задаются исходя из браузера. Может содержать: воспроизведение, паузу, перемотку, уровень громкости и другие элементы навигации. -
1<audio loop="loop">...</audio>
Зацикливает воспроизведение аудиозаписи. -
1<audio muted="muted">...</audio>
Используется, чтобы выключить звук воспроизводимой аудиозаписи. -
1<audio preload="none | metadata | auto">...</audio>
Позволяет загрузить аудио-файл вместе с страницей и последующим воспроизведением. При конфликте с autoplay, игнорируется. -
1<audio src="URL">...</audio>
Позволяет задать путь к аудиозаписи.
-
-
1<command>
<command> позволяет задать команду к кнопке. Имеет вид переключателя.
Может иметь атрибуты:-
1<command checked>
Позволяет активировать команду. -
1<command disabled>
Задаёт — доступна команда или нет. -
1<command icon="*address*">
Позволяет задать адрес картинки как команду. -
1<command label="*command*">
Этот атрибут нужен для указания названия команды -
1<command radiogroup="*name*">
Позволяет задать имя группы переключателей -
1<command type="*name*">
Определяет тип команды. Возможны значения: checkbox, command, radio. По умолчанию установлено command.
-
-
12345<input list="*id*"><datalist id="*id*"><option value="*text*"><option value="*text*"></datalist>
С помощью тега <datalist> создаётся целый список параметров, которые связаны с текстовым полем по ID. Идентификатор нашего datalist должен быть таким же, как и у параметра list. -
1<details>...</details>
Используется для хранения информации, которую можно скрыть или показать по требованию пользователя.Имеет один параметр, который определяет то или иное действие:
-
1<details open="hey">Информация</details>
-
-
1<dialog>...</dialog>
Тег <dialog> был создан для создания всплывающих и модальных окон . Поддерживается в Chrome, Safari и Opera. -
1<embed>...</embed>
<embed> используется для загрузки и отображения видео-файлов, флэш—роликов и прочих файлов, которые браузер не может понять. Зачастую сопровождается установкой какого-либо вспомогательного плагина в браузер.Может иметь атрибуты:
-
1<embed align="">...</embed>
Определяет способ выравнивания на странице. -
1<embed width="" height="">...</embed>
Задаёт ширину и высоту блока, соответственно. -
1<embed hidden="">...</embed>
Позволяет скрыть объект. -
1<embed hspace="">...</embed>
Позволяет задать горизонтальный отступ от блока. -
1<embed pluginspage="">...</embed>
Адрес, где можно скачать плагин. -
1<embed src="">...</embed>
Позволяет задать путь к файлу. -
1<embed type="">...</embed>
Задаёт тип объекта. -
1<embed vspace="">...</embed>
Позволяет задать вертикальный отступ от блока.
-
-
1<figure>...</figure>
<figure> позволяет группировать самые разные объекты. -
1<header>...</header>
<header> применяется для создания «шапки» сайта. Обычно там находится заголовок. -
1<hgroup>...</hgroup>
<hgroup> используется для группировки всех заголовков страницы. Внутри располагаются теги заголовков <h1> — <h6>. -
1<mark>...</mark>
<mark> помечает текст как важный. Никак не отличается визуально от остального текста. -
1<nav>...</nav>
Используется для группировки ссылок и задаёт навигацию по сайту. Возможно несколько тегов <nav>. -
1<section>...</section>
<section> обозначает раздел документа. Используется для таких блоков, как новости, контакты. Часто содержит заголовок. -
1<time>...</time>
<time> используется для определения таких параметров, как дата и время.Имеет два параметра:
-
1<time datatime="*дата, время*">...</time>
Задаёт параметры даты и времени. -
1<time pubdate>...</time>
Больше не является валидным.
-
-
1<video>...</video>
<video> предназначен для воспроизведения видео-файлов на странице.Имеет точно такие же атрибуты, как и тег <audio>.
Как включить HTML5
Подключить HTML5 очень просто — и это только сопутствует переходу на него. Нам потребуется простая одна строчка в самом начале нашего документа:
|
1 2 3 4 5 |
<strong><!DOCTYPE html></strong> //вот она <html> ... </html> |
Вот и всё! Поздравляю с переходом на HTML5 — теперь можно воспользоваться всеми преимуществами стандарта.
Хотелось бы отметить и минус HTML5 — это огромные файлы, которые создаёт сайт на нём и хранит долгое время. В них может встречаться такие данные как пароли и логины — это может быть уязвимостью вашего ресурса. Но и эта проблема, я уверен, решится в ближайшее время.
Рассмотрев все преимущества нового стандарта HTML5 — думаю, каждый захотел «обновиться» и пользоваться этими новинками, для улучшения своего проекта. И это правильно — всегда нужно развиваться, а не стоять на месте.
Дорога появляется под стопами идущего
