Новое в HTML5 - Интерактивные теги

Новое в HTML5

Интерактивные теги

В HTML5 есть несколько интерактивных тэгов, которые позволяют изменить некоторое содержимое без перезагрузки всей HTML страницы:

<menu>
<command>
<details>
<canvas>

Тег <MENU> являются довольно интересным, поскольку он уже существовал в более ранних версиях HTML, и теперь его вернули. Тег <menu> в HTML5 выполняет роль контейнера для тега <command> который в свою очередь создает команду в виде переключателя, флажка или обычной кнопки.

...
<menu>
<command onclick="alert('first action')" label=" первое действие"/>
<command onclick="alert('second action')" label=" второе действие"/>
</menu>
...

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

Тег <DETAILS> используется, чтобы показать некоторую дополнительную информацию, например, поле справки.

...
<p> Некоторый контент <details>Информация справки</details> ... </p>
...

Тег <CANVAS> используется для автоматического рендеринга различных 2D форм и растровых изображений. Он определяет некоторые области HTML документа, в которых можно сделать различные объекты, выводить изображения и трансформировать их при помощи языка JavaScript.

<script>
var example = document.getElementById('sample');
var context = example.getContext('2d');
ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100);
</script>

...
<canvas id="sample" width="300" height="100"> Ваш браузер не поддерживает HTML5. </canvas>
...

Ваш браузер не поддерживает HTML5.

Атрибут ID используется для идентификации тега <canvas> как объекта DOM (Document Object Model). Далее указываются атрибуты ширины и высоты. Текст, заключенный между тегами <canvas>, будет показан в браузерах, которые не поддерживают HTML5. Он предназначен для использования в сочетании с 2D APIs для отображения динамической графики наподобие Flash.

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