---
title: Основные отличия HTML5
date: 2009-09-11T10:00
tags: [backend]
---
Недавно вышел HTML5, и хотя я надеялся что де-факто стандартом станет XHTML2, видимо этому не судьба. Следование веб-стандартам впринципе дело самодисциплины — кто-то пишет как умеет, а для кого-то это средство подчеркнуть свой проффесионализм.
### Тэги
Основным нововведением стало внесение давно ожидаемых новых элементов, благодаря которым содержание выглядит чуть более семантичным, хотя только разве что в блогах. Хитрые дизайнерские сайты с плавающими блоками видимо лучше делать на более общих div'ах
| | |
|---|---|
|Структурные тэги|Тэги содержания|
|- header — понятное дело, шапка с логотипом, логином, навигацией..- nav — навигация.. как меню, так и «хлебные крошки»- footer — подвал с копирайтами, контактами- article — очевидно влияние блогосферы и rss- section — подраздел документа- aside — боковая панель (видимо с коментариями, самыми популярными статьями, тэгами и тп)|- video и audio — как альтернатива flash-плеерам. Врядли заменит флеш из-за проблем с кодеками и отсутствии поддержки уже созданных .flv видео. Мало поддерживается пока браузерами.- progress — полоса завершённости процесса. Полезно при заполнении форм- time — полезно для указания точного времени элемента- details — просто дополнительная информация- datalist — нечто типа автозаполнения, но с прописанными вариантами|
---
### Формы
Что особенно радует что работа форм улучшена новыми типами input-элементов.
- date, datetime, time, month, week
- email, url
- range, number
- color
Их давно пора было вводить в стандарт, потому что число компонентов на js+dom которые делают эту работу растут постоянно (календарики для выбора даты, бегунки), более того - пишутся даже специальные надстройки типа [jquery ui](http://jqueryui.com/). Кроме новых типов, введены интересные параметры, в частности [параметр](http://dev.w3.org/html5/markup/input.file.html) _[multiple](http://dev.w3.org/html5/markup/input.file.html)_ для массовой загрузки файлов. И опять прийдётся распрощаться с [uploadify](http://www.uploadify.com/) и [swfupload](http://swfupload.org/). Впрочем не обязательно.
### Перетащи в браузер
С давних пор я не понимал почему нельзя было сделать удобное перетаскивание чего-то с рабочего стола _внутрь_ браузера. Точней перетащить то можно, но браузер как правило не поймёт что это за файлы или текст вы в него суёте. HTML5 предполагает распознавание таких случаев с помощью javascript _drop_-событий, при которых к содержанию получается доступ с помощью e.dataTransfer.getData() метода. Опять же - досвидания java аплеты и google gears.
### Данные на стороне клиента
Ещё одной отличительной особенностью стала возможность кэшировать чистые данные на стороне клиента без необходимости постоянно пересылать их с каждым обновлением страницы (т.е. явно не конкурент json-объектам), а объём достигает 5-10 мб (уже не конкурент cookies).
[Web storage](http://dev.w3.org/html5/webstorage/) очень полезная особенно для мобильных устройств. Без HTML5 на это способна лишь Google gears.
### А сейчас как быть?
HTML5 всё ещё в режиме черновика, многие браузерные движки лишь пробуют внедрять новые возможности в бета-версиях (особенно заметен Presto). Надо дважды подумать перед тем как перепрыгивать со скачущей лошади на ещё теоретический мотоцикл, особенно если вас заботит совместимость с IE. Для него даже надо прописывать существование тэгов
`document.createElement('header'); document.createElement('footer'); document.createElement('section'); document.createElement('aside'); document.createElement('nav'); document.createElement('article');`
См. также
- [W3C - разница между html4 и 5](http://www.w3.org/TR/2009/WD-html5-diff-20090825/)
- [](http://www.w3.org/TR/2009/WD-html5-diff-20090825/)[Web Forms](http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html)
- [On HTML5 Drag and Drop](http://www.alertdebugging.com/2009/08/16/on-html-5-drag-and-drop/)
## Related
- [Alter sequence](/ru/blog/tech/backend/DB/postgres/alter-sequence/)
- [Amazon S3 direct upload](/ru/blog/tech/backend/amazon-s3-direct-upload/)
- [CUDA](/ru/blog/tech/backend/gpu/cuda/)