Блог

Разработка и создание сайтов на HTML5

Ещё недавно разговоры о новой версии HTML5 приравнивались к профессиональным шуткам и байкам. Но сегодня о внедрении нового стандарта говорят уже всерьёз.

Благодаря работе группы WHATWG (Web Hypertext Application Technology Working Group) и W3C (World Wide Web Consortium), организации, наблюдающей за стандартами протоколов и рекомендаций в Сети, глобальная модернизация одного из главных языков разметки Интернета стала возможна и сейчас идёт полным ходом. Уже в 2007 году некоторые браузеры стали поддерживать фрагменты предварительных версий спецификаций, а в 2008 году материалы по HTML 5 были опубликованы как черновой проект стандарта.

Главная идея, которую пытаются осуществить создатели пятой версии, заключается в том, чтобы создать жизнеспособный язык разметки, который будет востребован на практике и сможет приносить пользу как специалистам по разработке сайта, так и их посетителям. Причём приоритет здесь отдаётся простым пользователям, и только потом в этом списке стоят интересы создателей сайтов и разработчиков браузеров. Добавляя множество HTML-элементов, HTML 5 ставит своей целью дать при разработке сайтов лучший и более точный способ описания данных.

Совместимость с предыдущими версиями

Большое внимание в новом стандарте уделено обратной совместимости: HTML 5 должен стать преемником как HTML 4.01, так и XHTML 1.0. Конечно же, стандарт не полностью совместим с более старыми версиями, но в целом все разногласия учтены, и переход от одной версии к другой не должен вызвать больших затруднений (HTML 5 не уходит в радикальный отрыв подобно другому детищу W3C - XHTML 2.0).

Существует две вариации HTML5. Одна из них — разновидность XHTML, другая — модификация HTML. Понятное дело, что в первой - новый язык целиком согласован с XML 1.0, благодаря чему перед разработчиками открываются все возможности и преимущества XML и смежных технологий. Во второй вариации HTML 5 узаконил игнорирование браузерами замысловатых правил SGML, формальная совместимость с которыми давно являлась явно лишним наследием прошлого. Браузеры уже лет пятнадцать используют простые алгоритмы, где идёт распознавание конкретных элементов и атрибутов. Таким образом, в зависимости от своих предпочтений, специалисты по созданию сайтов, теперь смогут сделать выбор в пользу любой из вариаций HTML5.

Продолжая разговор о преемственности и приоритетном значении пользователя, следует немного подробнее остановится на работе нового языка с браузерами. В отличие от предыдущих стандартов, которые были предназначены главным образом для разработчиков, HTML 5 строго и подробно прописывает поведение браузеров. Теперь от браузеров требуется не только обработка грамотного кода, но и исправление возможных недочётов, коррекция ошибок. Например, новый стандарт запрещает авторам кода применять элементы nobr или marquee, но описывает, что браузер должен делать, если они всё-таки будут найдены в документе. Всё это соответствует одной из главных задач, ставящихся перед HTML 5, а именно, максимальной совместимости с уже существующим наполнением Интернета. Ни в коем случае от нововведений не должны пострадать те миллионы сайтов, что действуют в Мировой паутине уже достаточно давно.

Ещё одной отличительной чертой разработки сайтов на HTML 5 является то, что новый стандарт описывает документ HTML в терминах объектной модели (DOM), то есть перед тем как выводить страницу сайта на Ваш монитор, браузер формирует древовидную структуру её элементов и других объектов. Стандарты-предшественники как-то мало упоминали об этом этапе, а новый язык наоборот опирается во многом именно на такое представление документа. Это значит, что в спецификацию теперь могут быть включены объекты, свойства и методы DOM, которые всегда находили себе широкое применение, но никогда стандартизированы не были: window.open(), alert(), prompt(), document.links, document.images, innerHTML, contentEditable и так далее.

Нашлось место в новом стандарте HTML5 и элементу embed, против которого в прошлые годы так жёстко выступали борцы за стандарты.

Однако это вовсе не значит, HTML 5 просто-напросто как губка впитал всё. Некоторые элементы были удалены из стандарта: acronym, applet, basefont, big, center, dir, font, isindex, s, strike, tt, u. Также были убраны фреймы (frame, frameset, noframes), но элемент iframe всё-таки остался. Нет больше и атрибутов, которыми мало кто пользовался (accesskey, longdesc, border, valign, cellpadding, cellspacing и др.).

Некоторые элементы в HTML5 подверглись переосмыслению: пример — i и b теперь обозначают разные формы смыслового выделения, а не курсив и полужирный шрифт; hr отвечает за разрыв в структуре документа. А вот элемент menu действительно стал создавать настоящие меню. Address наоборот был ущемлён в правах: его новое предназначение ограничивается только контактной информацией в узком контексте.

