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

1. Новый Doctype и Charset.

Одно из достоинств HTML5 – это его простота.

Да, вот и все. Буквально два слова. Это простота объясняется, возможно, тем что HTML5 существует сам по себе, а не остается частью SGML.

Charset так же очень просто, используется utf-8, и задается так же, буквально одним тегом:

2. Новая структура

HTML5 понимает, что веб страницы имеет структуру, так же как, например, книга. Обычно это навигация, сам контент, боковое меню (сайдбар) и заглавную часть. И в HTML5 предусмотрены теги для всех этих элементов.

• – определяет разделы страницы
• – определяет заголовок страницы
• – определяет статью или основной контент на странице

• – определяет изображение, аннотацию статьи

3. Новые встроенные элементы.

Эти новые элементы определяют некоторые базовые концепции и обозначают элементы страницы:

• – для обозначения содержимого
• – для обозначения времени или даты
• – для обозначения некоторых измерений, например дискового пространства
• – для обозначения ваших успехов и продвижения

4. Новая поддержка динамических страниц

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

• Контекстное меню – HTML 5 будет поддерживать создание и использование контекстного меню на веб-страницах и приложениях
• асинхронный атрибут – этот тег указует браузеру, что сценарий должен быть загружен асинхронно, так что он не замедлит нагрузки и отображения остальной части страницы.
• – содержит подробную информацию об элементе.
• – создает таблицу, которая создается из базы данных или другого источника динамической страницы
• – старые теги вернулись, позволяя создавать системы меню на ваших веб-страницах
• – определяет действия, которые должны произойти, когда динамический элемент активируется

5. Новые типы форм

HTML5 поддерживает все старые типы форм, но так же добавлены и новые:

• datetime
• datetime-local
• month
• number
• range
• email

6. Новые элементы

Появились некоторые новые элементы в HTML5:

• – элемент, который позволяет вам использовать JavaScript на веб-страницах. Это может позволить вам добавить изображения или графики в подсказки или просто создать динамическую графику на странице “на ходу”.

7.Удаленные элементы

Существуют так же элементы HTML4, которые больше не могут использоваться в HTML5. Большинство из них давно устарели, по-этому такие действия не удивительны.

• Перевод

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

Чтобы дать разработчикам более гибкий, совместимый продукт, а также позволяющий делать проекты более интерактивными и интересными, HTML 5 внедряет и расширяет спектр функций, включая формы управления, API, мультимедиа, структуру и семантику.

Работа над HTML 5 была начата в 2004 году. В настоящее время разработки осуществляются в рамках совместных усилий W3C HTML WG и WHATWG . Многие известные компании принимают участие в разработках, в том числе: Apple, Mozilla, Opera, а Microsoft, и ряд других организаций и частных лиц с различными интересами и опытом.

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

Структура

HTML 5 вводит целый ряд новых элементов, которые делают структуру страниц намного проще. Большинство HTML4 страниц содержат ряд общих структур, например, колонтитулы (шапка и футер страницы) и столбцы, и сегодня это становится уже традицией - выделять их, используя элементы div, присваивая ему класс или id.


На иллюстрации типичный 2х колоночный макет с использованием div элементов, с присвоением им класса или id. Структура сожержит - «шапку» страницы, подвал, навигационное меню и контент, разбитый на 2 колонки -

Использование div элементов преимущественно, потому что в текущей версии HTML 4 не хватает семантики для описания этих частей более конкретно. HTML 5 данную проблему решает за счет введения новых элементов, каждый из который имеет свое отдельное название.

Код документа выглядит так:

...
...
...

...
...

Есть несколько преимуществ использования этих элементов. При использовании их в сочетании с заголовками элементов (h1 - h6), это дает возможность внедрить в каджый уровень свой подраздел с заголовком, в отличие от возможных 6 уровней в предыдущей версиии HTML. Спецификация включает в себя детальный алгоритм для генерации границ . Эти элементы могут быть использованы как авторские и браузерные инструменты для генерации оглавления и помощи пользователям в навигации по документу.

Например, следующая структура разделена на уровни с вложенными элементами h1:

Level 1

Level 2

Level 3

Заметим, что для наибольшей совместимости с разными браузерами, можно использовать различные уровни заголовков, такие как h2, h3 и т.д.

Определив назначение разделов на странице, используя конкретные элементы разделов, такая технология может помочь пользователю легче перемещаться по странице. Например, пользователь может легко перейти в раздел меню или быстро переходить от одной статьи к следующей без необходимости для разработчика делать такую ссылку-переход. Разработчики также могут торжествовать, потому что заменив элементы div на соотвествующие элеметы, исходный код будет проще и «чище».

Элемент «header» представлет собой заголовок страницы. Этот раздел может содержать не только заголовок как таковой, но также и любые подзаголовки, которые помогут пользователю больше понять содержание страницы.

A Preview of HTML 5

By Lachlan Hunt

Example Blog

