Полезные нововведения в HTML5 онлайн урок.


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

Во-первых, появились теги <audio> и <video>, про которые мы рассказали в предыдущем уроке.

Во-вторых, нельзя не упомянуть о таких новых тегах как: <header>, <main>, <nav>, <section>, <aside> и <footer>. Эти теги были добавлены специально для того, чтобы облегчить читабельность кода веб-страницы и убрать из нее лишний код. Мотивацией для создания именно таких тегов было то, что разные макеты для веб-страниц в основном носят схожую структуру, и было бы удобно иметь специальные теги для описания этой структуры. Например, header - для шапки сайта, nav - для меню, footer для так называемого "подвала" и т.п.

Сравним макеты с использованием HTML 5 и без:



Кроме того, нельзя не упомянуть ранее описанный дескриптор <iframe>.
Также, HTML5 подарил немало новых типов элементов формы input (поля для чисел, ползунки, время, дата, телефон) и их атрибутов (диапазон данных, регулярные выражения для задания шаблона данных). Но, стоит отметить, что далеко не все из них поддерживаются браузерами.

Внимания заслуживает также и графическая сторона HTML5.

Элемент canvas предназначен для рисования «на ходу» средствами JavaScript. Этот элемент является контейнером для графики и для того чтобы собственно рисовать, нужно написать конкретный скрипт. Этот элемент поддерживается большинством современных браузеров. IE 8 и ниже не поддерживаются этот элемент. Сам элемент представляет собой прямоугольный участок без стилевых настроек. Общий вид кода следующий:



При этом надо обязательно указывать идентификатор "myCanvas" и размеры для дальнейшего использования в скриптах. Добавим, что к этому элементу можно стандартным образом применять стилевые свойства.