HTML5: новшества

Но нового в HTML5 появилось гораздо больше. Так, для статей, блогов, документации и подобных материалов использоваться будут article и section, а также новая система заголовков и рубрикации. «Шапка» и «подвал», панель навигации и боковая панель соответственно обозначаются элементами header, footer, nav и aside. Раньше их функции выполняли div-элементы (например, div id=”header”). Но браузер обрабатывает все внутри div-элементов одинаково, поскольку не видит разницы между блоками, а классы и идентификаторы различны от сайта к сайту. Благодаря новому стандарту, например, внешняя система, такая как поисковый бот, может более точно определять, какой контент на странице более важен. Эти системы могут пропускать обработку элементов nav и footer, потому что такие элементы, скорее всего, не содержат важной информации. Следовательно, правильно оформленный документ HTML5 позволит поисковым системам лучше понимать его содержание. Пользователи смогут перейти напрямую к элементу, если захотят читать главное содержимое, или перейти напрямую к элементу, если захотят перейти на другую страницу.

Главными же новшествами HTML5 являются, пожалуй, предназначенные для мультимедийного содержания элементы audio и video. Они работают следующим образом: внедряют в страницу соответствующий ресурс и обеспечивают стандартные элементы управления, такие как кнопки воспроизведения, паузы и остановки, а также проматывание и регулятор уровня громкости. В тех браузерах, где эти элементы не поддерживаются, срабатывает принцип обратной совместимости: HTML 5 позволяет дополнить элементы audio и video альтернативным содержанием — например, роликом Flash, с помощью которого сейчас внедряется большинство аудио- и видеозаписей. Таким образом, в новейших браузерах сработают элементы audio и video, а в остальных – альтернативное содержание, то есть ролик Flash. Так что все останутся довольны. Продолжая тему совместимости нельзя не отметить, что все новые возможности, которые открываются в HTML 5, не создают особых проблем в тех браузерах, где они не поддерживаются, так почти все они могут быть реализованы c помощью альтернативного содержания, CSS, JavaScript и других технологий.

Кроме video и audio, новый стандарт предусматривает также очень интересный элемент canvas, который предоставляет область для рисования изображений «на лету» посредством JavaScript. Ни для кого не секрет, что большинство людей воспринимают информацию быстрее и эффективнее через визуальное отображение. Именно после того, как Firefox и Opera решили поддерживать этот элемент, и начался массовый интерес к HTML 5.

Огромные изменения в HTML5 претерпели формы. Многих разработчиков давно не устраивают примитивные возможности для их создания, которые были предусмотрены в прежних версиях HTML. Поэтому они были вынуждены сами разрабатывать собственные расширения интерфейса, средства проверки и т.п. В HTML 5 эта самодеятельность урегулирована стандартными элементами, атрибутами и интерфейсами DOM.

К уже имевшимся добавились новые поля для ввода определённых данных. Например, input type="number" — это поле для ввода числа, а input type="range" — ползунок для регулирования громкости или чего-то похожего. Атрибуты min, max и step определяют диапазон и точность допустимых значений в поле. Элемент datalist обеспечивает поле со списком, а элемент output — область для вывода динамически генерируемых результатов. Атрибут required для элемента управления обозначает, что этот элемент обязателен для заполнения, без него форма не может быть отправлена. Атрибут autofocus позволяет установить фокус ввода в данный элемент. Метод checkValidity() проверяет правильность заполнения полей. Все эти возможности ранее осуществлялись кое-как при помощи кустарных сценариев JavaScript.

Конечно же, это не все новшества в HTML5. Их настолько много, что только одни нововведения в формах заняли бы место десятков таких статей, как эта. А ведь формами возможности взаимодействия с пользователям не ограничиваются. В стандарте предлагается элемент datagrid для организации динамических структур данных, элемент command для вызова пользовательских команд, элемент progress — индикатор хода выполнения операции, а также средства DOM для редактирования содержания прямо на веб-странице, перетаскивания, выделения, работы с буфером обмена и многого другого.

Всё это вполне отвечает тенденциям развития Интернет. Сайты-публикации превращаются в полноценные приложения, которые требуют функциональности и удобства. Поэтому новый HTML5 не просто язык для публикаций, а язык описания приложений. Пока что со сроками принятия стандарта HTML5 ничего не ясно, они довольно размытые, поэтому неизвестно, сколько ещё на просторах Всемирной паутины останется каша из HTML 4 и XHTML 1, которая всё-таки неплохо работает.