Insert tag line here.

Элемент «footer» представляет собой «подвал» страницы. В этой части страницы обычно размещают ссылку на права автора, счетчики, и т.д.

Элемент «nav» - определяет раздел навигации по сайту:

Элемент «aside» определяет секцию, косвенно связанную с содержанием страницы, чаще всего используемую как приложение.

Введение

HTML 4 с нами уже примерно 10 лет. За это время не было серьезных шагов по его усовершенствованию. Конечно, появился XHTML, однако, он просто ужесточает правила и заставляет писать лучший и более качественный код. При этом, вы полностью заботитесь о соответствии стандарту. HTML 5 же призван сделать большее. Он добавляет серию очень важных нововведений.

Работа над HTML5 началась еще в далеком 2004-м, но только сейчас (2009) он начинает вызывать серьезный интерес. Увеличивается поддержка браузеров, а элемент, который мне больше всего нравится (CANVAS), поддерживается 4-мя из 5-ти наиболее распостраненных браузеров. Вместе с тем не совсем реально, хотя и возможно, использовать HTML 5, так как новый стандарт не поддерживается в MSIE.

Итак, что же нового в HTML 5?

- это поле для рисования двухмерной графики, управлямый с помощью JavaScript. Вы можете использовать его для построения графиков и других динамических изображений.

Тег

Тег

Контекстные меню

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

Новые структурные элементы

Так как HTML 4 слабо структурирован, в 5-ю версию спецификации были добавлены новые элементы, призванные исправить этот недостаток:

• - секция, либо параграф.
• - верхний колонтитул страницы (не путать с )
• - в этот тег может быть включена, например, статья блога.

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

Новые inline-элементы

Стандарт HTML5 вводит новые элементы, которые позволяют специальным образом выделять фрагменты текста, содержащие время и числа:

• - помечает фрагмент текста. Можно, например, отметить найденные термы в списке результатов поиска.
• - можете использовать этот тег для вывода времени или даты в текстовом блоке.
• - для представления чисел в определенном диапазоне. Он может иметь различные атрибуты: value, min, max, low, high и optimum.
• Может быть использован для отображения индикатора состояния процесса. Имеет пару атрибутов: value и max.

Новые типы полей ввода

HTML5 добавляет ряд новых типов для полей ввода данных:

• datetime
• datetime-local
• month
• number
• range
• email

Некоторые из них широко применяются в пользовательских интерфейсах desktop-приложений. И, вероятнее всего, они будут уже хорошо знакомы всем вашим пользователям.

Устаревшие (deprecated) элементы

Следующие элементы HTML считаются устаревшими:

• acronym
• applet
• basefont
• center
• frame
• frameset
• isindex
• noframes
• noscript
• strike

Синтаксис для задания кодировки

Синтаксис для задания кодировки документа в HTML5 теперь выглядит очень просто:

Интерактивные нововведения

Несколько нововведений, которые сделают создание сайтов и web-приложений проще и приятнее:

• - дополнительная информация о чем либо. Например, данный тег может быть использован в браузерах для реализации подсказки. Тег может иметь атрибут open, указывающий будет ли содержимое тега изначально показано пользователю или нет.
• - В отличие от традиционных таблиц (которые задуманы как статические), этот тег может быть использован для представления интерактивного набора данных. Например, для таблицы с выбором строк или колонок, inline-редактированием данных, сортировкой и т.п.
• - ранее нерекомендуемый, тег вернулся в стандарт HTML5 в новом обличии. Теперь он может содержать, например, элементы , которые вызывают соответствующие команды. Этот элемент можно использовать для представления панели инструментов или контекстного меню (см. выше). Тег может иметь атрибуты label и icon. Они могут быть добавлены для создания многоуровнего меню.

Новое определение типа документа (DTD)

В HTML5 стало гораздо проще объявлять DTD: Объявление DTD стало более симпатичным и, я полагаю, проще запоминающимся. Скорее всего, это является результатом того, что HTML больше не связан с SGML.

Необязательный href в ссылках

Атрибут href теперь необязательный, поскольку ссылки могут использоваться в сочетании со сценариями. Вероятно, это будет полезно в web-приложениях.

Атрибут async

Атрибут дает браузеру подсказку, что блок сценария может выполняться асинхронно, вместо того, чтобы ждать, пока страница не загрузилась полностью.

Заключение

Естественно, не все браузеры будут поддерживать весь стандарт целиком (думаю, читатель сейчас вспомнил о "любимом" MSIE). Но поддержка появится со временем. И новые элементы HTML 5 были разработаны с учетом текущей ситуации. С другой стороны, большинство браузеров уже частично поддерживают спецификацию. Так, например, тег поддерживается в Firefox, Opera, Chrome и Safari. Плюс, на сколько мне известно, Firefox 3.5 будет поддерживать теги

Так что, ждем с нетерпением.

Кому интересно, спецификацию HTML 5 можно найти по следующей ссылке -

Что же такого нового в HTML5, чего не было в HTML4?

А новое в принципе все. Спецификация HTML5 несет в себе множество изменений разного уровня и важности. Фундаментальные изменения можно разделить на несколько блоков:

• Семантика языка. В HTML5 появился ряд новых семантических тегов, позволяющих более осмысленно организовывать внутреннюю структуру веб-страниц.

Рассмотрим наиболее известные из них:

• nav - служит для создания панели навигации;
• aside - является объединяющим тэгом, более всего подходящим для выделения сайдбара. В него могут входить как блоки nav, так и другие элементы, не являющиеся навигационными (рекламные баннеры, фотография автора, кнопки социальных сетей и т.д.);
• section - также объединяющий тэг. Причем он может выступать в разных ролях: либо разделять страницу на несколько тематических областей, либо разделять на отдельные секции непосредственно статью на странице;
• article - служит для разбивки страницы на отдельные статьи. Оба тэга section и article обладают рядом интересных особенностей. Например, вы можете теперь смело использовать заголовок первого уровня H1 на одной странице несколько раз, что ранее было недопустимо;
• hgroup - тэг призван группировать заголовки страницы в одну логическую единицу;
• video - служит для простой вставки видео на страницы сайта;
• audio - также предназначен для простой вставки медиа-контента на страницы сайта;
• canvas - создает область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства.

Про остальные тэги можно узнать из htmlbook.ru .

• Мультимедиа . HTML5 теперь из коробки поддерживает мультимедийный контент (аудио и видео проигрыватель) в HMTL-разметке - с соответствующим API для управления воспроизведением и кодеками.
• Графика . Работать с графикой стало заметно проще, благодаря тэгу canvas и специальному JavaScript API для работы с ним. Также в HTML5 официально включен тэг svg, позволяющий внедрять векторную графику, описываемую соответствующим веб-стандартом (SVG, Scalable Vector Graphics).
• Веб-формы. Новые элементы веб-формы: как типы, так и атрибуты, позволяющие расширить возможности традиционных форм встроенными средствами, без использования дополнительных библиотек для валидации вводимых данных, подсказок в формах.
• JavaScript API. API для работы с графикой и мульмедиа, новые расширенные возможности по перемещению объектов и работе с историей переходов (History API), а также ряд мелочей, вроде возможности сделать контент редактируемым прямо в текущем месте с помощью Content Editable атрибутов.
• Многое другое. Усовершенствованные сетевые коммуникации. Существенно улучшенное хранение данных. Средства Web Worker для исполнения фоновых процессов. Интерфейс WebSocket для установки постоянного соединения между резидентным приложением и сервером. Повышенная скорость сохранения и загрузки страниц. Поддержка CSS3 при управлении пользовательским интерфейсом, что обеспечивает контентную ориентированность HTML5.

Итак, очевидно, что формат HTML5 демонстрирует принципиально новый подход к созданию эффектной и запоминающейся графики, интерактивных элементов и прочих составляющих качественного веб-дизайна и интерфейса. Это дает несомненное преимущество – возможность отказа от flash-элементов, которые создают определенные трудности в загрузке страниц. Вместе с этим, определенное время на загрузку таких страниц все же требуется. Кроме того, для корректной работы с HTML5 необходим компьютер, с соответствующими системными мощностями, да и разработчики браузеров ленятся добавлять полную поддержку всех возможностей HTML5.

HTML 5 - это новая версия самого популярного языка разметки.

Уже более 10-ти лет язык гипертекстовой разметки HTML практически не менялся, что было очень странно, учитывая огромную скорость развития Web-технологий, и вот, наконец-то, изменение случилось и появился HTML 5 .

В HTML 5 добавлены несколько новых элементов и атрибутов, а также убраны несколько старых (например, font и center ).

Добавлены следующие элементы:

1) header .

2) footer .

4) section .

5) article .

6) aside .

7) figure .

8) dialog .

9) m (mark) .

10) time .

11) meter .

12) progress .

13) video .

14) audio .

15) details .

16) datagrid .

17) menu .

18) command .

В остальном осталось всё без изменений. То есть никаких проблем с не возникнет, при условии, что Вы знакомы со стандартным . Собственно, всё осталось как прежде, только добавились новые возможности.

Благодаря нововедениям HTML 5 можно существенно облегчить труд Web-мастеров по , упростив ту же самую разметку.

Наверняка, Вы задаётесь вопросом: "А будет ли работать HTML 5 со старыми браузерами?". Ответ таков: "Конечно, да, но новые элементы, разумеется, отображаться не будут". Или другими словами, новые страницы увидят все, но обладатели современных версий браузеров увидят немного больше и по-другому.

Я уверен, что в ближайшие время HTML 5 смогут увидеть такой же процент пользователей, как сейчас видят HTML 4 , которому уже более 10-ти лет.

А об использовании новых возможностей HTML 5 мы поговорим с Вами в следующих статьях.